hey-pharmacist-ecommerce 1.1.13 → 1.1.15

package/dist/index.mjs

@@ -1,14 +1,13 @@
 "use client";
 import React21, { createContext, forwardRef, useContext, useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import globalAxios4 from 'axios';
-import { Toaster, toast } from 'sonner';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Heart, ShoppingCart, Sparkles, ShieldCheck, TrendingUp, Star, Search, ShoppingBag, ArrowUpDown, ChevronDown, LayoutGrid, LayoutList, SlidersHorizontal, X, Clock, Package, ArrowLeft, Check, Minus, Plus, Trash2, ArrowRight, CheckCircle2, Truck, Edit3, MapPin, CreditCard, Lock, PackageCheck, HeartPulse, EyeOff, Eye, Shield, UserPlus, Mail, Phone, LogOut, Filter, ChevronLeft, ChevronRight, ArrowUpRight, Warehouse, BellRing, Crown, User, Grid, List, Menu, Facebook, Twitter, Instagram, ChevronUp, Shirt, Pill, Box, Globe, Home } from 'lucide-react';
-import Image3 from 'next/image';
+import { Eye, Star, ShoppingCart, Sparkles, ShieldCheck, TrendingUp, Search, ArrowUpDown, ChevronDown, LayoutGrid, LayoutList, X, Clock, Package, ChevronLeft, Check, Heart, Truck, RotateCcw, Shield, Trash2, Minus, Plus, ShoppingBag, ArrowRight, CheckCircle2, Edit3, MapPin, CreditCard, Lock, EyeOff, UserPlus, LogOut, HeartPulse, Mail, Phone, User, Filter, ChevronRight, ArrowUpRight, PackageCheck, Warehouse, BellRing, Crown, Grid, List, ArrowLeft, Menu, Facebook, Twitter, Instagram, Shirt, Pill, Box, ExternalLink, Globe, Home, Info, AlertCircle, XCircle } from 'lucide-react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useRouter, useSearchParams } from 'next/navigation';
+import Image4 from 'next/image';
 import dynamic from 'next/dynamic';
-import Link8 from 'next/link';
+import Link7 from 'next/link';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -6757,6 +6756,144 @@ var PaymentPaymentStatusEnum = /* @__PURE__ */ ((PaymentPaymentStatusEnum2) => {
 
 // src/lib/api-adapter/index.ts
 init_config();
+var notificationConfig = {
+  success: {
+    icon: CheckCircle2,
+    gradient: "from-emerald-500 to-green-600",
+    iconColor: "text-emerald-600",
+    bgColor: "bg-emerald-50",
+    borderColor: "border-emerald-200"
+  },
+  error: {
+    icon: XCircle,
+    gradient: "from-red-500 to-rose-600",
+    iconColor: "text-red-600",
+    bgColor: "bg-red-50",
+    borderColor: "border-red-200"
+  },
+  warning: {
+    icon: AlertCircle,
+    gradient: "from-orange-500 to-amber-600",
+    iconColor: "text-orange-600",
+    bgColor: "bg-orange-50",
+    borderColor: "border-orange-200"
+  },
+  info: {
+    icon: Info,
+    gradient: "from-blue-500 to-indigo-600",
+    iconColor: "text-blue-600",
+    bgColor: "bg-blue-50",
+    borderColor: "border-blue-200"
+  }
+};
+function Notification({ notification, onDismiss }) {
+  const [progress, setProgress] = useState(100);
+  const config = notificationConfig[notification.type];
+  const Icon = config.icon;
+  const duration = notification.duration || 4e3;
+  useEffect(() => {
+    const startTime = Date.now();
+    const timer = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const remaining = Math.max(0, 100 - elapsed / duration * 100);
+      setProgress(remaining);
+      if (remaining === 0) {
+        clearInterval(timer);
+        onDismiss(notification.id);
+      }
+    }, 16);
+    return () => clearInterval(timer);
+  }, [notification.id, duration, onDismiss]);
+  return /* @__PURE__ */ React21.createElement(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -20, scale: 0.95 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, x: 100, scale: 0.95 },
+      transition: { type: "spring", stiffness: 500, damping: 30 },
+      className: `relative bg-white rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`
+    },
+    /* @__PURE__ */ React21.createElement("div", { className: `h-1 bg-gradient-to-r ${config.gradient}` }),
+    /* @__PURE__ */ React21.createElement("div", { className: "p-4 flex items-start gap-3" }, /* @__PURE__ */ React21.createElement(
+      motion.div,
+      {
+        initial: { scale: 0, rotate: -180 },
+        animate: { scale: 1, rotate: 0 },
+        transition: { delay: 0.1, type: "spring", stiffness: 500 },
+        className: `size-10 rounded-full ${config.bgColor} flex items-center justify-center shrink-0`
+      },
+      /* @__PURE__ */ React21.createElement(Icon, { className: `size-5 ${config.iconColor}` })
+    ), /* @__PURE__ */ React21.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] mb-1" }, notification.message), notification.description && /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[12px] text-[#676c80] leading-relaxed" }, notification.description)), /* @__PURE__ */ React21.createElement(
+      "button",
+      {
+        onClick: () => onDismiss(notification.id),
+        className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors shrink-0",
+        "aria-label": "Dismiss notification"
+      },
+      /* @__PURE__ */ React21.createElement(X, { className: "size-4 text-[#676c80]" })
+    )),
+    /* @__PURE__ */ React21.createElement("div", { className: "h-1 bg-gray-100" }, /* @__PURE__ */ React21.createElement(
+      motion.div,
+      {
+        className: `h-full bg-gradient-to-r ${config.gradient}`,
+        style: { width: `${progress}%` },
+        transition: { duration: 0.016, ease: "linear" }
+      }
+    ))
+  );
+}
+function NotificationContainer({ notifications, onDismiss }) {
+  return /* @__PURE__ */ React21.createElement("div", { className: "fixed top-4 right-4 z-[9999] flex flex-col gap-3 pointer-events-none" }, /* @__PURE__ */ React21.createElement(AnimatePresence, { mode: "popLayout" }, notifications.map((notification) => /* @__PURE__ */ React21.createElement("div", { key: notification.id, className: "pointer-events-auto" }, /* @__PURE__ */ React21.createElement(Notification, { notification, onDismiss })))));
+}
+
+// src/providers/NotificationProvider.tsx
+var NotificationContext = createContext(void 0);
+function useNotification() {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotification must be used within NotificationProvider");
+  }
+  return context;
+}
+function NotificationProvider({ children }) {
+  const [notifications, setNotifications] = useState([]);
+  const addNotification = useCallback(
+    (type, message, description, duration) => {
+      const id = Math.random().toString(36).substring(2, 9);
+      const notification = {
+        id,
+        type,
+        message,
+        description,
+        duration: duration || 4e3
+      };
+      setNotifications((prev) => [...prev, notification]);
+    },
+    []
+  );
+  const dismissNotification = useCallback((id) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+  const value = {
+    success: useCallback(
+      (message, description, duration) => addNotification("success", message, description, duration),
+      [addNotification]
+    ),
+    error: useCallback(
+      (message, description, duration) => addNotification("error", message, description, duration),
+      [addNotification]
+    ),
+    warning: useCallback(
+      (message, description, duration) => addNotification("warning", message, description, duration),
+      [addNotification]
+    ),
+    info: useCallback(
+      (message, description, duration) => addNotification("info", message, description, duration),
+      [addNotification]
+    )
+  };
+  return /* @__PURE__ */ React21.createElement(NotificationContext.Provider, { value }, children, /* @__PURE__ */ React21.createElement(NotificationContainer, { notifications, onDismiss: dismissNotification }));
+}
 
 // src/providers/CartProvider.tsx
 var CartContext = createContext(void 0);
@@ -6771,6 +6908,7 @@ function CartProvider({ children }) {
   const [cart, setCart] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const { isAuthenticated } = useAuth();
+  const notification = useNotification();
   const refreshCart = useCallback(async () => {
     if (!isAuthenticated) {
       setCart(null);
@@ -6808,9 +6946,15 @@ function CartProvider({ children }) {
       }
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
-      toast.success("Added to cart!");
+      notification.success(
+        "Added to cart",
+        "The item was added to your cart."
+      );
     } catch (error) {
-      toast.error(error.response?.data?.message || "Failed to add to cart");
+      notification.error(
+        "Could not add to cart",
+        error.response?.data?.message || "Something went wrong while adding this item to your cart."
+      );
       throw error;
     } finally {
       setIsLoading(false);
@@ -6832,7 +6976,10 @@ function CartProvider({ children }) {
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error) {
-      toast.error(error.response?.data?.message || "Failed to update cart");
+      notification.error(
+        "Could not update cart",
+        error.response?.data?.message || "There was a problem updating the item quantity. Please try again."
+      );
       throw error;
     } finally {
       setIsLoading(false);
@@ -6846,7 +6993,10 @@ function CartProvider({ children }) {
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error) {
-      toast.error(error.response?.data?.message || "Failed to remove from cart");
+      notification.error(
+        "Could not remove item",
+        error.response?.data?.message || "There was a problem removing this item from your cart."
+      );
       throw error;
     } finally {
       setIsLoading(false);
@@ -6858,7 +7008,10 @@ function CartProvider({ children }) {
       const response = await new CartApi(getApiConfiguration()).clearCart();
       setCart(null);
     } catch (error) {
-      toast.error(error.response?.data?.message || "Failed to clear cart");
+      notification.error(
+        "Could not clear cart",
+        error.response?.data?.message || "We could not clear your cart. Please try again."
+      );
       throw error;
     } finally {
       setIsLoading(false);
@@ -6924,6 +7077,7 @@ function WishlistProvider({ children }) {
     products: []
   });
   const { isAuthenticated } = useAuth() || {};
+  const notification = useNotification();
   const wishlistApi = useMemo(() => new WishlistApi(AXIOS_CONFIG), []);
   const fetchWishlist = useCallback(async () => {
     if (!isAuthenticated) {
@@ -6959,20 +7113,32 @@ function WishlistProvider({ children }) {
   }, [fetchWishlist]);
   const addToWishlist = async (product) => {
     if (!isAuthenticated) {
-      toast.error("Please sign in to add items to your wishlist");
+      notification.error(
+        "Sign-in required",
+        "Please sign in to add items to your wishlist."
+      );
       return;
     }
     try {
       if (isInWishlist(product?._id || "")) {
-        toast.info("This item is already in your wishlist");
+        notification.info(
+          "Already saved",
+          "This item is already in your wishlist."
+        );
         return;
       }
       await wishlistApi.addToWishlist(product?._id || "");
       await fetchWishlist();
-      toast.success("Added to wishlist");
+      notification.success(
+        "Added to wishlist",
+        `${product?.name || "Item"} was added to your wishlist.`
+      );
     } catch (error) {
       console.error("Error adding to wishlist:", error);
-      toast.error("Failed to add to wishlist");
+      notification.error(
+        "Could not add to wishlist",
+        "Something went wrong while adding this item. Please try again."
+      );
       throw error;
     }
   };
@@ -6986,10 +7152,16 @@ function WishlistProvider({ children }) {
           products: newProducts
         };
       });
-      toast.success("Removed from wishlist");
+      notification.success(
+        "Removed from wishlist",
+        "The item has been removed from your wishlist."
+      );
     } catch (error) {
       console.error("Error removing from wishlist:", error);
-      toast.error("Failed to remove from wishlist");
+      notification.error(
+        "Could not remove item",
+        "Something went wrong while removing this item. Please try again."
+      );
       throw error;
     }
   };
@@ -7000,10 +7172,16 @@ function WishlistProvider({ children }) {
         ...prev,
         products: []
       }));
-      toast.success("Wishlist cleared");
+      notification.success(
+        "Wishlist cleared",
+        "All items have been removed from your wishlist."
+      );
     } catch (error) {
       console.error("Error clearing wishlist:", error);
-      toast.error("Failed to clear wishlist");
+      notification.error(
+        "Could not clear wishlist",
+        "We could not clear your wishlist. Please try again."
+      );
       throw error;
     }
   };
@@ -7063,7 +7241,7 @@ function EcommerceProvider({ config, children, withToaster = true, basePath = ""
   const [client] = React21.useState(
     new QueryClient({ defaultOptions: { queries: { staleTime: 5e3 } } })
   );
-  return /* @__PURE__ */ React21.createElement(QueryClientProvider, { client }, /* @__PURE__ */ React21.createElement(ThemeProvider, { config }, /* @__PURE__ */ React21.createElement(BasePathProvider, { basePath }, /* @__PURE__ */ React21.createElement(AuthProvider, null, /* @__PURE__ */ React21.createElement(CartProvider, null, /* @__PURE__ */ React21.createElement(WishlistProvider, null, children, withToaster && /* @__PURE__ */ React21.createElement(Toaster, { position: "top-right", richColors: true })))))));
+  return /* @__PURE__ */ React21.createElement(QueryClientProvider, { client }, /* @__PURE__ */ React21.createElement(ThemeProvider, { config }, /* @__PURE__ */ React21.createElement(BasePathProvider, { basePath }, /* @__PURE__ */ React21.createElement(AuthProvider, null, /* @__PURE__ */ React21.createElement(NotificationProvider, null, /* @__PURE__ */ React21.createElement(CartProvider, null, /* @__PURE__ */ React21.createElement(WishlistProvider, null, children)))))));
 }
 
 // src/lib/utils/format.ts
@@ -7097,6 +7275,158 @@ function truncate(text, maxLength) {
 function getInitials(firstName, lastName) {
   return `${firstName?.charAt(0)}${lastName?.charAt(0)}`.toUpperCase();
 }
+function QuickViewModal({ product, onClose, onNavigateToProduct }) {
+  const [selectedVariantIndex, setSelectedVariantIndex] = useState(0);
+  const [selectedSizeIndex, setSelectedSizeIndex] = useState(0);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [addedToCart, setAddedToCart] = useState(false);
+  const [quantity, setQuantity] = useState(1);
+  const { addToCart } = useCart();
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+  const notification = useNotification();
+  const handleQuantityChange = (newQuantity) => {
+    if (newQuantity >= 1 && newQuantity <= (selectedVariant.inventoryCount || 10)) {
+      setQuantity(newQuantity);
+    }
+  };
+  const selectedVariant = product.productVariants[selectedVariantIndex];
+  selectedVariant.productMedia[selectedSizeIndex];
+  const displayPrice = product.finalPrice;
+  const handleAddToCart = async () => {
+    if (!product || !selectedVariant) return;
+    setIsAddingToCart(true);
+    try {
+      console.log(selectedVariant);
+      await addToCart(
+        product.id,
+        quantity,
+        selectedVariant._id
+      );
+      notification.success(
+        "Added to cart",
+        `${quantity} \xD7 ${product.name}${selectedVariant.name ? ` (${selectedVariant.name})` : ""} added to your cart.`
+      );
+    } catch (error) {
+      console.error("Failed to add to cart", error);
+      notification.error(
+        "Could not add to cart",
+        "Something went wrong while adding this item. Please try again."
+      );
+    } finally {
+      setIsAddingToCart(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm",
+      onClick: onClose
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "bg-white rounded-[32px] max-w-5xl w-full max-h-[90vh] overflow-y-auto",
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "p-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between mb-6" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-primary uppercase tracking-wide font-medium mb-2" }, product.brand, " \u2022 ", product.parentCategories[0].name), /* @__PURE__ */ React.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1px]" }, product.name), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 mt-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0.5" }, [...Array(5)].map((_, i) => /* @__PURE__ */ React.createElement(
+        Star,
+        {
+          key: i,
+          className: `size-4 ${i < Math.floor(product.rating ? product.rating : 0) ? "text-accent fill-accent" : "text-gray-300"}`
+        }
+      ))), /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] text-[13px] text-muted" }, product.rating, " (", product.reviews ? product.reviews.length : 0, " reviews)"))), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: onClose,
+          className: "p-2 hover:bg-gray-100 rounded-full transition-colors"
+        },
+        /* @__PURE__ */ React.createElement(X, { className: "size-6 text-muted" })
+      )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "relative aspect-[3/4] rounded-[24px] overflow-hidden bg-gray-50" }, /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: selectedVariant.productMedia[selectedImageIndex]?.file || selectedVariant.productMedia[0]?.file,
+          alt: product.name,
+          className: "w-full h-full object-cover"
+        }
+      ), /* @__PURE__ */ React.createElement("div", { className: "absolute top-4 left-4 flex flex-col gap-2" }, product.finalPrice && /* @__PURE__ */ React.createElement("div", { className: "bg-accent text-white rounded-full px-3 py-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[11px] uppercase" }, "-", product.discountAmount, "%")))), selectedVariant.productMedia.length > 1 && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-4 gap-3" }, selectedVariant.productMedia.map((image, index) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: index,
+          className: `aspect-square rounded-xl overflow-hidden cursor-pointer transition-opacity ${selectedImageIndex === index ? "ring-2 ring-primary" : "bg-gray-50 hover:opacity-75"}`,
+          onClick: () => setSelectedImageIndex(index)
+        },
+        /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src: image.file,
+            alt: `${product.name} ${index + 1}`,
+            className: "w-full h-full object-cover"
+          }
+        )
+      )))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 mb-4" }, /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[32px] text-accent" }, "$", displayPrice.toFixed(2)), product.isDiscounted && /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] text-[20px] text-muted line-through" }, "$", product.finalPrice.toFixed(2))), /* @__PURE__ */ React.createElement("div", { className: "mb-6" }, selectedVariant.inventoryCount === 0 ? /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] text-[12px] text-red-500 font-medium" }, "Out of Stock") : selectedVariant.inventoryCount <= 10 ? /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] text-[12px] text-orange-500 font-medium flex items-center gap-1" }, /* @__PURE__ */ React.createElement(Package, { className: "size-3" }), "Only ", selectedVariant.inventoryCount, " left in stock") : /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] text-[12px] text-green-600 font-medium flex items-center gap-1" }, /* @__PURE__ */ React.createElement(Package, { className: "size-3" }), "In Stock")), /* @__PURE__ */ React.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.7] mb-6" }, /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: product.description } })), /* @__PURE__ */ React.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3" }, "Selected Variant: ", /* @__PURE__ */ React.createElement("span", { className: "font-normal text-muted" }, product.productVariants[selectedVariantIndex].name)), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-3" }, product.productVariants.map((variant, index) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: variant.id,
+          onClick: () => {
+            setSelectedVariantIndex(index);
+            setSelectedSizeIndex(0);
+            setSelectedImageIndex(0);
+          },
+          className: `size-10 rounded-full border-2 transition-all ${selectedVariantIndex === index ? "border-primary scale-110" : "border-gray-200 hover:border-primary/50"}`,
+          style: { backgroundColor: variant.colorHex },
+          title: variant.color
+        },
+        /* @__PURE__ */ React.createElement(
+          Image4,
+          {
+            src: variant.productMedia?.[0]?.file || "",
+            alt: variant.color || `Variant ${index + 1}`,
+            className: "object-cover",
+            height: 32,
+            width: 32
+          }
+        )
+      )))), /* @__PURE__ */ React.createElement("div", { className: "mb-6 p-4 bg-gray-50 rounded-xl" }, /* @__PURE__ */ React.createElement("ul", { className: "space-y-2" }, product.tags.slice(0, 3).map((feature, index) => /* @__PURE__ */ React.createElement("li", { key: index, className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement(Check, { className: "size-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ React.createElement("span", { className: "font-['Poppins',sans-serif] text-[12px] text-muted" }, feature))))), /* @__PURE__ */ React.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3" }, "Quantity"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: () => handleQuantityChange(quantity - 1),
+          disabled: quantity <= 1,
+          className: "p-2 rounded-full border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        },
+        /* @__PURE__ */ React.createElement(Minus, { className: "size-4 text-secondary" })
+      ), /* @__PURE__ */ React.createElement("span", { className: "w-8 text-center font-medium" }, quantity), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: () => handleQuantityChange(quantity + 1),
+          disabled: quantity >= (selectedVariant.inventoryCount || 10),
+          className: "p-2 rounded-full border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        },
+        /* @__PURE__ */ React.createElement(Plus, { className: "size-4 text-secondary" })
+      ))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3 mt-auto" }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: handleAddToCart,
+          disabled: addedToCart || selectedVariant.inventoryCount === 0,
+          className: `w-full font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 ${addedToCart ? "bg-green-500 text-white" : "bg-accent text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"}`
+        },
+        isAddingToCart ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("svg", { className: "animate-spin h-5 w-5", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })), "Loading...") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ShoppingCart, { className: "h-4 w-4" }), !selectedVariant ? "Select a variant" : selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ ? "Out of Stock" : "Add to Cart")
+      ), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: () => {
+            onClose();
+            onNavigateToProduct?.(product.id);
+          },
+          className: "w-full font-['Poppins',sans-serif] font-medium text-[13px] px-6 py-3 rounded-full bg-white text-secondary border-2 border-primary hover:bg-gray-50 transition-all flex items-center justify-center gap-2"
+        },
+        "View Full Details",
+        /* @__PURE__ */ React.createElement(ExternalLink, { className: "size-4" })
+      )))))
+    )
+  );
+}
+
+// src/components/ProductCard.tsx
 function ProductCard({
   product,
   onClickProduct,
@@ -7105,7 +7435,7 @@ function ProductCard({
   showFavoriteButton = true,
   className
 }) {
-  const router = useRouter();
+  useRouter();
   const { buildPath } = useBasePath();
   const [isFavorite, setIsFavorite] = useState(isFavorited);
   const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
@@ -7114,6 +7444,8 @@ function ProductCard({
   const [isImageLoaded, setIsImageLoaded] = useState(false);
   const [selectedVariantImage, setSelectedVariantImage] = useState(null);
   const [selectedVariantId, setSelectedVariantId] = useState(null);
+  const [showQuickView, setShowQuickView] = useState(false);
+  const notification = useNotification();
   const handleImageLoad = useCallback(() => {
     setIsImageLoaded(true);
   }, []);
@@ -7123,24 +7455,6 @@ function ProductCard({
       onClickProduct(product);
     }
   }, [onClickProduct, product]);
-  const handleFavorite = async (e) => {
-    e.stopPropagation();
-    try {
-      if (isInWishlist(product?._id || "")) {
-        await removeFromWishlist(product?._id || "");
-        setIsFavorite(false);
-        toast.success("Removed from wishlist");
-      } else {
-        await addToWishlist(product);
-        setIsFavorite(true);
-        toast.success("Added to wishlist");
-      }
-      onFavorite?.(product);
-    } catch (error) {
-      console.error("Error updating wishlist:", error);
-      toast.error("Failed to update wishlist");
-    }
-  };
   useEffect(() => {
     setIsFavorite(isInWishlist(product?._id || "") || isFavorited);
   }, [isFavorited, isInWishlist, product?._id]);
@@ -7148,7 +7462,14 @@ function ProductCard({
     setSelectedVariantImage(null);
     setSelectedVariantId(null);
     setIsImageLoaded(false);
-  }, [product._id]);
+    if (product.productVariants && product.productVariants.length > 0) {
+      const firstVariant = product.productVariants[0];
+      if (firstVariant.productMedia && firstVariant.productMedia.length > 0) {
+        setSelectedVariantImage(firstVariant.productMedia[0].file);
+        setSelectedVariantId(firstVariant.id || firstVariant._id || null);
+      }
+    }
+  }, [product._id, product.productVariants]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -7185,10 +7506,10 @@ function ProductCard({
   useEffect(() => {
     setIsImageLoaded(false);
   }, [imageSource.src]);
-  return /* @__PURE__ */ React21.createElement(
-    motion.article,
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+    motion.div,
     {
-      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",
+      className: "bg-white rounded-[16px] overflow-hidden border-2 border-gray-100 hover:border-[#5B9BD5] hover:shadow-lg transition-all duration-300 group h-full flex flex-col",
       whileHover: { y: -4 },
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
@@ -7198,59 +7519,46 @@ function ProductCard({
       onClick: handleCardClick,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React21.createElement("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50" }, /* @__PURE__ */ React21.createElement(AnimatePresence, null, !isImageLoaded && /* @__PURE__ */ React21.createElement(
-      motion.div,
-      {
-        className: "absolute inset-0 bg-gray-200 animate-pulse",
-        initial: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.2 }
-      }
-    )), /* @__PURE__ */ React21.createElement(
-      Image3,
-      {
-        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,
-        onError: () => setIsImageLoaded(true),
-        key: imageSource.src
-      }
-    ), /* @__PURE__ */ React21.createElement("div", { className: "absolute top-3 left-3 flex flex-col gap-2 z-10" }, product.isDiscounted && /* @__PURE__ */ React21.createElement(
-      motion.span,
-      {
-        initial: { scale: 0.9, opacity: 0 },
-        animate: { scale: 1, opacity: 1 },
-        className: "inline-flex items-center justify-center px-2.5 py-1 rounded-full text-xs font-bold text-white bg-green-600 shadow-md"
-      },
-      "-",
-      product.discountAmount,
-      "%"
-    ), product.inventoryCount === 0 && /* @__PURE__ */ React21.createElement(
-      motion.span,
+    /* @__PURE__ */ React21.createElement(
+      "div",
       {
-        initial: { scale: 0.9, opacity: 0 },
-        animate: { scale: 1, opacity: 1 },
-        className: "inline-flex items-center justify-center px-2.5 py-1 rounded-full text-xs font-bold text-white bg-red-600"
+        onClick: handleCardClick,
+        className: "relative aspect-square overflow-hidden bg-gray-50 cursor-pointer flex-shrink-0"
       },
-      "Out of Stock"
-    )), showFavoriteButton && /* @__PURE__ */ React21.createElement(
-      motion.button,
+      /* @__PURE__ */ React21.createElement(
+        Image4,
+        {
+          src: imageSource.src,
+          alt: imageSource.alt,
+          className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300",
+          height: 300,
+          width: 300,
+          priority: false,
+          onLoad: handleImageLoad,
+          onError: () => setIsImageLoaded(true),
+          key: imageSource.src
+        }
+      ),
+      /* @__PURE__ */ React21.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowQuickView(true);
+          },
+          className: "absolute top-2 left-2 p-2 rounded-full bg-white/90 backdrop-blur-sm hover:bg-white shadow-md opacity-0 group-hover:opacity-100 transition-all"
+        },
+        /* @__PURE__ */ React21.createElement(Eye, { className: "size-4 text-[#2B4B7C]" })
+      ),
+      product.inventoryCount === 0 && /* @__PURE__ */ React21.createElement("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "bg-white rounded-full px-4 py-2" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[11px] text-[#2B4B7C] uppercase" }, "Out of Stock")))
+    ),
+    /* @__PURE__ */ React21.createElement("div", { className: "p-4 flex-1 flex flex-col" }, /* @__PURE__ */ React21.createElement("div", { className: "p-0 flex-1 flex flex-col" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-1 mb-2 flex-wrap" }, product.isDiscounted && /* @__PURE__ */ React21.createElement("span", { className: "bg-[#E67E50] text-white rounded-full px-2 py-0.5 flex items-center gap-1" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[8px] uppercase" }, "-", product.discountAmount, "%"))), /* @__PURE__ */ React21.createElement("div", { className: "mb-1" }, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-xs text-[#5B9BD5] uppercase tracking-wide font-medium" }, product.brand)), /* @__PURE__ */ React21.createElement("h3", { className: "text-sm font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-3" }, displayName), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-1.5 mb-2" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-0.5" }, [...Array(5)].map((_, i) => /* @__PURE__ */ React21.createElement(
+      Star,
       {
-        type: "button",
-        onClick: handleFavorite,
-        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.createElement(Heart, { className: `w-5 h-5 ${isFavorite ? "fill-red-500 text-red-500" : ""}` })
-    )),
-    /* @__PURE__ */ React21.createElement("div", { className: "absolute top-4 left-4 flex flex-col gap-2" }, product.inventoryCount === 0 && /* @__PURE__ */ React21.createElement("span", { className: "px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-800" }, "Out of Stock")),
-    /* @__PURE__ */ React21.createElement("div", { className: "p-4" }, product.parentCategories && product.parentCategories?.length > 0 && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-gray-500 uppercase tracking-wider mb-1" }, product.parentCategories?.map((category) => category?.name).join(", ") || "No categories"), /* @__PURE__ */ React21.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-primary-600 transition-colors" }, displayName)), /* @__PURE__ */ React21.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React21.createElement("span", { className: "text-2xl font-bold text-gray-900" }, formatPrice(product.finalPrice)), product.inventoryCount > 0 && /* @__PURE__ */ React21.createElement("span", { className: "text-xs text-gray-500" }, product.inventoryCount > 0 ? "In Stock" : "Out of Stock")), product.priceBeforeDiscount && product.priceBeforeDiscount > product.finalPrice && /* @__PURE__ */ React21.createElement("span", { className: "text-sm text-gray-500 line-through" }, formatPrice(product.priceBeforeDiscount))), variantImages.length > 0 && /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2 mt-3" }, variantImages.map((variant, index) => /* @__PURE__ */ React21.createElement(
+        key: i,
+        className: `size-4 ${i < Math.floor(product.rating ? product.rating : 0) ? "text-[#E67E50] fill-[#E67E50]" : "text-gray-300"}`
+      }
+    ))), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[10px] text-[#676c80]" }, "(", product.reviews?.length || 0, ")")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-1.5 mb-3" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-md text-primary-600" }, "$", product.finalPrice.toFixed(2)), product.isDiscounted && /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-sm text-[#676c80] line-through" }, "$", formatPrice(product.priceBeforeDiscount))), variantImages.length > 0 && /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-1.5 mb-3" }, variantImages.map((variant, index) => /* @__PURE__ */ React21.createElement(
       "button",
       {
         key: variant.variantId || index,
@@ -7270,7 +7578,7 @@ function ProductCard({
         "aria-label": `Select ${variant.color || "variant"} color`
       },
       /* @__PURE__ */ React21.createElement(
-        Image3,
+        Image4,
         {
           src: variant.image,
           alt: variant.color || `Variant ${index + 1}`,
@@ -7279,15 +7587,17 @@ function ProductCard({
           sizes: "32px"
         }
       )
-    )))),
-    /* @__PURE__ */ React21.createElement("div", { className: "mt-auto p-4 pt-0" }, /* @__PURE__ */ React21.createElement(
+    )))), /* @__PURE__ */ React21.createElement(
       "button",
       {
         type: "button",
         onClick: async (e) => {
           e.stopPropagation();
           if (!selectedVariantId && variantImages.length > 0) {
-            toast.error("Please select a variant");
+            notification.error(
+              "Select a variant",
+              "Please choose a variant before adding this item to your cart."
+            );
             return;
           }
           try {
@@ -7301,23 +7611,19 @@ function ProductCard({
           }
         },
         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"
+        className: "w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-[#5B9BD5] text-white hover:bg-[#4a8ac4] hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
       },
       /* @__PURE__ */ React21.createElement(ShoppingCart, { className: "h-4 w-4" }),
-      "Add to Cart"
-    ), /* @__PURE__ */ React21.createElement(
-      "button",
-      {
-        type: "button",
-        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"
-      },
-      "View More"
+      selectedVariant?.inventoryCount === 0 ? "Out of Stock" : "Add to Cart"
     ))
-  );
+  ), showQuickView && /* @__PURE__ */ React21.createElement(
+    QuickViewModal,
+    {
+      product,
+      onClose: () => setShowQuickView(false),
+      onNavigateToProduct: () => handleCardClick
+    }
+  ));
 }
 function Skeleton({ className = "" }) {
   return /* @__PURE__ */ React21.createElement("div", { className: `animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] rounded ${className}` });
@@ -7340,7 +7646,7 @@ function Button({
   children,
   ...props
 }) {
-  const baseStyles = "font-medium rounded-lg transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500";
+  const baseStyles = "font-medium rounded-full transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500";
   const variants = {
     primary: "bg-primary-600 text-white hover:bg-primary-700 shadow-lg shadow-primary-500/30 hover:shadow-xl hover:shadow-primary-500/40",
     secondary: "bg-secondary-600 text-white hover:bg-secondary-700 shadow-lg shadow-secondary-500/30 hover:shadow-xl hover:shadow-secondary-500/40",
@@ -7509,8 +7815,6 @@ function useCategories() {
   }, []);
   return { categories, isLoading, error };
 }
-
-// src/screens/ShopScreen.tsx
 function ShopScreen({ initialFilters = {}, categoryName }) {
   const router = useRouter();
   const { buildPath } = useBasePath();
@@ -7711,7 +8015,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     },
     []
   );
