hey-pharmacist-ecommerce 1.1.13 → 1.1.14

package/dist/index.js

@@ -3,14 +3,13 @@
 
 var React21 = require('react');
 var globalAxios4 = require('axios');
-var sonner = require('sonner');
-var reactQuery = require('@tanstack/react-query');
 var framerMotion = require('framer-motion');
 var lucideReact = require('lucide-react');
-var Image3 = require('next/image');
+var reactQuery = require('@tanstack/react-query');
 var navigation = require('next/navigation');
+var Image4 = require('next/image');
 var dynamic = require('next/dynamic');
-var Link8 = require('next/link');
+var Link7 = require('next/link');
 var reactHookForm = require('react-hook-form');
 var zod$1 = require('@hookform/resolvers/zod');
 var zod = require('zod');
@@ -19,9 +18,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React21__default = /*#__PURE__*/_interopDefault(React21);
 var globalAxios4__default = /*#__PURE__*/_interopDefault(globalAxios4);
-var Image3__default = /*#__PURE__*/_interopDefault(Image3);
+var Image4__default = /*#__PURE__*/_interopDefault(Image4);
 var dynamic__default = /*#__PURE__*/_interopDefault(dynamic);
-var Link8__default = /*#__PURE__*/_interopDefault(Link8);
+var Link7__default = /*#__PURE__*/_interopDefault(Link7);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -6767,6 +6766,144 @@ var PaymentPaymentStatusEnum = /* @__PURE__ */ ((PaymentPaymentStatusEnum2) => {
 
 // src/lib/api-adapter/index.ts
 init_config();
+var notificationConfig = {
+  success: {
+    icon: lucideReact.CheckCircle2,
+    gradient: "from-emerald-500 to-green-600",
+    iconColor: "text-emerald-600",
+    bgColor: "bg-emerald-50",
+    borderColor: "border-emerald-200"
+  },
+  error: {
+    icon: lucideReact.XCircle,
+    gradient: "from-red-500 to-rose-600",
+    iconColor: "text-red-600",
+    bgColor: "bg-red-50",
+    borderColor: "border-red-200"
+  },
+  warning: {
+    icon: lucideReact.AlertCircle,
+    gradient: "from-orange-500 to-amber-600",
+    iconColor: "text-orange-600",
+    bgColor: "bg-orange-50",
+    borderColor: "border-orange-200"
+  },
+  info: {
+    icon: lucideReact.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] = React21.useState(100);
+  const config = notificationConfig[notification.type];
+  const Icon = config.icon;
+  const duration = notification.duration || 4e3;
+  React21.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__default.default.createElement(
+    framerMotion.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__default.default.createElement("div", { className: `h-1 bg-gradient-to-r ${config.gradient}` }),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "p-4 flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement(
+      framerMotion.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__default.default.createElement(Icon, { className: `size-5 ${config.iconColor}` })
+    ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] mb-1" }, notification.message), notification.description && /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[12px] text-[#676c80] leading-relaxed" }, notification.description)), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.X, { className: "size-4 text-[#676c80]" })
+    )),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-1 bg-gray-100" }, /* @__PURE__ */ React21__default.default.createElement(
+      framerMotion.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__default.default.createElement("div", { className: "fixed top-4 right-4 z-[9999] flex flex-col gap-3 pointer-events-none" }, /* @__PURE__ */ React21__default.default.createElement(framerMotion.AnimatePresence, { mode: "popLayout" }, notifications.map((notification) => /* @__PURE__ */ React21__default.default.createElement("div", { key: notification.id, className: "pointer-events-auto" }, /* @__PURE__ */ React21__default.default.createElement(Notification, { notification, onDismiss })))));
+}
+
+// src/providers/NotificationProvider.tsx
+var NotificationContext = React21.createContext(void 0);
+function useNotification() {
+  const context = React21.useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotification must be used within NotificationProvider");
+  }
+  return context;
+}
+function NotificationProvider({ children }) {
+  const [notifications, setNotifications] = React21.useState([]);
+  const addNotification = React21.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 = React21.useCallback((id) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+  const value = {
+    success: React21.useCallback(
+      (message, description, duration) => addNotification("success", message, description, duration),
+      [addNotification]
+    ),
+    error: React21.useCallback(
+      (message, description, duration) => addNotification("error", message, description, duration),
+      [addNotification]
+    ),
+    warning: React21.useCallback(
+      (message, description, duration) => addNotification("warning", message, description, duration),
+      [addNotification]
+    ),
+    info: React21.useCallback(
+      (message, description, duration) => addNotification("info", message, description, duration),
+      [addNotification]
+    )
+  };
+  return /* @__PURE__ */ React21__default.default.createElement(NotificationContext.Provider, { value }, children, /* @__PURE__ */ React21__default.default.createElement(NotificationContainer, { notifications, onDismiss: dismissNotification }));
+}
 
 // src/providers/CartProvider.tsx
 var CartContext = React21.createContext(void 0);
@@ -6781,6 +6918,7 @@ function CartProvider({ children }) {
   const [cart, setCart] = React21.useState(null);
   const [isLoading, setIsLoading] = React21.useState(false);
   const { isAuthenticated } = useAuth();
+  const notification = useNotification();
   const refreshCart = React21.useCallback(async () => {
     if (!isAuthenticated) {
       setCart(null);
@@ -6818,9 +6956,15 @@ function CartProvider({ children }) {
       }
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
-      sonner.toast.success("Added to cart!");
+      notification.success(
+        "Added to cart",
+        "The item was added to your cart."
+      );
     } catch (error) {
-      sonner.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);
@@ -6842,7 +6986,10 @@ function CartProvider({ children }) {
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error) {
-      sonner.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);
@@ -6856,7 +7003,10 @@ function CartProvider({ children }) {
       const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error) {
-      sonner.toast.error(error.response?.data?.message || "Failed to remove from cart");
+      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);
@@ -6868,7 +7018,10 @@ function CartProvider({ children }) {
       const response = await new CartApi(getApiConfiguration()).clearCart();
       setCart(null);
     } catch (error) {
-      sonner.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);
@@ -6934,6 +7087,7 @@ function WishlistProvider({ children }) {
     products: []
   });
   const { isAuthenticated } = useAuth() || {};
+  const notification = useNotification();
   const wishlistApi = React21.useMemo(() => new WishlistApi(AXIOS_CONFIG), []);
   const fetchWishlist = React21.useCallback(async () => {
     if (!isAuthenticated) {
@@ -6969,20 +7123,32 @@ function WishlistProvider({ children }) {
   }, [fetchWishlist]);
   const addToWishlist = async (product) => {
     if (!isAuthenticated) {
-      sonner.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 || "")) {
-        sonner.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();
-      sonner.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);
-      sonner.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;
     }
   };
@@ -6996,10 +7162,16 @@ function WishlistProvider({ children }) {
           products: newProducts
         };
       });
-      sonner.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);
-      sonner.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;
     }
   };
@@ -7010,10 +7182,16 @@ function WishlistProvider({ children }) {
         ...prev,
         products: []
       }));
-      sonner.toast.success("Wishlist cleared");
+      notification.success(
+        "Wishlist cleared",
+        "All items have been removed from your wishlist."
+      );
     } catch (error) {
       console.error("Error clearing wishlist:", error);
-      sonner.toast.error("Failed to clear wishlist");
+      notification.error(
+        "Could not clear wishlist",
+        "We could not clear your wishlist. Please try again."
+      );
       throw error;
     }
   };
@@ -7073,7 +7251,7 @@ function EcommerceProvider({ config, children, withToaster = true, basePath = ""
   const [client] = React21__default.default.useState(
     new reactQuery.QueryClient({ defaultOptions: { queries: { staleTime: 5e3 } } })
   );
-  return /* @__PURE__ */ React21__default.default.createElement(reactQuery.QueryClientProvider, { client }, /* @__PURE__ */ React21__default.default.createElement(ThemeProvider, { config }, /* @__PURE__ */ React21__default.default.createElement(BasePathProvider, { basePath }, /* @__PURE__ */ React21__default.default.createElement(AuthProvider, null, /* @__PURE__ */ React21__default.default.createElement(CartProvider, null, /* @__PURE__ */ React21__default.default.createElement(WishlistProvider, null, children, withToaster && /* @__PURE__ */ React21__default.default.createElement(sonner.Toaster, { position: "top-right", richColors: true })))))));
+  return /* @__PURE__ */ React21__default.default.createElement(reactQuery.QueryClientProvider, { client }, /* @__PURE__ */ React21__default.default.createElement(ThemeProvider, { config }, /* @__PURE__ */ React21__default.default.createElement(BasePathProvider, { basePath }, /* @__PURE__ */ React21__default.default.createElement(AuthProvider, null, /* @__PURE__ */ React21__default.default.createElement(NotificationProvider, null, /* @__PURE__ */ React21__default.default.createElement(CartProvider, null, /* @__PURE__ */ React21__default.default.createElement(WishlistProvider, null, children)))))));
 }
 
 // src/lib/utils/format.ts
@@ -7107,6 +7285,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] = React21.useState(0);
+  const [selectedSizeIndex, setSelectedSizeIndex] = React21.useState(0);
+  const [selectedImageIndex, setSelectedImageIndex] = React21.useState(0);
+  const [addedToCart, setAddedToCart] = React21.useState(false);
+  const [quantity, setQuantity] = React21.useState(1);
+  const { addToCart } = useCart();
+  const [isAddingToCart, setIsAddingToCart] = React21.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(
+        lucideReact.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(lucideReact.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(lucideReact.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(lucideReact.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__default.default,
+          {
+            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(lucideReact.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(lucideReact.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(lucideReact.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(lucideReact.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(lucideReact.ExternalLink, { className: "size-4" })
+      )))))
+    )
+  );
+}
+
+// src/components/ProductCard.tsx
 function ProductCard({
   product,
   onClickProduct,
@@ -7115,7 +7445,7 @@ function ProductCard({
   showFavoriteButton = true,
   className
 }) {
-  const router = navigation.useRouter();
+  navigation.useRouter();
   const { buildPath } = useBasePath();
   const [isFavorite, setIsFavorite] = React21.useState(isFavorited);
   const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
@@ -7124,6 +7454,8 @@ function ProductCard({
   const [isImageLoaded, setIsImageLoaded] = React21.useState(false);
   const [selectedVariantImage, setSelectedVariantImage] = React21.useState(null);
   const [selectedVariantId, setSelectedVariantId] = React21.useState(null);
+  const [showQuickView, setShowQuickView] = React21.useState(false);
+  const notification = useNotification();
   const handleImageLoad = React21.useCallback(() => {
     setIsImageLoaded(true);
   }, []);
@@ -7133,24 +7465,6 @@ function ProductCard({
       onClickProduct(product);
     }
   }, [onClickProduct, product]);
-  const handleFavorite = async (e) => {
-    e.stopPropagation();
-    try {
-      if (isInWishlist(product?._id || "")) {
-        await removeFromWishlist(product?._id || "");
-        setIsFavorite(false);
-        sonner.toast.success("Removed from wishlist");
-      } else {
-        await addToWishlist(product);
-        setIsFavorite(true);
-        sonner.toast.success("Added to wishlist");
-      }
-      onFavorite?.(product);
-    } catch (error) {
-      console.error("Error updating wishlist:", error);
-      sonner.toast.error("Failed to update wishlist");
-    }
-  };
   React21.useEffect(() => {
     setIsFavorite(isInWishlist(product?._id || "") || isFavorited);
   }, [isFavorited, isInWishlist, product?._id]);
@@ -7158,7 +7472,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();
@@ -7195,10 +7516,10 @@ function ProductCard({
   React21.useEffect(() => {
     setIsImageLoaded(false);
   }, [imageSource.src]);
-  return /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.article,
+  return /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement(
+    framerMotion.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),
@@ -7208,59 +7529,46 @@ function ProductCard({
       onClick: handleCardClick,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50" }, /* @__PURE__ */ React21__default.default.createElement(framerMotion.AnimatePresence, null, !isImageLoaded && /* @__PURE__ */ React21__default.default.createElement(
-      framerMotion.motion.div,
-      {
-        className: "absolute inset-0 bg-gray-200 animate-pulse",
-        initial: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.2 }
-      }
-    )), /* @__PURE__ */ React21__default.default.createElement(
-      Image3__default.default,
-      {
-        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__default.default.createElement("div", { className: "absolute top-3 left-3 flex flex-col gap-2 z-10" }, product.isDiscounted && /* @__PURE__ */ React21__default.default.createElement(
-      framerMotion.motion.span,
-      {
-        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__default.default.createElement(
-      framerMotion.motion.span,
+    /* @__PURE__ */ React21__default.default.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__default.default.createElement(
-      framerMotion.motion.button,
+      /* @__PURE__ */ React21__default.default.createElement(
+        Image4__default.default,
+        {
+          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__default.default.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__default.default.createElement(lucideReact.Eye, { className: "size-4 text-[#2B4B7C]" })
+      ),
+      product.inventoryCount === 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white rounded-full px-4 py-2" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[11px] text-[#2B4B7C] uppercase" }, "Out of Stock")))
+    ),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "p-4 flex-1 flex flex-col" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "p-0 flex-1 flex flex-col" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1 mb-2 flex-wrap" }, product.isDiscounted && /* @__PURE__ */ React21__default.default.createElement("span", { className: "bg-[#E67E50] text-white rounded-full px-2 py-0.5 flex items-center gap-1" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[8px] uppercase" }, "-", product.discountAmount, "%"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-xs text-[#5B9BD5] uppercase tracking-wide font-medium" }, product.brand)), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-sm font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-3" }, displayName), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1.5 mb-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-0.5" }, [...Array(5)].map((_, i) => /* @__PURE__ */ React21__default.default.createElement(
+      lucideReact.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__default.default.createElement(lucideReact.Heart, { className: `w-5 h-5 ${isFavorite ? "fill-red-500 text-red-500" : ""}` })
-    )),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute top-4 left-4 flex flex-col gap-2" }, product.inventoryCount === 0 && /* @__PURE__ */ React21__default.default.createElement("span", { className: "px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-800" }, "Out of Stock")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "p-4" }, product.parentCategories && product.parentCategories?.length > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500 uppercase tracking-wider mb-1" }, product.parentCategories?.map((category) => category?.name).join(", ") || "No categories"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-primary-600 transition-colors" }, displayName)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-2xl font-bold text-gray-900" }, formatPrice(product.finalPrice)), product.inventoryCount > 0 && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xs text-gray-500" }, product.inventoryCount > 0 ? "In Stock" : "Out of Stock")), product.priceBeforeDiscount && product.priceBeforeDiscount > product.finalPrice && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm text-gray-500 line-through" }, formatPrice(product.priceBeforeDiscount))), variantImages.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 mt-3" }, variantImages.map((variant, index) => /* @__PURE__ */ React21__default.default.createElement(
+        key: i,
+        className: `size-4 ${i < Math.floor(product.rating ? product.rating : 0) ? "text-[#E67E50] fill-[#E67E50]" : "text-gray-300"}`
+      }
+    ))), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[10px] text-[#676c80]" }, "(", product.reviews?.length || 0, ")")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1.5 mb-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-md text-primary-600" }, "$", product.finalPrice.toFixed(2)), product.isDiscounted && /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-sm text-[#676c80] line-through" }, "$", formatPrice(product.priceBeforeDiscount))), variantImages.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1.5 mb-3" }, variantImages.map((variant, index) => /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         key: variant.variantId || index,
@@ -7280,7 +7588,7 @@ function ProductCard({
         "aria-label": `Select ${variant.color || "variant"} color`
       },
       /* @__PURE__ */ React21__default.default.createElement(
-        Image3__default.default,
+        Image4__default.default,
         {
           src: variant.image,
           alt: variant.color || `Variant ${index + 1}`,
@@ -7289,15 +7597,17 @@ function ProductCard({
           sizes: "32px"
         }
       )
-    )))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-auto p-4 pt-0" }, /* @__PURE__ */ React21__default.default.createElement(
+    )))), /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         type: "button",
         onClick: async (e) => {
           e.stopPropagation();
           if (!selectedVariantId && variantImages.length > 0) {
-            sonner.toast.error("Please select a variant");
+            notification.error(
+              "Select a variant",
+              "Please choose a variant before adding this item to your cart."
+            );
             return;
           }
           try {
@@ -7311,23 +7621,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__default.default.createElement(lucideReact.ShoppingCart, { className: "h-4 w-4" }),
-      "Add to Cart"
-    ), /* @__PURE__ */ React21__default.default.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__default.default.createElement(
+    QuickViewModal,
+    {
+      product,
+      onClose: () => setShowQuickView(false),
+      onNavigateToProduct: () => handleCardClick
+    }
+  ));
 }
 function Skeleton({ className = "" }) {
   return /* @__PURE__ */ React21__default.default.createElement("div", { className: `animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] rounded ${className}` });
@@ -7350,7 +7656,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",
@@ -7519,8 +7825,6 @@ function useCategories() {
   }, []);
   return { categories, isLoading, error };
 }