-  const handleSubCategoryChange = useCallback((parentCategoryId, subCategoryId) => {
+  useCallback((parentCategoryId, subCategoryId) => {
     setFilters((current) => {
       if (current.subCategory === subCategoryId) {
         const { subCategory, ...rest } = current;
@@ -8019,124 +8323,83 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     if (name.includes("care") || name.includes("personal")) return Heart;
     return Package;
   };
-  const renderFiltersPanel = () => /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-bold text-slate-900" }, "Filters"), /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("label", { className: "text-sm font-medium text-slate-600" }, "Search Products"), /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), /* @__PURE__ */ React21.createElement(
+  const renderFiltersPanel = () => /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: `lg:w-72 ${showFilters ? "block rounded-full" : "hidden lg:block"}` }, /* @__PURE__ */ React21.createElement("div", { className: "bg-white rounded-[24px] p-6 border-2 border-gray-100 sticky top-24" }, /* @__PURE__ */ React21.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-secondary" }, "Filters"), /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted mb-2 block font-medium" }, "Search Products"), /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted" }), /* @__PURE__ */ React21.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"
+      className: "w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
     }
-  ))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement(
+  ))), /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("category"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
-    },
-    /* @__PURE__ */ React21.createElement("span", null, "Category"),
-    expandedFilterSections.category ? /* @__PURE__ */ React21.createElement(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21.createElement(ChevronDown, { className: "h-4 w-4" })
-  ), expandedFilterSections.category && /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.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"}`
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21.createElement("div", { className: `flex h-6 w-6 items-center justify-center rounded ${!categoryFilter ? "bg-white/20" : "bg-slate-100"}` }, !categoryFilter ? /* @__PURE__ */ React21.createElement(Check, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ React21.createElement(ShoppingBag, { className: "h-4 w-4 text-slate-600" })),
-    /* @__PURE__ */ React21.createElement("span", null, "All Products")
-  ), sortedCategories.map((category) => {
+    /* @__PURE__ */ React21.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Category"),
+    expandedFilterSections.category ? /* @__PURE__ */ React21.createElement(ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.category ? "rotate-180" : ""}` }) : /* @__PURE__ */ React21.createElement(ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.category ? "rotate-180" : ""}` })
+  ), expandedFilterSections.category && /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, sortedCategories.map((category) => {
     const isCategoryActive = categoryFilter === category.id;
     const isExpanded = !!expandedCategories[category.id];
     const Icon = getCategoryIconForFilter(category.name ?? "");
-    return /* @__PURE__ */ React21.createElement("div", { key: category.id, className: "space-y-1" }, /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React21.createElement(
       "button",
       {
-        type: "button",
+        key: category.id,
         onClick: () => {
           if (!isExpanded) toggleCategoryExpand(category.id ?? "");
           handleCategoryChange(category.id ?? "");
         },
-        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"}`
+        className: `w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all flex items-center gap-3 ${isCategoryActive ? "bg-primary text-white shadow-lg" : "text-secondary hover:bg-gray-50 border-2 border-gray-100"}`
       },
-      /* @__PURE__ */ React21.createElement("div", { className: `flex h-6 w-6 items-center justify-center rounded ${isCategoryActive ? "bg-white/20" : "bg-slate-100"}` }, /* @__PURE__ */ React21.createElement(Icon, { className: `h-4 w-4 ${isCategoryActive ? "text-white" : "text-slate-600"}` })),
-      /* @__PURE__ */ React21.createElement("span", { className: "flex-1 text-left" }, category.name),
-      Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && /* @__PURE__ */ React21.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            toggleCategoryExpand(category.id ?? "");
-          },
-          className: "p-1"
-        },
-        /* @__PURE__ */ React21.createElement(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.createElement("div", { className: "ml-9 space-y-1" }, category.categorySubCategories.map((sub) => {
-      const isSubActive = subCategoryFilter === sub.id;
-      return /* @__PURE__ */ React21.createElement(
-        "button",
-        {
-          key: sub.id,
-          type: "button",
-          onClick: () => handleSubCategoryChange(category.id ?? "", sub.id),
-          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.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React21.createElement(Icon, { className: "size-4" }),
+      category.name
+    );
+  }))), /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("brand"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21.createElement("span", null, "Brand"),
-    expandedFilterSections.brand ? /* @__PURE__ */ React21.createElement(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21.createElement(ChevronDown, { className: "h-4 w-4" })
-  ), expandedFilterSections.brand && /* @__PURE__ */ React21.createElement("div", { className: "space-y-1.5 max-h-64 overflow-y-auto" }, availableBrands.length === 0 ? /* @__PURE__ */ React21.createElement("div", { className: "text-xs text-slate-500" }, "No brands available") : availableBrands.map((brand) => {
+    /* @__PURE__ */ React21.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Brand"),
+    /* @__PURE__ */ React21.createElement(ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.brand ? "rotate-180" : ""}` })
+  ), expandedFilterSections.brand && /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, availableBrands.length === 0 ? /* @__PURE__ */ React21.createElement("div", { className: "text-xs text-slate-500" }, "No brands available") : availableBrands.map((brand) => {
     const isSelected = brandFilter === brand;
     return /* @__PURE__ */ React21.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"}`
+        className: `w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all ${isSelected ? "bg-primary text-white shadow-lg" : "text-secondary hover:bg-gray-50 border-2 border-gray-100"}`
       },
-      /* @__PURE__ */ React21.createElement("span", { className: "truncate" }, brand),
-      isSelected && /* @__PURE__ */ React21.createElement(Check, { className: "h-3 w-3 text-primary-600 flex-shrink-0 ml-2" })
+      brand
     );
-  }))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement(
+  }))), /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("availability"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21.createElement("span", null, "Availability"),
-    expandedFilterSections.availability ? /* @__PURE__ */ React21.createElement(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21.createElement(ChevronDown, { className: "h-4 w-4" })
+    /* @__PURE__ */ React21.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Availability"),
+    /* @__PURE__ */ React21.createElement(ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.availability ? "rotate-180" : ""}` })
   ), expandedFilterSections.availability && /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.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"}`
+      className: `w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${inStockOnly ? "bg-primary text-white shadow-lg" : "text-secondary hover:bg-gray-50 border-2 border-gray-100"}`
     },
-    /* @__PURE__ */ React21.createElement("span", null, "In stock only"),
-    inStockOnly && /* @__PURE__ */ React21.createElement(Check, { className: "h-4 w-4 text-primary-600" })
-  ))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement(
+    "In Stock Only"
+  ))), /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("price"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21.createElement("span", null, "Price Range"),
-    expandedFilterSections.price ? /* @__PURE__ */ React21.createElement(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21.createElement(ChevronDown, { className: "h-4 w-4" })
-  ), expandedFilterSections.price && /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-2" }, priceRanges.map((range) => {
+    /* @__PURE__ */ React21.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Price Range"),
+    /* @__PURE__ */ React21.createElement(ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.price ? "rotate-180" : ""}` })
+  ), expandedFilterSections.price && /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-2" }, priceRanges.map((range) => {
     const isActive = selectedPriceRange === range.value;
     return /* @__PURE__ */ React21.createElement(
       "button",
@@ -8144,7 +8407,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         type: "button",
         key: range.value,
         onClick: () => handlePriceRangeSelect(range.value),
-        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"}`
+        className: `w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${isActive ? "bg-primary text-white shadow-lg" : "text-secondary hover:bg-gray-50 border-2 border-gray-100"}`
       },
       range.label
     );
@@ -8156,7 +8419,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       placeholder: "Min",
       value: customPrice.min,
       onChange: (event) => setCustomPrice((current) => ({ ...current, min: event.target.value })),
-      className: "text-sm"
+      className: "w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
     }
   ), /* @__PURE__ */ React21.createElement(
     Input,
@@ -8166,7 +8429,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       placeholder: "Max",
       value: customPrice.max,
       onChange: (event) => setCustomPrice((current) => ({ ...current, max: event.target.value })),
-      className: "text-sm"
+      className: "w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
     }
   )), /* @__PURE__ */ React21.createElement(
     "button",
@@ -8174,10 +8437,10 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       type: "button",
       onClick: applyCustomPrice,
       disabled: !isCustomPriceDirty,
-      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"
+      className: "w-full rounded-lg border border-primary bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary/20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
     },
     "Apply"
-  )))));
+  )))))));
   const displayCategories = useMemo(() => {
     return topCategories.slice(0, 5);
   }, [topCategories]);
@@ -8189,7 +8452,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     if (name.includes("care") || name.includes("personal")) return Heart;
     return Package;
   };
-  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-[#F9FAFB]" }, /* @__PURE__ */ React21.createElement("section", { className: "relative overflow-hidden bg-[#E6EBF0] py-16 md:py-24" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-[#F9FAFB]" }, /* @__PURE__ */ React21.createElement("section", { className: "relative overflow-hidden bg-primary-bg py-16 md:py-24" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement(
     motion.div,
     {
       initial: { opacity: 0, y: 24 },
@@ -8218,33 +8481,20 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         }
       ))
     )
-  ))), /* @__PURE__ */ React21.createElement("section", { className: "bg-white py-8 " }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl md:text-3xl font-bold text-slate-900 mb-8" }, "Shop by Category"), /* @__PURE__ */ React21.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.createElement(React21.Fragment, null, Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ React21.createElement(
-      "div",
-      {
-        key: index,
-        className: "rounded-xl border border-slate-200 bg-white p-8"
-      },
-      /* @__PURE__ */ React21.createElement(Skeleton, { className: "h-10 w-10 mb-4 rounded-lg" }),
-      /* @__PURE__ */ React21.createElement(Skeleton, { className: "h-6 w-3/4 mb-2 rounded" }),
-      /* @__PURE__ */ React21.createElement(Skeleton, { className: "h-4 w-1/2 rounded" })
-    )))
-  ) : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
-    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.createElement(ShoppingBag, { className: `h-10 w-10 mb-4 ${!categoryFilter ? "text-white" : "text-primary-500"}` }),
-    /* @__PURE__ */ React21.createElement("h3", { className: `text-xl font-bold mb-2 ${!categoryFilter ? "text-white" : "text-slate-900 group-hover:text-primary-600"}` }, "All Products"),
-    /* @__PURE__ */ React21.createElement("p", { className: `text-sm ${!categoryFilter ? "text-white/90" : "text-slate-500"}` }, "Browse everything")
-  ), displayCategories.map((category, index) => {
+  ))), /* @__PURE__ */ React21.createElement("section", { className: "py-8 bg-white" }, /* @__PURE__ */ React21.createElement("div", { className: "max-w-[1400px] mx-auto px-8 md:px-12" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-secondary mb-6" }, "Shop by Category"), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4" }, displayCategories.map((category, index) => {
     const Icon = getCategoryIcon(category.name ?? "");
     const isSelected = categoryFilter === category.id;
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+      motion.button,
+      {
+        onClick: handleClearCategory,
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { delay: index * 0.1 },
+        className: `group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${!categoryFilter ? "bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105" : "bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary"}`
+      },
+      /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement("div", { className: `size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter ? "bg-white/20" : "bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110"}` }, /* @__PURE__ */ React21.createElement(Icon, { className: `size-6 ${!categoryFilter ? "text-white" : "text-primary"}` })), /* @__PURE__ */ React21.createElement("h3", { className: `font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? "text-white" : "text-secondary"}` }, "All Products"), /* @__PURE__ */ React21.createElement("p", { className: `font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? "text-white/80" : "text-muted"}` }, "Browse Everything"))
+    ), /* @__PURE__ */ React21.createElement(
       motion.button,
       {
         key: category.id,
@@ -8252,56 +8502,42 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         animate: { opacity: 1, y: 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"}`
+        className: `group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${isSelected ? "bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105" : "bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary"}`
       },
-      /* @__PURE__ */ React21.createElement(Icon, { className: `h-10 w-10 mb-4 ${isSelected ? "text-white" : "text-primary-500"}` }),
-      /* @__PURE__ */ React21.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.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.createElement("div", { className: "relative z-10  pb-16 mt-8" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-8 lg:flex-row" }, /* @__PURE__ */ React21.createElement("aside", { className: "hidden w-72 flex-shrink-0 lg:block" }, /* @__PURE__ */ React21.createElement("div", { className: "sticky top-24 rounded-lg bg-white p-6" }, renderFiltersPanel())), /* @__PURE__ */ React21.createElement("main", { className: "flex-1 space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-gray-100 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-base font-medium text-gray-700" }, isLoading ? "Loading products..." : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`)), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center" }, /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(ArrowUpDown, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement("div", { className: `size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected ? "bg-white/20" : "bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110"}` }, /* @__PURE__ */ React21.createElement(Icon, { className: `size-6 ${isSelected ? "text-white" : "text-primary"}` })), /* @__PURE__ */ React21.createElement("h3", { className: `font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? "text-white" : "text-secondary"}` }, category.name), /* @__PURE__ */ React21.createElement("p", { className: `font-['Poppins',sans-serif] text-[11px] ${isSelected ? "text-white/80" : "text-muted"}` }, category.description))
+    ));
+  })))), /* @__PURE__ */ React21.createElement("div", { className: "relative pb-16 mt-8" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-8 lg:flex-row" }, /* @__PURE__ */ React21.createElement("aside", { className: "hidden w-72 flex-shrink-0 lg:block" }, /* @__PURE__ */ React21.createElement("div", { className: "sticky top-24 rounded-lg bg-white" }, renderFiltersPanel())), /* @__PURE__ */ React21.createElement("main", { className: "flex-1 space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-gray-100 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-base font-medium text-gray-700" }, isLoading ? "Loading products..." : `${displayedProducts.length} products found`)), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center" }, /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(ArrowUpDown, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), /* @__PURE__ */ React21.createElement(
     "select",
     {
       value: sortOption,
       onChange: (event) => {
         setSortOption(event.target.value);
       },
-      className: "appearance-none rounded-xl border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-sm transition focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+      className: "appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-sm transition focus:outline-none focus:ring-1 focus:ring-secondary focus:border-primary"
     },
     /* @__PURE__ */ React21.createElement("option", { value: "featured" }, "Featured products"),
     /* @__PURE__ */ React21.createElement("option", { value: "price-low-high" }, "Price: low to high"),
     /* @__PURE__ */ React21.createElement("option", { value: "price-high-low" }, "Price: high to low"),
     /* @__PURE__ */ React21.createElement("option", { value: "newest" }, "Newest arrivals")
-  ), /* @__PURE__ */ React21.createElement(ChevronDown, { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" })), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center rounded-xl border border-gray-200 bg-white shadow-sm" }, /* @__PURE__ */ React21.createElement(
+  ), /* @__PURE__ */ React21.createElement(ChevronDown, { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" })), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center rounded-full border border-gray-200 bg-gray-100 shadow-sm p-1" }, /* @__PURE__ */ React21.createElement(
     "button",
     {
       type: "button",
       onClick: () => setViewMode("grid"),
-      className: `flex items-center gap-2 rounded-l-xl px-4 py-2 text-sm font-medium transition ${viewMode === "grid" ? "bg-primary-50 text-primary-600" : "text-gray-500 hover:text-gray-700"}`,
+      className: `flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === "grid" ? "bg-white text-primary shadow-md" : "text-gray-500 hover:text-gray-700"}`,
       "aria-pressed": viewMode === "grid"
     },
-    /* @__PURE__ */ React21.createElement(LayoutGrid, { className: "h-4 w-4" }),
-    "Grid"
+    /* @__PURE__ */ React21.createElement(LayoutGrid, { className: "h-4 w-4" })
   ), /* @__PURE__ */ React21.createElement(
     "button",
     {
       type: "button",
       onClick: () => setViewMode("list"),
-      className: `flex items-center gap-2 rounded-r-xl px-4 py-2 text-sm font-medium transition ${viewMode === "list" ? "bg-primary-50 text-primary-600" : "text-gray-500 hover:text-gray-700"}`,
+      className: `flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === "list" ? "bg-white text-primary shadow-md" : "text-gray-500 hover:text-gray-700"}`,
       "aria-pressed": viewMode === "list"
     },
-    /* @__PURE__ */ React21.createElement(LayoutList, { className: "h-4 w-4" }),
-    "List"
-  )))), /* @__PURE__ */ React21.createElement("div", { className: "mt-4 md:hidden" }, /* @__PURE__ */ React21.createElement(
-    Button,
-    {
-      variant: "outline",
-      className: "w-full",
-      onClick: () => setShowFilters(true)
-    },
-    /* @__PURE__ */ React21.createElement(SlidersHorizontal, { className: "h-5 w-5" }),
-    "Filters",
-    hasActiveFilters && /* @__PURE__ */ React21.createElement("span", { className: "ml-2 rounded-full bg-primary-600 px-2 py-0.5 text-xs font-semibold text-white" }, activeFilterChips.length)
-  )), hasActiveFilters && /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-4" }, activeFilterChips.map((chip) => /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement(LayoutList, { className: "h-4 w-4" })
+  )))), hasActiveFilters && /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-4" }, activeFilterChips.map((chip) => /* @__PURE__ */ React21.createElement(
     "button",
     {
       key: chip.key,
@@ -8340,7 +8576,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         onClick: () => router.push(buildPath(`/products/${product._id}`))
       },
       /* @__PURE__ */ React21.createElement("div", { className: "relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40" }, /* @__PURE__ */ React21.createElement(
-        Image3,
+        Image4,
         {
           src: product.productMedia[0]?.file || "/placeholder-product.jpg",
           alt: product.name,
@@ -8356,14 +8592,14 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         },
         tag
       ))), /* @__PURE__ */ React21.createElement("h3", { className: "text-xl font-semibold text-gray-900" }, product.name), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-4 text-sm text-gray-500" }, /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2 font-medium text-primary-600" }, /* @__PURE__ */ React21.createElement(ShieldCheck, { className: "h-4 w-4" }), product.inventoryCount > 0 ? "In stock & ready to ship" : "Restocking soon"), /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React21.createElement(Clock, { className: "h-4 w-4 text-primary-500" }), "Added ", new Date(product.createdAt).toLocaleDateString()))),
-      /* @__PURE__ */ React21.createElement("div", { className: "flex w-full flex-col items-end gap-3 md:w-auto" }, /* @__PURE__ */ React21.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21.createElement("p", { className: "text-3xl font-semibold text-gray-900" }, formatPrice(product.finalPrice)), product.priceBeforeDiscount && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-400 line-through" }, formatPrice(product.priceBeforeDiscount))), /* @__PURE__ */ React21.createElement(
-        Button,
+      /* @__PURE__ */ React21.createElement("div", { className: "flex w-full flex-col items-end gap-3 md:w-auto" }, /* @__PURE__ */ React21.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21.createElement("p", { className: "text-3xl font-semibold text-gray-900" }, formatPrice(product.finalPrice)), product.isDiscounted && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-400 line-through" }, formatPrice(product.priceBeforeDiscount))), /* @__PURE__ */ React21.createElement(
+        "button",
         {
-          size: "sm",
           onClick: (event) => {
             event.stopPropagation();
             router.push(buildPath(`/products/${product._id}`));
-          }
+          },
+          className: "w-full font-['Poppins',sans-serif] font-medium text-sm px-3 py-2 rounded-xl bg-secondary text-white hover:opacity-80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
         },
         "View product"
       ))
@@ -8393,50 +8629,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       disabled: page === pagination.totalPages
     },
     "Next"
-  ))))))), /* @__PURE__ */ React21.createElement(AnimatePresence, null, showFilters && /* @__PURE__ */ React21.createElement(
-    motion.div,
-    {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      className: "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm lg:hidden"
-    },
-    /* @__PURE__ */ React21.createElement(
-      motion.div,
-      {
-        initial: { y: "100%" },
-        animate: { y: 0 },
-        exit: { y: "100%" },
-        transition: { type: "spring", stiffness: 260, damping: 26 },
-        className: "absolute inset-x-0 bottom-0 max-h-[85vh] overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl"
-      },
-      /* @__PURE__ */ React21.createElement("div", { className: "mb-6 flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Filters"), /* @__PURE__ */ React21.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowFilters(false),
-          className: "rounded-full border border-gray-200 p-2 text-gray-500 hover:text-gray-700"
-        },
-        /* @__PURE__ */ React21.createElement(X, { className: "h-4 w-4" })
-      )),
-      renderFiltersPanel()
-    )
-  )));
-}
-function Badge({ children, variant = "primary", size = "md", className = "" }) {
-  const variants = {
-    primary: "bg-primary-100 text-primary-700 border-primary-200",
-    secondary: "bg-secondary-100 text-secondary-700 border-secondary-200",
-    success: "bg-green-100 text-green-700 border-green-200",
-    warning: "bg-yellow-100 text-yellow-700 border-yellow-200",
-    danger: "bg-red-100 text-red-700 border-red-200",
-    gray: "bg-gray-100 text-gray-700 border-gray-200"
-  };
-  const sizes = {
-    sm: "px-2 py-1 text-xs",
-    md: "px-3 py-1 text-sm"
-  };
-  return /* @__PURE__ */ React21.createElement("span", { className: `inline-flex items-center font-medium rounded-full border ${variants[variant]} ${sizes[size]} ${className}` }, children);
+  ))))))));
 }
 var safeFormatDate = (date, format = "long") => {
   if (!date) return "N/A";
@@ -8453,6 +8646,7 @@ function ProductDetailScreen({ productId }) {
   const { buildPath } = useBasePath();
   const { product: productData, isLoading } = useProduct(productId);
   const { addToCart } = useCart();
+  const notification = useNotification();
   const [selectedVariant, setSelectedVariant] = useState(null);
   const [quantity, setQuantity] = useState(1);
   const [isAddingToCart, setIsAddingToCart] = useState(false);
@@ -8460,10 +8654,14 @@ function ProductDetailScreen({ productId }) {
   const [relatedProducts, setRelatedProducts] = useState([]);
   const [initialProductData, setInitialProductData] = useState(null);
   const [activeImageIndex, setActiveImageIndex] = useState(0);
+  const [activeTab, setActiveTab] = useState("description");
   useEffect(() => {
     setActiveImageIndex(0);
   }, [selectedVariant]);
   const product = useMemo(() => {
+    console.log("productData", productData);
+    console.log("selectedVariant", selectedVariant);
+    console.log("initialProductData", initialProductData);
     if (initialProductData && !productData) {
       return initialProductData;
     }
@@ -8518,12 +8716,11 @@ function ProductDetailScreen({ productId }) {
   const variantImages = getVariantImages();
   const variantPrice = selectedVariant?.finalPrice || currentVariant?.finalPrice || product?.price || 0;
   const variantComparePrice = selectedVariant?.retailPrice || (currentVariant && "retailPrice" in currentVariant ? currentVariant.retailPrice : null) || product?.compareAtPrice;
-  const discount = variantComparePrice && variantPrice && variantComparePrice > variantPrice ? Math.round((variantComparePrice - variantPrice) / variantComparePrice * 100) : 0;
   const lastUpdatedLabel = safeFormatDate(
     currentVariant && "updatedAt" in currentVariant && currentVariant.updatedAt ? currentVariant.updatedAt : product?.updatedAt
   );
-  const variantSku = currentVariant?.sku || product?.sku || "N/A";
-  const variantInStock = currentVariant?.inventoryCount > 0;
+  currentVariant?.sku || product?.sku || "N/A";
+  currentVariant?.inventoryCount > 0;
   useEffect(() => {
     if (typeof window === "undefined") return;
     const searchParams = new URLSearchParams(window.location.search);
@@ -8574,12 +8771,16 @@ function ProductDetailScreen({ productId }) {
         quantity,
         selectedVariant.id
       );
-      toast.success("Added to cart", {
-        description: `${quantity} \xD7 ${product.name}${selectedVariant.name ? ` (${selectedVariant.name})` : ""}`
-      });
+      notification.success(
+        "Added to cart",
+        `${quantity} \xD7 ${product.name}${selectedVariant.name ? ` (${selectedVariant.name})` : ""} added to your cart.`
+      );
     } catch (error) {
       console.error("Failed to add to cart", error);
-      toast.error("Could not add to cart. Please try again.");
+      notification.error(
+        "Could not add to cart",
+        "Something went wrong while adding this item. Please try again."
+      );
     } finally {
       setIsAddingToCart(false);
     }
@@ -8595,33 +8796,41 @@ function ProductDetailScreen({ productId }) {
     try {
       if (isFavorited) {
         await removeFromWishlist(product.id);
-        toast.info("Removed from saved items");
+        notification.info(
+          "Removed from saved items",
+          `${product.name} was removed from your saved items.`
+        );
       } else {
         await addToWishlist(product);
-        toast.success("Saved to your favorites");
+        notification.success(
+          "Saved to favorites",
+          `${product.name} was added to your favorites.`
+        );
       }
       setIsFavorited(!isFavorited);
     } catch (error) {
       console.error("Error updating wishlist:", error);
-      toast.error("Failed to update wishlist");
+      notification.error(
+        "Could not update favorites",
+        "We could not update your favorites. Please try again."
+      );
     }
   };
   if (isLoading) {
     return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: "h-[520px] animate-pulse rounded-3xl bg-slate-200" }), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-3 gap-4" }, Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21.createElement("div", { key: index, className: "h-32 animate-pulse rounded-2xl bg-slate-200" })))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-4 rounded-3xl bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "h-8 w-32 animate-pulse rounded-full bg-slate-200" }), /* @__PURE__ */ React21.createElement("div", { className: "h-10 w-48 animate-pulse rounded-full bg-slate-200" }), /* @__PURE__ */ React21.createElement("div", { className: "h-6 w-full animate-pulse rounded-full bg-slate-200" }), /* @__PURE__ */ React21.createElement("div", { className: "h-12 w-full animate-pulse rounded-2xl bg-slate-200" }), /* @__PURE__ */ React21.createElement("div", { className: "h-12 w-full animate-pulse rounded-2xl bg-slate-200" })))));
   }
   if (!product) {
-    return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl bg-white p-10 text-center shadow-sm" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "mx-auto h-10 w-10 text-primary-500" }), /* @__PURE__ */ React21.createElement("h1", { className: "mt-6 text-2xl font-semibold text-gray-900" }, "Product not found"), /* @__PURE__ */ React21.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.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21.createElement(Link8, { href: "/shop", className: "inline-block" }, /* @__PURE__ */ React21.createElement(Button, null, "Browse products"))))));
+    return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl bg-white p-10 text-center shadow-sm" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "mx-auto h-10 w-10 text-primary-500" }), /* @__PURE__ */ React21.createElement("h1", { className: "mt-6 text-2xl font-semibold text-gray-900" }, "Product not found"), /* @__PURE__ */ React21.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.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21.createElement(Link7, { href: "/shop", className: "inline-block" }, /* @__PURE__ */ React21.createElement(Button, null, "Browse products"))))));
   }
-  return /* @__PURE__ */ React21.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-white max-w-7xl mx-auto" }, /* @__PURE__ */ React21.createElement("div", { className: "relative pb-20 pt-8" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement(
-    Button,
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-white" }, /* @__PURE__ */ React21.createElement("div", { className: "bg-gray-50 border-b border-gray-200 py-4" }, /* @__PURE__ */ React21.createElement("div", { className: "max-w-[1400px] mx-auto px-8 md:px-12" }, /* @__PURE__ */ React21.createElement(
+    "button",
     {
-      variant: "ghost",
-      className: "text-slate-600 hover:text-slate-900 hover:bg-slate-100",
-      onClick: () => router.push(buildPath("/shop"))
+      onClick: () => router.push(buildPath("/shop")),
+      className: "flex items-center gap-2 font-['Poppins',sans-serif] text-[13px] text-muted hover:text-primary transition-colors"
     },
-    /* @__PURE__ */ React21.createElement(ArrowLeft, { className: "h-4 w-4 mr-2" }),
+    /* @__PURE__ */ React21.createElement(ChevronLeft, { className: "size-4" }),
     "Back to Shop"
-  )), /* @__PURE__ */ React21.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)]" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-10" }, /* @__PURE__ */ React21.createElement("section", { className: "rounded-3xl " }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.createElement(
+  ))), /* @__PURE__ */ React21.createElement("section", { className: "py-12" }, /* @__PURE__ */ React21.createElement("div", { className: "relative pb-20 pt-8" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)]" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-10" }, /* @__PURE__ */ React21.createElement("section", { className: "rounded-3xl " }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.createElement(
     motion.div,
     {
       key: selectedVariant?.id || "default",
@@ -8631,7 +8840,7 @@ function ProductDetailScreen({ productId }) {
       className: "relative overflow-hidden rounded-3xl bg-slate-100 h-[420px] md:h-[560px]"
     },
     variantImages.length > 0 && variantImages[activeImageIndex] ? /* @__PURE__ */ React21.createElement(
-      Image3,
+      Image4,
       {
         src: variantImages[activeImageIndex].src || variantImages[activeImageIndex].url || variantImages[activeImageIndex].file,
         alt: currentVariant.name || product.name,
@@ -8641,7 +8850,7 @@ function ProductDetailScreen({ productId }) {
         className: "object-contain"
       }
     ) : product?.productMedia?.[0]?.file ? /* @__PURE__ */ React21.createElement(
-      Image3,
+      Image4,
       {
         src: product.productMedia[0].file,
         alt: product.name,
@@ -8651,34 +8860,17 @@ function ProductDetailScreen({ productId }) {
         className: "object-contain"
       }
     ) : null,
-    discount > 0 && /* @__PURE__ */ React21.createElement(
-      Badge,
-      {
-        variant: "danger",
-        className: "absolute left-6 top-6 shadow-lg shadow-red-500/20"
-      },
-      "Save ",
-      discount,
-      "%"
-    ),
-    !variantInStock && /* @__PURE__ */ React21.createElement(
-      Badge,
-      {
-        variant: "secondary",
-        className: "absolute right-6 top-6 bg-white/90 text-slate-700 shadow-lg border-slate-200"
-      },
-      "Out of Stock"
-    )
+    /* @__PURE__ */ React21.createElement("div", { className: "absolute top-6 left-6 flex flex-col gap-3" }, product.salePrice && /* @__PURE__ */ React21.createElement("div", { className: "bg-[#E67E50] text-white rounded-full px-4 py-2" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide" }, "Save ", product.discount, "%")))
   ), variantImages.length > 0 && /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-8 gap-2" }, variantImages.map((image, index) => /* @__PURE__ */ React21.createElement(
     "button",
     {
       key: image.src + index,
       type: "button",
       onClick: () => setActiveImageIndex(index),
-      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"}`
+      className: `relative aspect-square overflow-hidden rounded-lg border-2 transition-all ${activeImageIndex === index ? "border-primary/50 ring-2 ring-primary/80 ring-offset-2 shadow-md" : "border-slate-200 hover:border-primary/50"}`
     },
     /* @__PURE__ */ React21.createElement(
-      Image3,
+      Image4,
       {
         src: image?.src,
         alt: image.alt || `Product image ${index + 1}`,
@@ -8688,7 +8880,13 @@ function ProductDetailScreen({ productId }) {
         unoptimized: true
       }
     )
-  )))))), /* @__PURE__ */ React21.createElement("aside", { className: "space-y-6 lg:sticky lg:top-24" }, /* @__PURE__ */ React21.createElement("div", { className: "" }, product.parentCategories && product.parentCategories.length > 0 && /* @__PURE__ */ React21.createElement("div", { className: "mb-4 text-sm text-slate-600" }, product.parentCategories.map((cat, index) => /* @__PURE__ */ React21.createElement("span", { key: cat.id || index }, cat.name, index < product.parentCategories.length - 1 && " \u2022 ")), product.parentSubCategories && product.parentSubCategories.length > 0 && /* @__PURE__ */ React21.createElement(React21.Fragment, null, " \u2022 ", product.parentSubCategories.map((subCat, index) => /* @__PURE__ */ React21.createElement("span", { key: subCat.id || index }, subCat.name, index < product.parentSubCategories.length - 1 && " \u2022 ")))), /* @__PURE__ */ React21.createElement("h1", { className: "text-2xl font-bold text-slate-900 mb-6" }, product.name), product?.productVariants && product.productVariants.length > 0 && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("label", { className: "block text-sm font-medium text-slate-700 mb-3" }, "Select Variant"), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, product.productVariants.map((variant) => {
+  )))))), /* @__PURE__ */ React21.createElement("aside", { className: "space-y-6 lg:sticky lg:top-24" }, /* @__PURE__ */ React21.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[12px] text-primary uppercase tracking-wide font-medium mb-2" }, product.brand, " \u2022 ", product.parentCategories?.[0].name), /* @__PURE__ */ React21.createElement("h1", { className: "text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3" }, product.name), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-1" }, [...Array(5)].map((_, i) => /* @__PURE__ */ React21.createElement(
+    Star,
+    {
+      key: i,
+      className: `size-4 ${i < Math.floor(product.rating) ? "text-[#E67E50] fill-[#E67E50]" : "text-gray-300"}`
+    }
+  ))), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, product.rating, " (", product.reviewCount ? product.reviewCount : 0, " reviews)")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]" }, selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.finalPrice || product.price || 0)), variantComparePrice && variantComparePrice > variantPrice && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[24px] text-muted line-through" }, "$", product.price.toFixed(2)), /* @__PURE__ */ React21.createElement("div", { className: "px-3 py-1 rounded-full bg-[#E67E50]/10" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]" }, "Save $", formatPrice(variantComparePrice))))), selectedVariant && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2 mb-2" }, selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ || selectedVariant.inventoryStatus === "LOW_STOCK" /* LOWSTOCK */ ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { className: "size-3 rounded-full bg-red-500" }), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[13px] text-red-600 font-medium" }, "Out of Stock")) : selectedVariant.inventoryCount <= 10 ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { className: "size-3 rounded-full bg-orange-500 animate-pulse" }), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[13px] text-orange-600 font-medium" }, "Only ", selectedVariant.inventoryCount, " left in stock - Order soon!")) : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { className: "size-3 rounded-full bg-green-500" }), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium" }, "In Stock"))), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[12px] text-muted" }, "SKU: ", selectedVariant?.sku)), product.description && /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.7] mb-8" }, /* @__PURE__ */ React21.createElement("div", { dangerouslySetInnerHTML: { __html: product.description } })), product?.productVariants && product.productVariants.length > 0 && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3" }, "Select Variant"), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-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.createElement(
@@ -8697,10 +8895,10 @@ function ProductDetailScreen({ productId }) {
         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"}`
+        className: `flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${isSelected ? "border-primary bg-primary/5" : "border-gray-200 hover:border-primary/50"}`
       },
-      /* @__PURE__ */ React21.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.createElement(
-        Image3,
+      /* @__PURE__ */ React21.createElement("div", { className: `relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? "border-primary" : "border-slate-200"}` }, /* @__PURE__ */ React21.createElement(
+        Image4,
         {
           src: variantImage,
           alt: variant.name || "Variant image",
@@ -8709,60 +8907,53 @@ function ProductDetailScreen({ productId }) {
           sizes: "48px"
         }
       )),
-      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: `text-sm font-medium ${isSelected ? "text-primary-700" : "text-slate-900"}` }, variant.name), variant.sku && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-slate-500 mt-0.5" }, "SKU: ", variant.sku)),
-      isSelected && /* @__PURE__ */ React21.createElement(Check, { className: "h-5 w-5 text-primary-600 flex-shrink-0" })
+      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: `text-start text-sm font-medium ${isSelected ? "text-secondary" : "text-slate-900"}` }, variant.name), variant.sku && /* @__PURE__ */ React21.createElement("p", { className: "text-start text-xs text-slate-500 mt-0.5" }, "SKU: ", variant.sku)),
+      isSelected && /* @__PURE__ */ React21.createElement(Check, { className: "h-5 w-5 text-secondary flex-shrink-0" })
     );