-
-// src/screens/ShopScreen.tsx
 function ShopScreen({ initialFilters = {}, categoryName }) {
   const router = navigation.useRouter();
   const { buildPath } = useBasePath();
@@ -7721,7 +8025,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     },
     []
   );
-  const handleSubCategoryChange = React21.useCallback((parentCategoryId, subCategoryId) => {
+  React21.useCallback((parentCategoryId, subCategoryId) => {
     setFilters((current) => {
       if (current.subCategory === subCategoryId) {
         const { subCategory, ...rest } = current;
@@ -8029,124 +8333,83 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     if (name.includes("care") || name.includes("personal")) return lucideReact.Heart;
     return lucideReact.Package;
   };
-  const renderFiltersPanel = () => /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-bold text-slate-900" }, "Filters"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "text-sm font-medium text-slate-600" }, "Search Products"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), /* @__PURE__ */ React21__default.default.createElement(
+  const renderFiltersPanel = () => /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: `lg:w-72 ${showFilters ? "block rounded-full" : "hidden lg:block"}` }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white rounded-[24px] p-6 border-2 border-gray-100 sticky top-24" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-secondary" }, "Filters"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted mb-2 block font-medium" }, "Search Products"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted" }), /* @__PURE__ */ React21__default.default.createElement(
     "input",
     {
       type: "text",
       placeholder: "Search...",
       value: searchQuery,
       onChange: handleInputChange,
-      className: "w-full rounded-lg border border-slate-200 bg-white pl-10 pr-4 py-2 text-sm text-slate-900 placeholder-slate-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+      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__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("category"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("span", null, "Category"),
-    expandedFilterSections.category ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
-  ), expandedFilterSections.category && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: handleClearCategory,
-      className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${!categoryFilter ? "bg-primary-600 text-white" : "bg-white text-slate-700 border border-slate-200 hover:border-primary-300"}`
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: `flex h-6 w-6 items-center justify-center rounded ${!categoryFilter ? "bg-white/20" : "bg-slate-100"}` }, !categoryFilter ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: "h-4 w-4 text-slate-600" })),
-    /* @__PURE__ */ React21__default.default.createElement("span", null, "All Products")
-  ), sortedCategories.map((category) => {
+    /* @__PURE__ */ React21__default.default.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Category"),
+    expandedFilterSections.category ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.category ? "rotate-180" : ""}` }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.category ? "rotate-180" : ""}` })
+  ), expandedFilterSections.category && /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { key: category.id, className: "space-y-1" }, /* @__PURE__ */ React21__default.default.createElement(
+    return /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: `flex h-6 w-6 items-center justify-center rounded ${isCategoryActive ? "bg-white/20" : "bg-slate-100"}` }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: `h-4 w-4 ${isCategoryActive ? "text-white" : "text-slate-600"}` })),
-      /* @__PURE__ */ React21__default.default.createElement("span", { className: "flex-1 text-left" }, category.name),
-      Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            toggleCategoryExpand(category.id ?? "");
-          },
-          className: "p-1"
-        },
-        /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-180" : ""} ${isCategoryActive ? "text-white" : "text-slate-400"}` })
-      )
-    ), isExpanded && Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "ml-9 space-y-1" }, category.categorySubCategories.map((sub) => {
-      const isSubActive = subCategoryFilter === sub.id;
-      return /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "size-4" }),
+      category.name
+    );
+  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("brand"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21__default.default.createElement("span", null, "Brand"),
-    expandedFilterSections.brand ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
-  ), expandedFilterSections.brand && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-1.5 max-h-64 overflow-y-auto" }, availableBrands.length === 0 ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-xs text-slate-500" }, "No brands available") : availableBrands.map((brand) => {
+    /* @__PURE__ */ React21__default.default.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Brand"),
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.brand ? "rotate-180" : ""}` })
+  ), expandedFilterSections.brand && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, availableBrands.length === 0 ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-xs text-slate-500" }, "No brands available") : availableBrands.map((brand) => {
     const isSelected = brandFilter === brand;
     return /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         key: brand,
-        type: "button",
         onClick: () => handleBrandChange(brand),
-        className: `flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-xs font-medium transition ${isSelected ? "border-primary-500 bg-primary-50 text-primary-700" : "border-slate-200 bg-white text-slate-600 hover:border-primary-300"}`
+        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__default.default.createElement("span", { className: "truncate" }, brand),
-      isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-3 w-3 text-primary-600 flex-shrink-0 ml-2" })
+      brand
     );
-  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("availability"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21__default.default.createElement("span", null, "Availability"),
-    expandedFilterSections.availability ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
+    /* @__PURE__ */ React21__default.default.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Availability"),
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.availability ? "rotate-180" : ""}` })
   ), expandedFilterSections.availability && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
-      type: "button",
       onClick: handleToggleStock,
-      className: `flex w-full items-center justify-between rounded-lg border px-3 py-2.5 text-sm font-medium transition ${inStockOnly ? "border-primary-500 bg-primary-50 text-primary-700" : "border-slate-200 bg-white text-slate-600 hover:border-primary-300"}`
+      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__default.default.createElement("span", null, "In stock only"),
-    inStockOnly && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4 text-primary-600" })
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+    "In Stock Only"
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
-      type: "button",
       onClick: () => toggleFilterSection("price"),
-      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+      className: "w-full flex items-center justify-between mb-3"
     },
-    /* @__PURE__ */ React21__default.default.createElement("span", null, "Price Range"),
-    expandedFilterSections.price ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
-  ), expandedFilterSections.price && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, priceRanges.map((range) => {
+    /* @__PURE__ */ React21__default.default.createElement("label", { className: "font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer" }, "Price Range"),
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `size-4 text-muted transition-transform ${expandedFilterSections.price ? "rotate-180" : ""}` })
+  ), expandedFilterSections.price && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, priceRanges.map((range) => {
     const isActive = selectedPriceRange === range.value;
     return /* @__PURE__ */ React21__default.default.createElement(
       "button",
@@ -8154,7 +8417,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
     );
@@ -8166,7 +8429,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__default.default.createElement(
     Input,
@@ -8176,7 +8439,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__default.default.createElement(
     "button",
@@ -8184,10 +8447,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 = React21.useMemo(() => {
     return topCategories.slice(0, 5);
   }, [topCategories]);
@@ -8199,7 +8462,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     if (name.includes("care") || name.includes("personal")) return lucideReact.Heart;
     return lucideReact.Package;
   };
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-[#F9FAFB]" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-[#E6EBF0] py-16 md:py-24" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-[#F9FAFB]" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-primary-bg py-16 md:py-24" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 24 },
@@ -8228,33 +8491,20 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         }
       ))
     )
-  ))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "bg-white py-8 " }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl md:text-3xl font-bold text-slate-900 mb-8" }, "Shop by Category"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6" }, isLoadingCategories ? (
-    // Skeleton loaders
-    /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(
-      "div",
-      {
-        key: index,
-        className: "rounded-xl border border-slate-200 bg-white p-8"
-      },
-      /* @__PURE__ */ React21__default.default.createElement(Skeleton, { className: "h-10 w-10 mb-4 rounded-lg" }),
-      /* @__PURE__ */ React21__default.default.createElement(Skeleton, { className: "h-6 w-3/4 mb-2 rounded" }),
-      /* @__PURE__ */ React21__default.default.createElement(Skeleton, { className: "h-4 w-1/2 rounded" })
-    )))
-  ) : /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.button,
-    {
-      initial: { opacity: 0, y: 20 },
-      animate: { opacity: 1, y: 0 },
-      onClick: handleClearCategory,
-      className: `group relative overflow-hidden rounded-xl p-8 text-left transition ${!categoryFilter ? "bg-gradient-to-b from-primary-500 to-primary-300 text-white shadow-lg scale-105" : "border border-slate-200 bg-white hover:border-primary-300 hover:shadow-md"}`
-    },
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: `h-10 w-10 mb-4 ${!categoryFilter ? "text-white" : "text-primary-500"}` }),
-    /* @__PURE__ */ React21__default.default.createElement("h3", { className: `text-xl font-bold mb-2 ${!categoryFilter ? "text-white" : "text-slate-900 group-hover:text-primary-600"}` }, "All Products"),
-    /* @__PURE__ */ React21__default.default.createElement("p", { className: `text-sm ${!categoryFilter ? "text-white/90" : "text-slate-500"}` }, "Browse everything")
-  ), displayCategories.map((category, index) => {
+  ))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "py-8 bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-[1400px] mx-auto px-8 md:px-12" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-secondary mb-6" }, "Shop by Category"), /* @__PURE__ */ React21__default.default.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__default.default.createElement(
+    return /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement(
+      framerMotion.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__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(Icon, { className: `size-6 ${!categoryFilter ? "text-white" : "text-primary"}` })), /* @__PURE__ */ React21__default.default.createElement("h3", { className: `font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? "text-white" : "text-secondary"}` }, "All Products"), /* @__PURE__ */ React21__default.default.createElement("p", { className: `font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? "text-white/80" : "text-muted"}` }, "Browse Everything"))
+    ), /* @__PURE__ */ React21__default.default.createElement(
       framerMotion.motion.button,
       {
         key: category.id,
@@ -8262,56 +8512,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__default.default.createElement(Icon, { className: `h-10 w-10 mb-4 ${isSelected ? "text-white" : "text-primary-500"}` }),
-      /* @__PURE__ */ React21__default.default.createElement("h3", { className: `text-xl font-bold mb-2 transition-colors ${isSelected ? "text-white" : "text-slate-900 group-hover:text-primary-600"}` }, category.name),
-      /* @__PURE__ */ React21__default.default.createElement("p", { className: `text-sm ${isSelected ? "text-white/90" : "text-slate-500"}` }, category.name?.toLowerCase().includes("scrub") ? "Professional uniforms" : category.name?.toLowerCase().includes("vitamin") ? "Health supplements" : category.name?.toLowerCase().includes("medicine") ? "OTC medications" : category.name?.toLowerCase().includes("care") ? "Daily essentials" : "Shop now")
-    );
-  }))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative z-10  pb-16 mt-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-8 lg:flex-row" }, /* @__PURE__ */ React21__default.default.createElement("aside", { className: "hidden w-72 flex-shrink-0 lg:block" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "sticky top-24 rounded-lg bg-white p-6" }, renderFiltersPanel())), /* @__PURE__ */ React21__default.default.createElement("main", { className: "flex-1 space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-gray-100 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-base font-medium text-gray-700" }, isLoading ? "Loading products..." : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowUpDown, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(Icon, { className: `size-6 ${isSelected ? "text-white" : "text-primary"}` })), /* @__PURE__ */ React21__default.default.createElement("h3", { className: `font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? "text-white" : "text-secondary"}` }, category.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: `font-['Poppins',sans-serif] text-[11px] ${isSelected ? "text-white/80" : "text-muted"}` }, category.description))
+    ));
+  })))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative pb-16 mt-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-8 lg:flex-row" }, /* @__PURE__ */ React21__default.default.createElement("aside", { className: "hidden w-72 flex-shrink-0 lg:block" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "sticky top-24 rounded-lg bg-white" }, renderFiltersPanel())), /* @__PURE__ */ React21__default.default.createElement("main", { className: "flex-1 space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-gray-100 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-base font-medium text-gray-700" }, isLoading ? "Loading products..." : `${displayedProducts.length} products found`)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowUpDown, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), /* @__PURE__ */ React21__default.default.createElement(
     "select",
     {
       value: sortOption,
       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__default.default.createElement("option", { value: "featured" }, "Featured products"),
     /* @__PURE__ */ React21__default.default.createElement("option", { value: "price-low-high" }, "Price: low to high"),
     /* @__PURE__ */ React21__default.default.createElement("option", { value: "price-high-low" }, "Price: high to low"),
     /* @__PURE__ */ React21__default.default.createElement("option", { value: "newest" }, "Newest arrivals")
-  ), /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center rounded-xl border border-gray-200 bg-white shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(
+  ), /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center rounded-full border border-gray-200 bg-gray-100 shadow-sm p-1" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.LayoutGrid, { className: "h-4 w-4" }),
-    "Grid"
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.LayoutGrid, { className: "h-4 w-4" })
   ), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.LayoutList, { className: "h-4 w-4" }),