-  }))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-baseline gap-3 mb-6" }, /* @__PURE__ */ React21.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.createElement("p", { className: "text-base text-slate-400 line-through" }, formatPrice(variantComparePrice)), discount > 0 && /* @__PURE__ */ React21.createElement(Badge, { variant: "danger", size: "sm" }, "-", discount, "%")), selectedVariant && /* @__PURE__ */ React21.createElement("div", { className: "mb-4 text-sm" }, selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ || selectedVariant.inventoryStatus === "LOW_STOCK" /* LOWSTOCK */ ? /* @__PURE__ */ React21.createElement("div", { className: "text-red-600 font-medium" }, "Out of Stock") : /* @__PURE__ */ React21.createElement("div", { className: "text-orange-600 font-medium" }, "Only ", selectedVariant.inventoryCount || product.inventoryCount || 0, " left in stock - Order soon!")), variantSku !== "N/A" && /* @__PURE__ */ React21.createElement("div", { className: "mb-4 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("span", { className: "font-medium" }, "SKU:"), " ", variantSku), product.description && /* @__PURE__ */ React21.createElement("p", { className: "mb-6 text-sm text-slate-600" }, product.description.replace(/<[^>]*>/g, "").substring(0, 150), product.description.length > 150 && "..."), /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("label", { className: "block text-sm font-medium text-slate-700 mb-2" }, "Quantity"), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center rounded-lg border border-slate-200 bg-white" }, /* @__PURE__ */ React21.createElement(
+  }))), /* @__PURE__ */ React21.createElement("div", { className: "mb-8" }, /* @__PURE__ */ React21.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3" }, "Quantity"), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-4 bg-gray-100 rounded-full px-6 py-3" }, /* @__PURE__ */ React21.createElement(
     "button",
     {
       type: "button",
       onClick: () => setQuantity((current) => Math.max(1, current - 1)),
-      className: "px-3 py-2 hover:bg-slate-50",
-      "aria-label": "Decrease quantity"
+      className: "font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors",
+      "aria-label": "Increase quantity"
     },
-    /* @__PURE__ */ React21.createElement(Minus, { className: "h-4 w-4 text-slate-600" })
-  ), /* @__PURE__ */ React21.createElement("span", { className: "w-12 text-center text-sm font-semibold text-slate-900" }, quantity), /* @__PURE__ */ React21.createElement(
+    "-"
+  ), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary min-w-[30px] text-center" }, quantity), /* @__PURE__ */ React21.createElement(
     "button",
     {
-      type: "button",
-      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"
+      onClick: () => setQuantity(Math.min(selectedVariant?.inventoryCount || product.inventoryCount || 999, quantity + 1)),
+      disabled: quantity >= (selectedVariant?.inventoryCount || product.inventoryCount || 0),
+      className: "font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors disabled:opacity-50"
     },
-    /* @__PURE__ */ React21.createElement(Plus, { className: "h-4 w-4 text-slate-600" })
-  )), selectedVariant && /* @__PURE__ */ React21.createElement("span", { className: "text-sm text-slate-500" }, selectedVariant.inventoryCount || product.inventoryCount || 0, " available"))), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React21.createElement(
-    Button,
+    "+"
+  )), selectedVariant && /* @__PURE__ */ React21.createElement("span", { className: "text-sm text-slate-500" }, selectedVariant.inventoryCount || product.inventoryCount || 0, " available"))), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col sm:flex-row gap-3 mb-8" }, /* @__PURE__ */ React21.createElement(
+    "button",
     {
-      size: "md",
-      className: "w-full bg-orange-500 hover:bg-orange-600 text-white py-2.5",
+      className: "flex-1 font-['Poppins',sans-serif] font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed",
       onClick: handleAddToCart,
-      isLoading: isAddingToCart,
       disabled: !selectedVariant || selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */
     },
-    /* @__PURE__ */ React21.createElement(ShoppingCart, { className: "h-4 w-4" }),
-    !selectedVariant ? "Select a variant" : selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ ? "Out of Stock" : "Add to Cart"
+    isAddingToCart ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("svg", { className: "animate-spin h-5 w-5", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true" }, /* @__PURE__ */ React21.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React21.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })), "Loading...") : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(ShoppingCart, { className: "h-4 w-4" }), !selectedVariant ? "Select a variant" : selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ ? "Out of Stock" : "Add to Cart")
   ), /* @__PURE__ */ React21.createElement(
-    Button,
+    "button",
     {
-      size: "md",
-      variant: "outline",
-      className: "w-full py-2.5",
+      className: "sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary/5 transition-all flex items-center justify-center",
       onClick: handleToggleFavorite
     },
-    /* @__PURE__ */ React21.createElement(
-      Heart,
-      {
-        className: `h-4 w-4 mr-2 ${isFavorited ? "fill-red-500 text-red-500" : "text-slate-500"}`
-      }
-    ),
-    isFavorited ? "Saved" : "Save for later"
-  ))), /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21.createElement("p", { className: "font-semibold uppercase tracking-[0.25em]" }, "Need advice?"), /* @__PURE__ */ React21.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.createElement("section", { className: "mt-10" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-4 pb-6" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-1 text-amber-500" }, Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ React21.createElement(Star, { key: index, className: "h-4 w-4 fill-current" }))), /* @__PURE__ */ React21.createElement("span", { className: "text-sm font-medium text-slate-500" }, "Rated 4.8 \u2022 Patients love the results")), /* @__PURE__ */ React21.createElement("div", { className: "space-y-8" }, product.description && /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, "Description"), /* @__PURE__ */ React21.createElement("p", { className: "text-base leading-relaxed text-slate-600", dangerouslySetInnerHTML: { __html: product.description } }))))), /* @__PURE__ */ React21.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/60 p-5 mt-10" }, /* @__PURE__ */ React21.createElement("p", { className: "text- font-semibold uppercase tracking-[0.3em] text-slate-500" }, "Product details"), /* @__PURE__ */ React21.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("p", null, /* @__PURE__ */ React21.createElement("span", { className: "font-medium text-slate-700" }, "Variant:"), " ", currentVariant.name), /* @__PURE__ */ React21.createElement("p", null, /* @__PURE__ */ React21.createElement("span", { className: "font-medium text-slate-700" }, "SKU:"), " ", variantSku), /* @__PURE__ */ React21.createElement("p", null, /* @__PURE__ */ React21.createElement("span", { className: "font-medium text-slate-700" }, "Status:"), " ", /* @__PURE__ */ React21.createElement("span", { className: variantInStock ? "text-green-600" : "text-amber-600" }, variantInStock ? "In Stock" : "Out of Stock")), /* @__PURE__ */ React21.createElement("p", null, /* @__PURE__ */ React21.createElement("span", { className: "font-medium text-slate-700" }, "Last updated:"), " ", lastUpdatedLabel), /* @__PURE__ */ React21.createElement("p", null, /* @__PURE__ */ React21.createElement("span", { className: "font-medium text-slate-700" }, "Ships from:"), " Local pharmacy distribution center"))), relatedProducts.length > 0 && /* @__PURE__ */ React21.createElement("section", { className: "mt-20" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-semibold text-slate-900" }, "You may also like"), /* @__PURE__ */ React21.createElement("p", { className: "mt-1 text-sm text-slate-500" }, "Hand-picked recommendations that pair nicely with this product.")), /* @__PURE__ */ React21.createElement(Link8, { href: buildPath("/shop"), className: "hidden md:inline-flex" }, /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", className: "text-primary-600" }, "View all products"))), /* @__PURE__ */ React21.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.createElement(
+    /* @__PURE__ */ React21.createElement(Heart, { className: `h-4 w-4  ${isFavorited ? "fill-red-500 text-red-500" : "text-primary"}` })
+  ))), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-gradient-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21.createElement(Truck, { className: "size-5 text-primary" })), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Free Shipping"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "On all orders"))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21.createElement(RotateCcw, { className: "size-5 text-primary" })), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Easy Returns"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "30-day return policy"))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21.createElement(Shield, { className: "size-5 text-primary" })), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Secure Checkout"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "Safe & protected"))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21.createElement(Package, { className: "size-5 text-primary" })), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Quality Guaranteed"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "Premium materials")))))), /* @__PURE__ */ React21.createElement("div", { className: "mb-16" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2 mb-8 border-b-2 border-gray-100" }, ["description", "reviews"].map((tab) => /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      key: tab,
+      onClick: () => setActiveTab(tab),
+      className: `font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab ? "text-primary border-b-2 border-primary -mb-0.5" : "text-muted hover:text-primary"}`
+    },
+    tab.charAt(0).toUpperCase() + tab.slice(1)
+  ))), /* @__PURE__ */ React21.createElement("div", { className: "bg-white rounded-[24px] p-8 border-2 border-gray-100" }, activeTab === "description" && /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-4" }, "Product Description"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.8] mb-4" }, /* @__PURE__ */ React21.createElement("div", { dangerouslySetInnerHTML: { __html: product.description } })), /* @__PURE__ */ React21.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21.createElement("h4", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3" }, "Last updated:"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, lastUpdatedLabel)), /* @__PURE__ */ React21.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21.createElement("h4", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3" }, "Shipped from:"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, "Local pharmacy distribution center"))), activeTab === "reviews" && /* @__PURE__ */ React21.createElement("div", { className: "text-center py-8" }, /* @__PURE__ */ React21.createElement(Star, { className: "size-12 text-[#E67E50] mx-auto mb-4" }), /* @__PURE__ */ React21.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-2" }, product.rating, " out of 5 stars"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, "Based on ", product.reviewCount, " customer reviews")))), relatedProducts.length > 0 && /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-8 text-2xl" }, "You May Also Like"), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" }, relatedProducts.map((relatedProduct) => /* @__PURE__ */ React21.createElement(
     ProductCard,
     {
-      key: relatedProduct.id || relatedProduct._id,
+      key: relatedProduct.id,
       product: relatedProduct,
       onClickProduct: (item) => {
         router.push(buildPath(`/products/${item._id || item.id}`));
@@ -8803,70 +8994,71 @@ function CartItem({ item }) {
       initial: { opacity: 0, y: 20 },
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, x: -100 },
-      className: "relative bg-white rounded-lg shadow-sm border border-gray-200 p-4"
+      className: "bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-[#5B9BD5]/30 transition-all duration-300"
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement("div", { className: "flex gap-4 pr-8" }, /* @__PURE__ */ React21.createElement("div", { className: "w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0" }, /* @__PURE__ */ React21.createElement(
+      Image4,
+      {
+        src: item.productVariantData.productMedia[0]?.file || "/placeholder-product.jpg",
+        alt: item.productVariantData.name,
+        className: "w-full h-full object-cover",
+        height: 112,
+        width: 112
+      }
+    )), /* @__PURE__ */ React21.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start justify-between gap-4 mb-3" }, /* @__PURE__ */ React21.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2" }, item.productVariantData.name), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[12px] text-[#676c80]" }, "Variant: ", /* @__PURE__ */ React21.createElement("span", { className: "font-medium text-[#2B4B7C]" }, item.productVariantData.name)))), /* @__PURE__ */ React21.createElement(
       "button",
       {
         onClick: handleRemove,
-        className: "absolute top-4 right-4 p-1 text-gray-400 hover:text-red-600 transition-colors",
+        className: "p-2 hover:bg-red-50 rounded-full transition-colors group",
         "aria-label": "Remove item"
       },
-      /* @__PURE__ */ React21.createElement(Trash2, { className: "w-5 h-5" })
-    ),
-    /* @__PURE__ */ React21.createElement("div", { className: "flex gap-4 pr-8" }, /* @__PURE__ */ React21.createElement("div", { className: "relative w-20 h-24 rounded-md overflow-hidden flex-shrink-0 bg-gray-100" }, /* @__PURE__ */ React21.createElement(
-      Image3,
-      {
-        src: item.productVariantData.productMedia[0]?.file || "/placeholder-product.jpg",
-        alt: item.productVariantData.name,
-        fill: true,
-        className: "object-cover",
-        sizes: "80px"
-      }
-    )), /* @__PURE__ */ React21.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-base font-bold text-gray-900" }, item.productVariantData.name), attributes.length > 0 && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-500 mt-1" }, attributes.join(" ")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2 mt-3" }, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React21.createElement(Trash2, { className: "size-5 text-[#676c80] group-hover:text-red-500 transition-colors" })
+    )), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3 bg-gray-50 rounded-full px-4 py-2" }, /* @__PURE__ */ React21.createElement(
       "button",
       {
         onClick: () => handleUpdateQuantity(item.quantity - 1),
         disabled: isUpdating || item.quantity <= 1,
-        className: "p-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors rounded"
+        className: "p-1 hover:bg-white rounded-full transition-colors"
       },
-      /* @__PURE__ */ React21.createElement(Minus, { className: "w-4 h-4 text-gray-600" })
-    ), /* @__PURE__ */ React21.createElement("span", { className: "px-3 font-medium min-w-[2rem] text-center text-gray-900" }, isUpdating ? /* @__PURE__ */ React21.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.createElement(
+      /* @__PURE__ */ React21.createElement(Minus, { className: "size-4 text-[#2B4B7C]" })
+    ), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] min-w-[20px] text-center" }, item.quantity), /* @__PURE__ */ React21.createElement(
       "button",
       {
         onClick: () => handleUpdateQuantity(item.quantity + 1),
         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"
+        className: "p-1 hover:bg-white rounded-full transition-colors"
       },
-      /* @__PURE__ */ React21.createElement(Plus, { className: "w-4 h-4 text-gray-600" })
-    ))), /* @__PURE__ */ React21.createElement("div", { className: "text-right flex-shrink-0" }, /* @__PURE__ */ React21.createElement("p", { className: "text-lg font-bold text-orange-600" }, formatPrice(itemTotal)), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-500 mt-1" }, formatPrice(unitPrice), " each")))
+      /* @__PURE__ */ React21.createElement(Plus, { className: "size-4 text-[#2B4B7C]" })
+    )), /* @__PURE__ */ React21.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-bold text-[18px] text-[#E67E50]" }, formatPrice(itemTotal)), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-[#676c80]" }, formatPrice(unitPrice), " each")))))
   );
 }
 function CartScreen() {
   const router = useRouter();
   const { cart, isLoading } = useCart();
   const { buildPath } = useBasePath();
+  const { isAuthenticated, user } = useAuth();
+  const notification = useNotification();
   if (!cart || cart.cartBody.items.length === 0) {
-    return /* @__PURE__ */ React21.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Shopping Cart"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-500 mt-1" }, "0 items in your cart")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React21.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ React21.createElement(
       motion.div,
       {
         initial: { opacity: 0, y: 24 },
         animate: { opacity: 1, y: 0 },
         className: "text-center space-y-6 max-w-md"
       },
-      /* @__PURE__ */ React21.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21.createElement(ShoppingBag, { className: "h-12 w-12 text-gray-400" }))),
-      /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Your cart is empty"), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-500" }, "Start adding products to your cart to see them here.")),
+      /* @__PURE__ */ React21.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21.createElement(ShoppingBag, { className: "h-12 w-12 text-secondary" }))),
+      /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-bold text-secondary" }, "Your cart is empty"), /* @__PURE__ */ React21.createElement("p", { className: "text-muted" }, "Start adding products to your cart to see them here.")),
       /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-3 justify-center" }, /* @__PURE__ */ React21.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"
+          className: "rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
         },
         "Discover products",
         /* @__PURE__ */ React21.createElement(ArrowRight, { className: "h-5 w-5" })
       )),
-      /* @__PURE__ */ React21.createElement("div", { className: "mt-8 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Free shipping on all orders")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Secure checkout process")))
+      /* @__PURE__ */ React21.createElement("div", { className: "mt-8 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-secondary flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Free shipping on all orders")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-secondary flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-secondary flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Secure checkout process")))
     )))));
   }
   const subtotal = cart.total;
@@ -8874,12 +9066,23 @@ function CartScreen() {
   const tax = 0;
   const total = subtotal + shipping + tax;
   const itemCount = cart.cartBody.items.length;
-  return /* @__PURE__ */ React21.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Shopping Cart"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-500 mt-1" }, itemCount, " ", itemCount === 1 ? "item" : "items", " in your cart")), /* @__PURE__ */ React21.createElement("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_1fr]" }, /* @__PURE__ */ React21.createElement(
+  const handleSubmit = async (e) => {
+    if (!isAuthenticated) {
+      notification.error(
+        "Sign-in required",
+        "Please log in to complete your checkout."
+      );
+      setTimeout(() => router.push(buildPath("/login?redirect=/checkout")), 50);
+      return;
+    }
+    router.push(buildPath("/checkout"));
+  };
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-white" }, /* @__PURE__ */ React21.createElement("div", { className: "max-w-[1400px] mx-auto px-8 md:px-12" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21.createElement("div", { className: "mb-12" }, /* @__PURE__ */ React21.createElement("h1", { className: "font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-2px] mb-2 text-4xl" }, "Shopping Cart"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[16px] text-muted" }, itemCount, " ", itemCount === 1 ? "item" : "items", " in your cart")), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8" }, /* @__PURE__ */ React21.createElement(
     motion.section,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
-      className: "space-y-6"
+      className: "space-y-6 lg:col-span-2"
     },
     isLoading && /* @__PURE__ */ React21.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.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.createElement("div", { className: "space-y-4" }, cart.cartBody.items.map((item) => /* @__PURE__ */ React21.createElement(CartItem, { key: item.productVariantId, item })))
@@ -8889,13 +9092,13 @@ function CartScreen() {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
       transition: { delay: 0.1 },
-      className: "space-y-6 lg:sticky lg:top-8 h-fit"
+      className: "space-y-6 lg:sticky lg:top-24 h-fit lg:col-span-1"
     },
-    /* @__PURE__ */ React21.createElement("div", { className: "rounded-xl border-2 border-primary-200 bg-white p-6 shadow-md" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-bold text-slate-900 mb-6" }, "Order Summary"), /* @__PURE__ */ React21.createElement("div", { className: "space-y-4 mb-6" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21.createElement("span", { className: "text-gray-600" }, "Subtotal (", itemCount, " ", itemCount === 1 ? "item" : "items", ")"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21.createElement("span", { className: "text-gray-600" }, "Shipping"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold text-green-600" }, "Will be calculated at checkout")), /* @__PURE__ */ React21.createElement("div", { className: "border-t border-gray-200 pt-4 mt-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", { className: "text-lg font-bold text-slate-900" }, "Total"), /* @__PURE__ */ React21.createElement("span", { className: "text-2xl font-bold text-orange-600" }, formatPrice(total))))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement("div", { className: "bg-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24" }, /* @__PURE__ */ React21.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-6" }, "Order Summary"), /* @__PURE__ */ React21.createElement("div", { className: "space-y-4 mb-6" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, "Subtotal (", itemCount, " ", itemCount === 1 ? "item" : "items", ")"), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary" }, formatPrice(subtotal))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21.createElement("span", { className: "text-gray-600" }, "Shipping"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold text-green-600" }, "Will be calculated at checkout")), /* @__PURE__ */ React21.createElement("div", { className: "border-t border-gray-200 pt-4 mt-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", { className: "text-lg font-bold text-secondary" }, "Total"), /* @__PURE__ */ React21.createElement("span", { className: "text-2xl font-bold text-orange-600" }, formatPrice(total))))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement(
       "button",
       {
-        type: "button",
-        onClick: () => router.push(buildPath("/checkout")),
+        type: "submit",
+        onClick: handleSubmit,
         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"
       },
       "Proceed to Checkout",
@@ -8905,11 +9108,10 @@ function CartScreen() {
       {
         type: "button",
         onClick: () => router.push(buildPath("/shop")),
-        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"
+        className: "w-full rounded-full border-2 border-muted bg-white px-4 py-3 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors"
       },
       "Continue Shopping"
-    )), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Secure checkout process")))),
-    /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21.createElement("p", { className: "font-semibold uppercase tracking-[0.3em]" }, "Need help?"), /* @__PURE__ */ React21.createElement("p", { className: "mt-2 leading-relaxed" }, "Chat with a pharmacist to optimize your regimen or discuss substitutions before you check out."))
+    )), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-muted flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-muted flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21.createElement("span", null, "Secure checkout process"))))
   )))));
 }
 function useAddresses() {
@@ -8970,15 +9172,6 @@ function useAddresses() {
     markAsDefault
   };
 }
-function Card({ className = "", ...props }) {
-  return /* @__PURE__ */ React21.createElement(
-    "div",
-    {
-      className: `rounded-lg border bg-white shadow-sm ${className}`,
-      ...props
-    }
-  );
-}
 function Modal({ isOpen, onClose, title, children, size = "md" }) {
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -9035,8 +9228,11 @@ var addressSchema = z.object({
   country: z.string().min(2, "Country is required"),
   phone: z.string().min(10, "Phone number is required")
 });
+
+// src/components/AddressFormModal.tsx
 function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, initialAddress }) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const notification = useNotification();
   const {
     register,
     handleSubmit,
@@ -9082,7 +9278,10 @@ function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, i
           country: data.country,
           phone: data.phone
         }, initialAddress.id);
-        toast.success("Address updated successfully");
+        notification.success(
+          "Address updated",
+          "Your address has been updated successfully."
+        );
         reset();
         onClose();
         if (onAddressUpdated) onAddressUpdated(response.data);
@@ -9098,16 +9297,25 @@ function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, i
           phone: data.phone
         });
         if (response.status === 201) {
-          toast.success("Address added successfully");
+          notification.success(
+            "Address added",
+            "Your new address has been saved to your account."
+          );
           reset();
           onClose();
           if (onAddressAdded) onAddressAdded(response.data);
         } else {
-          toast.error("Failed to add address");
+          notification.error(
+            "Could not add address",
+            "We could not save this address. Please try again."
+          );
         }
       }
     } catch (error) {
-      toast.error("Failed to add address");
+      notification.error(
+        "Could not save address",
+        "Something went wrong while saving your address. Please try again."
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -9184,14 +9392,14 @@ function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, i
         error: errors.country?.message
       }
     )), /* @__PURE__ */ React21.createElement("div", { className: "flex justify-end gap-4" }, /* @__PURE__ */ React21.createElement(
-      Button,
+      "button",
       {
         type: "button",
-        variant: "outline",
-        onClick: onClose
+        onClick: onClose,
+        className: "flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors text-secondary text-sm"
       },
       "Cancel"
-    ), /* @__PURE__ */ React21.createElement(Button, { type: "submit", disabled: isSubmitting }, isSubmitting ? "Adding Address..." : "Add Address")))
+    ), /* @__PURE__ */ React21.createElement("button", { type: "submit", disabled: isSubmitting, className: "flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-secondary text-white text-sm" }, isSubmitting ? "Adding Address..." : "Add Address")))
   );
 }
 var checkoutSchema = z.object({
@@ -9240,6 +9448,7 @@ function CheckoutScreen() {
   const [isAddressModalOpen, setIsAddressModalOpen] = useState(false);
   const [editingAddress, setEditingAddress] = useState(null);
   const [shippingPrice, setShippingPrice] = useState(0);
+  const notification = useNotification();
   const {
     addresses: userAddresses,
     defaultAddress
@@ -9369,7 +9578,10 @@ function CheckoutScreen() {
   const onSubmit = async (data) => {
     setError(null);
     if (!isAuthenticated) {
-      toast.error("Please login to continue");
+      notification.error(
+        "Sign-in required",
+        "Please log in to complete your checkout."
+      );
       setTimeout(() => router.push(buildPath("/login?redirect=/checkout")), 50);
       return;
     }
@@ -9421,7 +9633,10 @@ function CheckoutScreen() {
       }
     }
     setIsSubmitting(true);
-    toast("Submitting order...", { icon: /* @__PURE__ */ React21.createElement(CreditCard, { className: "h-4 w-4" }) });
+    notification.info(
+      "Submitting order",
+      "We are processing your order and preparing your payment options."
+    );
     try {
       const items = (cart?.cartBody?.items || []).map((item) => ({
         productVariantId: String(item.productVariantId),
@@ -9453,7 +9668,10 @@ function CheckoutScreen() {
       );
       if (response?.data?.payment && response.data.payment.hostedInvoiceUrl === "INSUFFICIENT_CREDIT") {
         setError("You have insufficient credit to complete this order.");
-        toast.error("You have insufficient credit to complete this order.");
+        notification.error(
+          "Insufficient credit",
+          "You do not have enough credit to complete this order."
+        );
         return;
       }
       if (paymentMethod === "Card") {
@@ -9472,21 +9690,33 @@ function CheckoutScreen() {
         } else if (!paymentUrl) {
           console.error("No payment URL received in response:", response.data);
           setError("Failed to initiate payment. Please try again or contact support.");
-          toast.error("Failed to initiate payment");
+          notification.error(
+            "Payment setup failed",
+            "We could not start the payment flow. Please try again or contact support."
+          );
           return;
         }
-        toast.success("Order placed successfully!");
+        notification.success(
+          "Order placed",
+          "Your order has been placed successfully. You will be redirected to payment."
+        );
         await clearCart();
         router.push(buildPath(`/orders/${response.data?.id}`));
       } else {
-        toast.success("Order placed successfully!");
+        notification.success(
+          "Order placed",
+          "Your order has been placed successfully."
+        );
         await clearCart();
         router.push(buildPath(`/orders/${response.data?.id}`));
       }
     } catch (err) {
       const msg = err?.message || err?.response?.data?.message || "Failed to place order";
       setError(msg);
-      toast.error(msg);
+      notification.error(
+        "Could not place order",
+        msg
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -9498,14 +9728,15 @@ function CheckoutScreen() {
   const subtotal = cart.total;
   const tax = 0;
   const total = subtotal + shippingPrice + tax;
-  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50 mb-16" }, /* @__PURE__ */ React21.createElement("form", { onSubmit: handleSubmit(onSubmit) }, error && /* @__PURE__ */ React21.createElement("div", { className: "mb-4 text-red-600 font-semibold" }, error), /* @__PURE__ */ React21.createElement("div", { className: "pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-white pb-16" }, /* @__PURE__ */ React21.createElement("form", { onSubmit: handleSubmit(onSubmit) }, error && /* @__PURE__ */ React21.createElement("div", { className: "mb-4 text-red-600 font-semibold" }, error), /* @__PURE__ */ React21.createElement("div", { className: "pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21.createElement(
     motion.div,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
       className: "space-y-8"
     },
-    /* @__PURE__ */ React21.createElement("section", { className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center justify-between gap-4" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-slate-900" }, "Shipping information"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, "We use temperature-aware packaging and real-time tracking on every shipment.")), /* @__PURE__ */ React21.createElement("span", { 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.createElement(Truck, { className: "h-4 w-4" }), "Dispatch in 12h")), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 grid grid-cols-1 gap-4 md:grid-cols-2" }, isDelivery && /* @__PURE__ */ React21.createElement("div", { className: "md:col-span-2 space-y-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("label", { className: "block font-semibold" }, "Select Address"), /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement("div", { className: "mb-12" }, /* @__PURE__ */ React21.createElement("h1", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-3xl" }, "Checkout"), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-[#676c80] text-md leading-relaxed" }, "Complete your order information below")),
+    /* @__PURE__ */ React21.createElement("section", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center justify-between gap-4" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-2xl" }, "Contact Information"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, "We use temperature-aware packaging and real-time tracking on every shipment.")), /* @__PURE__ */ React21.createElement("span", { 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.createElement(Truck, { className: "h-4 w-4" }), "Dispatch in 12h")), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 grid grid-cols-1 gap-4 md:grid-cols-2" }, isDelivery && /* @__PURE__ */ React21.createElement("div", { className: "md:col-span-2 space-y-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("label", { className: "block font-semibold" }, "Select Address"), /* @__PURE__ */ React21.createElement(
       Button,
       {
         type: "button",
@@ -9569,9 +9800,9 @@ function CheckoutScreen() {
             try {
               await removeAddress(addr.id);
               if (selectedAddressId === addr.id) setSelectedAddressId(null);
-              toast.success("Address deleted");
+              notification.success("Address deleted");
             } catch (e2) {
-              toast.error("Failed to delete address");
+              notification.error("Failed to delete address");
             }
           },
           className: "inline-flex items-center gap-1 rounded-full border border-red-200 px-2.5 py-0.5 text-xs font-semibold text-red-600 hover:border-red-300 hover:text-red-700"
@@ -9588,7 +9819,7 @@ function CheckoutScreen() {
       },
       storeAddresses.map((addr) => /* @__PURE__ */ React21.createElement("option", { key: addr.id, value: addr.id }, addr.name, " - ", addr.street1, ", ", addr.city))
     )))),
-    isDelivery && selectedAddressId && /* @__PURE__ */ React21.createElement(Card, { className: "p-6 border border-gray-200 rounded-xl shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-6 border-b" }, /* @__PURE__ */ React21.createElement(Truck, { className: "text-accent w-6 h-6" }), /* @__PURE__ */ React21.createElement("span", null, "Shipping Options")), shippingRatesLoading ? /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-center py-12" }, /* @__PURE__ */ React21.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-accent" }), /* @__PURE__ */ React21.createElement("span", { className: "ml-3 text-gray-600" }, "Loading shipping options...")) : shippingRatesError ? /* @__PURE__ */ React21.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21.createElement("svg", { className: "w-8 h-8 text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }))), /* @__PURE__ */ React21.createElement("p", { className: "text-red-500 text-lg font-medium" }, "Error loading shipping options"), /* @__PURE__ */ React21.createElement("p", { className: "text-red-400 text-sm mt-1" }, shippingRatesError)) : shippingRates && shippingRates.length > 0 ? /* @__PURE__ */ React21.createElement("div", { className: "space-y-4" }, shippingRates.map((rate) => {
+    isDelivery && selectedAddressId && /* @__PURE__ */ React21.createElement("div", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-8 border-b" }, /* @__PURE__ */ React21.createElement(Truck, { className: "text-accent w-8 h-8 flex items-center justify-center text-[#2B4B7C]" }), /* @__PURE__ */ React21.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] text-2xl" }, "Shipping Options")), shippingRatesLoading ? /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-center py-12" }, /* @__PURE__ */ React21.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-accent" }), /* @__PURE__ */ React21.createElement("span", { className: "ml-3 text-gray-600" }, "Loading shipping options...")) : shippingRatesError ? /* @__PURE__ */ React21.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21.createElement("svg", { className: "w-8 h-8 text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }))), /* @__PURE__ */ React21.createElement("p", { className: "text-red-500 text-lg font-medium" }, "Error loading shipping options"), /* @__PURE__ */ React21.createElement("p", { className: "text-red-400 text-sm mt-1" }, shippingRatesError)) : shippingRates && shippingRates.length > 0 ? /* @__PURE__ */ React21.createElement("div", { className: "space-y-4" }, shippingRates.map((rate) => {
       const isSelected = !!selectedShippingRateId && selectedShippingRateId === rate.objectId;
       const isTest = rate.test;
       const hasAttributes = rate.attributes && rate.attributes.length > 0;
@@ -9603,7 +9834,7 @@ function CheckoutScreen() {
           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.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-4 flex-1" }, /* @__PURE__ */ React21.createElement("div", { className: "flex-shrink-0" }, /* @__PURE__ */ React21.createElement(
-          Image3,
+          Image4,
           {
             src: rate.providerImage75 || "/placeholder-product.jpg",
             alt: rate.provider,
@@ -9625,16 +9856,8 @@ function CheckoutScreen() {
         ))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-1 text-sm text-gray-600" }, rate.durationTerms && /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" })), /* @__PURE__ */ React21.createElement("span", null, rate.durationTerms)), rate.estimatedDays && /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" })), /* @__PURE__ */ React21.createElement("span", null, "Estimated ", rate.estimatedDays, " day", rate.estimatedDays !== 1 ? "s" : "")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" })), /* @__PURE__ */ React21.createElement("span", null, "Carrier: ", rate.provider)), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" })), /* @__PURE__ */ React21.createElement("span", null, "Currency: ", rate.currency))))), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col items-end" }, /* @__PURE__ */ React21.createElement("div", { className: "text-2xl font-bold text-gray-900" }, formatPrice(parseFloat(rate.amount))), rate.amount !== rate.amountLocal && /* @__PURE__ */ React21.createElement("div", { className: "text-sm text-gray-500" }, rate.amountLocal, " ", rate.currencyLocal))),
         isSelected && /* @__PURE__ */ React21.createElement("div", { className: "absolute top-3 right-3" }, /* @__PURE__ */ React21.createElement("div", { className: "w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21.createElement(Check, { className: "w-4 h-4 text-white" })))
       );
-    })) : /* @__PURE__ */ React21.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21.createElement(Truck, { className: "w-8 h-8 text-gray-400" })), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-500 text-lg font-medium" }, "No shipping options available"), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-400 text-sm mt-1" }, "Please check the shipping address or try a different location.")))
-  ), /* @__PURE__ */ React21.createElement(
-    motion.aside,
-    {
-      initial: { opacity: 0, y: 32 },
-      animate: { opacity: 1, y: 0 },
-      transition: { duration: 0.5, ease: "easeOut", delay: 0.1 },
-      className: "space-y-10 lg:sticky lg:top-24"
-    },
-    /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-xl shadow-primary-50/50 transition hover:shadow-primary-100/60" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-semibold text-slate-900" }, "Order Summary"), /* @__PURE__ */ React21.createElement("section", { className: "mt-6 space-y-4" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-xs font-semibold text-slate-700 uppercase tracking-wider" }, "Delivery Method"), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-1 gap-3" }, [
+    })) : /* @__PURE__ */ React21.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21.createElement(Truck, { className: "w-8 h-8 text-gray-400" })), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-500 text-lg font-medium" }, "No shipping options available"), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-400 text-sm mt-1" }, "Please check the shipping address or try a different location."))),
+    /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3 mb-6" }, /* @__PURE__ */ React21.createElement(Truck, { className: "w-8 h-8 text-[#2B4B7C]" }), /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-semibold text-[#2B4B7C]" }, "Delivery Method")), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-1 gap-3" }, [
       {
         label: "Delivery",
         icon: /* @__PURE__ */ React21.createElement(Truck, { className: "w-5 h-5" }),
@@ -9654,20 +9877,25 @@ function CheckoutScreen() {
         {
           key: option.label,
           type: "button",
-          onClick: () => setIsDelivery(option.value),
-          "aria-pressed": active,
-          className: `relative flex w-full items-center justify-between rounded-xl border-2 p-3 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 ${active ? "border-primary-500 bg-primary-50 shadow-sm" : "border-slate-200 bg-white hover:border-primary-200 hover:bg-primary-50/40"}`
+          onClick: () => {
+            setIsDelivery(option.value);
+            if (option.value) {
+              setSelectedShippingRateId(null);
+              setShippingPrice(0);
+            }
+          },
+          className: `relative flex w-full items-center justify-between rounded-xl border-2 p-4 transition-all duration-200 ${active ? "border-primary-500 bg-primary-50" : "border-gray-200 hover:border-primary-300"}`
         },
         /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(
           "div",
           {
-            className: `p-2 rounded-lg ${active ? "bg-primary-100 text-primary-600" : "bg-slate-100 text-slate-600 group-hover:bg-slate-50"}`
+            className: `p-2 rounded-lg ${active ? "bg-primary-100 text-primary-600" : "bg-gray-100 text-gray-600"}`
           },
           option.icon
-        ), /* @__PURE__ */ React21.createElement("div", { className: "text-left" }, /* @__PURE__ */ React21.createElement("div", { className: "font-medium text-slate-900" }, option.label), /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-slate-500" }, option.desc))),
-        active && /* @__PURE__ */ React21.createElement("div", { className: "w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center text-white shadow-sm" }, /* @__PURE__ */ React21.createElement(Check, { className: "w-3 h-3" }))
+        ), /* @__PURE__ */ React21.createElement("div", { className: "text-left" }, /* @__PURE__ */ React21.createElement("div", { className: "font-medium text-gray-900" }, option.label), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-500" }, option.desc))),
+        active && /* @__PURE__ */ React21.createElement("div", { className: "w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center" }, /* @__PURE__ */ React21.createElement(Check, { className: "w-3 h-3 text-white" }))
       );
-    }))), /* @__PURE__ */ React21.createElement("section", { className: "mt-8 space-y-4" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-xs font-semibold text-slate-700 uppercase tracking-wider" }, "Payment Method"), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, PAYMENT_METHODS.map((pm) => {
+    }))), /* @__PURE__ */ React21.createElement("div", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3 mb-6" }, /* @__PURE__ */ React21.createElement(CreditCard, { className: "w-8 h-8 text-[#2B4B7C]" }), /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-semibold text-[#2B4B7C]" }, "Payment Method")), /* @__PURE__ */ React21.createElement("div", { className: "grid gap-4 md:grid-cols-3" }, PAYMENT_METHODS.map((pm) => {
       const active = paymentMethod === pm.value;
       return /* @__PURE__ */ React21.createElement(
         "button",
@@ -9675,47 +9903,46 @@ function CheckoutScreen() {
           key: pm.value,
           type: "button",
           onClick: () => setPaymentMethod(pm.value),
-          className: `w-full flex items-center justify-between rounded-xl border-2 p-3 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${active ? `${pm.activeClass} border-current shadow-sm` : `${pm.className} border-slate-200 hover:border-primary-200 hover:shadow-sm`}`
+          className: `
+                          group relative flex w-full items-center justify-between rounded-xl border-2 p-3
+                          transition-all duration-200 ease-out
+                          focus:outline-none f
+                          ${active ? `${pm.activeClass} shadow-md scale-[1.02]` : `${pm.className} border-gray-200 bg-white hover:shadow-sm hover:-translate-y-0.5`}
+                        `
         },
         /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(
           "div",
           {
-            className: `p-1.5 rounded-md ${pm.value === "Card" ? "bg-blue-100 text-blue-600" : pm.value === "Cash" ? "bg-amber-100 text-amber-600" : "bg-emerald-100 text-emerald-600"} ${active ? "bg-opacity-30" : "bg-opacity-100"}`
+            className: `
+                              flex items-center justify-center rounded-lg p-2
+                              transition-colors duration-200
+                              ${pm.value === "Card" ? " text-blue-600" : pm.value === "Cash" ? " text-amber-600" : " text-emerald-600"}
+                              ${active ? "opacity-80" : "group-hover:opacity-90"}
+                            `
           },
           pm.icon
-        ), /* @__PURE__ */ React21.createElement("span", { className: "text-sm font-medium text-slate-900" }, pm.label)),
-        active && /* @__PURE__ */ React21.createElement("div", { className: "w-4 h-4 rounded-full bg-primary-500 flex items-center justify-center text-white shadow-sm" }, /* @__PURE__ */ React21.createElement(Check, { className: "w-2.5 h-2.5" }))
+        ), /* @__PURE__ */ React21.createElement("span", { className: "text-sm font-semibold text-gray-900" }, pm.label)),
+        active && /* @__PURE__ */ React21.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded-full shadow-sm" }, /* @__PURE__ */ React21.createElement(Check, { className: "h-3.5 w-3.5 text-white" }))
       );