-    "List"
-  )))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-4 md:hidden" }, /* @__PURE__ */ React21__default.default.createElement(
-    Button,
-    {
-      variant: "outline",
-      className: "w-full",
-      onClick: () => setShowFilters(true)
-    },
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.SlidersHorizontal, { className: "h-5 w-5" }),
-    "Filters",
-    hasActiveFilters && /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "mt-6 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-4" }, activeFilterChips.map((chip) => /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.LayoutList, { className: "h-4 w-4" })
+  )))), hasActiveFilters && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-4" }, activeFilterChips.map((chip) => /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       key: chip.key,
@@ -8350,7 +8586,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         onClick: () => router.push(buildPath(`/products/${product._id}`))
       },
       /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40" }, /* @__PURE__ */ React21__default.default.createElement(
-        Image3__default.default,
+        Image4__default.default,
         {
           src: product.productMedia[0]?.file || "/placeholder-product.jpg",
           alt: product.name,
@@ -8366,14 +8602,14 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         },
         tag
       ))), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-xl font-semibold text-gray-900" }, product.name), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-4 text-sm text-gray-500" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 font-medium text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-4 w-4" }), product.inventoryCount > 0 ? "In stock & ready to ship" : "Restocking soon"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Clock, { className: "h-4 w-4 text-primary-500" }), "Added ", new Date(product.createdAt).toLocaleDateString()))),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex w-full flex-col items-end gap-3 md:w-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-3xl font-semibold text-gray-900" }, formatPrice(product.finalPrice)), product.priceBeforeDiscount && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-400 line-through" }, formatPrice(product.priceBeforeDiscount))), /* @__PURE__ */ React21__default.default.createElement(
-        Button,
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex w-full flex-col items-end gap-3 md:w-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-3xl font-semibold text-gray-900" }, formatPrice(product.finalPrice)), product.isDiscounted && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-400 line-through" }, formatPrice(product.priceBeforeDiscount))), /* @__PURE__ */ React21__default.default.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"
       ))
@@ -8403,50 +8639,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       disabled: page === pagination.totalPages
     },
     "Next"
-  ))))))), /* @__PURE__ */ React21__default.default.createElement(framerMotion.AnimatePresence, null, showFilters && /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.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__default.default.createElement(
-      framerMotion.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__default.default.createElement("div", { className: "mb-6 flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Filters"), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.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__default.default.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";
@@ -8463,6 +8656,7 @@ function ProductDetailScreen({ productId }) {
   const { buildPath } = useBasePath();
   const { product: productData, isLoading } = useProduct(productId);
   const { addToCart } = useCart();
+  const notification = useNotification();
   const [selectedVariant, setSelectedVariant] = React21.useState(null);
   const [quantity, setQuantity] = React21.useState(1);
   const [isAddingToCart, setIsAddingToCart] = React21.useState(false);
@@ -8470,10 +8664,14 @@ function ProductDetailScreen({ productId }) {
   const [relatedProducts, setRelatedProducts] = React21.useState([]);
   const [initialProductData, setInitialProductData] = React21.useState(null);
   const [activeImageIndex, setActiveImageIndex] = React21.useState(0);
+  const [activeTab, setActiveTab] = React21.useState("description");
   React21.useEffect(() => {
     setActiveImageIndex(0);
   }, [selectedVariant]);
   const product = React21.useMemo(() => {
+    console.log("productData", productData);
+    console.log("selectedVariant", selectedVariant);
+    console.log("initialProductData", initialProductData);
     if (initialProductData && !productData) {
       return initialProductData;
     }
@@ -8528,12 +8726,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;
   React21.useEffect(() => {
     if (typeof window === "undefined") return;
     const searchParams = new URLSearchParams(window.location.search);
@@ -8584,12 +8781,16 @@ function ProductDetailScreen({ productId }) {
         quantity,
         selectedVariant.id
       );
-      sonner.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);
-      sonner.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);
     }
@@ -8605,33 +8806,41 @@ function ProductDetailScreen({ productId }) {
     try {
       if (isFavorited) {
         await removeFromWishlist(product.id);
-        sonner.toast.info("Removed from saved items");
+        notification.info(
+          "Removed from saved items",
+          `${product.name} was removed from your saved items.`
+        );
       } else {
         await addToWishlist(product);
-        sonner.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);
-      sonner.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__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-[520px] animate-pulse rounded-3xl bg-slate-200" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-3 gap-4" }, Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement("div", { key: index, className: "h-32 animate-pulse rounded-2xl bg-slate-200" })))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4 rounded-3xl bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-8 w-32 animate-pulse rounded-full bg-slate-200" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-10 w-48 animate-pulse rounded-full bg-slate-200" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-6 w-full animate-pulse rounded-full bg-slate-200" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-12 w-full animate-pulse rounded-2xl bg-slate-200" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-12 w-full animate-pulse rounded-2xl bg-slate-200" })))));
   }
   if (!product) {
-    return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl bg-white p-10 text-center shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "mx-auto h-10 w-10 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "mt-6 text-2xl font-semibold text-gray-900" }, "Product not found"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 text-gray-600" }, "It may have been removed or is temporarily unavailable. Discover other pharmacy essentials in our catalogue."), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: "/shop", className: "inline-block" }, /* @__PURE__ */ React21__default.default.createElement(Button, null, "Browse products"))))));
+    return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl bg-white p-10 text-center shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "mx-auto h-10 w-10 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "mt-6 text-2xl font-semibold text-gray-900" }, "Product not found"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 text-gray-600" }, "It may have been removed or is temporarily unavailable. Discover other pharmacy essentials in our catalogue."), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21__default.default.createElement(Link7__default.default, { href: "/shop", className: "inline-block" }, /* @__PURE__ */ React21__default.default.createElement(Button, null, "Browse products"))))));
   }
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-7xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative pb-20 pt-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement(
-    Button,
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-gray-50 border-b border-gray-200 py-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-[1400px] mx-auto px-8 md:px-12" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.ArrowLeft, { className: "h-4 w-4 mr-2" }),
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronLeft, { className: "size-4" }),
     "Back to Shop"
-  )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-10" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "rounded-3xl " }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement(
+  ))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "py-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative pb-20 pt-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-10" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "rounded-3xl " }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       key: selectedVariant?.id || "default",
@@ -8641,7 +8850,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__default.default.createElement(
-      Image3__default.default,
+      Image4__default.default,
       {
         src: variantImages[activeImageIndex].src || variantImages[activeImageIndex].url || variantImages[activeImageIndex].file,
         alt: currentVariant.name || product.name,
@@ -8651,7 +8860,7 @@ function ProductDetailScreen({ productId }) {
         className: "object-contain"
       }
     ) : product?.productMedia?.[0]?.file ? /* @__PURE__ */ React21__default.default.createElement(
-      Image3__default.default,
+      Image4__default.default,
       {
         src: product.productMedia[0].file,
         alt: product.name,
@@ -8661,34 +8870,17 @@ function ProductDetailScreen({ productId }) {
         className: "object-contain"
       }
     ) : null,
-    discount > 0 && /* @__PURE__ */ React21__default.default.createElement(
-      Badge,
-      {
-        variant: "danger",
-        className: "absolute left-6 top-6 shadow-lg shadow-red-500/20"
-      },
-      "Save ",
-      discount,
-      "%"
-    ),
-    !variantInStock && /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "absolute top-6 left-6 flex flex-col gap-3" }, product.salePrice && /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-[#E67E50] text-white rounded-full px-4 py-2" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide" }, "Save ", product.discount, "%")))
   ), variantImages.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-8 gap-2" }, variantImages.map((image, index) => /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       key: image.src + index,
       type: "button",
       onClick: () => setActiveImageIndex(index),
-      className: `relative aspect-square overflow-hidden rounded-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__default.default.createElement(
-      Image3__default.default,
+      Image4__default.default,
       {
         src: image?.src,
         alt: image.alt || `Product image ${index + 1}`,
@@ -8698,7 +8890,13 @@ function ProductDetailScreen({ productId }) {
         unoptimized: true
       }
     )
-  )))))), /* @__PURE__ */ React21__default.default.createElement("aside", { className: "space-y-6 lg:sticky lg:top-24" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "" }, product.parentCategories && product.parentCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-sm text-slate-600" }, product.parentCategories.map((cat, index) => /* @__PURE__ */ React21__default.default.createElement("span", { key: cat.id || index }, cat.name, index < product.parentCategories.length - 1 && " \u2022 ")), product.parentSubCategories && product.parentSubCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, " \u2022 ", product.parentSubCategories.map((subCat, index) => /* @__PURE__ */ React21__default.default.createElement("span", { key: subCat.id || index }, subCat.name, index < product.parentSubCategories.length - 1 && " \u2022 ")))), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900 mb-6" }, product.name), product?.productVariants && product.productVariants.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "block text-sm font-medium text-slate-700 mb-3" }, "Select Variant"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, product.productVariants.map((variant) => {
+  )))))), /* @__PURE__ */ React21__default.default.createElement("aside", { className: "space-y-6 lg:sticky lg:top-24" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("h1", { className: "text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3" }, product.name), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1" }, [...Array(5)].map((_, i) => /* @__PURE__ */ React21__default.default.createElement(
+    lucideReact.Star,
+    {
+      key: i,
+      className: `size-4 ${i < Math.floor(product.rating) ? "text-[#E67E50] fill-[#E67E50]" : "text-gray-300"}`
+    }
+  ))), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, product.rating, " (", product.reviewCount ? product.reviewCount : 0, " reviews)")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[24px] text-muted line-through" }, "$", product.price.toFixed(2)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "px-3 py-1 rounded-full bg-[#E67E50]/10" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]" }, "Save $", formatPrice(variantComparePrice))))), selectedVariant && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 mb-2" }, selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ || selectedVariant.inventoryStatus === "LOW_STOCK" /* LOWSTOCK */ ? /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "size-3 rounded-full bg-red-500" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[13px] text-red-600 font-medium" }, "Out of Stock")) : selectedVariant.inventoryCount <= 10 ? /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "size-3 rounded-full bg-orange-500 animate-pulse" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[13px] text-orange-600 font-medium" }, "Only ", selectedVariant.inventoryCount, " left in stock - Order soon!")) : /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "size-3 rounded-full bg-green-500" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium" }, "In Stock"))), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[12px] text-muted" }, "SKU: ", selectedVariant?.sku)), product.description && /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.7] mb-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { dangerouslySetInnerHTML: { __html: product.description } })), product?.productVariants && product.productVariants.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3" }, "Select Variant"), /* @__PURE__ */ React21__default.default.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__default.default.createElement(
@@ -8707,10 +8905,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__default.default.createElement("div", { className: `relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? "border-primary-500" : "border-slate-200"}` }, /* @__PURE__ */ React21__default.default.createElement(
-        Image3__default.default,
+      /* @__PURE__ */ React21__default.default.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__default.default.createElement(
+        Image4__default.default,
         {
           src: variantImage,
           alt: variant.name || "Variant image",
@@ -8719,60 +8917,53 @@ function ProductDetailScreen({ productId }) {
           sizes: "48px"
         }
       )),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: `text-sm font-medium ${isSelected ? "text-primary-700" : "text-slate-900"}` }, variant.name), variant.sku && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500 mt-0.5" }, "SKU: ", variant.sku)),
-      isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-5 w-5 text-primary-600 flex-shrink-0" })
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: `text-start text-sm font-medium ${isSelected ? "text-secondary" : "text-slate-900"}` }, variant.name), variant.sku && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-start text-xs text-slate-500 mt-0.5" }, "SKU: ", variant.sku)),
+      isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-5 w-5 text-secondary flex-shrink-0" })
     );
-  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-baseline gap-3 mb-6" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-3xl font-bold text-orange-600" }, selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.finalPrice || product.price || 0)), variantComparePrice && variantComparePrice > variantPrice && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base text-slate-400 line-through" }, formatPrice(variantComparePrice)), discount > 0 && /* @__PURE__ */ React21__default.default.createElement(Badge, { variant: "danger", size: "sm" }, "-", discount, "%")), selectedVariant && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-sm" }, selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ || selectedVariant.inventoryStatus === "LOW_STOCK" /* LOWSTOCK */ ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-red-600 font-medium" }, "Out of Stock") : /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-orange-600 font-medium" }, "Only ", selectedVariant.inventoryCount || product.inventoryCount || 0, " left in stock - Order soon!")), variantSku !== "N/A" && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium" }, "SKU:"), " ", variantSku), product.description && /* @__PURE__ */ React21__default.default.createElement("p", { className: "mb-6 text-sm text-slate-600" }, product.description.replace(/<[^>]*>/g, "").substring(0, 150), product.description.length > 150 && "..."), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "block text-sm font-medium text-slate-700 mb-2" }, "Quantity"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center rounded-lg border border-slate-200 bg-white" }, /* @__PURE__ */ React21__default.default.createElement(
+  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3" }, "Quantity"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-4 bg-gray-100 rounded-full px-6 py-3" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Minus, { className: "h-4 w-4 text-slate-600" })
-  ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "w-12 text-center text-sm font-semibold text-slate-900" }, quantity), /* @__PURE__ */ React21__default.default.createElement(
+    "-"
+  ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary min-w-[30px] text-center" }, quantity), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Plus, { className: "h-4 w-4 text-slate-600" })
-  )), selectedVariant && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm text-slate-500" }, selectedVariant.inventoryCount || product.inventoryCount || 0, " available"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React21__default.default.createElement(
-    Button,
+    "+"
+  )), selectedVariant && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm text-slate-500" }, selectedVariant.inventoryCount || product.inventoryCount || 0, " available"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col sm:flex-row gap-3 mb-8" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.ShoppingCart, { className: "h-4 w-4" }),
-    !selectedVariant ? "Select a variant" : selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ ? "Out of Stock" : "Add to Cart"
+    isAddingToCart ? /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.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__default.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React21__default.default.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__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingCart, { className: "h-4 w-4" }), !selectedVariant ? "Select a variant" : selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ ? "Out of Stock" : "Add to Cart")
   ), /* @__PURE__ */ React21__default.default.createElement(
-    Button,
+    "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__default.default.createElement(
-      lucideReact.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__default.default.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold uppercase tracking-[0.25em]" }, "Need advice?"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 leading-relaxed" }, "Chat with a pharmacist in real time before completing your purchase. We will help you choose supporting supplements and answer dosing questions.")))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-10" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-4 pb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1 text-amber-500" }, Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(lucideReact.Star, { key: index, className: "h-4 w-4 fill-current" }))), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-500" }, "Rated 4.8 \u2022 Patients love the results")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-8" }, product.description && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, "Description"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base leading-relaxed text-slate-600", dangerouslySetInnerHTML: { __html: product.description } }))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/60 p-5 mt-10" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text- font-semibold uppercase tracking-[0.3em] text-slate-500" }, "Product details"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Variant:"), " ", currentVariant.name), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "SKU:"), " ", variantSku), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Status:"), " ", /* @__PURE__ */ React21__default.default.createElement("span", { className: variantInStock ? "text-green-600" : "text-amber-600" }, variantInStock ? "In Stock" : "Out of Stock")), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Last updated:"), " ", lastUpdatedLabel), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Ships from:"), " Local pharmacy distribution center"))), relatedProducts.length > 0 && /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-semibold text-slate-900" }, "You may also like"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-sm text-slate-500" }, "Hand-picked recommendations that pair nicely with this product.")), /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: buildPath("/shop"), className: "hidden md:inline-flex" }, /* @__PURE__ */ React21__default.default.createElement(Button, { variant: "ghost", className: "text-primary-600" }, "View all products"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" }, relatedProducts?.map((relatedProduct) => /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: `h-4 w-4  ${isFavorited ? "fill-red-500 text-red-500" : "text-primary"}` })
+  ))), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "size-5 text-primary" })), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Free Shipping"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "On all orders"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.RotateCcw, { className: "size-5 text-primary" })), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Easy Returns"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "30-day return policy"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Shield, { className: "size-5 text-primary" })), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Secure Checkout"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "Safe & protected"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "size-10 rounded-full bg-white flex items-center justify-center shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "size-5 text-primary" })), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1" }, "Quality Guaranteed"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-muted" }, "Premium materials")))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 mb-8 border-b-2 border-gray-100" }, ["description", "reviews"].map((tab) => /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "bg-white rounded-[24px] p-8 border-2 border-gray-100" }, activeTab === "description" && /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-4" }, "Product Description"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.8] mb-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { dangerouslySetInnerHTML: { __html: product.description } })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3" }, "Last updated:"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, lastUpdatedLabel)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3" }, "Shipped from:"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, "Local pharmacy distribution center"))), activeTab === "reviews" && /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center py-8" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Star, { className: "size-12 text-[#E67E50] mx-auto mb-4" }), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-2" }, product.rating, " out of 5 stars"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, "Based on ", product.reviewCount, " customer reviews")))), relatedProducts.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-8 text-2xl" }, "You May Also Like"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" }, relatedProducts.map((relatedProduct) => /* @__PURE__ */ React21__default.default.createElement(
     ProductCard,
     {
-      key: relatedProduct.id || relatedProduct._id,
+      key: relatedProduct.id,
       product: relatedProduct,
       onClickProduct: (item) => {
         router.push(buildPath(`/products/${item._id || item.id}`));
@@ -8813,70 +9004,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__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex gap-4 pr-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(
+      Image4__default.default,
+      {
+        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__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start justify-between gap-4 mb-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2" }, item.productVariantData.name), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[12px] text-[#676c80]" }, "Variant: ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-[#2B4B7C]" }, item.productVariantData.name)))), /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         onClick: handleRemove,
-        className: "absolute top-4 right-4 p-1 text-gray-400 hover:text-red-600 transition-colors",
+        className: "p-2 hover:bg-red-50 rounded-full transition-colors group",
         "aria-label": "Remove item"
       },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Trash2, { className: "w-5 h-5" })
-    ),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex gap-4 pr-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-20 h-24 rounded-md overflow-hidden flex-shrink-0 bg-gray-100" }, /* @__PURE__ */ React21__default.default.createElement(
-      Image3__default.default,
-      {
-        src: item.productVariantData.productMedia[0]?.file || "/placeholder-product.jpg",
-        alt: item.productVariantData.name,
-        fill: true,
-        className: "object-cover",
-        sizes: "80px"
-      }
-    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-base font-bold text-gray-900" }, item.productVariantData.name), attributes.length > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, attributes.join(" ")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 mt-3" }, /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Trash2, { className: "size-5 text-[#676c80] group-hover:text-red-500 transition-colors" })
+    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 bg-gray-50 rounded-full px-4 py-2" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Minus, { className: "w-4 h-4 text-gray-600" })
-    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "px-3 font-medium min-w-[2rem] text-center text-gray-900" }, isUpdating ? /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-block h-4 w-4 align-middle animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" }) : item.quantity), /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Minus, { className: "size-4 text-[#2B4B7C]" })
+    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] min-w-[20px] text-center" }, item.quantity), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Plus, { className: "w-4 h-4 text-gray-600" })
-    ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right flex-shrink-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg font-bold text-orange-600" }, formatPrice(itemTotal)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, formatPrice(unitPrice), " each")))
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Plus, { className: "size-4 text-[#2B4B7C]" })
+    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-bold text-[18px] text-[#E67E50]" }, formatPrice(itemTotal)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-[#676c80]" }, formatPrice(unitPrice), " each")))))
   );
 }
 function CartScreen() {
   const router = navigation.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__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Shopping Cart"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, "0 items in your cart")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ React21__default.default.createElement(
+    return /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ React21__default.default.createElement(
       framerMotion.motion.div,
       {
         initial: { opacity: 0, y: 24 },
         animate: { opacity: 1, y: 0 },
         className: "text-center space-y-6 max-w-md"
       },
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: "h-12 w-12 text-gray-400" }))),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Your cart is empty"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Start adding products to your cart to see them here.")),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: "h-12 w-12 text-secondary" }))),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-secondary" }, "Your cart is empty"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-muted" }, "Start adding products to your cart to see them here.")),
       /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-3 justify-center" }, /* @__PURE__ */ React21__default.default.createElement(
         "button",
         {
           type: "button",
           onClick: () => router.push(buildPath("/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__default.default.createElement(lucideReact.ArrowRight, { className: "h-5 w-5" })
       )),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-8 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Free shipping on all orders")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Secure checkout process")))
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-8 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-secondary flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Free shipping on all orders")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-secondary flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-secondary flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Secure checkout process")))
     )))));
   }
   const subtotal = cart.total;
@@ -8884,12 +9076,23 @@ function CartScreen() {
   const tax = 0;
   const total = subtotal + shipping + tax;
   const itemCount = cart.cartBody.items.length;
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Shopping Cart"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, itemCount, " ", itemCount === 1 ? "item" : "items", " in your cart")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_1fr]" }, /* @__PURE__ */ React21__default.default.createElement(
+  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__default.default.createElement("div", { className: "min-h-screen bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-[1400px] mx-auto px-8 md:px-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-12" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-2px] mb-2 text-4xl" }, "Shopping Cart"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[16px] text-muted" }, itemCount, " ", itemCount === 1 ? "item" : "items", " in your cart")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.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__default.default.createElement("div", { className: "flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600" }), "Updating cart\u2026"),
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, cart.cartBody.items.map((item) => /* @__PURE__ */ React21__default.default.createElement(CartItem, { key: item.productVariantId, item })))
@@ -8899,13 +9102,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__default.default.createElement("div", { className: "rounded-xl border-2 border-primary-200 bg-white p-6 shadow-md" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-xl font-bold text-slate-900 mb-6" }, "Order Summary"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4 mb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-gray-600" }, "Subtotal (", itemCount, " ", itemCount === 1 ? "item" : "items", ")"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-gray-600" }, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-green-600" }, "Will be calculated at checkout")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "border-t border-gray-200 pt-4 mt-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-lg font-bold text-slate-900" }, "Total"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-2xl font-bold text-orange-600" }, formatPrice(total))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.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__default.default.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-secondary mb-6" }, "Order Summary"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4 mb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] text-[14px] text-muted" }, "Subtotal (", itemCount, " ", itemCount === 1 ? "item" : "items", ")"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary" }, formatPrice(subtotal))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-gray-600" }, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-green-600" }, "Will be calculated at checkout")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "border-t border-gray-200 pt-4 mt-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-lg font-bold text-secondary" }, "Total"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-2xl font-bold text-orange-600" }, formatPrice(total))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
-        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",
@@ -8915,11 +9118,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__default.default.createElement("div", { className: "mt-6 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Secure checkout process")))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold uppercase tracking-[0.3em]" }, "Need help?"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 leading-relaxed" }, "Chat with a pharmacist to optimize your regimen or discuss substitutions before you check out."))
+    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-muted flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-muted flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Secure checkout process"))))
   )))));
 }
 function useAddresses() {
@@ -8980,15 +9182,6 @@ function useAddresses() {
     markAsDefault
   };
 }
-function Card({ className = "", ...props }) {
-  return /* @__PURE__ */ React21__default.default.createElement(
-    "div",
-    {
-      className: `rounded-lg border bg-white shadow-sm ${className}`,
-      ...props
-    }
-  );
-}
 function Modal({ isOpen, onClose, title, children, size = "md" }) {
   React21.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -9045,8 +9238,11 @@ var addressSchema = zod.z.object({
   country: zod.z.string().min(2, "Country is required"),
   phone: zod.z.string().min(10, "Phone number is required")
 });
+
+// src/components/AddressFormModal.tsx
 function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, initialAddress }) {
   const [isSubmitting, setIsSubmitting] = React21.useState(false);
+  const notification = useNotification();
   const {
     register,
     handleSubmit,
@@ -9092,7 +9288,10 @@ function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, i
           country: data.country,
           phone: data.phone
         }, initialAddress.id);
-        sonner.toast.success("Address updated successfully");
+        notification.success(
+          "Address updated",
+          "Your address has been updated successfully."
+        );
         reset();
         onClose();
         if (onAddressUpdated) onAddressUpdated(response.data);
@@ -9108,16 +9307,25 @@ function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, i
           phone: data.phone
         });
         if (response.status === 201) {
-          sonner.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 {
-          sonner.toast.error("Failed to add address");
+          notification.error(
+            "Could not add address",
+            "We could not save this address. Please try again."
+          );
         }
       }
     } catch (error) {
-      sonner.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);
     }
@@ -9194,14 +9402,14 @@ function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, i
         error: errors.country?.message
       }
     )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-end gap-4" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(Button, { type: "submit", disabled: isSubmitting }, isSubmitting ? "Adding Address..." : "Add Address")))
+    ), /* @__PURE__ */ React21__default.default.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 = zod.z.object({
@@ -9250,6 +9458,7 @@ function CheckoutScreen() {
   const [isAddressModalOpen, setIsAddressModalOpen] = React21.useState(false);
   const [editingAddress, setEditingAddress] = React21.useState(null);
   const [shippingPrice, setShippingPrice] = React21.useState(0);
+  const notification = useNotification();
   const {
     addresses: userAddresses,
     defaultAddress
@@ -9379,7 +9588,10 @@ function CheckoutScreen() {
   const onSubmit = async (data) => {
     setError(null);
     if (!isAuthenticated) {
-      sonner.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;
     }
@@ -9431,7 +9643,10 @@ function CheckoutScreen() {
       }
     }
     setIsSubmitting(true);
-    sonner.toast("Submitting order...", { icon: /* @__PURE__ */ React21__default.default.createElement(lucideReact.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),
@@ -9463,7 +9678,10 @@ function CheckoutScreen() {
       );
       if (response?.data?.payment && response.data.payment.hostedInvoiceUrl === "INSUFFICIENT_CREDIT") {
         setError("You have insufficient credit to complete this order.");
-        sonner.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") {
@@ -9482,21 +9700,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.");
-          sonner.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;
         }
-        sonner.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 {
-        sonner.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);
-      sonner.toast.error(msg);
+      notification.error(
+        "Could not place order",
+        msg
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -9508,14 +9738,15 @@ function CheckoutScreen() {
   const subtotal = cart.total;
   const tax = 0;
   const total = subtotal + shippingPrice + tax;
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50 mb-16" }, /* @__PURE__ */ React21__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit) }, error && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-red-600 font-semibold" }, error), /* @__PURE__ */ React21__default.default.createElement("div", { className: "pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white pb-16" }, /* @__PURE__ */ React21__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit) }, error && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-red-600 font-semibold" }, error), /* @__PURE__ */ React21__default.default.createElement("div", { className: "pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
       className: "space-y-8"
     },
-    /* @__PURE__ */ React21__default.default.createElement("section", { className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-4" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-xl font-semibold text-slate-900" }, "Shipping information"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, "We use temperature-aware packaging and real-time tracking on every shipment.")), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Truck, { className: "h-4 w-4" }), "Dispatch in 12h")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-4 md:grid-cols-2" }, isDelivery && /* @__PURE__ */ React21__default.default.createElement("div", { className: "md:col-span-2 space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "block font-semibold" }, "Select Address"), /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-12" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-3xl" }, "Checkout"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[14px] text-[#676c80] text-md leading-relaxed" }, "Complete your order information below")),
+    /* @__PURE__ */ React21__default.default.createElement("section", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-4" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-2xl" }, "Contact Information"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, "We use temperature-aware packaging and real-time tracking on every shipment.")), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Truck, { className: "h-4 w-4" }), "Dispatch in 12h")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-4 md:grid-cols-2" }, isDelivery && /* @__PURE__ */ React21__default.default.createElement("div", { className: "md:col-span-2 space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "block font-semibold" }, "Select Address"), /* @__PURE__ */ React21__default.default.createElement(
       Button,
       {
         type: "button",
@@ -9579,9 +9810,9 @@ function CheckoutScreen() {
             try {
               await removeAddress(addr.id);
               if (selectedAddressId === addr.id) setSelectedAddressId(null);
-              sonner.toast.success("Address deleted");
+              notification.success("Address deleted");
             } catch (e2) {
-              sonner.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"
@@ -9598,7 +9829,7 @@ function CheckoutScreen() {
       },
       storeAddresses.map((addr) => /* @__PURE__ */ React21__default.default.createElement("option", { key: addr.id, value: addr.id }, addr.name, " - ", addr.street1, ", ", addr.city))
     )))),
-    isDelivery && selectedAddressId && /* @__PURE__ */ React21__default.default.createElement(Card, { className: "p-6 border border-gray-200 rounded-xl shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-6 border-b" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "text-accent w-6 h-6" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Shipping Options")), shippingRatesLoading ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-center py-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-accent" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "ml-3 text-gray-600" }, "Loading shipping options...")) : shippingRatesError ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("svg", { className: "w-8 h-8 text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("p", { className: "text-red-500 text-lg font-medium" }, "Error loading shipping options"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-red-400 text-sm mt-1" }, shippingRatesError)) : shippingRates && shippingRates.length > 0 ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, shippingRates.map((rate) => {
+    isDelivery && selectedAddressId && /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-8 border-b" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "text-accent w-8 h-8 flex items-center justify-center text-[#2B4B7C]" }), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] text-2xl" }, "Shipping Options")), shippingRatesLoading ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-center py-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-accent" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "ml-3 text-gray-600" }, "Loading shipping options...")) : shippingRatesError ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("svg", { className: "w-8 h-8 text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("p", { className: "text-red-500 text-lg font-medium" }, "Error loading shipping options"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-red-400 text-sm mt-1" }, shippingRatesError)) : shippingRates && shippingRates.length > 0 ? /* @__PURE__ */ React21__default.default.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;
@@ -9613,7 +9844,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__default.default.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-4 flex-1" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(
-          Image3__default.default,
+          Image4__default.default,
           {
             src: rate.providerImage75 || "/placeholder-product.jpg",
             alt: rate.provider,
@@ -9635,16 +9866,8 @@ function CheckoutScreen() {
         ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-1 text-sm text-gray-600" }, rate.durationTerms && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("span", null, rate.durationTerms)), rate.estimatedDays && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("span", null, "Estimated ", rate.estimatedDays, " day", rate.estimatedDays !== 1 ? "s" : "")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("span", null, "Carrier: ", rate.provider)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("span", null, "Currency: ", rate.currency))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-end" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-2xl font-bold text-gray-900" }, formatPrice(parseFloat(rate.amount))), rate.amount !== rate.amountLocal && /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-sm text-gray-500" }, rate.amountLocal, " ", rate.currencyLocal))),
         isSelected && /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute top-3 right-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "w-4 h-4 text-white" })))
       );
-    })) : /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "w-8 h-8 text-gray-400" })), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500 text-lg font-medium" }, "No shipping options available"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-400 text-sm mt-1" }, "Please check the shipping address or try a different location.")))
-  ), /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.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__default.default.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__default.default.createElement("h2", { className: "text-2xl font-semibold text-slate-900" }, "Order Summary"), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-6 space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-xs font-semibold text-slate-700 uppercase tracking-wider" }, "Delivery Method"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 gap-3" }, [
+    })) : /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "w-8 h-8 text-gray-400" })), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500 text-lg font-medium" }, "No shipping options available"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-400 text-sm mt-1" }, "Please check the shipping address or try a different location."))),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 mb-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "w-8 h-8 text-[#2B4B7C]" }), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-semibold text-[#2B4B7C]" }, "Delivery Method")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 gap-3" }, [
       {
         label: "Delivery",
         icon: /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "w-5 h-5" }),
@@ -9664,20 +9887,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__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "text-left" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "font-medium text-slate-900" }, option.label), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500" }, option.desc))),
-        active && /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center text-white shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "w-3 h-3" }))
+        ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-left" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "font-medium text-gray-900" }, option.label), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500" }, option.desc))),
+        active && /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "w-3 h-3 text-white" }))
       );
-    }))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-8 space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-xs font-semibold text-slate-700 uppercase tracking-wider" }, "Payment Method"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, PAYMENT_METHODS.map((pm) => {
+    }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white border-2 border-gray-100 rounded-[24px] p-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 mb-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CreditCard, { className: "w-8 h-8 text-[#2B4B7C]" }), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-semibold text-[#2B4B7C]" }, "Payment Method")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 md:grid-cols-3" }, PAYMENT_METHODS.map((pm) => {
       const active = paymentMethod === pm.value;
       return /* @__PURE__ */ React21__default.default.createElement(
         "button",
@@ -9685,47 +9913,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__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("span", { className: "text-sm font-medium text-slate-900" }, pm.label)),
-        active && /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-4 h-4 rounded-full bg-primary-500 flex items-center justify-center text-white shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "w-2.5 h-2.5" }))
+        ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-semibold text-gray-900" }, pm.label)),
+        active && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded-full shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-3.5 w-3.5 text-white" }))
       );
-    })), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500 mt-2 pl-1 leading-relaxed" }, paymentMethod === "Card" && "You will be redirected to a secure payment page.", paymentMethod === "Cash" && "Pay with cash at the time of delivery or pickup.", paymentMethod === "Credit" && "Use your available account credit for this order.")), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-8 pt-6 border-t border-slate-100" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-xs font-semibold text-slate-700 uppercase tracking-wider" }, "Cart Summary"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-h-60 space-y-4 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-slate-200 hover:scrollbar-thumb-slate-300" }, cart?.cartBody?.items?.map((item) => /* @__PURE__ */ React21__default.default.createElement(
-      "div",
-      {
-        key: item.productId,
-        className: "flex gap-4 rounded-2xl border border-slate-100 p-4 hover:bg-slate-50/50 transition"
-      },
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-xl bg-slate-100 text-slate-400" }, /* @__PURE__ */ React21__default.default.createElement(
-        Image3__default.default,
-        {
-          src: item.productVariantData.productMedia?.[0]?.file || "/placeholder-product.jpg",
-          alt: item.productVariantData.name,
-          width: 64,
-          height: 64,
-          className: "object-contain"
-        }
-      )),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold text-slate-900" }, item?.productVariantData?.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500" }, "Qty ", item.quantity)),
-      /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold text-slate-900" }, formatPrice(item.productVariantData.finalPrice * item.quantity))
-    ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-y-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Subtotal"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), isDelivery && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold" }, formatPrice(shippingPrice))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Estimated tax"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold" }, formatPrice(tax))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl bg-slate-50 p-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-base font-semibold text-slate-900" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Total Due"), /* @__PURE__ */ React21__default.default.createElement("span", null, formatPrice(total))), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-xs text-slate-500" }, "Tax is estimated. Final amount confirmed after payment.")))), /* @__PURE__ */ React21__default.default.createElement(
+    })), /* @__PURE__ */ React21__default.default.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__default.default.createElement(
+    framerMotion.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__default.default.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__default.default.createElement("h2", { className: "font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-6 text-2xl" }, "Order Summary"), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-8 pt-6 border-t border-slate-100" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4 mb-6" }, cart?.cartBody?.items?.map((item) => /* @__PURE__ */ React21__default.default.createElement("div", { key: `${item.productId}-${item.color}-${item.size}`, className: "flex gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-16 h-16 rounded-xl overflow-hidden bg-white shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(Image4__default.default, { 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__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1" }, item?.productVariantData?.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-[#676c80]" }, item?.productVariantData?.brand, " \u2022 Qty: ", item.quantity), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] font-semibold text-[12px] text-[#E67E50] mt-1" }, formatPrice(item.productVariantData.finalPrice * item.quantity)))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-px bg-[#5B9BD5]/20 my-4" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-sm text-slate-600 space-y-3 py-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Subtotal"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), isDelivery && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold" }, formatPrice(shippingPrice))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Estimated tax"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold" }, formatPrice(tax))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-px bg-[#5B9BD5]/20 mt-6" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between mb-6" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-semibold text-[16px] text-[#2B4B7C]" }, "Total"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-['Poppins',sans-serif] font-bold text-[24px] text-[#E67E50]" }, formatPrice(total)))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white/80 rounded-xl p-4" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]" }, /* @__PURE__ */ React21__default.default.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__default.default.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__default.default.createElement(lucideReact.CreditCard, { className: "h-5 w-5" }),
       isSubmitting ? "Placing order..." : "Place Secure Order"
-    ), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-4 flex items-center justify-center gap-2 text-xs text-slate-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Lock, { className: "h-4 w-4" }), "Fully encrypted checkout \u2014 cancel anytime before shipment.")),
-    /* @__PURE__ */ React21__default.default.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__default.default.createElement("p", { className: "font-semibold uppercase tracking-[0.3em] text-primary-800" }, "Why Patients Choose Us"), /* @__PURE__ */ React21__default.default.createElement("ul", { className: "mt-4 space-y-3 text-primary-700 leading-relaxed" }, /* @__PURE__ */ React21__default.default.createElement("li", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.PackageCheck, { className: "mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Pharmacy-grade verification on every order.")), /* @__PURE__ */ React21__default.default.createElement("li", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Cold-chain logistics for sensitive medications.")), /* @__PURE__ */ React21__default.default.createElement("li", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Truck, { className: "mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Real-time tracking and SMS updates from prep to delivery."))))
+    ), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-4 flex items-center justify-center gap-2 text-xs text-slate-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Lock, { className: "h-4 w-4" }), "Fully encrypted checkout \u2014 cancel anytime before shipment."))
   ))), /* @__PURE__ */ React21__default.default.createElement(
     AddressFormModal,
     {
@@ -9760,9 +9987,12 @@ function LoginScreen() {
   const { buildPath } = useBasePath();
   const searchParams = navigation.useSearchParams();
   const redirectUrl = searchParams?.get("redirect") || buildPath("/");
-  const { login } = useAuth();
+  const { login, user, isLoading } = useAuth();
   const [showPassword, setShowPassword] = React21.useState(false);
   const [isSubmitting, setIsSubmitting] = React21.useState(false);
+  const [status, setStatus] = React21.useState(
+    null
+  );
   const {
     register,
     handleSubmit,
@@ -9772,36 +10002,25 @@ function LoginScreen() {
   });
   const onSubmit = async (data) => {
     setIsSubmitting(true);
+    setStatus(null);
     try {
       await login(data);
-      sonner.toast.success("Welcome back!");
+      setStatus({ type: "success", message: "Welcome back!" });
       router.push(redirectUrl);
     } catch (error) {
-      sonner.toast.error(error.response?.data?.message || "Invalid credentials");
+      setStatus({
+        type: "error",
+        message: error?.response?.data?.message || "Invalid credentials"
+      });
     } finally {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid min-h-screen overflow-hidden bg-white lg:grid-cols-[1.1fr_0.9fr]" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.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__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.HeartPulse, { className: "h-4 w-4" }), "Hey Pharmacist"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold leading-tight lg:text-5xl" }, "Pharmacy-grade care for your household"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-xl text-white/80" }, "Log in to unlock personalized regimens, pharmacist support, and fast delivery on wellness essentials curated just for you.")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 rounded-3xl bg-white/10 p-6 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-white/80" }, "HIPAA-compliant security keeps your health information protected.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-white/80" }, "Pharmacists ready to chat in under 10 minutes for medication support."))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-6 text-sm text-white/80" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Need an account?"), /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
-      {
-        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__default.default.createElement(lucideReact.ArrowRight, { className: "h-4 w-4" })
-    ))
-  ), /* @__PURE__ */ React21__default.default.createElement(
+  if (!isLoading && user) {
+    router.push(buildPath("/account"));
+    return null;
+  }
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid min-h-screen overflow-hidden pb-12" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.section,
     {
       initial: { opacity: 0, x: 24 },
@@ -9809,55 +10028,74 @@ function LoginScreen() {
       transition: { duration: 0.4 },
       className: "flex items-center justify-center px-6 py-12 lg:px-16"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-full max-w-md space-y-10" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-3xl font-bold text-slate-900" }, "Sign in"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, "Welcome back! Enter your details to continue your personalized care plan.")), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement(
-      Input,
-      {
-        type: "email",
-        label: "Email address",
-        placeholder: "you@example.com",
-        ...register("email"),
-        error: errors.email?.message
-      }
-    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.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__default.default.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__default.default.createElement(lucideReact.EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.Eye, { className: "h-5 w-5" })
-    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "flex items-center gap-2 text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(
-      "input",
-      {
-        type: "checkbox",
-        className: "h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
-      }
-    ), "Remember me"), /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
-      {
-        href: buildPath("/forgot-password"),
-        className: "font-medium text-primary-600 transition hover:text-primary-700"
-      },
-      "Forgot password?"
-    )), /* @__PURE__ */ React21__default.default.createElement(
-      Button,
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-full max-w-lg space-y-10 text-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Lock, { strokeWidth: 2, className: "h-16 w-16 mx-auto text-white rounded-full bg-secondary m-2 mb-4 px-4" }), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-4xl text-secondary" }, "Welcome Back"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-muted" }, "Sign in to access your patient portal")), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Lock, { className: "mt-0.5 h-5 w-5 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold text-slate-800" }, "Secure by design"), /* @__PURE__ */ React21__default.default.createElement("p", null, "Encrypted sessions, multi-factor ready, and privacy-first policies keep your personal data safe.")))))
+      status && /* @__PURE__ */ React21__default.default.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__default.default.createElement("span", { className: "mt-[2px] text-base" }, status.type === "success" ? "\u2714" : "!"),
+        /* @__PURE__ */ React21__default.default.createElement("span", null, status.message)
+      ),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-start text-secondary" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Email Address ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21__default.default.createElement(
+        Input,
+        {
+          type: "email",
+          placeholder: "you@example.com",
+          ...register("email"),
+          error: errors.email?.message,
+          className: "text-secondary"
+        }
+      )),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative text-start text-secondary" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Password ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21__default.default.createElement(
+        Input,
+        {
+          type: showPassword ? "text" : "password",
+          placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+          ...register("password"),
+          error: errors.password?.message
+        }
+      ), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.Eye, { className: "h-5 w-5" })
+      )),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "flex items-center gap-2 text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(
+        "input",
+        {
+          type: "checkbox",
+          className: "h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+        }
+      ), "Remember me"), /* @__PURE__ */ React21__default.default.createElement(
+        Link7__default.default,
+        {
+          href: buildPath("/forgot-password"),
+          className: "font-medium text-primary transition hover:opacity-80"
+        },
+        "Forgot password?"
+      )),
+      /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-muted" }, "Don't have an account? ", /* @__PURE__ */ React21__default.default.createElement(Link7__default.default, { href: buildPath("/register"), className: "font-medium text-primary transition hover:opacity-90" }, "Sign up"))))
   )));
 }
 var registerSchema = zod.z.object({
@@ -9871,11 +10109,6 @@ var registerSchema = zod.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 = navigation.useRouter();
   const { register: registerUser } = useAuth();
@@ -9883,6 +10116,7 @@ function RegisterScreen() {
   const [showPassword, setShowPassword] = React21.useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = React21.useState(false);
   const [isSubmitting, setIsSubmitting] = React21.useState(false);
+  const notification = useNotification();
   const {
     register,
     handleSubmit,
@@ -9900,33 +10134,21 @@ function RegisterScreen() {
         customerType: "Regular" /* Regular */,
         role: "User" /* User */
       });
-      sonner.toast.success("Account created successfully!");
+      notification.success(
+        "Account created",
+        "Your Hey Pharmacist account is ready to use."
+      );
       router.push(buildPath("/"));
     } catch (error) {
-      sonner.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__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid min-h-screen overflow-hidden bg-white lg:grid-cols-[0.95fr_1.05fr]" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.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__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.HeartPulse, { className: "h-4 w-4" }), "Join Hey Pharmacist"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold leading-tight lg:text-5xl" }, "Create your wellness account"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-xl text-white/80" }, "Unlock concierge-level pharmacy support, curated product recommendations, and smarter refills designed for busy families.")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4 rounded-3xl bg-white/10 p-6 backdrop-blur" }, BENEFITS.map((benefit) => /* @__PURE__ */ React21__default.default.createElement("div", { key: benefit, className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-white/85" }, benefit)))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-6 text-sm text-white/80" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Already part of the community?"), /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
-      {
-        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__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid min-h-screen overflow-hidden pb-12" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.section,
     {
       initial: { opacity: 0, x: 24 },
@@ -9934,54 +10156,52 @@ function RegisterScreen() {
       transition: { duration: 0.4 },
       className: "flex items-center justify-center px-6 py-12 lg:px-16"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-full max-w-lg space-y-10" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-3xl font-bold text-slate-900" }, "Create an account"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, "Start your personalized care journey with pharmacist-backed guidance.")), /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-full max-w-xl space-y-10 text-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.UserPlus, { strokeWidth: 2, className: "h-16 w-16 mx-auto text-white rounded-full bg-primary m-2 mb-4 px-4" }), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-4xl text-secondary" }, "Create Your Account"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-muted" }, "Join Holmdel Pharmacy Care for convenient healthcare access")), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 md:grid-cols-2 text-start" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "First name ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21__default.default.createElement(
         Input,
         {
-          label: "First name",
           placeholder: "Alex",
           ...register("firstName"),
           error: errors.firstName?.message
         }
-      ), /* @__PURE__ */ React21__default.default.createElement(
+      )), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Last name ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21__default.default.createElement(
         Input,
         {
-          label: "Last name",
           placeholder: "Morgan",
           ...register("lastName"),
           error: errors.lastName?.message
         }
-      )),
-      /* @__PURE__ */ React21__default.default.createElement(
+      ))),
+      /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Email Address ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21__default.default.createElement(
         Input,
         {
           type: "email",
-          label: "Email address",
           placeholder: "you@example.com",
           ...register("email"),
           error: errors.email?.message
         }
-      ),
-      /* @__PURE__ */ React21__default.default.createElement(
+      )),
+      /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Phone Number"), /* @__PURE__ */ React21__default.default.createElement(
         Input,
         {
           type: "tel",
-          label: "Phone number (optional)",
           placeholder: "+1 (555) 123-4567",
           ...register("phone"),
           error: errors.phone?.message
         }
-      ),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(
+      )),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Password ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21__default.default.createElement(
         Input,
         {
           type: showPassword ? "text" : "password",
-          label: "Password",
           placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
           ...register("password"),
           error: errors.password?.message
@@ -9995,11 +10215,10 @@ function RegisterScreen() {
         },
         showPassword ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.Eye, { className: "h-5 w-5" })
       )),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-sm text-secondary mb-3" }, "Confirm Password ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-primary-500" }, "*")), /* @__PURE__ */ React21__default.default.createElement(
         Input,
         {
           type: showConfirmPassword ? "text" : "password",
-          label: "Confirm password",
           placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
           ...register("confirmPassword"),
           error: errors.confirmPassword?.message
@@ -10013,77 +10232,54 @@ function RegisterScreen() {
         },
         showConfirmPassword ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.Eye, { className: "h-5 w-5" })
       )),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Shield, { className: "mt-0.5 h-5 w-5 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "By creating an account, you agree to our", " ", /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: buildPath("/terms"), className: "font-semibold text-primary-600 hover:text-primary-700" }, "Terms of Service"), " ", "and", " ", /* @__PURE__ */ React21__default.default.createElement(
-        Link8__default.default,
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Shield, { strokeWidth: 2, className: "mt-0.5 h-8 w-8 text-primary" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "By creating an account, you agree to our", " ", /* @__PURE__ */ React21__default.default.createElement(Link7__default.default, { href: buildPath("/terms"), className: "font-semibold text-primary hover:opacity-70" }, "Terms of Service"), " ", "and", " ", /* @__PURE__ */ React21__default.default.createElement(
+        Link7__default.default,
         {
           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__default.default.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__default.default.createElement(lucideReact.UserPlus, { className: "h-5 w-5" }),
-        "Create my account"
+        isSubmitting ? "Creating account..." : "Create my account"
       )
-    ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "mt-0.5 h-5 w-5 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold text-slate-800" }, "Members love us"), /* @__PURE__ */ React21__default.default.createElement("p", null, "92% of patients report improved adherence after receiving pharmacist touchpoints through their Hey Pharmacist account.")))))
+    ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-muted" }, "Already have an account? ", /* @__PURE__ */ React21__default.default.createElement(Link7__default.default, { href: buildPath("/login"), className: "font-medium text-primary transition hover:opacity-90" }, "Sign in"))))
   )));
 }
-var profileSchema = zod.z.object({
-  firstName: zod.z.string().min(2, "First name is required"),
-  lastName: zod.z.string().min(2, "Last name is required"),
-  email: zod.z.string().email("Enter a valid email address"),
-  phone: zod.z.string().optional()
-});
 function ProfileScreen() {
   const router = navigation.useRouter();
-  const { user, updateUser, logout } = useAuth();
+  const { user, logout, isLoading } = useAuth();
   const { buildPath } = useBasePath();
-  const [isSubmitting, setIsSubmitting] = React21.useState(false);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors }
-  } = reactHookForm.useForm({
-    resolver: zod$1.zodResolver(profileSchema),
-    defaultValues: {
-      firstName: user?.firstname || "",
-      lastName: user?.lastname || "",
-      email: user?.email || "",
-      phone: user?.phoneNumber || ""
-    }
-  });
-  const onSubmit = async (data) => {
-    setIsSubmitting(true);
+  const [isLoggingOut, setIsLoggingOut] = React21.useState(false);
+  const [logoutError, setLogoutError] = React21.useState(null);
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    setLogoutError(null);
     try {
-      await updateUser(data);
-      sonner.toast.success("Profile updated successfully!");
+      await logout();
+      router.push(buildPath("/"));
     } catch (error) {
-      sonner.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();
-    sonner.toast.success("Logged out successfully");
-    router.push(buildPath("/"));
-  };
   if (!user) {
+    if (isLoading) return null;
     router.push(buildPath("/login"));
     return null;
   }
   const quickLinks = [
     {
       icon: lucideReact.Package,
-      label: "Order history",
-      description: "Track shipments and download invoices",
+      label: "Orders & invoices",
+      description: "Track shipments, invoices, and receipts",
       href: buildPath("/orders")
     },
     {
@@ -10099,121 +10295,105 @@ function ProfileScreen() {
       href: buildPath("/account/addresses")
     }
   ];
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50 text-slate-900" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 pb-16 pt-10" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-200 bg-white/95 p-8 shadow-xl shadow-primary-50 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6 flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-sm text-slate-500" }, "Stay signed in to keep prescriptions and deliveries synced."), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, logoutError && /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.ShieldCheck, { className: "mt-[1px] h-4 w-4 text-red-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, logoutError)), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.LogOut, { className: "h-4 w-4" }),
+    isLoggingOut ? "Logging out..." : "Log out"
+  ))), /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.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__default.default.createElement("div", { className: "space-y-5" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.HeartPulse, { className: "h-4 w-4" }), "My account"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Hello, ", user.firstname, " ", user.lastname), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex flex-wrap items-center gap-4 text-sm text-white/80" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-4 w-4" }), "Account secured with multi-factor ready login"))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center gap-4 rounded-3xl bg-white/15 p-6 text-center backdrop-blur" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("p", { className: "text-sm text-white/80" }, user.email), /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.HeartPulse, { className: "h-4 w-4" }), "Account"), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-semibold md:text-5xl" }, "Welcome back, ", user.firstname, " ", user.lastname), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex flex-wrap gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-4 w-4 text-primary-600" }), "Secure login enabled"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Mail, { className: "h-4 w-4 text-primary-600" }), user.email), /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Phone, { className: "h-4 w-4 text-primary-600" }), user.phoneNumber || "Add phone for urgent updates"))),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-6 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, "Signed in as"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg font-semibold text-slate-900" }, user.firstname), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, user.email))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-3 sm:grid-cols-2" }, /* @__PURE__ */ React21__default.default.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__default.default.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__default.default.createElement("div", { className: "relative -mt-16 pb-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]" }, /* @__PURE__ */ React21__default.default.createElement(
+    )))
+  )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-10 grid gap-8 lg:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)] items-stretch" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
-      initial: { opacity: 0, y: 24 },
+      initial: { opacity: 0, y: 18 },
       animate: { opacity: 1, y: 0 },
       className: "space-y-6"
     },
-    /* @__PURE__ */ React21__default.default.createElement("section", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-xl font-semibold text-slate-900" }, "Personal information"), /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-5 w-5 text-primary-500" })), /* @__PURE__ */ React21__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "mt-6 space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ React21__default.default.createElement(
-      Input,
-      {
-        label: "First name",
-        placeholder: "Taylor",
-        ...register("firstName"),
-        error: errors.firstName?.message
-      }
-    ), /* @__PURE__ */ React21__default.default.createElement(
-      Input,
-      {
-        label: "Last name",
-        placeholder: "Reed",
-        ...register("lastName"),
-        error: errors.lastName?.message
-      }
-    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(
-      Input,
-      {
-        type: "email",
-        label: "Email address",
-        placeholder: "you@example.com",
-        className: "pl-10",
-        ...register("email"),
-        error: errors.email?.message
-      }
-    ), /* @__PURE__ */ React21__default.default.createElement(lucideReact.Mail, { className: "absolute left-3 top-[38px] h-4 w-4 text-slate-400" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(
-      Input,
-      {
-        type: "tel",
-        label: "Phone number",
-        placeholder: "+1 (555) 123-4567",
-        className: "pl-10",
-        ...register("phone"),
-        error: errors.phone?.message
-      }
-    ), /* @__PURE__ */ React21__default.default.createElement(lucideReact.Phone, { className: "absolute left-3 top-[38px] h-4 w-4 text-slate-400" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-4" }, /* @__PURE__ */ React21__default.default.createElement(
-      Button,
-      {
-        type: "submit",
-        size: "lg",
-        isLoading: isSubmitting
-      },
-      "Save changes"
-    ), /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-400" }, "Essentials"), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "mt-1 text-xl font-semibold text-slate-900" }, "Profile snapshot")), /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-5 w-5 text-primary-500" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/70 p-5" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.28em] text-slate-500" }, "Contact"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "flex items-center gap-2 font-semibold text-slate-900" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.User, { className: "h-4 w-4 text-primary-500" }), user.firstname, " ", user.lastname), /* @__PURE__ */ React21__default.default.createElement("p", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Mail, { className: "h-4 w-4 text-primary-500" }), user.email), /* @__PURE__ */ React21__default.default.createElement("p", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Phone, { className: "h-4 w-4 text-primary-500" }), user.phoneNumber || "Not provided")), /* @__PURE__ */ React21__default.default.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__default.default.createElement("section", { className: "grid gap-4 md:grid-cols-2" }, quickLinks.map((item) => /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
+      "Update information"
+    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/70 p-5" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.28em] text-slate-500" }, "Security"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "flex items-center gap-2 font-semibold text-slate-900" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-4 w-4 text-primary-500" }), "Multi-factor ready"), /* @__PURE__ */ React21__default.default.createElement("p", null, "Protect your account with a fresh password and keep notifications on.")), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "rounded-2xl bg-primary-50 p-3 text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(item.icon, { className: "h-5 w-5" })), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base font-semibold text-slate-900 group-hover:text-primary-600" }, item.label), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, item.description)))
-    )))
+      "Change password"
+    ))))
   ), /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.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__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, "Care preferences"), /* @__PURE__ */ React21__default.default.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__default.default.createElement(
-      Button,
+    /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-400" }, "Quick links"), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "mt-1 text-lg font-semibold text-slate-900" }, "Next steps")), /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-5 w-5 text-primary-500" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-5 grid gap-3" }, quickLinks.map((item) => /* @__PURE__ */ React21__default.default.createElement(
+      Link7__default.default,
       {
-        variant: "outline",
-        className: "mt-4 w-full",
-        onClick: () => router.push(buildPath("/account/preferences"))
-      },
-      "Manage preferences"
-    )),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold uppercase tracking-[0.3em]" }, "Pharmacist tip"), /* @__PURE__ */ React21__default.default.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__default.default.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__default.default.createElement(lucideReact.LogOut, { className: "h-4 w-4" }),
-      "Log out"
-    )
-  )))));
+      /* @__PURE__ */ React21__default.default.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__default.default.createElement(item.icon, { className: "h-5 w-5" })),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "flex items-center gap-2 text-base font-semibold text-slate-900 group-hover:text-primary-700" }, item.label, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowRight, { className: "h-4 w-4 opacity-0 transition group-hover:opacity-100" })), /* @__PURE__ */ React21__default.default.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__default.default.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;
@@ -10231,7 +10411,7 @@ function OrderCard({ order }) {
       const itemPrice = item.productVariantData?.finalPrice || 0;
       const itemTotal = itemPrice * item.quantity;
       return /* @__PURE__ */ React21__default.default.createElement("div", { key: item.productVariantId || item._id, className: "flex items-center gap-2 text-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-12 h-12 rounded bg-gray-100 flex-shrink-0 overflow-hidden" }, /* @__PURE__ */ React21__default.default.createElement(
-        Image3__default.default,
+        Image4__default.default,
         {
           src: item?.productVariantData?.productMedia?.[0]?.file || "/placeholder-product.jpg",
           alt: item?.productVariantData?.name || "Product image",
@@ -10571,7 +10751,7 @@ function CurrentOrdersScreen() {
     },
     /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.35em] text-white/70" }, "Quick actions"),
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-4 space-y-3 text-sm text-white/80" }, /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
+      Link7__default.default,
       {
         href: buildPath("/orders"),
         className: "flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3 transition hover:bg-white/20"
@@ -10650,6 +10830,9 @@ function AddressesScreen() {
   } = useAddresses();
   const [isModalOpen, setIsModalOpen] = React21.useState(false);
   const [editingAddress, setEditingAddress] = React21.useState(null);
+  const [banner, setBanner] = React21.useState(
+    null
+  );
   const {
     register,
     handleSubmit,
@@ -10704,10 +10887,10 @@ function AddressesScreen() {
     if (editingAddress) {
       const response = await updateAddress(editingAddress.id, payload);
       if (response) {
-        sonner.toast.success("Address updated");
+        setBanner({ type: "success", message: "Address updated successfully" });
         closeModal();
       } else {
-        sonner.toast.error("Unable to update address");
+        setBanner({ type: "error", message: "Unable to update address" });
       }
     } else {
       const response = await addAddress({
@@ -10722,10 +10905,10 @@ function AddressesScreen() {
         addressType: values.addressType
       });
       if (response) {
-        sonner.toast.success("Address added successfu  lly");
+        setBanner({ type: "success", message: "Address added successfully" });
         closeModal();
       } else {
-        sonner.toast.error("Failed to add address");
+        setBanner({ type: "error", message: "Failed to add address" });
       }
     }
   };
@@ -10737,20 +10920,22 @@ You can add it back at any time.`
     if (!confirmDelete) return;
     try {
       await removeAddress(address.id);
-      sonner.toast.success("Address removed successfully");
+      setBanner({ type: "success", message: "Address removed successfully" });
     } catch (error2) {
-      sonner.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);
-      sonner.toast.success(`${address.name} is now your default address`);
+      setBanner({ type: "success", message: `${address.name} is now your default address` });
     } catch (error2) {
-      sonner.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."
       });
     }
   };