-    })), /* @__PURE__ */ React21.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.createElement("section", { className: "mt-8 pt-6 border-t border-slate-100" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-xs font-semibold text-slate-700 uppercase tracking-wider" }, "Cart Summary"), /* @__PURE__ */ React21.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.createElement(
-      "div",
-      {
-        key: item.productId,
-        className: "flex gap-4 rounded-2xl border border-slate-100 p-4 hover:bg-slate-50/50 transition"
-      },
-      /* @__PURE__ */ React21.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-xl bg-slate-100 text-slate-400" }, /* @__PURE__ */ React21.createElement(
-        Image3,
-        {
-          src: item.productVariantData.productMedia?.[0]?.file || "/placeholder-product.jpg",
-          alt: item.productVariantData.name,
-          width: 64,
-          height: 64,
-          className: "object-contain"
-        }
-      )),
-      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-semibold text-slate-900" }, item?.productVariantData?.name), /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-slate-500" }, "Qty ", item.quantity)),
-      /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-semibold text-slate-900" }, formatPrice(item.productVariantData.finalPrice * item.quantity))
-    ))), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 space-y-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", null, "Subtotal"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), isDelivery && /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", null, "Shipping"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold" }, formatPrice(shippingPrice))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", null, "Estimated tax"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold" }, formatPrice(tax))), /* @__PURE__ */ React21.createElement("div", { className: "rounded-2xl bg-slate-50 p-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between text-base font-semibold text-slate-900" }, /* @__PURE__ */ React21.createElement("span", null, "Total Due"), /* @__PURE__ */ React21.createElement("span", null, formatPrice(total))), /* @__PURE__ */ React21.createElement("p", { className: "mt-1 text-xs text-slate-500" }, "Tax is estimated. Final amount confirmed after payment.")))), /* @__PURE__ */ React21.createElement(
+    })), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-500 mt-4" }, 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.createElement(
+    motion.aside,
+    {
+      initial: { opacity: 0, y: 32 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.5, ease: "easeOut", delay: 0.1 },
+      className: "space-y-10 lg:sticky lg:top-24 lg:col-span-1"
+    },
+    /* @__PURE__ */ React21.createElement("div", { className: "bg-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24" }, /* @__PURE__ */ React21.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-6 text-2xl" }, "Order Summary"), /* @__PURE__ */ React21.createElement("section", { className: "mt-8 pt-6 border-t border-slate-100" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-4 mb-6" }, cart?.cartBody?.items?.map((item) => /* @__PURE__ */ React21.createElement("div", { key: `${item.productId}-${item.color}-${item.size}`, className: "flex gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "w-16 h-16 rounded-xl overflow-hidden bg-white shrink-0" }, /* @__PURE__ */ React21.createElement(Image4, { src: item.productVariantData.productMedia?.[0]?.file || "/placeholder-product.jpg", alt: item.productVariantData.name, className: "w-full h-full object-cover", height: 200, width: 200 })), /* @__PURE__ */ React21.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1" }, item?.productVariantData?.name), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-[#676c80]" }, item?.productVariantData?.brand, " \u2022 Qty: ", item.quantity), /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-[#E67E50] mt-1" }, formatPrice(item.productVariantData.finalPrice * item.quantity)))))), /* @__PURE__ */ React21.createElement("div", { className: "h-px bg-[#5B9BD5]/20 my-4" }), /* @__PURE__ */ React21.createElement("div", { className: "text-sm text-slate-600 space-y-3 py-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", null, "Subtotal"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), isDelivery && /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", null, "Shipping"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold" }, formatPrice(shippingPrice))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("span", null, "Estimated tax"), /* @__PURE__ */ React21.createElement("span", { className: "font-semibold" }, formatPrice(tax))), /* @__PURE__ */ React21.createElement("div", { className: "h-px bg-[#5B9BD5]/20 mt-6" }), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between mb-6" }, /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[16px] text-[#2B4B7C]" }, "Total"), /* @__PURE__ */ React21.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[24px] text-[#E67E50]" }, formatPrice(total)))), /* @__PURE__ */ React21.createElement("div", { className: "bg-white/80 rounded-xl p-4" }, /* @__PURE__ */ React21.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]" }, /* @__PURE__ */ React21.createElement("strong", { className: "text-[#2B4B7C]" }, "Payment:"), " We'll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods."))), /* @__PURE__ */ React21.createElement(
       Button,
       {
         type: "submit",
-        size: "lg",
         isLoading: isSubmitting,
-        className: "mt-6 w-full transition-transform hover:scale-[1.02] active:scale-[0.99]"
+        className: "font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-2 rounded-full bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full"
       },
       /* @__PURE__ */ React21.createElement(CreditCard, { className: "h-5 w-5" }),
       isSubmitting ? "Placing order..." : "Place Secure Order"
-    ), /* @__PURE__ */ React21.createElement("p", { className: "mt-4 flex items-center justify-center gap-2 text-xs text-slate-500" }, /* @__PURE__ */ React21.createElement(Lock, { className: "h-4 w-4" }), "Fully encrypted checkout \u2014 cancel anytime before shipment.")),
-    /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/80 p-6 text-sm text-primary-700 shadow-sm hover:shadow-md transition-shadow" }, /* @__PURE__ */ React21.createElement("p", { className: "font-semibold uppercase tracking-[0.3em] text-primary-800" }, "Why Patients Choose Us"), /* @__PURE__ */ React21.createElement("ul", { className: "mt-4 space-y-3 text-primary-700 leading-relaxed" }, /* @__PURE__ */ React21.createElement("li", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement(PackageCheck, { className: "mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ React21.createElement("span", null, "Pharmacy-grade verification on every order.")), /* @__PURE__ */ React21.createElement("li", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement(ShieldCheck, { className: "mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ React21.createElement("span", null, "Cold-chain logistics for sensitive medications.")), /* @__PURE__ */ React21.createElement("li", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement(Truck, { className: "mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ React21.createElement("span", null, "Real-time tracking and SMS updates from prep to delivery."))))
+    ), /* @__PURE__ */ React21.createElement("p", { className: "mt-4 flex items-center justify-center gap-2 text-xs text-slate-500" }, /* @__PURE__ */ React21.createElement(Lock, { className: "h-4 w-4" }), "Fully encrypted checkout \u2014 cancel anytime before shipment."))
   ))), /* @__PURE__ */ React21.createElement(
     AddressFormModal,
     {
@@ -9750,9 +9977,12 @@ function LoginScreen() {
   const { buildPath } = useBasePath();
   const searchParams = useSearchParams();
   const redirectUrl = searchParams?.get("redirect") || buildPath("/");
-  const { login } = useAuth();
+  const { login, user, isLoading } = useAuth();
   const [showPassword, setShowPassword] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [status, setStatus] = useState(
+    null
+  );
   const {
     register,
     handleSubmit,
@@ -9762,36 +9992,25 @@ function LoginScreen() {
   });
   const onSubmit = async (data) => {
     setIsSubmitting(true);
+    setStatus(null);
     try {
       await login(data);
-      toast.success("Welcome back!");
+      setStatus({ type: "success", message: "Welcome back!" });
       router.push(redirectUrl);
     } catch (error) {
-      toast.error(error.response?.data?.message || "Invalid credentials");
+      setStatus({
+        type: "error",
+        message: error?.response?.data?.message || "Invalid credentials"
+      });
     } finally {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.createElement("div", { className: "grid min-h-screen overflow-hidden bg-white lg:grid-cols-[1.1fr_0.9fr]" }, /* @__PURE__ */ React21.createElement(
-    motion.section,
-    {
-      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-slate-700 via-slate-600 to-slate-700 px-10 py-14 text-white"
-    },
-    /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.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.createElement(HeartPulse, { className: "h-4 w-4" }), "Hey Pharmacist"), /* @__PURE__ */ React21.createElement("h1", { className: "text-4xl font-bold leading-tight lg:text-5xl" }, "Pharmacy-grade care for your household"), /* @__PURE__ */ React21.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.createElement("div", { className: "grid gap-4 rounded-3xl bg-white/10 p-6 backdrop-blur" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(ShieldCheck, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-white/80" }, "HIPAA-compliant security keeps your health information protected.")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-white/80" }, "Pharmacists ready to chat in under 10 minutes for medication support."))),
-    /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-6 text-sm text-white/80" }, /* @__PURE__ */ React21.createElement("span", null, "Need an account?"), /* @__PURE__ */ React21.createElement(
-      Link8,
-      {
-        href: buildPath("/register"),
-        className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 font-semibold transition hover:bg-white/25"
-      },
-      "Create one now",
-      /* @__PURE__ */ React21.createElement(ArrowRight, { className: "h-4 w-4" })
-    ))
-  ), /* @__PURE__ */ React21.createElement(
+  if (!isLoading && user) {
+    router.push(buildPath("/account"));
+    return null;
+  }
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]" }, /* @__PURE__ */ React21.createElement("div", { className: "grid min-h-screen overflow-hidden pb-12" }, /* @__PURE__ */ React21.createElement(
     motion.section,
     {
       initial: { opacity: 0, x: 24 },
@@ -9799,55 +10018,74 @@ function LoginScreen() {
       transition: { duration: 0.4 },
       className: "flex items-center justify-center px-6 py-12 lg:px-16"
     },
-    /* @__PURE__ */ React21.createElement("div", { className: "w-full max-w-md space-y-10" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-3xl font-bold text-slate-900" }, "Sign in"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, "Welcome back! Enter your details to continue your personalized care plan.")), /* @__PURE__ */ React21.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-6 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement(
-      Input,
-      {
-        type: "email",
-        label: "Email address",
-        placeholder: "you@example.com",
-        ...register("email"),
-        error: errors.email?.message
-      }
-    )), /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(
-      Input,
-      {
-        type: showPassword ? "text" : "password",
-        label: "Password",
-        placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-        ...register("password"),
-        error: errors.password?.message
-      }
-    ), /* @__PURE__ */ React21.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => setShowPassword((prev) => !prev),
-        className: "absolute right-3 top-[42px] text-slate-400 transition hover:text-slate-600"
-      },
-      showPassword ? /* @__PURE__ */ React21.createElement(EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21.createElement(Eye, { className: "h-5 w-5" })
-    )), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21.createElement("label", { className: "flex items-center gap-2 text-slate-600" }, /* @__PURE__ */ React21.createElement(
-      "input",
-      {
-        type: "checkbox",
-        className: "h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
-      }
-    ), "Remember me"), /* @__PURE__ */ React21.createElement(
-      Link8,
-      {
-        href: buildPath("/forgot-password"),
-        className: "font-medium text-primary-600 transition hover:text-primary-700"
-      },
-      "Forgot password?"
-    )), /* @__PURE__ */ React21.createElement(
-      Button,
+    /* @__PURE__ */ React21.createElement("div", { className: "w-full max-w-lg space-y-10 text-center" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement(Lock, { strokeWidth: 2, className: "h-16 w-16 mx-auto text-white rounded-full bg-secondary m-2 mb-4 px-4" }), /* @__PURE__ */ React21.createElement("h2", { className: "text-4xl text-secondary" }, "Welcome Back"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted" }, "Sign in to access your patient portal")), /* @__PURE__ */ React21.createElement(
+      "form",
       {
-        type: "submit",
-        size: "lg",
-        isLoading: isSubmitting,
-        className: "w-full"
+        onSubmit: handleSubmit(onSubmit),
+        className: "space-y-6 rounded-3xl border bg-white p-8",
+        style: {
+          boxShadow: "0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A"
+        }
       },
-      "Sign in securely"
-    )), /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement(Lock, { className: "mt-0.5 h-5 w-5 text-primary-500" }), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "font-semibold text-slate-800" }, "Secure by design"), /* @__PURE__ */ React21.createElement("p", null, "Encrypted sessions, multi-factor ready, and privacy-first policies keep your personal data safe.")))))
+      status && /* @__PURE__ */ React21.createElement(
+        "div",
+        {
+          className: `flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${status.type === "success" ? "border-green-200 bg-green-50 text-green-800" : "border-red-200 bg-red-50 text-red-700"}`
+        },
+        /* @__PURE__ */ React21.createElement("span", { className: "mt-[2px] text-base" }, status.type === "success" ? "\u2714" : "!"),
+        /* @__PURE__ */ React21.createElement("span", null, status.message)
+      ),
+      /* @__PURE__ */ React21.createElement("div", { className: "text-start text-secondary" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Email Address ", /* @__PURE__ */ React21.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21.createElement(
+        Input,
+        {
+          type: "email",
+          placeholder: "you@example.com",
+          ...register("email"),
+          error: errors.email?.message,
+          className: "text-secondary"
+        }
+      )),
+      /* @__PURE__ */ React21.createElement("div", { className: "relative text-start text-secondary" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Password ", /* @__PURE__ */ React21.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21.createElement(
+        Input,
+        {
+          type: showPassword ? "text" : "password",
+          placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+          ...register("password"),
+          error: errors.password?.message
+        }
+      ), /* @__PURE__ */ React21.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword((prev) => !prev),
+          className: "absolute right-3 top-[42px] text-slate-400 transition hover:text-slate-600"
+        },
+        showPassword ? /* @__PURE__ */ React21.createElement(EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21.createElement(Eye, { className: "h-5 w-5" })
+      )),
+      /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21.createElement("label", { className: "flex items-center gap-2 text-slate-600" }, /* @__PURE__ */ React21.createElement(
+        "input",
+        {
+          type: "checkbox",
+          className: "h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+        }
+      ), "Remember me"), /* @__PURE__ */ React21.createElement(
+        Link7,
+        {
+          href: buildPath("/forgot-password"),
+          className: "font-medium text-primary transition hover:opacity-80"
+        },
+        "Forgot password?"
+      )),
+      /* @__PURE__ */ React21.createElement(
+        "button",
+        {
+          type: "submit",
+          disabled: isSubmitting,
+          className: "w-full bg-secondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
+        },
+        isSubmitting ? "Signing in..." : "Sign in"
+      )
+    ), /* @__PURE__ */ React21.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React21.createElement("p", { className: "text-muted" }, "Don't have an account? ", /* @__PURE__ */ React21.createElement(Link7, { href: buildPath("/register"), className: "font-medium text-primary transition hover:opacity-90" }, "Sign up"))))
   )));
 }
 var registerSchema = z.object({
@@ -9861,11 +10099,6 @@ var registerSchema = z.object({
   message: "Passwords don't match",
   path: ["confirmPassword"]
 });
-var BENEFITS = [
-  "Personalized care plans from licensed pharmacists",
-  "Express delivery with cold-chain handling",
-  "Automatic refills and refill reminders"
-];
 function RegisterScreen() {
   const router = useRouter();
   const { register: registerUser } = useAuth();
@@ -9873,6 +10106,7 @@ function RegisterScreen() {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const notification = useNotification();
   const {
     register,
     handleSubmit,
@@ -9890,33 +10124,21 @@ function RegisterScreen() {
         customerType: "Regular" /* Regular */,
         role: "User" /* User */
       });
-      toast.success("Account created successfully!");
+      notification.success(
+        "Account created",
+        "Your Hey Pharmacist account is ready to use."
+      );
       router.push(buildPath("/"));
     } catch (error) {
-      toast.error(error.response?.data?.message || "Failed to create account");
+      notification.error(
+        "Could not create account",
+        error.response?.data?.message || "Something went wrong while creating your account. Please try again."
+      );
     } finally {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.createElement("div", { className: "grid min-h-screen overflow-hidden bg-white lg:grid-cols-[0.95fr_1.05fr]" }, /* @__PURE__ */ React21.createElement(
-    motion.section,
-    {
-      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-slate-700 via-slate-600 to-slate-700 px-10 py-14 text-white"
-    },
-    /* @__PURE__ */ React21.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21.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.createElement(HeartPulse, { className: "h-4 w-4" }), "Join Hey Pharmacist"), /* @__PURE__ */ React21.createElement("h1", { className: "text-4xl font-bold leading-tight lg:text-5xl" }, "Create your wellness account"), /* @__PURE__ */ React21.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.createElement("div", { className: "space-y-4 rounded-3xl bg-white/10 p-6 backdrop-blur" }, BENEFITS.map((benefit) => /* @__PURE__ */ React21.createElement("div", { key: benefit, className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(CheckCircle2, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-white/85" }, benefit)))),
-    /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-6 text-sm text-white/80" }, /* @__PURE__ */ React21.createElement("span", null, "Already part of the community?"), /* @__PURE__ */ React21.createElement(
-      Link8,
-      {
-        href: buildPath("/login"),
-        className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 font-semibold transition hover:bg-white/25"
-      },
-      "Sign in"
-    ))
-  ), /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]" }, /* @__PURE__ */ React21.createElement("div", { className: "grid min-h-screen overflow-hidden pb-12" }, /* @__PURE__ */ React21.createElement(
     motion.section,
     {
       initial: { opacity: 0, x: 24 },
@@ -9924,54 +10146,52 @@ function RegisterScreen() {
       transition: { duration: 0.4 },
       className: "flex items-center justify-center px-6 py-12 lg:px-16"
     },
-    /* @__PURE__ */ React21.createElement("div", { className: "w-full max-w-lg space-y-10" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-3xl font-bold text-slate-900" }, "Create an account"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, "Start your personalized care journey with pharmacist-backed guidance.")), /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement("div", { className: "w-full max-w-xl space-y-10 text-center" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement(UserPlus, { strokeWidth: 2, className: "h-16 w-16 mx-auto text-white rounded-full bg-primary m-2 mb-4 px-4" }), /* @__PURE__ */ React21.createElement("h2", { className: "text-4xl text-secondary" }, "Create Your Account"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted" }, "Join Holmdel Pharmacy Care for convenient healthcare access")), /* @__PURE__ */ React21.createElement(
       "form",
       {
         onSubmit: handleSubmit(onSubmit),
-        className: "space-y-6 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50"
+        className: "text-start space-y-6 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50",
+        style: {
+          boxShadow: "0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A"
+        }
       },
-      /* @__PURE__ */ React21.createElement("div", { className: "grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React21.createElement("div", { className: "grid gap-4 md:grid-cols-2 text-start" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "First name ", /* @__PURE__ */ React21.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21.createElement(
         Input,
         {
-          label: "First name",
           placeholder: "Alex",
           ...register("firstName"),
           error: errors.firstName?.message
         }
-      ), /* @__PURE__ */ React21.createElement(
+      )), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Last name ", /* @__PURE__ */ React21.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21.createElement(
         Input,
         {
-          label: "Last name",
           placeholder: "Morgan",
           ...register("lastName"),
           error: errors.lastName?.message
         }
-      )),
-      /* @__PURE__ */ React21.createElement(
+      ))),
+      /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Email Address ", /* @__PURE__ */ React21.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21.createElement(
         Input,
         {
           type: "email",
-          label: "Email address",
           placeholder: "you@example.com",
           ...register("email"),
           error: errors.email?.message
         }
-      ),
-      /* @__PURE__ */ React21.createElement(
+      )),
+      /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Phone Number"), /* @__PURE__ */ React21.createElement(
         Input,
         {
           type: "tel",
-          label: "Phone number (optional)",
           placeholder: "+1 (555) 123-4567",
           ...register("phone"),
           error: errors.phone?.message
         }
-      ),
-      /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(
+      )),
+      /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Password ", /* @__PURE__ */ React21.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21.createElement(
         Input,
         {
           type: showPassword ? "text" : "password",
-          label: "Password",
           placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
           ...register("password"),
           error: errors.password?.message
@@ -9985,11 +10205,10 @@ function RegisterScreen() {
         },
         showPassword ? /* @__PURE__ */ React21.createElement(EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21.createElement(Eye, { className: "h-5 w-5" })
       )),
-      /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Confirm Password ", /* @__PURE__ */ React21.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21.createElement(
         Input,
         {
           type: showConfirmPassword ? "text" : "password",
-          label: "Confirm password",
           placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
           ...register("confirmPassword"),
           error: errors.confirmPassword?.message
@@ -10003,77 +10222,54 @@ function RegisterScreen() {
         },
         showConfirmPassword ? /* @__PURE__ */ React21.createElement(EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21.createElement(Eye, { className: "h-5 w-5" })
       )),
-      /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(Shield, { className: "mt-0.5 h-5 w-5 text-primary-500" }), /* @__PURE__ */ React21.createElement("span", null, "By creating an account, you agree to our", " ", /* @__PURE__ */ React21.createElement(Link8, { href: buildPath("/terms"), className: "font-semibold text-primary-600 hover:text-primary-700" }, "Terms of Service"), " ", "and", " ", /* @__PURE__ */ React21.createElement(
-        Link8,
+      /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement(Shield, { strokeWidth: 2, className: "mt-0.5 h-8 w-8 text-primary" }), /* @__PURE__ */ React21.createElement("span", null, "By creating an account, you agree to our", " ", /* @__PURE__ */ React21.createElement(Link7, { href: buildPath("/terms"), className: "font-semibold text-primary hover:opacity-70" }, "Terms of Service"), " ", "and", " ", /* @__PURE__ */ React21.createElement(
+        Link7,
         {
           href: buildPath("/privacy"),
-          className: "font-semibold text-primary-600 hover:text-primary-700"
+          className: "font-semibold text-primary hover:opacity-70"
         },
         "Privacy Policy"
       ), ". We protect your information with bank-level encryption.")),
       /* @__PURE__ */ React21.createElement(
-        Button,
+        "button",
         {
           type: "submit",
-          size: "lg",
-          isLoading: isSubmitting,
-          className: "w-full"
+          disabled: isSubmitting,
+          className: "w-full bg-secondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
         },
-        /* @__PURE__ */ React21.createElement(UserPlus, { className: "h-5 w-5" }),
-        "Create my account"
+        isSubmitting ? "Creating account..." : "Create my account"
       )
-    ), /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21.createElement(Heart, { className: "mt-0.5 h-5 w-5 text-primary-500" }), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "font-semibold text-slate-800" }, "Members love us"), /* @__PURE__ */ React21.createElement("p", null, "92% of patients report improved adherence after receiving pharmacist touchpoints through their Hey Pharmacist account.")))))
+    ), /* @__PURE__ */ React21.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React21.createElement("p", { className: "text-muted" }, "Already have an account? ", /* @__PURE__ */ React21.createElement(Link7, { href: buildPath("/login"), className: "font-medium text-primary transition hover:opacity-90" }, "Sign in"))))
   )));
 }
-var profileSchema = z.object({
-  firstName: z.string().min(2, "First name is required"),
-  lastName: z.string().min(2, "Last name is required"),
-  email: z.string().email("Enter a valid email address"),
-  phone: z.string().optional()
-});
 function ProfileScreen() {
   const router = useRouter();
-  const { user, updateUser, logout } = useAuth();
+  const { user, logout, isLoading } = useAuth();
   const { buildPath } = useBasePath();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors }
-  } = useForm({
-    resolver: zodResolver(profileSchema),
-    defaultValues: {
-      firstName: user?.firstname || "",
-      lastName: user?.lastname || "",
-      email: user?.email || "",
-      phone: user?.phoneNumber || ""
-    }
-  });
-  const onSubmit = async (data) => {
-    setIsSubmitting(true);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [logoutError, setLogoutError] = useState(null);
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    setLogoutError(null);
     try {
-      await updateUser(data);
-      toast.success("Profile updated successfully!");
+      await logout();
+      router.push(buildPath("/"));
     } catch (error) {
-      toast.error(error.response?.data?.message || "Failed to update profile");
+      setLogoutError(error?.response?.data?.message || "Failed to logout. Please try again.");
     } finally {
-      setIsSubmitting(false);
+      setIsLoggingOut(false);
     }
   };