@@ -10778,27 +10963,32 @@ You can add it back at any time.`
       }
     ];
   }, [addresses]);
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.3),_transparent_60%)]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50 text-slate-900" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 pb-16 pt-10" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-200 bg-white/95 p-6 shadow-xl shadow-primary-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.MapPin, { className: "h-4 w-4" }), "Address book"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-3xl font-semibold md:text-4xl" }, "Manage where your care arrives"), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex flex-wrap gap-3 text-xs text-slate-500" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4 text-primary-600" }), "Default: ", defaultAddress ? defaultAddress.name : "Not set"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, banner && /* @__PURE__ */ React21__default.default.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__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.MapPin, { className: "h-4 w-4" }), "Address book"),
-    /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Manage where your care arrives"),
-    /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3 text-sm text-white/75" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4 text-white" }), "Default address: ", defaultAddress ? defaultAddress.name : "Not set"), /* @__PURE__ */ React21__default.default.createElement(Button, { variant: "ghost", className: "text-white hover:bg-white/10", onClick: openCreateModal }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Plus, { className: "h-5 w-5" }), "Add address"))
+    /* @__PURE__ */ React21__default.default.createElement("span", { className: "mt-[1px] text-base" }, banner.type === "success" ? "\u2714" : "!"),
+    /* @__PURE__ */ React21__default.default.createElement("span", null, banner.message)
   ), /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.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__default.default.createElement("div", { key: stat.id, className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-white/70" }, stat.label), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-white" }, stat.helper)), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-3xl font-semibold text-white" }, stat.value)))
-  )))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative -mt-16 pb-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, isLoading ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3" }, Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Plus, { className: "h-5 w-5" }),
+    "Add address"
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid gap-4 sm:grid-cols-3" }, stats.map((stat) => /* @__PURE__ */ React21__default.default.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__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.28em] text-slate-500" }, stat.label),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-1 flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-slate-800" }, stat.helper), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xl font-semibold text-slate-900" }, stat.value))
+  )))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-10" }, isLoading ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3" }, Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(
     "div",
     {
       key: index,
@@ -10821,7 +11011,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__default.default.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__default.default.createElement(lucideReact.Crown, { className: "h-4 w-4" }), "Default"),
       /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "rounded-full bg-primary-50 p-3 text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.User, { className: "h-5 w-5" })), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base font-semibold text-slate-900" }, address.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs uppercase tracking-[0.3em] text-slate-400" }, typeCopy.label))),
@@ -11011,6 +11201,7 @@ function WishlistScreen() {
     clearWishlist,
     refreshWishlist
   } = useWishlist();
+  const notification = useNotification();
   const wishlistCount = getWishlistCount?.() ?? 0;
   const { products: wishlistProducts, isLoading, error } = useWishlistProducts(
     wishlistItems
@@ -11020,9 +11211,12 @@ function WishlistScreen() {
   const [sortOption, setSortOption] = React21.useState("featured");
   React21.useEffect(() => {
     if (error) {
-      sonner.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);
@@ -11090,22 +11284,22 @@ function WishlistScreen() {
       animate: { opacity: 1, y: 0 },
       className: "space-y-6"
     },
-    !isAuthenticated && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[40vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-lg text-center space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-12 w-12 text-gray-400" }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Sign in to see your favourites"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Create your curated shelf of products and we'll keep them ready whenever you return.")), /* @__PURE__ */ React21__default.default.createElement(
+    !isAuthenticated && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[40vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-lg text-center space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-12 w-12 text-secondary" }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-secondary" }, "Sign in to see your favourites"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-muted" }, "Create your curated shelf of products and we'll keep them ready whenever you return.")), /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         type: "button",
         onClick: () => router.push(buildPath("/login")),
-        className: "rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors"
+        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__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Wishlist"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, wishlistCount, " ", wishlistCount === 1 ? "item" : "items", " saved", wishlistCount > 0 && ` \u2022 Total value: ${formatPrice(totalValue)}`)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-1" }, onlyInStock && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500" }, "Showing items ready to ship")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary-200 hover:text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(
+    isAuthenticated && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-secondary" }, "Wishlist"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-muted mt-1" }, wishlistCount, " ", wishlistCount === 1 ? "item" : "items", " saved", wishlistCount > 0 && ` \u2022 Total value: ${formatPrice(totalValue)}`)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-1" }, onlyInStock && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-muted" }, "Showing items ready to ship")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary hover:text-secondary" }, /* @__PURE__ */ React21__default.default.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__default.default.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__default.default.createElement("span", null, "Sort"), /* @__PURE__ */ React21__default.default.createElement(
       "select",
@@ -11115,24 +11309,22 @@ function WishlistScreen() {
         className: "bg-transparent text-sm font-medium text-slate-700 outline-none"
       },
       SORT_OPTIONS.map((option) => /* @__PURE__ */ React21__default.default.createElement("option", { key: option.value, value: option.value }, option.label))
-    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex overflow-hidden rounded-full border border-slate-200 bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement(
+    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex overflow-hidden rounded-full border border-slate-200 bg-gray-100 p-1" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Grid, { className: "h-4 w-4" }),
-      "Grid"
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Grid, { className: "h-4 w-4" })
     ), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.List, { className: "h-4 w-4" }),
-      "List"
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.List, { className: "h-4 w-4" })
     )), wishlistCount > 0 && /* @__PURE__ */ React21__default.default.createElement(
       Button,
       {
@@ -11148,12 +11340,12 @@ function WishlistScreen() {
         key: index,
         className: "h-72 animate-pulse rounded-2xl border border-slate-200 bg-slate-100"
       }
-    ))), !isLoading && wishlistCount === 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[30vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center space-y-6 max-w-md" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-12 w-12 text-gray-400" }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Your wishlist is empty"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Start adding products to your wishlist to see them here.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap justify-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(
+    ))), !isLoading && wishlistCount === 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[30vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center space-y-6 max-w-md" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-12 w-12 text-secondary" }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-secondary" }, "Your wishlist is empty"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-muted" }, "Start adding products to your wishlist to see them here.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap justify-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         type: "button",
         onClick: () => router.push(buildPath("/shop")),
-        className: "rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
+        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__default.default.createElement(React21__default.default.Fragment, null, viewMode === "grid" ? /* @__PURE__ */ React21__default.default.createElement(
@@ -11194,7 +11386,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__default.default.createElement("div", { className: "relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40" }, /* @__PURE__ */ React21__default.default.createElement(
-        Image3__default.default,
+        Image4__default.default,
         {
           fill: true,
           src: product.productMedia?.[0]?.file || "/placeholder-product.jpg",
@@ -11202,7 +11394,7 @@ function WishlistScreen() {
           className: "h-full w-full object-cover"
         }
       )),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-1 flex-col gap-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, product.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, product.parentCategories?.map((category) => category?.name).join(", ") || "General wellness")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg font-bold text-primary-600" }, formatPrice(product.finalPrice ?? 0)), product.isDiscounted && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-emerald-500" }, "You save ", formatPrice(Math.max((product.priceBeforeDiscount ?? 0) - (product.finalPrice ?? 0), 0))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-500" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Package, { className: "h-3.5 w-3.5" }), product.inventoryCount > 0 ? "In stock" : "Backordered"), product.totalSold > 0 && /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Sparkles, { className: "h-3.5 w-3.5" }), product.totalSold, "+ purchased")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-1 flex-col gap-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-secondary" }, product.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-muted" }, product.parentCategories?.map((category) => category?.name).join(", ") || "General wellness")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg font-bold text-primary" }, formatPrice(product.finalPrice ?? 0)), product.isDiscounted && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-emerald-500" }, "You save ", formatPrice(Math.max((product.priceBeforeDiscount ?? 0) - (product.finalPrice ?? 0), 0))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-500" }, /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Package, { className: "h-3.5 w-3.5" }), product.inventoryCount > 0 ? "In stock" : "Backordered"), product.totalSold > 0 && /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.Sparkles, { className: "h-3.5 w-3.5" }), product.totalSold, "+ purchased")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, /* @__PURE__ */ React21__default.default.createElement(
         Button,
         {
           size: "sm",
@@ -11215,15 +11407,15 @@ function WishlistScreen() {
           size: "sm",
           variant: "outline",
           onClick: () => handleRemoveFromWishlist(product.id),
-          className: "text-primary-600"
+          className: "text-secondary"
         },
         "Remove"
       )))
-    ))))), isAuthenticated && emptyAfterFiltering && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 p-12 text-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "h-8 w-8" })), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "mt-6 text-xl font-semibold text-slate-900" }, "Nothing matches those filters"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 max-w-md text-sm text-gray-500" }, "Try showing out-of-stock items or adjust your sort order to revisit everything you've saved."), /* @__PURE__ */ React21__default.default.createElement(
+    ))))), isAuthenticated && emptyAfterFiltering && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 p-12 text-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "h-8 w-8" })), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "mt-6 text-xl font-semibold text-secondary" }, "Nothing matches those filters"), /* @__PURE__ */ React21__default.default.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__default.default.createElement(
       "button",
       {
         type: "button",
-        className: "mt-6 rounded-full border-2 border-primary-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors",
+        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"
@@ -11331,67 +11523,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__default.default, { 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 = navigation.useRouter();
-  const { buildPath } = useBasePath();
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "space-y-6"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "h-4 w-4" }), "Product Categories"),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Browse Our Product Range"), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "rounded-3xl bg-white/15 p-6 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.35em] text-white/70" }, "Quick tip"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-sm text-white/80" }, "Use the categories below to quickly find the products you're looking for, or use the search function for specific items.")))
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative -mt-16 pb-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 text-sm text-slate-500 mb-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Browse our complete product catalog organized by categories.")),
-    isLoading ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" }, [...Array(8)].map((_, i) => /* @__PURE__ */ React21__default.default.createElement("div", { key: i, className: "animate-pulse" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-gray-200 rounded-lg aspect-square mb-2" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-1" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-3 bg-gray-200 rounded w-1/2" })))) : categories.length > 0 ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" }, categories.map((category) => /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
-      {
-        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__default.default.createElement("div", { className: "relative aspect-square w-full overflow-hidden rounded-lg bg-gray-50 mb-3" }, category.image ? /* @__PURE__ */ React21__default.default.createElement(
-        Image3__default.default,
-        {
-          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__default.default.createElement("div", { className: "flex h-full w-full items-center justify-center bg-gray-100 text-gray-400" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "h-12 w-12" }))),
-      /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors" }, category.name),
-      category.productCount > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, category.productCount, " ", category.productCount === 1 ? "product" : "products")
-    ))) : /* @__PURE__ */ React21__default.default.createElement(
-      EmptyState,
-      {
-        title: "No categories found",
-        description: "There are currently no product categories available.",
-        icon: lucideReact.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__default.default, { 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 = navigation.useRouter();
   const [isSubmitting, setIsSubmitting] = React21.useState(false);
+  const notification = useNotification();
   const {
     register,
     handleSubmit,
@@ -11417,7 +11559,10 @@ function NewAddressPage() {
         country: data.country,
         phone: data.phone
       });
-      sonner.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";
@@ -11432,15 +11577,17 @@ function NewAddressPage() {
       if (error.message === "Network Error") {
         errorMessage = "Unable to connect to the server. Please check your internet connection.";
       }
-      sonner.toast.error("Unable to save address", {
-        description: errorMessage,
-        duration: 5e3
-      });
+      notification.error(
+        "Unable to save address",
+        errorMessage,
+        5e3
+      );
       if (error.response?.status === 422) {
-        sonner.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);
@@ -11529,31 +11676,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] = React21.useState(false);
   const [isSearchOpen, setIsSearchOpen] = React21.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React21.useState(false);
+  const [isLoggingOut, setIsLoggingOut] = React21.useState(false);
   const [searchQuery, setSearchQuery] = React21.useState("");
   const { buildPath } = useBasePath();
+  const router = navigation.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__default.default.createElement("header", { className: "sticky top-0 z-40 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between h-20" }, /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: buildPath("/"), className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-12 h-12" }, /* @__PURE__ */ React21__default.default.createElement(
-    Image3__default.default,
+  return /* @__PURE__ */ React21__default.default.createElement("header", { className: "sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between h-20" }, /* @__PURE__ */ React21__default.default.createElement(Link7__default.default, { href: buildPath("/"), className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-12 h-12" }, /* @__PURE__ */ React21__default.default.createElement(
+    Image4__default.default,
     {
       src: config.logo,
       alt: config.storeName,
       fill: true,
       className: "object-contain"
     }
-  )), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-2xl font-bold text-gray-900 hidden sm:block" }, config.storeName)), /* @__PURE__ */ React21__default.default.createElement("nav", { className: "hidden lg:flex items-center gap-8" }, navLinks.map((link) => /* @__PURE__ */ React21__default.default.createElement(
-    Link8__default.default,
+  ))), /* @__PURE__ */ React21__default.default.createElement("nav", { className: "hidden lg:flex items-center gap-8" }, navLinks.map((link) => /* @__PURE__ */ React21__default.default.createElement(
+    Link7__default.default,
     {
       key: link.href,
       href: link.href,
@@ -11600,15 +11758,40 @@ function Header() {
       },
       /* @__PURE__ */ React21__default.default.createElement(lucideReact.X, { className: "w-4 h-4" })
     ))
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: buildPath("/wishlist"), className: "relative p-2 text-gray-700 hover:text-red-500 transition-colors" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "w-6 h-6" }), wishlistCount > 0 && /* @__PURE__ */ React21__default.default.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__default.default.createElement(Link8__default.default, { href: buildPath("/cart"), className: "relative p-2 text-gray-700 hover:text-primary-600 transition-colors" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingCart, { className: "w-6 h-6" }), cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? /* @__PURE__ */ React21__default.default.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__default.default.createElement(
-    Link8__default.default,
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React21__default.default.createElement(Link7__default.default, { href: buildPath("/wishlist"), className: "relative p-2 text-gray-700 hover:text-red-500 transition-colors" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "w-6 h-6" }), wishlistCount > 0 && /* @__PURE__ */ React21__default.default.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__default.default.createElement(Link7__default.default, { href: buildPath("/cart"), className: "relative p-2 text-gray-700 hover:text-primary-600 transition-colors" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingCart, { className: "w-6 h-6" }), cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.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__default.default.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__default.default.createElement(lucideReact.ChevronDown, { className: `h-4 w-4 text-slate-400 transition-transform ${isDropdownOpen ? "rotate-180" : ""}` })
+  ), isDropdownOpen && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement(
+    "div",
+    {
+      className: "fixed inset-0 z-10",
+      onClick: () => setIsDropdownOpen(false)
+    }
+  ), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "p-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "px-3 py-2 border-b border-slate-200 mb-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-medium text-secondary truncate" }, user?.firstname, " ", user?.lastname), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500 truncate" }, user?.email)), /* @__PURE__ */ React21__default.default.createElement(
+    Link7__default.default,
     {
       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__default.default.createElement(lucideReact.User, { className: "w-6 h-6 text-gray-700" })
-  ) : /* @__PURE__ */ React21__default.default.createElement(
-    Link8__default.default,
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.User, { className: "h-4 w-4" }),
+    "My Account"
+  ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "my-1 border-t border-slate-200" }), /* @__PURE__ */ React21__default.default.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__default.default.createElement(lucideReact.LogOut, { className: "h-4 w-4" }),
+    isLoggingOut ? "Signing out..." : "Sign Out"
+  ))))) : /* @__PURE__ */ React21__default.default.createElement(
+    Link7__default.default,
     {
       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"
@@ -11630,7 +11813,7 @@ function Header() {
       className: "lg:hidden overflow-hidden border-t border-gray-200"
     },
     /* @__PURE__ */ React21__default.default.createElement("nav", { className: "flex flex-col gap-1 py-2" }, navLinks.map((link) => /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
+      Link7__default.default,
       {
         key: link.href,
         href: link.href,
@@ -11639,7 +11822,7 @@ function Header() {
       },
       link.label
     )), !isAuthenticated && /* @__PURE__ */ React21__default.default.createElement(
-      Link8__default.default,
+      Link7__default.default,
       {
         href: buildPath("/login"),
         onClick: () => setIsMobileMenuOpen(false),
@@ -11678,21 +11861,21 @@ function Footer() {
     ]
   };
   return /* @__PURE__ */ React21__default.default.createElement("footer", { className: "bg-gray-900 text-gray-300" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "lg:col-span-2" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-2xl font-bold text-white mb-4" }, config.storeName), /* @__PURE__ */ React21__default.default.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__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Mail, { className: "w-5 h-5 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "support@", config.storeName.toLowerCase().replace(/\s+/g, ""), ".com")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Phone, { className: "w-5 h-5 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "+1 (555) 123-4567")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.MapPin, { className: "w-5 h-5 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "123 Store Street, City, Country")))), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "text-lg font-semibold text-white mb-4" }, "Shop"), /* @__PURE__ */ React21__default.default.createElement("ul", { className: "space-y-2" }, footerLinks.shop.map((link) => /* @__PURE__ */ React21__default.default.createElement("li", { key: link.href }, /* @__PURE__ */ React21__default.default.createElement(
-    Link8__default.default,
+    Link7__default.default,
     {
       href: link.href,
       className: "hover:text-primary-500 transition-colors"
     },
     link.label
   ))))), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "text-lg font-semibold text-white mb-4" }, "Account"), /* @__PURE__ */ React21__default.default.createElement("ul", { className: "space-y-2" }, footerLinks.account.map((link) => /* @__PURE__ */ React21__default.default.createElement("li", { key: link.href }, /* @__PURE__ */ React21__default.default.createElement(
-    Link8__default.default,
+    Link7__default.default,
     {
       href: link.href,
       className: "hover:text-primary-500 transition-colors"
     },
     link.label
   ))))), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "text-lg font-semibold text-white mb-4" }, "Support"), /* @__PURE__ */ React21__default.default.createElement("ul", { className: "space-y-2" }, footerLinks.support.map((link) => /* @__PURE__ */ React21__default.default.createElement("li", { key: link.href }, /* @__PURE__ */ React21__default.default.createElement(
-    Link8__default.default,
+    Link7__default.default,
     {
       href: link.href,
       className: "hover:text-primary-500 transition-colors"
@@ -11729,7 +11912,6 @@ exports.Button = Button;
 exports.CartItem = CartItem;
 exports.CartProvider = CartProvider;
 exports.CartScreen = CartScreen;
-exports.CategoriesScreen = CategoriesScreen;
 exports.CheckoutScreen = CheckoutScreen;
 exports.CurrentOrdersScreen = CurrentOrdersScreen;
 exports.EcommerceProvider = EcommerceProvider;