-  const handleLogout = async () => {
-    await logout();
-    toast.success("Logged out successfully");
-    router.push(buildPath("/"));
-  };
   if (!user) {
+    if (isLoading) return null;
     router.push(buildPath("/login"));
     return null;
   }
   const quickLinks = [
     {
       icon: Package,
-      label: "Order history",
-      description: "Track shipments and download invoices",
+      label: "Orders & invoices",
+      description: "Track shipments, invoices, and receipts",
       href: buildPath("/orders")
     },
     {
@@ -10089,121 +10285,105 @@ function ProfileScreen() {
       href: buildPath("/account/addresses")
     }
   ];
-  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.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.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50 text-slate-900" }, /* @__PURE__ */ React21.createElement("div", { className: "relative container mx-auto px-4 pb-16 pt-10" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-slate-200 bg-white/95 p-8 shadow-xl shadow-primary-50 backdrop-blur" }, /* @__PURE__ */ React21.createElement("div", { className: "mb-6 flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "text-sm text-slate-500" }, "Stay signed in to keep prescriptions and deliveries synced."), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, logoutError && /* @__PURE__ */ React21.createElement("div", { className: "flex items-start gap-2 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700" }, /* @__PURE__ */ React21.createElement(ShieldCheck, { className: "mt-[1px] h-4 w-4 text-red-500" }), /* @__PURE__ */ React21.createElement("span", null, logoutError)), /* @__PURE__ */ React21.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      className: "border-red-200 text-red-600 hover:bg-red-50",
+      onClick: handleLogout,
+      disabled: isLoggingOut
+    },
+    /* @__PURE__ */ React21.createElement(LogOut, { className: "h-4 w-4" }),
+    isLoggingOut ? "Logging out..." : "Log out"
+  ))), /* @__PURE__ */ React21.createElement(
     motion.div,
     {
-      initial: { opacity: 0, y: 24 },
+      initial: { opacity: 0, y: 18 },
       animate: { opacity: 1, y: 0 },
-      className: "flex flex-col gap-8 md:flex-row md:items-center md:justify-between"
+      className: "grid gap-8 md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center"
     },
-    /* @__PURE__ */ React21.createElement("div", { className: "space-y-5" }, /* @__PURE__ */ React21.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.createElement(HeartPulse, { className: "h-4 w-4" }), "My account"), /* @__PURE__ */ React21.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Hello, ", user.firstname, " ", user.lastname), /* @__PURE__ */ React21.createElement("p", { className: "max-w-2xl text-white/80 md:text-lg" }, "Manage profile details, shipping preferences, and personalized recommendations. Our pharmacists keep your care plan up to date."), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-4 text-sm text-white/80" }, /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2" }, /* @__PURE__ */ React21.createElement(ShieldCheck, { className: "h-4 w-4" }), "Account secured with multi-factor ready login"))),
-    /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col items-center gap-4 rounded-3xl bg-white/15 p-6 text-center backdrop-blur" }, /* @__PURE__ */ React21.createElement("div", { className: "flex h-24 w-24 items-center justify-center rounded-full bg-white/20 text-3xl font-bold text-white" }, getInitials(user?.firstname || "", user?.lastname || "") || ""), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-white/80" }, user.email), /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21.createElement("div", { className: "inline-flex items-center gap-2 rounded-full bg-slate-900 text-white px-4 py-1 text-xs font-semibold uppercase tracking-[0.32em]" }, /* @__PURE__ */ React21.createElement(HeartPulse, { className: "h-4 w-4" }), "Account"), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h1", { className: "text-4xl font-semibold md:text-5xl" }, "Welcome back, ", user.firstname, " ", user.lastname), /* @__PURE__ */ React21.createElement("p", { className: "mt-3 max-w-2xl text-base text-slate-600" }, "Keep your identity and delivery details accurate for smoother refills, faster shipping, and timely pharmacist guidance.")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21.createElement(ShieldCheck, { className: "h-4 w-4 text-primary-600" }), "Secure login enabled"), /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21.createElement(Mail, { className: "h-4 w-4 text-primary-600" }), user.email), /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21.createElement(Phone, { className: "h-4 w-4 text-primary-600" }), user.phoneNumber || "Add phone for urgent updates"))),
+    /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-6 shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-2xl font-semibold text-slate-900 shadow-sm" }, getInitials(user?.firstname || "", user?.lastname || "") || ""), /* @__PURE__ */ React21.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, "Signed in as"), /* @__PURE__ */ React21.createElement("p", { className: "text-lg font-semibold text-slate-900" }, user.firstname), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, user.email))), /* @__PURE__ */ React21.createElement("div", { className: "grid gap-3 sm:grid-cols-2" }, /* @__PURE__ */ React21.createElement(
+      Button,
+      {
+        variant: "outline",
+        size: "md",
+        className: "border-slate-300 text-slate-800 hover:bg-white",
+        onClick: () => router.push(buildPath("/account/edit"))
+      },
+      "Edit profile"
+    ), /* @__PURE__ */ React21.createElement(
       Button,
       {
         variant: "ghost",
-        className: "text-white hover:bg-white/20",
+        size: "md",
+        className: "text-slate-700 hover:bg-white",
         onClick: () => router.push(buildPath("/account/change-password"))
       },
       "Change password"
-    ))
-  ))), /* @__PURE__ */ React21.createElement("div", { className: "relative -mt-16 pb-20" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]" }, /* @__PURE__ */ React21.createElement(
+    )))
+  )), /* @__PURE__ */ React21.createElement("div", { className: "mt-10 grid gap-8 lg:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)] items-stretch" }, /* @__PURE__ */ React21.createElement(
     motion.div,
     {
-      initial: { opacity: 0, y: 24 },
+      initial: { opacity: 0, y: 18 },
       animate: { opacity: 1, y: 0 },
       className: "space-y-6"
     },
-    /* @__PURE__ */ React21.createElement("section", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-slate-900" }, "Personal information"), /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-5 w-5 text-primary-500" })), /* @__PURE__ */ React21.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "mt-6 space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: "grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ React21.createElement(
-      Input,
-      {
-        label: "First name",
-        placeholder: "Taylor",
-        ...register("firstName"),
-        error: errors.firstName?.message
-      }
-    ), /* @__PURE__ */ React21.createElement(
-      Input,
-      {
-        label: "Last name",
-        placeholder: "Reed",
-        ...register("lastName"),
-        error: errors.lastName?.message
-      }
-    )), /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(
-      Input,
-      {
-        type: "email",
-        label: "Email address",
-        placeholder: "you@example.com",
-        className: "pl-10",
-        ...register("email"),
-        error: errors.email?.message
-      }
-    ), /* @__PURE__ */ React21.createElement(Mail, { className: "absolute left-3 top-[38px] h-4 w-4 text-slate-400" })), /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(
-      Input,
-      {
-        type: "tel",
-        label: "Phone number",
-        placeholder: "+1 (555) 123-4567",
-        className: "pl-10",
-        ...register("phone"),
-        error: errors.phone?.message
-      }
-    ), /* @__PURE__ */ React21.createElement(Phone, { className: "absolute left-3 top-[38px] h-4 w-4 text-slate-400" })), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-4" }, /* @__PURE__ */ React21.createElement(
-      Button,
-      {
-        type: "submit",
-        size: "lg",
-        isLoading: isSubmitting
-      },
-      "Save changes"
-    ), /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement("section", { className: "rounded-3xl border border-slate-200 bg-white p-7 shadow-lg shadow-primary-50/40 min-h-[420px] h-full flex flex-col" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-400" }, "Essentials"), /* @__PURE__ */ React21.createElement("h2", { className: "mt-1 text-xl font-semibold text-slate-900" }, "Profile snapshot")), /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-5 w-5 text-primary-500" })), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/70 p-5" }, /* @__PURE__ */ React21.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.28em] text-slate-500" }, "Contact"), /* @__PURE__ */ React21.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("p", { className: "flex items-center gap-2 font-semibold text-slate-900" }, /* @__PURE__ */ React21.createElement(User, { className: "h-4 w-4 text-primary-500" }), user.firstname, " ", user.lastname), /* @__PURE__ */ React21.createElement("p", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21.createElement(Mail, { className: "h-4 w-4 text-primary-500" }), user.email), /* @__PURE__ */ React21.createElement("p", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21.createElement(Phone, { className: "h-4 w-4 text-primary-500" }), user.phoneNumber || "Not provided")), /* @__PURE__ */ React21.createElement(
       Button,
       {
-        type: "button",
         variant: "outline",
-        size: "lg",
-        onClick: () => router.push(buildPath("/orders"))
+        size: "md",
+        className: "mt-4 w-full border-slate-300 text-slate-800 hover:bg-white",
+        onClick: () => router.push(buildPath("/account/edit"))
       },
-      "View recent orders"
-    )))),
-    /* @__PURE__ */ React21.createElement("section", { className: "grid gap-4 md:grid-cols-2" }, quickLinks.map((item) => /* @__PURE__ */ React21.createElement(
-      Link8,
+      "Update information"
+    )), /* @__PURE__ */ React21.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/70 p-5" }, /* @__PURE__ */ React21.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.28em] text-slate-500" }, "Security"), /* @__PURE__ */ React21.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("p", { className: "flex items-center gap-2 font-semibold text-slate-900" }, /* @__PURE__ */ React21.createElement(ShieldCheck, { className: "h-4 w-4 text-primary-500" }), "Multi-factor ready"), /* @__PURE__ */ React21.createElement("p", null, "Protect your account with a fresh password and keep notifications on.")), /* @__PURE__ */ React21.createElement(
+      Button,
       {
-        key: item.href,
-        href: item.href,
-        className: "group rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
+        variant: "primary",
+        size: "md",
+        className: "mt-4 w-full",
+        onClick: () => router.push(buildPath("/account/change-password"))
       },
-      /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement("span", { className: "rounded-2xl bg-primary-50 p-3 text-primary-600" }, /* @__PURE__ */ React21.createElement(item.icon, { className: "h-5 w-5" })), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "text-base font-semibold text-slate-900 group-hover:text-primary-600" }, item.label), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, item.description)))
-    )))
+      "Change password"
+    ))))
   ), /* @__PURE__ */ React21.createElement(
     motion.aside,
     {
-      initial: { opacity: 0, y: 24 },
+      initial: { opacity: 0, y: 18 },
       animate: { opacity: 1, y: 0 },
-      transition: { delay: 0.1 },
-      className: "space-y-6"
+      transition: { delay: 0.05 },
+      className: "space-y-4 h-full"
     },
-    /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, "Care preferences"), /* @__PURE__ */ React21.createElement("p", { className: "mt-3 text-sm text-slate-600" }, "Customize how we support you. Set refill reminders or manage communication preferences to stay aligned with your wellness goals."), /* @__PURE__ */ React21.createElement(
-      Button,
+    /* @__PURE__ */ React21.createElement("section", { className: "rounded-3xl border border-slate-200 bg-white p-6 shadow-sm min-h-[420px] h-full flex flex-col" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-400" }, "Quick links"), /* @__PURE__ */ React21.createElement("h3", { className: "mt-1 text-lg font-semibold text-slate-900" }, "Next steps")), /* @__PURE__ */ React21.createElement(Heart, { className: "h-5 w-5 text-primary-500" })), /* @__PURE__ */ React21.createElement("div", { className: "mt-5 grid gap-3" }, quickLinks.map((item) => /* @__PURE__ */ React21.createElement(
+      Link7,
       {
-        variant: "outline",
-        className: "mt-4 w-full",
-        onClick: () => router.push(buildPath("/account/preferences"))
-      },
-      "Manage preferences"
-    )),
-    /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21.createElement("p", { className: "font-semibold uppercase tracking-[0.3em]" }, "Pharmacist tip"), /* @__PURE__ */ React21.createElement("p", { className: "mt-3 leading-relaxed" }, "Keep your phone number current so pharmacists can reach you quickly with dosage advice or time-sensitive updates about your order.")),
-    /* @__PURE__ */ React21.createElement(
-      "button",
-      {
-        onClick: handleLogout,
-        className: "flex w-full items-center justify-center gap-2 rounded-3xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-600 transition hover:bg-red-100"
+        key: item.href,
+        href: item.href,
+        className: "group relative flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50/70 p-4 transition duration-200 hover:-translate-y-0.5 hover:border-primary-200 hover:bg-white hover:shadow-md"
       },
-      /* @__PURE__ */ React21.createElement(LogOut, { className: "h-4 w-4" }),
-      "Log out"
-    )
-  )))));
+      /* @__PURE__ */ React21.createElement("span", { className: "flex h-11 w-11 items-center justify-center rounded-xl bg-white text-primary-600 shadow-sm group-hover:bg-primary-600 group-hover:text-white" }, /* @__PURE__ */ React21.createElement(item.icon, { className: "h-5 w-5" })),
+      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: "flex items-center gap-2 text-base font-semibold text-slate-900 group-hover:text-primary-700" }, item.label, /* @__PURE__ */ React21.createElement(ArrowRight, { className: "h-4 w-4 opacity-0 transition group-hover:opacity-100" })), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, item.description))
+    ))))
+  ))));
+}
+function Badge({ children, variant = "primary", size = "md", className = "" }) {
+  const variants = {
+    primary: "bg-primary-100 text-primary-700 border-primary-200",
+    secondary: "bg-secondary-100 text-secondary-700 border-secondary-200",
+    success: "bg-green-100 text-green-700 border-green-200",
+    warning: "bg-yellow-100 text-yellow-700 border-yellow-200",
+    danger: "bg-red-100 text-red-700 border-red-200",
+    gray: "bg-gray-100 text-gray-700 border-gray-200"
+  };
+  const sizes = {
+    sm: "px-2 py-1 text-xs",
+    md: "px-3 py-1 text-sm"
+  };
+  return /* @__PURE__ */ React21.createElement("span", { className: `inline-flex items-center font-medium rounded-full border ${variants[variant]} ${sizes[size]} ${className}` }, children);
 }
 function OrderCard({ order }) {
   const config = order.orderStatus;
@@ -10221,7 +10401,7 @@ function OrderCard({ order }) {
       const itemPrice = item.productVariantData?.finalPrice || 0;
       const itemTotal = itemPrice * item.quantity;
       return /* @__PURE__ */ React21.createElement("div", { key: item.productVariantId || item._id, className: "flex items-center gap-2 text-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "relative w-12 h-12 rounded bg-gray-100 flex-shrink-0 overflow-hidden" }, /* @__PURE__ */ React21.createElement(
-        Image3,
+        Image4,
         {
           src: item?.productVariantData?.productMedia?.[0]?.file || "/placeholder-product.jpg",
           alt: item?.productVariantData?.name || "Product image",
@@ -10561,7 +10741,7 @@ function CurrentOrdersScreen() {
     },
     /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.35em] text-white/70" }, "Quick actions"),
     /* @__PURE__ */ React21.createElement("div", { className: "mt-4 space-y-3 text-sm text-white/80" }, /* @__PURE__ */ React21.createElement(
-      Link8,
+      Link7,
       {
         href: buildPath("/orders"),
         className: "flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3 transition hover:bg-white/20"
@@ -10640,6 +10820,9 @@ function AddressesScreen() {
   } = useAddresses();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editingAddress, setEditingAddress] = useState(null);
+  const [banner, setBanner] = useState(
+    null
+  );
   const {
     register,
     handleSubmit,
@@ -10694,10 +10877,10 @@ function AddressesScreen() {
     if (editingAddress) {
       const response = await updateAddress(editingAddress.id, payload);
       if (response) {
-        toast.success("Address updated");
+        setBanner({ type: "success", message: "Address updated successfully" });
         closeModal();
       } else {
-        toast.error("Unable to update address");
+        setBanner({ type: "error", message: "Unable to update address" });
       }
     } else {
       const response = await addAddress({
@@ -10712,10 +10895,10 @@ function AddressesScreen() {
         addressType: values.addressType
       });
       if (response) {
-        toast.success("Address added successfu  lly");
+        setBanner({ type: "success", message: "Address added successfully" });
         closeModal();
       } else {
-        toast.error("Failed to add address");
+        setBanner({ type: "error", message: "Failed to add address" });
       }
     }
   };
@@ -10727,20 +10910,22 @@ You can add it back at any time.`
     if (!confirmDelete) return;
     try {
       await removeAddress(address.id);
-      toast.success("Address removed successfully");
+      setBanner({ type: "success", message: "Address removed successfully" });
     } catch (error2) {
-      toast.error("Failed to remove address", {
-        description: error2 instanceof Error ? error2.message : "An unexpected error occurred"
+      setBanner({
+        type: "error",
+        message: error2 instanceof Error ? error2.message : "Failed to remove address. Please try again."
       });
     }
   };
   const handleSetDefault = async (address) => {
     try {
       await markAsDefault(address.id);
-      toast.success(`${address.name} is now your default address`);
+      setBanner({ type: "success", message: `${address.name} is now your default address` });
     } catch (error2) {
-      toast.error("Failed to set default address", {
-        description: error2 instanceof Error ? error2.message : "An unexpected error occurred"
+      setBanner({
+        type: "error",
+        message: error2 instanceof Error ? error2.message : "Failed to set default address. Try again."
       });
     }
   };
@@ -10768,27 +10953,32 @@ You can add it back at any time.`
       }
     ];
   }, [addresses]);
-  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.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.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.3),_transparent_60%)]" }), /* @__PURE__ */ React21.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21.createElement(
-    motion.div,
+  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50 text-slate-900" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 pb-16 pt-10" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl border border-slate-200 bg-white/95 p-6 shadow-xl shadow-primary-50" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("div", { className: "inline-flex items-center gap-2 rounded-full bg-slate-900 text-white px-4 py-1 text-xs font-semibold uppercase tracking-[0.32em]" }, /* @__PURE__ */ React21.createElement(MapPin, { className: "h-4 w-4" }), "Address book"), /* @__PURE__ */ React21.createElement("h1", { className: "text-3xl font-semibold md:text-4xl" }, "Manage where your care arrives"), /* @__PURE__ */ React21.createElement("p", { className: "max-w-2xl text-sm text-slate-600" }, "Save home, office, or loved ones' addresses and choose a default for faster checkout and delivery."), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-3 text-xs text-slate-500" }, /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-4 w-4 text-primary-600" }), "Default: ", defaultAddress ? defaultAddress.name : "Not set"))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, banner && /* @__PURE__ */ React21.createElement(
+    "div",
     {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "space-y-5"
+      className: `flex items-start gap-2 rounded-2xl border px-3 py-2 text-xs ${banner.type === "success" ? "border-green-200 bg-green-50 text-green-700" : "border-red-200 bg-red-50 text-red-700"}`
     },
-    /* @__PURE__ */ React21.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.createElement(MapPin, { className: "h-4 w-4" }), "Address book"),
-    /* @__PURE__ */ React21.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Manage where your care arrives"),
-    /* @__PURE__ */ React21.createElement("p", { className: "max-w-2xl text-white/80 md:text-lg" }, "Add home, office, or loved ones' addresses and toggle a default for lightning-fast checkout and delivery."),
-    /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-3 text-sm text-white/75" }, /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-4 w-4 text-white" }), "Default address: ", defaultAddress ? defaultAddress.name : "Not set"), /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", className: "text-white hover:bg-white/10", onClick: openCreateModal }, /* @__PURE__ */ React21.createElement(Plus, { className: "h-5 w-5" }), "Add address"))
+    /* @__PURE__ */ React21.createElement("span", { className: "mt-[1px] text-base" }, banner.type === "success" ? "\u2714" : "!"),
+    /* @__PURE__ */ React21.createElement("span", null, banner.message)
   ), /* @__PURE__ */ React21.createElement(
-    motion.div,
+    Button,
     {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      transition: { delay: 0.1 },
-      className: "grid gap-4 rounded-3xl bg-white/15 p-6 text-sm text-white/80 backdrop-blur"
+      variant: "outline",
+      size: "md",
+      className: "border-slate-300 text-slate-800 hover:bg-white",
+      onClick: openCreateModal
     },
-    stats.map((stat) => /* @__PURE__ */ React21.createElement("div", { key: stat.id, className: "flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-white/70" }, stat.label), /* @__PURE__ */ React21.createElement("p", { className: "text-white" }, stat.helper)), /* @__PURE__ */ React21.createElement("span", { className: "text-3xl font-semibold text-white" }, stat.value)))
-  )))), /* @__PURE__ */ React21.createElement("div", { className: "relative -mt-16 pb-20" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, isLoading ? /* @__PURE__ */ React21.createElement("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3" }, Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React21.createElement(Plus, { className: "h-5 w-5" }),
+    "Add address"
+  ))), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 grid gap-4 sm:grid-cols-3" }, stats.map((stat) => /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      key: stat.id,
+      className: "rounded-2xl border border-slate-200 bg-slate-50/70 px-4 py-3 text-sm text-slate-600"
+    },
+    /* @__PURE__ */ React21.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.28em] text-slate-500" }, stat.label),
+    /* @__PURE__ */ React21.createElement("div", { className: "mt-1 flex items-center justify-between" }, /* @__PURE__ */ React21.createElement("p", { className: "text-slate-800" }, stat.helper), /* @__PURE__ */ React21.createElement("span", { className: "text-xl font-semibold text-slate-900" }, stat.value))
+  )))), /* @__PURE__ */ React21.createElement("div", { className: "mt-10" }, isLoading ? /* @__PURE__ */ React21.createElement("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3" }, Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21.createElement(
     "div",
     {
       key: index,
@@ -10811,7 +11001,7 @@ You can add it back at any time.`
         key: address.id,
         initial: { opacity: 0, y: 24 },
         animate: { opacity: 1, y: 0 },
-        className: "group relative flex h-full flex-col rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
+        className: "group relative flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:border-primary-200 hover:shadow-lg"
       },
       address.isDefault && /* @__PURE__ */ React21.createElement("span", { className: "absolute right-6 top-6 inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700" }, /* @__PURE__ */ React21.createElement(Crown, { className: "h-4 w-4" }), "Default"),
       /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement("span", { className: "rounded-full bg-primary-50 p-3 text-primary-600" }, /* @__PURE__ */ React21.createElement(User, { className: "h-5 w-5" })), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "text-base font-semibold text-slate-900" }, address.name), /* @__PURE__ */ React21.createElement("p", { className: "text-xs uppercase tracking-[0.3em] text-slate-400" }, typeCopy.label))),
@@ -11001,6 +11191,7 @@ function WishlistScreen() {
     clearWishlist,
     refreshWishlist
   } = useWishlist();
+  const notification = useNotification();
   const wishlistCount = getWishlistCount?.() ?? 0;
   const { products: wishlistProducts, isLoading, error } = useWishlistProducts(
     wishlistItems
@@ -11010,9 +11201,12 @@ function WishlistScreen() {
   const [sortOption, setSortOption] = useState("featured");
   useEffect(() => {
     if (error) {
-      toast.error("We had trouble loading your saved products. Please try again.");
+      notification.error(
+        "Could not load wishlist",
+        "We had trouble loading your saved products. Please refresh the page or try again shortly."
+      );
     }
-  }, [error]);
+  }, [error, notification]);
   const handleRemoveFromWishlist = async (productId) => {
     try {
       await removeFromWishlist(productId);
@@ -11080,22 +11274,22 @@ function WishlistScreen() {
       animate: { opacity: 1, y: 0 },
       className: "space-y-6"
     },
-    !isAuthenticated && /* @__PURE__ */ React21.createElement("div", { className: "flex min-h-[40vh] items-center justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "max-w-lg text-center space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21.createElement(Heart, { className: "h-12 w-12 text-gray-400" }))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Sign in to see your favourites"), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-500" }, "Create your curated shelf of products and we'll keep them ready whenever you return.")), /* @__PURE__ */ React21.createElement(
+    !isAuthenticated && /* @__PURE__ */ React21.createElement("div", { className: "flex min-h-[40vh] items-center justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "max-w-lg text-center space-y-6" }, /* @__PURE__ */ React21.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21.createElement(Heart, { className: "h-12 w-12 text-secondary" }))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-bold text-secondary" }, "Sign in to see your favourites"), /* @__PURE__ */ React21.createElement("p", { className: "text-muted" }, "Create your curated shelf of products and we'll keep them ready whenever you return.")), /* @__PURE__ */ React21.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"
+        className: "rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors hover:opacity-80"
       },
       "Sign In"
     ))),
-    isAuthenticated && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Wishlist"), /* @__PURE__ */ React21.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.createElement("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-1" }, onlyInStock && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-gray-500" }, "Showing items ready to ship")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21.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.createElement(
+    isAuthenticated && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h1", { className: "text-2xl font-bold text-secondary" }, "Wishlist"), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted mt-1" }, wishlistCount, " ", wishlistCount === 1 ? "item" : "items", " saved", wishlistCount > 0 && ` \u2022 Total value: ${formatPrice(totalValue)}`)), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-1" }, onlyInStock && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted" }, "Showing items ready to ship")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21.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 hover:text-secondary" }, /* @__PURE__ */ React21.createElement(
       "input",
       {
         type: "checkbox",
         checked: onlyInStock,
         onChange: (event) => setOnlyInStock(event.target.checked),
-        className: "h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+        className: "h-4 w-4 rounded border-slate-300 text-secondary focus:ring-secondary"
       }
     ), "Only show in-stock"), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-slate-600" }, /* @__PURE__ */ React21.createElement("span", null, "Sort"), /* @__PURE__ */ React21.createElement(
       "select",
@@ -11105,24 +11299,22 @@ function WishlistScreen() {
         className: "bg-transparent text-sm font-medium text-slate-700 outline-none"
       },
       SORT_OPTIONS.map((option) => /* @__PURE__ */ React21.createElement("option", { key: option.value, value: option.value }, option.label))
-    )), /* @__PURE__ */ React21.createElement("div", { className: "flex overflow-hidden rounded-full border border-slate-200 bg-slate-50" }, /* @__PURE__ */ React21.createElement(
+    )), /* @__PURE__ */ React21.createElement("div", { className: "flex overflow-hidden rounded-full border border-slate-200 bg-gray-100 p-1" }, /* @__PURE__ */ React21.createElement(
       "button",
       {
         type: "button",
         onClick: () => setViewMode("grid"),
-        className: `flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition ${viewMode === "grid" ? "bg-primary-600 text-white shadow-lg shadow-primary-500/30" : "text-slate-600 hover:bg-white"}`
+        className: `flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === "grid" ? "bg-white text-primary shadow-md" : "text-slate-600 hover:bg-white"}`
       },
-      /* @__PURE__ */ React21.createElement(Grid, { className: "h-4 w-4" }),
-      "Grid"
+      /* @__PURE__ */ React21.createElement(Grid, { className: "h-4 w-4" })
     ), /* @__PURE__ */ React21.createElement(
       "button",
       {
         type: "button",
         onClick: () => setViewMode("list"),
-        className: `flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition ${viewMode === "list" ? "bg-primary-600 text-white shadow-lg shadow-primary-500/30" : "text-slate-600 hover:bg-white"}`
+        className: `flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === "list" ? "bg-white text-primary shadow-md" : "text-slate-600 hover:bg-white"}`
       },
-      /* @__PURE__ */ React21.createElement(List, { className: "h-4 w-4" }),
-      "List"
+      /* @__PURE__ */ React21.createElement(List, { className: "h-4 w-4" })
     )), wishlistCount > 0 && /* @__PURE__ */ React21.createElement(
       Button,
       {
@@ -11138,12 +11330,12 @@ function WishlistScreen() {
         key: index,
         className: "h-72 animate-pulse rounded-2xl border border-slate-200 bg-slate-100"
       }
-    ))), !isLoading && wishlistCount === 0 && /* @__PURE__ */ React21.createElement("div", { className: "flex min-h-[30vh] items-center justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "text-center space-y-6 max-w-md" }, /* @__PURE__ */ React21.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21.createElement(Heart, { className: "h-12 w-12 text-gray-400" }))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Your wishlist is empty"), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-500" }, "Start adding products to your wishlist to see them here.")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap justify-center gap-3" }, /* @__PURE__ */ React21.createElement(
+    ))), !isLoading && wishlistCount === 0 && /* @__PURE__ */ React21.createElement("div", { className: "flex min-h-[30vh] items-center justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "text-center space-y-6 max-w-md" }, /* @__PURE__ */ React21.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21.createElement(Heart, { className: "h-12 w-12 text-secondary" }))), /* @__PURE__ */ React21.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-2xl font-bold text-secondary" }, "Your wishlist is empty"), /* @__PURE__ */ React21.createElement("p", { className: "text-muted" }, "Start adding products to your wishlist to see them here.")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap justify-center gap-3" }, /* @__PURE__ */ React21.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"
+        className: "rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
       },
       "Discover products"
     )))), !isLoading && processedProducts.length > 0 && /* @__PURE__ */ React21.createElement(React21.Fragment, null, viewMode === "grid" ? /* @__PURE__ */ React21.createElement(
@@ -11184,7 +11376,7 @@ function WishlistScreen() {
         className: "flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-4 shadow-sm shadow-primary-50 sm:flex-row sm:items-center"
       },
       /* @__PURE__ */ React21.createElement("div", { className: "relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40" }, /* @__PURE__ */ React21.createElement(
-        Image3,
+        Image4,
         {
           fill: true,
           src: product.productMedia?.[0]?.file || "/placeholder-product.jpg",
@@ -11192,7 +11384,7 @@ function WishlistScreen() {
           className: "h-full w-full object-cover"
         }
       )),
-      /* @__PURE__ */ React21.createElement("div", { className: "flex flex-1 flex-col gap-2" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, product.name), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-slate-500" }, product.parentCategories?.map((category) => category?.name).join(", ") || "General wellness")), /* @__PURE__ */ React21.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21.createElement("p", { className: "text-lg font-bold text-primary-600" }, formatPrice(product.finalPrice ?? 0)), product.isDiscounted && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-emerald-500" }, "You save ", formatPrice(Math.max((product.priceBeforeDiscount ?? 0) - (product.finalPrice ?? 0), 0))))), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-500" }, /* @__PURE__ */ React21.createElement("span", { className: `inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-medium ${product.inventoryCount > 0 ? "bg-emerald-100 text-emerald-700" : "bg-rose-100 text-rose-700"}` }, /* @__PURE__ */ React21.createElement(Package, { className: "h-3.5 w-3.5" }), product.inventoryCount > 0 ? "In stock" : "Backordered"), product.totalSold > 0 && /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-200 px-2.5 py-1 font-medium text-slate-700" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-3.5 w-3.5" }), product.totalSold, "+ purchased")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-2" }, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React21.createElement("div", { className: "flex flex-1 flex-col gap-2" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-secondary" }, product.name), /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted" }, product.parentCategories?.map((category) => category?.name).join(", ") || "General wellness")), /* @__PURE__ */ React21.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21.createElement("p", { className: "text-lg font-bold text-primary" }, formatPrice(product.finalPrice ?? 0)), product.isDiscounted && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-emerald-500" }, "You save ", formatPrice(Math.max((product.priceBeforeDiscount ?? 0) - (product.finalPrice ?? 0), 0))))), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-500" }, /* @__PURE__ */ React21.createElement("span", { className: `inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-medium ${product.inventoryCount > 0 ? "bg-emerald-100 text-emerald-700" : "bg-rose-100 text-rose-700"}` }, /* @__PURE__ */ React21.createElement(Package, { className: "h-3.5 w-3.5" }), product.inventoryCount > 0 ? "In stock" : "Backordered"), product.totalSold > 0 && /* @__PURE__ */ React21.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-200 px-2.5 py-1 font-medium text-slate-700" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-3.5 w-3.5" }), product.totalSold, "+ purchased")), /* @__PURE__ */ React21.createElement("div", { className: "flex flex-wrap gap-2" }, /* @__PURE__ */ React21.createElement(
         Button,
         {
           size: "sm",
@@ -11205,15 +11397,15 @@ function WishlistScreen() {
           size: "sm",
           variant: "outline",
           onClick: () => handleRemoveFromWishlist(product.id),
-          className: "text-primary-600"
+          className: "text-secondary"
         },
         "Remove"
       )))
-    ))))), isAuthenticated && emptyAfterFiltering && /* @__PURE__ */ React21.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.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500" }, /* @__PURE__ */ React21.createElement(Package, { className: "h-8 w-8" })), /* @__PURE__ */ React21.createElement("h3", { className: "mt-6 text-xl font-semibold text-slate-900" }, "Nothing matches those filters"), /* @__PURE__ */ React21.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.createElement(
+    ))))), isAuthenticated && emptyAfterFiltering && /* @__PURE__ */ React21.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.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500" }, /* @__PURE__ */ React21.createElement(Package, { className: "h-8 w-8" })), /* @__PURE__ */ React21.createElement("h3", { className: "mt-6 text-xl font-semibold text-secondary" }, "Nothing matches those filters"), /* @__PURE__ */ React21.createElement("p", { className: "mt-2 max-w-md text-sm text-muted" }, "Try showing out-of-stock items or adjust your sort order to revisit everything you've saved."), /* @__PURE__ */ React21.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",
+        className: "mt-6 rounded-xl border-2 border-primary bg-white px-6 py-3 text-sm font-medium text-secondary hover:opacity-80 transition-colors",
         onClick: () => setOnlyInStock(false)
       },
       "Show all saved products"
@@ -11321,67 +11513,17 @@ function SearchPage() {
   ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-bold text-gray-900 mb-6" }, searchQuery ? `Search results for "${searchQuery}"` : "Search Products"), isLoading ? /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" }, [...Array(8)].map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "space-y-3" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-48 w-full rounded-lg" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-3/4" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-1/2" })))) : products.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" }, products.map((product) => /* @__PURE__ */ React.createElement(
     ProductCard,
     {
+      key: product.id,
       product,
       isFavorited: isInWishlist(product.id),
       onClickProduct: (p) => router.push(buildPath(`/products/${p.id}`))
     }
-  ))) : hasSearched ? /* @__PURE__ */ React.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React.createElement("div", { className: "text-gray-500 text-lg mb-4" }, 'No products found for "', searchQuery, '"'), /* @__PURE__ */ React.createElement("p", { className: "text-gray-500 mb-6" }, "Try different keywords or check out our", " ", /* @__PURE__ */ React.createElement(Link8, { href: "/shop", className: "text-primary-600 hover:underline ml-1 font-medium" }, "featured products"))) : /* @__PURE__ */ React.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-500" }, "Enter a search term to find products"))));
-}
-function CategoriesScreen() {
-  const { categories, isLoading } = useCategories();
-  const router = useRouter();
-  const { buildPath } = useBasePath();
-  return /* @__PURE__ */ React21.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21.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.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21.createElement(
-    motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "space-y-6"
-    },
-    /* @__PURE__ */ React21.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.createElement(Package, { className: "h-4 w-4" }), "Product Categories"),
-    /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Browse Our Product Range"), /* @__PURE__ */ React21.createElement("p", { className: "max-w-2xl text-white/80 md:text-lg" }, "Explore our comprehensive selection of healthcare products, carefully curated by our pharmacists to meet all your wellness needs.")), /* @__PURE__ */ React21.createElement("div", { className: "rounded-3xl bg-white/15 p-6 backdrop-blur" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.35em] text-white/70" }, "Quick tip"), /* @__PURE__ */ React21.createElement("p", { className: "mt-3 text-sm text-white/80" }, "Use the categories below to quickly find the products you're looking for, or use the search function for specific items.")))
-  ))), /* @__PURE__ */ React21.createElement("div", { className: "relative -mt-16 pb-16" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement(
-    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.createElement("div", { className: "flex items-center gap-3 text-sm text-slate-500 mb-6" }, /* @__PURE__ */ React21.createElement(Sparkles, { className: "h-4 w-4 text-primary-500" }), /* @__PURE__ */ React21.createElement("span", null, "Browse our complete product catalog organized by categories.")),
-    isLoading ? /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" }, [...Array(8)].map((_, i) => /* @__PURE__ */ React21.createElement("div", { key: i, className: "animate-pulse" }, /* @__PURE__ */ React21.createElement("div", { className: "bg-gray-200 rounded-lg aspect-square mb-2" }), /* @__PURE__ */ React21.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-1" }), /* @__PURE__ */ React21.createElement("div", { className: "h-3 bg-gray-200 rounded w-1/2" })))) : categories.length > 0 ? /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" }, categories.map((category) => /* @__PURE__ */ React21.createElement(
-      Link8,
-      {
-        key: category.id,
-        href: buildPath(`/shop?category=${category.name}`),
-        className: "group block overflow-hidden rounded-xl border border-gray-100 bg-white p-4 text-center transition hover:shadow-lg hover:border-primary-500"
-      },
-      /* @__PURE__ */ React21.createElement("div", { className: "relative aspect-square w-full overflow-hidden rounded-lg bg-gray-50 mb-3" }, category.image ? /* @__PURE__ */ React21.createElement(
-        Image3,
-        {
-          src: category.image,
-          alt: category.name || "Category Image",
-          fill: true,
-          className: "object-cover transition-transform group-hover:scale-105",
-          sizes: "(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
-        }
-      ) : /* @__PURE__ */ React21.createElement("div", { className: "flex h-full w-full items-center justify-center bg-gray-100 text-gray-400" }, /* @__PURE__ */ React21.createElement(Package, { className: "h-12 w-12" }))),
-      /* @__PURE__ */ React21.createElement("h3", { className: "text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors" }, category.name),
-      category.productCount > 0 && /* @__PURE__ */ React21.createElement("p", { className: "mt-1 text-sm text-gray-500" }, category.productCount, " ", category.productCount === 1 ? "product" : "products")
-    ))) : /* @__PURE__ */ React21.createElement(
-      EmptyState,
-      {
-        title: "No categories found",
-        description: "There are currently no product categories available.",
-        icon: Package,
-        actionLabel: "Shop products",
-        onAction: () => router.push(buildPath("/shop"))
-      }
-    )
-  ))));
+  ))) : hasSearched ? /* @__PURE__ */ React.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React.createElement("div", { className: "text-gray-500 text-lg mb-4" }, 'No products found for "', searchQuery, '"'), /* @__PURE__ */ React.createElement("p", { className: "text-gray-500 mb-6" }, "Try different keywords or check out our", " ", /* @__PURE__ */ React.createElement(Link7, { href: "/shop", className: "text-primary-600 hover:underline ml-1 font-medium" }, "featured products"))) : /* @__PURE__ */ React.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-500" }, "Enter a search term to find products"))));
 }
 function NewAddressPage() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const notification = useNotification();
   const {
     register,
     handleSubmit,
@@ -11407,7 +11549,10 @@ function NewAddressPage() {
         country: data.country,
         phone: data.phone
       });
-      toast.success("Address added successfully");
+      notification.success(
+        "Address added",
+        "Your new address has been saved to your account."
+      );
       router.back();
     } catch (error) {
       let errorMessage = "An unexpected error occurred";
@@ -11422,15 +11567,17 @@ function NewAddressPage() {
       if (error.message === "Network Error") {
         errorMessage = "Unable to connect to the server. Please check your internet connection.";
       }
-      toast.error("Unable to save address", {
-        description: errorMessage,
-        duration: 5e3
-      });
+      notification.error(
+        "Unable to save address",
+        errorMessage,
+        5e3
+      );
       if (error.response?.status === 422) {
-        toast.info("Address validation failed", {
-          description: "Make sure your address is complete and formatted correctly.",
-          duration: 6e3
-        });
+        notification.info(
+          "Address validation failed",
+          "Make sure your address is complete and formatted correctly.",
+          6e3
+        );
       }
     } finally {
       setIsSubmitting(false);
@@ -11519,31 +11666,42 @@ function NewAddressPage() {
 }
 function Header() {
   const { config } = useTheme();
-  const { user, isAuthenticated } = useAuth();
+  const { user, isAuthenticated, logout } = useAuth();
   const { cart } = useCart() || { cart: { } };
   const { getWishlistCount } = useWishlist();
   const wishlistCount = getWishlistCount?.() || 0;
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const { buildPath } = useBasePath();
+  const router = useRouter();
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    try {
+      await logout();
+      router.push(buildPath("/"));
+    } catch (error) {
+      console.error("Logout failed:", error);
+    } finally {
+      setIsLoggingOut(false);
+      setIsDropdownOpen(false);
+    }
+  };
   const navLinks = [
-    { href: buildPath("/shop"), label: "Shop" },
-    { href: buildPath("/categories"), label: "Categories" },
-    { href: buildPath("/orders"), label: "Orders" },
-    { href: buildPath("/about"), label: "About" },
-    { href: buildPath("/contact"), label: "Contact" }
+    { href: buildPath("/shop"), label: "Shop" }
   ];
-  return /* @__PURE__ */ React21.createElement("header", { className: "sticky top-0 z-40 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between h-20" }, /* @__PURE__ */ React21.createElement(Link8, { href: buildPath("/"), className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "relative w-12 h-12" }, /* @__PURE__ */ React21.createElement(
-    Image3,
+  return /* @__PURE__ */ React21.createElement("header", { className: "sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center justify-between h-20" }, /* @__PURE__ */ React21.createElement(Link7, { href: buildPath("/"), className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement("div", { className: "relative w-12 h-12" }, /* @__PURE__ */ React21.createElement(
+    Image4,
     {
       src: config.logo,
       alt: config.storeName,
       fill: true,
       className: "object-contain"
     }
-  )), /* @__PURE__ */ React21.createElement("span", { className: "text-2xl font-bold text-gray-900 hidden sm:block" }, config.storeName)), /* @__PURE__ */ React21.createElement("nav", { className: "hidden lg:flex items-center gap-8" }, navLinks.map((link) => /* @__PURE__ */ React21.createElement(
-    Link8,
+  ))), /* @__PURE__ */ React21.createElement("nav", { className: "hidden lg:flex items-center gap-8" }, navLinks.map((link) => /* @__PURE__ */ React21.createElement(
+    Link7,
     {
       key: link.href,
       href: link.href,
@@ -11590,15 +11748,40 @@ function Header() {
       },
       /* @__PURE__ */ React21.createElement(X, { className: "w-4 h-4" })
     ))
-  ))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React21.createElement(Link8, { href: buildPath("/wishlist"), className: "relative p-2 text-gray-700 hover:text-red-500 transition-colors" }, /* @__PURE__ */ React21.createElement(Heart, { className: "w-6 h-6" }), wishlistCount > 0 && /* @__PURE__ */ React21.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center" }, wishlistCount)), /* @__PURE__ */ React21.createElement(Link8, { href: buildPath("/cart"), className: "relative p-2 text-gray-700 hover:text-primary-600 transition-colors" }, /* @__PURE__ */ React21.createElement(ShoppingCart, { className: "w-6 h-6" }), cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? /* @__PURE__ */ React21.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center" }, cart.cartBody?.items?.length) : null), isAuthenticated ? /* @__PURE__ */ React21.createElement(
-    Link8,
+  ))), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React21.createElement(Link7, { href: buildPath("/wishlist"), className: "relative p-2 text-gray-700 hover:text-red-500 transition-colors" }, /* @__PURE__ */ React21.createElement(Heart, { className: "w-6 h-6" }), wishlistCount > 0 && /* @__PURE__ */ React21.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center" }, wishlistCount)), /* @__PURE__ */ React21.createElement(Link7, { href: buildPath("/cart"), className: "relative p-2 text-gray-700 hover:text-primary-600 transition-colors" }, /* @__PURE__ */ React21.createElement(ShoppingCart, { className: "w-6 h-6" }), cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? /* @__PURE__ */ React21.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center" }, cart.cartBody?.items?.length) : null), isAuthenticated ? /* @__PURE__ */ React21.createElement("div", { className: "relative" }, /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      onClick: () => setIsDropdownOpen(!isDropdownOpen),
+      className: "flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 hover:bg-slate-50 transition-colors"
+    },
+    /* @__PURE__ */ React21.createElement("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700" }, getInitials(user?.firstname || "", user?.lastname || "")),
+    /* @__PURE__ */ React21.createElement(ChevronDown, { className: `h-4 w-4 text-slate-400 transition-transform ${isDropdownOpen ? "rotate-180" : ""}` })
+  ), isDropdownOpen && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      className: "fixed inset-0 z-10",
+      onClick: () => setIsDropdownOpen(false)
+    }
+  ), /* @__PURE__ */ React21.createElement("div", { className: "absolute right-0 top-full mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg z-20" }, /* @__PURE__ */ React21.createElement("div", { className: "p-2" }, /* @__PURE__ */ React21.createElement("div", { className: "px-3 py-2 border-b border-slate-200 mb-1" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium text-secondary truncate" }, user?.firstname, " ", user?.lastname), /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-slate-500 truncate" }, user?.email)), /* @__PURE__ */ React21.createElement(
+    Link7,
     {
       href: buildPath("/account"),
-      className: "p-2 hover:bg-gray-100 rounded-lg transition-colors"
+      onClick: () => setIsDropdownOpen(false),
+      className: "flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 transition-colors"
     },
-    /* @__PURE__ */ React21.createElement(User, { className: "w-6 h-6 text-gray-700" })
-  ) : /* @__PURE__ */ React21.createElement(
-    Link8,
+    /* @__PURE__ */ React21.createElement(User, { className: "h-4 w-4" }),
+    "My Account"
+  ), /* @__PURE__ */ React21.createElement("div", { className: "my-1 border-t border-slate-200" }), /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      onClick: handleLogout,
+      disabled: isLoggingOut,
+      className: "flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+    },
+    /* @__PURE__ */ React21.createElement(LogOut, { className: "h-4 w-4" }),
+    isLoggingOut ? "Signing out..." : "Sign Out"
+  ))))) : /* @__PURE__ */ React21.createElement(
+    Link7,
     {
       href: buildPath("/login"),
       className: "hidden sm:block px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
@@ -11620,7 +11803,7 @@ function Header() {
       className: "lg:hidden overflow-hidden border-t border-gray-200"
     },
     /* @__PURE__ */ React21.createElement("nav", { className: "flex flex-col gap-1 py-2" }, navLinks.map((link) => /* @__PURE__ */ React21.createElement(
-      Link8,
+      Link7,
       {
         key: link.href,
         href: link.href,
@@ -11629,7 +11812,7 @@ function Header() {
       },
       link.label
     )), !isAuthenticated && /* @__PURE__ */ React21.createElement(
-      Link8,
+      Link7,
       {
         href: buildPath("/login"),
         onClick: () => setIsMobileMenuOpen(false),
@@ -11668,21 +11851,21 @@ function Footer() {
     ]
   };
   return /* @__PURE__ */ React21.createElement("footer", { className: "bg-gray-900 text-gray-300" }, /* @__PURE__ */ React21.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12" }, /* @__PURE__ */ React21.createElement("div", { className: "lg:col-span-2" }, /* @__PURE__ */ React21.createElement("h3", { className: "text-2xl font-bold text-white mb-4" }, config.storeName), /* @__PURE__ */ React21.createElement("p", { className: "text-gray-400 mb-6 max-w-md" }, "Your trusted online store for quality products. We deliver excellence with every order."), /* @__PURE__ */ React21.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(Mail, { className: "w-5 h-5 text-primary-500" }), /* @__PURE__ */ React21.createElement("span", null, "support@", config.storeName.toLowerCase().replace(/\s+/g, ""), ".com")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(Phone, { className: "w-5 h-5 text-primary-500" }), /* @__PURE__ */ React21.createElement("span", null, "+1 (555) 123-4567")), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21.createElement(MapPin, { className: "w-5 h-5 text-primary-500" }), /* @__PURE__ */ React21.createElement("span", null, "123 Store Street, City, Country")))), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h4", { className: "text-lg font-semibold text-white mb-4" }, "Shop"), /* @__PURE__ */ React21.createElement("ul", { className: "space-y-2" }, footerLinks.shop.map((link) => /* @__PURE__ */ React21.createElement("li", { key: link.href }, /* @__PURE__ */ React21.createElement(
-    Link8,
+    Link7,
     {
       href: link.href,
       className: "hover:text-primary-500 transition-colors"
     },
     link.label
   ))))), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h4", { className: "text-lg font-semibold text-white mb-4" }, "Account"), /* @__PURE__ */ React21.createElement("ul", { className: "space-y-2" }, footerLinks.account.map((link) => /* @__PURE__ */ React21.createElement("li", { key: link.href }, /* @__PURE__ */ React21.createElement(
-    Link8,
+    Link7,
     {
       href: link.href,
       className: "hover:text-primary-500 transition-colors"
     },
     link.label
   ))))), /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("h4", { className: "text-lg font-semibold text-white mb-4" }, "Support"), /* @__PURE__ */ React21.createElement("ul", { className: "space-y-2" }, footerLinks.support.map((link) => /* @__PURE__ */ React21.createElement("li", { key: link.href }, /* @__PURE__ */ React21.createElement(
-    Link8,
+    Link7,
     {
       href: link.href,
       className: "hover:text-primary-500 transition-colors"
@@ -11712,6 +11895,6 @@ function Footer() {
   )))));
 }
 
-export { AddressesScreen, AuthProvider, Badge, Button, CartItem, CartProvider, CartScreen, CategoriesScreen, CheckoutScreen, CurrentOrdersScreen, EcommerceProvider, EmptyState, Footer, Header, Input, LoginScreen, Modal, NewAddressPage as NewAddressScreen, OrderCard, OrderCardSkeleton, OrdersScreen, ProductCard, ProductCardSkeleton, ProductDetailScreen, ProfileScreen, RegisterScreen, SearchPage as SearchResultsScreen, ShopScreen, Skeleton, ThemeProvider, WishlistProvider, WishlistScreen, formatDate, formatPrice, generateColorShades, getApiConfiguration, getInitials, hexToRgb, initializeApiAdapter, truncate, useAddresses, useAuth, useBasePath, useCart, useCategories, useCurrentOrders, useOrder, useOrders, useProduct, useProducts, useTheme, useWishlist };
+export { AddressesScreen, AuthProvider, Badge, Button, CartItem, CartProvider, CartScreen, CheckoutScreen, CurrentOrdersScreen, EcommerceProvider, EmptyState, Footer, Header, Input, LoginScreen, Modal, NewAddressPage as NewAddressScreen, OrderCard, OrderCardSkeleton, OrdersScreen, ProductCard, ProductCardSkeleton, ProductDetailScreen, ProfileScreen, RegisterScreen, SearchPage as SearchResultsScreen, ShopScreen, Skeleton, ThemeProvider, WishlistProvider, WishlistScreen, formatDate, formatPrice, generateColorShades, getApiConfiguration, getInitials, hexToRgb, initializeApiAdapter, truncate, useAddresses, useAuth, useBasePath, useCart, useCategories, useCurrentOrders, useOrder, useOrders, useProduct, useProducts, useTheme, useWishlist };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map