@mitumba/ui 0.1.2 → 0.1.4

package/dist/index.js

@@ -1176,6 +1176,60 @@ function MitumbaAvatar({
 var import_Box6 = __toESM(require("@mui/material/Box"));
 var import_tokens6 = require("@mitumba/tokens");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function MitumbaGlass({
+  children,
+  blur = 24,
+  opacity = 0.5,
+  rounding = "large",
+  border = true,
+  role,
+  sx
+}) {
+  const radiusMap = {
+    rounded: import_tokens6.tokens.radius.md,
+    // 8px
+    large: import_tokens6.tokens.radius.lg,
+    // 16px
+    huge: import_tokens6.tokens.radius.xl,
+    // 24px
+    full: import_tokens6.tokens.radius.full
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_Box6.default,
+    {
+      role,
+      sx: [
+        {
+          position: "relative",
+          overflow: "hidden",
+          backgroundColor: `rgba(255, 255, 255, ${opacity})`,
+          backdropFilter: `blur(${blur}px) saturate(180%)`,
+          WebkitBackdropFilter: `blur(${blur}px) saturate(180%)`,
+          borderRadius: `${radiusMap[rounding]}px`,
+          // High-end glass border: Ultra-thin, white, low-opacity
+          border: border ? "1px solid rgba(255, 255, 255, 0.4)" : "none",
+          // Multi-layered shadow for realistic floating depth
+          boxShadow: `
+            0 4px 12px 0 rgba(0, 0, 0, 0.05),
+            0 12px 32px 0 rgba(31, 38, 135, 0.1)
+          `,
+          transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          // Subtle light leak / shine effect
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            zIndex: 0,
+            background: "linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 100%)",
+            pointerEvents: "none"
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Box6.default, { sx: { position: "relative", zIndex: 1 }, children })
+    }
+  );
+}
 
 // src/components/selection/MitumbaCheckbox/MitumbaCheckbox.tsx
 var import_react5 = require("react");
@@ -2935,24 +2989,66 @@ function STIScoreChip({
 
 // src/components/seller/SellerCard/SellerCard.tsx
 var import_Box24 = __toESM(require("@mui/material/Box"));
-var import_Typography16 = __toESM(require("@mui/material/Typography"));
+var import_Typography17 = __toESM(require("@mui/material/Typography"));
 var import_Inventory2Outlined = __toESM(require("@mui/icons-material/Inventory2Outlined"));
 var import_LocationOnOutlined = __toESM(require("@mui/icons-material/LocationOnOutlined"));
-var import_tokens31 = require("@mitumba/tokens");
+var import_tokens32 = require("@mitumba/tokens");
 
 // src/components/vazi/VAZIBadge/VAZIBadge.tsx
+var import_Typography16 = __toESM(require("@mui/material/Typography"));
 var import_AutoAwesome2 = __toESM(require("@mui/icons-material/AutoAwesome"));
+var import_tokens31 = require("@mitumba/tokens");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function VAZIBadge({ size = "small" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    MitumbaChip,
+  const isLarge = size === "medium";
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    MitumbaGlass,
     {
-      label: "VAZI Curation",
-      status: "special",
-      variant: "solid",
-      size,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_AutoAwesome2.default, {}),
-      color: "purple"
+      rounding: "full",
+      blur: 8,
+      opacity: 0.9,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.8,
+        px: isLarge ? 2 : 1.5,
+        py: 0.6,
+        backgroundColor: "rgba(255, 255, 255, 0.95)",
+        boxShadow: "0 2px 8px rgba(160, 98, 53, 0.15)",
+        border: `1px solid rgba(160, 98, 53, 0.2)`
+      },
+      role: "status",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_AutoAwesome2.default,
+          {
+            sx: {
+              fontSize: isLarge ? 18 : 14,
+              color: import_tokens31.tokens.colors.earth,
+              animation: "vazi-pulse 3s infinite ease-in-out",
+              "@keyframes vazi-pulse": {
+                "0%, 100%": { transform: "scale(1) rotate(0deg)", opacity: 1 },
+                "50%": { transform: "scale(1.2) rotate(10deg)", opacity: 0.8 }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_Typography16.default,
+          {
+            sx: {
+              fontSize: isLarge ? 12 : 10,
+              fontWeight: 900,
+              color: import_tokens31.tokens.colors.earth,
+              fontFamily: import_tokens31.tokens.typography.fontFamily,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              lineHeight: 1
+            },
+            children: "VAZI"
+          }
+        )
+      ]
     }
   );
 }
@@ -2984,75 +3080,75 @@ function SellerCard({
       sx: {
         display: "flex",
         alignItems: "center",
-        gap: import_tokens31.tokens.spacing.base,
-        p: import_tokens31.tokens.spacing.base,
-        borderRadius: import_tokens31.tokens.radius.lg,
-        bgcolor: import_tokens31.tokens.colors.surface,
-        boxShadow: import_tokens31.tokens.shadows.card,
-        border: `1px solid ${import_tokens31.tokens.colors.divider}`,
+        gap: import_tokens32.tokens.spacing.base,
+        p: import_tokens32.tokens.spacing.base,
+        borderRadius: import_tokens32.tokens.radius.lg,
+        bgcolor: import_tokens32.tokens.colors.surface,
+        boxShadow: import_tokens32.tokens.shadows.card,
+        border: `1px solid ${import_tokens32.tokens.colors.divider}`,
         cursor: onTap ? "pointer" : "default",
         transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
         "&:hover": onTap ? {
-          boxShadow: import_tokens31.tokens.shadows.elevated,
+          boxShadow: import_tokens32.tokens.shadows.elevated,
           transform: "translateY(-2px)",
-          borderColor: import_tokens31.tokens.colors.border
+          borderColor: import_tokens32.tokens.colors.border
         } : void 0,
         "&:focus-visible": {
-          outline: `2px solid ${import_tokens31.tokens.colors.greenLight}`,
-          boxShadow: import_tokens31.tokens.shadows.focus
+          outline: `2px solid ${import_tokens32.tokens.colors.greenLight}`,
+          boxShadow: import_tokens32.tokens.shadows.focus
         }
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MitumbaAvatar, { name, imageUrl: avatarUrl, size: "md" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Box24.default, { sx: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Box24.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens31.tokens.spacing.sm }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Box24.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens32.tokens.spacing.sm }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              import_Typography16.default,
+              import_Typography17.default,
               {
                 sx: {
-                  fontWeight: import_tokens31.tokens.typography.fontWeights.bold,
-                  fontSize: import_tokens31.tokens.typography.fontSizes.base,
-                  color: import_tokens31.tokens.colors.textPrimary,
+                  fontWeight: import_tokens32.tokens.typography.fontWeights.bold,
+                  fontSize: import_tokens32.tokens.typography.fontSizes.base,
+                  color: import_tokens32.tokens.colors.textPrimary,
                   lineHeight: 1.2,
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
-                  fontFamily: import_tokens31.tokens.typography.fontFamily
+                  fontFamily: import_tokens32.tokens.typography.fontFamily
                 },
                 children: name
               }
             ),
             isVaziFeatured && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VAZIBadge, { size: "small" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Box24.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens31.tokens.spacing.sm, mt: import_tokens31.tokens.spacing.xs }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Box24.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens32.tokens.spacing.sm, mt: import_tokens32.tokens.spacing.xs }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(STIScoreChip, { score: stiScore, compact: true }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Box24.default, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Inventory2Outlined.default, { sx: { fontSize: 14, color: import_tokens31.tokens.colors.textSecondary } }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Inventory2Outlined.default, { sx: { fontSize: 14, color: import_tokens32.tokens.colors.textSecondary } }),
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                import_Typography16.default,
+                import_Typography17.default,
                 {
                   sx: {
-                    color: import_tokens31.tokens.colors.textSecondary,
+                    color: import_tokens32.tokens.colors.textSecondary,
                     fontSize: 10,
-                    fontWeight: import_tokens31.tokens.typography.fontWeights.semibold,
+                    fontWeight: import_tokens32.tokens.typography.fontWeights.semibold,
                     textTransform: "uppercase",
-                    letterSpacing: import_tokens31.tokens.typography.letterSpacings.wide
+                    letterSpacing: import_tokens32.tokens.typography.letterSpacings.wide
                   },
                   children: totalListings
                 }
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_Box24.default, { sx: { display: "flex", alignItems: "center", gap: "4px", opacity: 0.7 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_LocationOnOutlined.default, { sx: { fontSize: 14, color: import_tokens31.tokens.colors.textSecondary } }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_LocationOnOutlined.default, { sx: { fontSize: 14, color: import_tokens32.tokens.colors.textSecondary } }),
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                import_Typography16.default,
+                import_Typography17.default,
                 {
                   sx: {
-                    color: import_tokens31.tokens.colors.textSecondary,
+                    color: import_tokens32.tokens.colors.textSecondary,
                     fontSize: 10,
-                    fontWeight: import_tokens31.tokens.typography.fontWeights.semibold,
+                    fontWeight: import_tokens32.tokens.typography.fontWeights.semibold,
                     textTransform: "uppercase",
-                    letterSpacing: import_tokens31.tokens.typography.letterSpacings.wide
+                    letterSpacing: import_tokens32.tokens.typography.letterSpacings.wide
                   },
                   children: city
                 }
@@ -3067,11 +3163,11 @@ function SellerCard({
 
 // src/components/seller/STIBreakdownPanel/STIBreakdownPanel.tsx
 var import_Box25 = __toESM(require("@mui/material/Box"));
-var import_Typography17 = __toESM(require("@mui/material/Typography"));
+var import_Typography18 = __toESM(require("@mui/material/Typography"));
 var import_LinearProgress2 = __toESM(require("@mui/material/LinearProgress"));
 var import_AddOutlined = __toESM(require("@mui/icons-material/AddOutlined"));
 var import_RemoveOutlined = __toESM(require("@mui/icons-material/RemoveOutlined"));
-var import_tokens32 = require("@mitumba/tokens");
+var import_tokens33 = require("@mitumba/tokens");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function formatPercent(value) {
   return `${Math.round(value * 100)}%`;
@@ -3094,29 +3190,29 @@ function STIBreakdownPanel({
     import_Box25.default,
     {
       sx: {
-        p: import_tokens32.tokens.spacing.base,
-        borderRadius: import_tokens32.tokens.radius.lg,
-        bgcolor: import_tokens32.tokens.colors.surface,
-        boxShadow: import_tokens32.tokens.shadows.card,
-        border: `1px solid ${import_tokens32.tokens.colors.divider}`
+        p: import_tokens33.tokens.spacing.base,
+        borderRadius: import_tokens33.tokens.radius.lg,
+        bgcolor: import_tokens33.tokens.colors.surface,
+        boxShadow: import_tokens33.tokens.shadows.card,
+        border: `1px solid ${import_tokens33.tokens.colors.divider}`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Box25.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens32.tokens.spacing.base, mb: import_tokens32.tokens.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(STIScoreChip, { score }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Box25.default, { component: "section", "aria-label": "Score factors", sx: { mb: import_tokens32.tokens.spacing.lg }, children: factors.map((factor) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Box25.default, { sx: { mb: import_tokens32.tokens.spacing.md }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Box25.default, { sx: { display: "flex", justifyContent: "space-between", mb: import_tokens32.tokens.spacing.xs }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Box25.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens33.tokens.spacing.base, mb: import_tokens33.tokens.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(STIScoreChip, { score }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Box25.default, { component: "section", "aria-label": "Score factors", sx: { mb: import_tokens33.tokens.spacing.lg }, children: factors.map((factor) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Box25.default, { sx: { mb: import_tokens33.tokens.spacing.md }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Box25.default, { sx: { display: "flex", justifyContent: "space-between", mb: import_tokens33.tokens.spacing.xs }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              import_Typography17.default,
+              import_Typography18.default,
               {
                 variant: "body2",
-                sx: { color: import_tokens32.tokens.colors.textSecondary, fontSize: import_tokens32.tokens.typography.fontSizes.sm },
+                sx: { color: import_tokens33.tokens.colors.textSecondary, fontSize: import_tokens33.tokens.typography.fontSizes.sm },
                 children: factor.label
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              import_Typography17.default,
+              import_Typography18.default,
               {
                 variant: "body2",
-                sx: { fontWeight: import_tokens32.tokens.typography.fontWeights.semibold, fontSize: import_tokens32.tokens.typography.fontSizes.sm },
+                sx: { fontWeight: import_tokens33.tokens.typography.fontWeights.semibold, fontSize: import_tokens33.tokens.typography.fontSizes.sm },
                 children: factor.display
               }
             )
@@ -3127,12 +3223,12 @@ function STIBreakdownPanel({
               variant: "determinate",
               value: factor.value * 100,
               sx: {
-                height: import_tokens32.tokens.spacing.sm,
-                borderRadius: import_tokens32.tokens.radius.full,
-                bgcolor: import_tokens32.tokens.colors.background,
+                height: import_tokens33.tokens.spacing.sm,
+                borderRadius: import_tokens33.tokens.radius.full,
+                bgcolor: import_tokens33.tokens.colors.background,
                 "& .MuiLinearProgress-bar": {
-                  bgcolor: import_tokens32.tokens.colors.green,
-                  borderRadius: import_tokens32.tokens.radius.full
+                  bgcolor: import_tokens33.tokens.colors.green,
+                  borderRadius: import_tokens33.tokens.radius.full
                 }
               },
               "aria-label": `${factor.label} progress`
@@ -3141,14 +3237,14 @@ function STIBreakdownPanel({
         ] }, factor.label)) }),
         recentEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Box25.default, { component: "section", "aria-label": "Recent STI events", children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_Typography17.default,
+            import_Typography18.default,
             {
               variant: "body2",
               sx: {
-                fontWeight: import_tokens32.tokens.typography.fontWeights.semibold,
-                fontSize: import_tokens32.tokens.typography.fontSizes.sm,
-                color: import_tokens32.tokens.colors.textPrimary,
-                mb: import_tokens32.tokens.spacing.sm
+                fontWeight: import_tokens33.tokens.typography.fontWeights.semibold,
+                fontSize: import_tokens33.tokens.typography.fontSizes.sm,
+                color: import_tokens33.tokens.colors.textPrimary,
+                mb: import_tokens33.tokens.spacing.sm
               },
               children: "Recent Events"
             }
@@ -3159,34 +3255,34 @@ function STIBreakdownPanel({
               sx: {
                 display: "flex",
                 alignItems: "flex-start",
-                gap: import_tokens32.tokens.spacing.sm,
-                py: import_tokens32.tokens.spacing.sm,
-                borderBottom: `1px solid ${import_tokens32.tokens.colors.divider}`
+                gap: import_tokens33.tokens.spacing.sm,
+                py: import_tokens33.tokens.spacing.sm,
+                borderBottom: `1px solid ${import_tokens33.tokens.colors.divider}`
               },
               children: [
-                event.type === "positive" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_AddOutlined.default, { sx: { fontSize: 16, color: import_tokens32.tokens.colors.success, mt: import_tokens32.tokens.spacing.xs } }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_RemoveOutlined.default, { sx: { fontSize: 16, color: import_tokens32.tokens.colors.error, mt: import_tokens32.tokens.spacing.xs } }),
+                event.type === "positive" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_AddOutlined.default, { sx: { fontSize: 16, color: import_tokens33.tokens.colors.success, mt: import_tokens33.tokens.spacing.xs } }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_RemoveOutlined.default, { sx: { fontSize: 16, color: import_tokens33.tokens.colors.error, mt: import_tokens33.tokens.spacing.xs } }),
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Box25.default, { sx: { flex: 1 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_Box25.default, { sx: { display: "flex", justifyContent: "space-between" }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                      import_Typography17.default,
+                      import_Typography18.default,
                       {
                         variant: "body2",
                         sx: {
-                          fontSize: import_tokens32.tokens.typography.fontSizes.sm,
-                          color: import_tokens32.tokens.colors.textPrimary,
-                          fontWeight: import_tokens32.tokens.typography.fontWeights.medium
+                          fontSize: import_tokens33.tokens.typography.fontSizes.sm,
+                          color: import_tokens33.tokens.colors.textPrimary,
+                          fontWeight: import_tokens33.tokens.typography.fontWeights.medium
                         },
                         children: event.reason
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                      import_Typography17.default,
+                      import_Typography18.default,
                       {
                         variant: "caption",
                         sx: {
-                          fontSize: import_tokens32.tokens.typography.fontSizes.xs,
-                          fontWeight: import_tokens32.tokens.typography.fontWeights.bold,
-                          color: event.type === "positive" ? import_tokens32.tokens.colors.success : import_tokens32.tokens.colors.error
+                          fontSize: import_tokens33.tokens.typography.fontSizes.xs,
+                          fontWeight: import_tokens33.tokens.typography.fontWeights.bold,
+                          color: event.type === "positive" ? import_tokens33.tokens.colors.success : import_tokens33.tokens.colors.error
                         },
                         children: [
                           event.type === "positive" ? "+" : "",
@@ -3195,7 +3291,7 @@ function STIBreakdownPanel({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Typography17.default, { variant: "caption", sx: { fontSize: import_tokens32.tokens.typography.fontSizes.xs, color: import_tokens32.tokens.colors.textSecondary }, children: event.timestamp })
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_Typography18.default, { variant: "caption", sx: { fontSize: import_tokens33.tokens.typography.fontSizes.xs, color: import_tokens33.tokens.colors.textSecondary }, children: event.timestamp })
                 ] })
               ]
             },
@@ -3210,13 +3306,13 @@ function STIBreakdownPanel({
 // src/components/listing/ListingCard/ListingCard.tsx
 var import_react12 = require("react");
 var import_Box26 = __toESM(require("@mui/material/Box"));
-var import_Typography18 = __toESM(require("@mui/material/Typography"));
+var import_Typography19 = __toESM(require("@mui/material/Typography"));
 var import_Stack4 = __toESM(require("@mui/material/Stack"));
 var import_IconButton6 = __toESM(require("@mui/material/IconButton"));
 var import_Favorite = __toESM(require("@mui/icons-material/Favorite"));
 var import_FavoriteBorder = __toESM(require("@mui/icons-material/FavoriteBorder"));
 var import_ArrowOutward = __toESM(require("@mui/icons-material/ArrowOutward"));
-var import_tokens33 = require("@mitumba/tokens");
+var import_tokens34 = require("@mitumba/tokens");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function ListingCard({
   images,
@@ -3249,8 +3345,8 @@ function ListingCard({
       sx: [
         {
           width: "100%",
-          backgroundColor: import_tokens33.tokens.colors.surface,
-          borderRadius: `${import_tokens33.tokens.radius.lg}px`,
+          backgroundColor: import_tokens34.tokens.colors.surface,
+          borderRadius: `${import_tokens34.tokens.radius.lg}px`,
           // Standardized to 16px (Serious)
           overflow: "hidden",
           // High-end layered shadow, no clunky borders
@@ -3263,13 +3359,13 @@ function ListingCard({
           position: "relative",
           "&:hover": {
             transform: "translateY(-6px)",
-            boxShadow: import_tokens33.tokens.shadows.deep
+            boxShadow: import_tokens34.tokens.shadows.deep
           }
         },
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_Box26.default, { sx: { position: "relative", width: "100%", pt: "100%", backgroundColor: import_tokens33.tokens.colors.background }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_Box26.default, { sx: { position: "relative", width: "100%", pt: "100%", backgroundColor: import_tokens34.tokens.colors.background }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_Box26.default,
             {
@@ -3298,13 +3394,13 @@ function ListingCard({
                 backdropFilter: "blur(4px)",
                 px: 1.5,
                 py: 0.5,
-                borderRadius: import_tokens33.tokens.radius.full,
+                borderRadius: import_tokens34.tokens.radius.full,
                 fontSize: 10,
                 fontWeight: 800,
-                color: import_tokens33.tokens.colors.textPrimary,
-                fontFamily: import_tokens33.tokens.typography.fontFamily,
+                color: import_tokens34.tokens.colors.textPrimary,
+                fontFamily: import_tokens34.tokens.typography.fontFamily,
                 textTransform: "uppercase",
-                boxShadow: import_tokens33.tokens.shadows.card,
+                boxShadow: import_tokens34.tokens.shadows.card,
                 zIndex: 2
               },
               children: badge
@@ -3319,12 +3415,12 @@ function ListingCard({
                 right: 12,
                 width: 32,
                 height: 32,
-                backgroundColor: import_tokens33.tokens.colors.white,
+                backgroundColor: import_tokens34.tokens.colors.white,
                 borderRadius: "50%",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                boxShadow: import_tokens33.tokens.shadows.card,
+                boxShadow: import_tokens34.tokens.shadows.card,
                 p: 0.5,
                 zIndex: 2,
                 "& img": { width: "100%", height: "100%", objectFit: "contain" }
@@ -3342,10 +3438,10 @@ function ListingCard({
                 right: 12,
                 backgroundColor: "rgba(255, 255, 255, 0.9)",
                 backdropFilter: "blur(4px)",
-                boxShadow: import_tokens33.tokens.shadows.card,
-                color: isLiked ? import_tokens33.tokens.colors.error : import_tokens33.tokens.colors.textSecondary,
+                boxShadow: import_tokens34.tokens.shadows.card,
+                color: isLiked ? import_tokens34.tokens.colors.error : import_tokens34.tokens.colors.textSecondary,
                 zIndex: 2,
-                "&:hover": { backgroundColor: import_tokens33.tokens.colors.white, transform: "scale(1.1)" }
+                "&:hover": { backgroundColor: import_tokens34.tokens.colors.white, transform: "scale(1.1)" }
               },
               children: isLiked ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_Favorite.default, { sx: { fontSize: 18 } }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_FavoriteBorder.default, { sx: { fontSize: 18 } })
             }
@@ -3372,8 +3468,8 @@ function ListingCard({
                   sx: {
                     width: activeImage === i ? 12 : 6,
                     height: 6,
-                    borderRadius: import_tokens33.tokens.radius.full,
-                    backgroundColor: import_tokens33.tokens.colors.white,
+                    borderRadius: import_tokens34.tokens.radius.full,
+                    backgroundColor: import_tokens34.tokens.colors.white,
                     opacity: activeImage === i ? 1 : 0.5,
                     transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
                     cursor: "pointer",
@@ -3388,13 +3484,13 @@ function ListingCard({
         /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_Box26.default, { sx: { p: 2.5 }, children: [
           " ",
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            import_Typography18.default,
+            import_Typography19.default,
             {
               sx: {
-                fontSize: import_tokens33.tokens.typography.fontSizes.base,
+                fontSize: import_tokens34.tokens.typography.fontSizes.base,
                 fontWeight: 800,
-                color: import_tokens33.tokens.colors.textPrimary,
-                fontFamily: import_tokens33.tokens.typography.fontFamily,
+                color: import_tokens34.tokens.colors.textPrimary,
+                fontFamily: import_tokens34.tokens.typography.fontFamily,
                 lineHeight: 1.2,
                 mb: 0.5,
                 whiteSpace: "nowrap",
@@ -3405,12 +3501,12 @@ function ListingCard({
             }
           ),
           (brand || size) && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-            import_Typography18.default,
+            import_Typography19.default,
             {
               sx: {
-                fontSize: import_tokens33.tokens.typography.fontSizes.xs,
-                color: import_tokens33.tokens.colors.textSecondary,
-                fontFamily: import_tokens33.tokens.typography.fontFamily,
+                fontSize: import_tokens34.tokens.typography.fontSizes.xs,
+                color: import_tokens34.tokens.colors.textSecondary,
+                fontFamily: import_tokens34.tokens.typography.fontFamily,
                 fontWeight: 600,
                 mb: 2
               },
@@ -3426,29 +3522,29 @@ function ListingCard({
               import_Box26.default,
               {
                 sx: {
-                  backgroundColor: import_tokens33.tokens.colors.background,
+                  backgroundColor: import_tokens34.tokens.colors.background,
                   px: 1.5,
                   py: 0.8,
-                  borderRadius: import_tokens33.tokens.radius.full,
-                  fontSize: import_tokens33.tokens.typography.fontSizes.base,
+                  borderRadius: import_tokens34.tokens.radius.full,
+                  fontSize: import_tokens34.tokens.typography.fontSizes.base,
                   fontWeight: 800,
-                  color: import_tokens33.tokens.colors.textPrimary,
-                  fontFamily: import_tokens33.tokens.typography.fontFamily,
+                  color: import_tokens34.tokens.colors.textPrimary,
+                  fontFamily: import_tokens34.tokens.typography.fontFamily,
                   display: "flex",
                   alignItems: "baseline",
                   gap: 0.5
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_Typography18.default, { component: "span", sx: { fontSize: 10, fontWeight: 900 }, children: "KES" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_Typography19.default, { component: "span", sx: { fontSize: 10, fontWeight: 900 }, children: "KES" }),
                   price.toLocaleString(),
                   originalPrice && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                    import_Typography18.default,
+                    import_Typography19.default,
                     {
                       component: "span",
                       sx: {
                         ml: 0.5,
                         fontSize: 10,
-                        color: import_tokens33.tokens.colors.textDisabled,
+                        color: import_tokens34.tokens.colors.textDisabled,
                         textDecoration: "line-through",
                         fontWeight: 600
                       },
@@ -3468,7 +3564,7 @@ function ListingCard({
                 icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_ArrowOutward.default, { sx: { fontSize: 16 } }),
                 iconPosition: "right",
                 sx: {
-                  borderRadius: import_tokens33.tokens.radius.full,
+                  borderRadius: import_tokens34.tokens.radius.full,
                   px: 2.5,
                   height: 32,
                   // Forced small height for density
@@ -3486,7 +3582,7 @@ function ListingCard({
 
 // src/components/listing/ListingCardSkeleton/ListingCardSkeleton.tsx
 var import_Box27 = __toESM(require("@mui/material/Box"));
-var import_tokens34 = require("@mitumba/tokens");
+var import_tokens35 = require("@mitumba/tokens");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function ListingCardSkeleton() {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -3494,8 +3590,8 @@ function ListingCardSkeleton() {
     {
       sx: {
         width: "100%",
-        backgroundColor: import_tokens34.tokens.colors.surface,
-        borderRadius: `${import_tokens34.tokens.radius.lg}px`,
+        backgroundColor: import_tokens35.tokens.colors.surface,
+        borderRadius: `${import_tokens35.tokens.radius.lg}px`,
         // 16px (Serious Standard)
         overflow: "hidden",
         boxShadow: `
@@ -3589,7 +3685,7 @@ function ListingGrid({
 // src/components/listing/ListingImageGallery/ListingImageGallery.tsx
 var import_react13 = require("react");
 var import_Box29 = __toESM(require("@mui/material/Box"));
-var import_tokens35 = require("@mitumba/tokens");
+var import_tokens36 = require("@mitumba/tokens");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function ListingImageGallery({ images, title }) {
   const [activeIndex, setActiveIndex] = (0, import_react13.useState)(0);
@@ -3623,14 +3719,14 @@ function ListingImageGallery({ images, title }) {
         sx: {
           alignItems: "center",
           aspectRatio: "1 / 1",
-          backgroundColor: import_tokens35.tokens.colors.background,
-          borderRadius: `${import_tokens35.tokens.radius.lg}px`,
-          color: import_tokens35.tokens.colors.textSecondary,
+          backgroundColor: import_tokens36.tokens.colors.background,
+          borderRadius: `${import_tokens36.tokens.radius.lg}px`,
+          color: import_tokens36.tokens.colors.textSecondary,
           display: "flex",
-          fontSize: import_tokens35.tokens.typography.fontSizes.base,
+          fontSize: import_tokens36.tokens.typography.fontSizes.base,
           justifyContent: "center",
           width: "100%",
-          border: `1px dashed ${import_tokens35.tokens.colors.divider}`
+          border: `1px dashed ${import_tokens36.tokens.colors.divider}`
         },
         children: "No images available"
       }
@@ -3642,7 +3738,7 @@ function ListingImageGallery({ images, title }) {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: import_tokens35.tokens.spacing.base,
+        gap: import_tokens36.tokens.spacing.base,
         width: "100%"
       },
       children: [
@@ -3651,11 +3747,11 @@ function ListingImageGallery({ images, title }) {
           {
             sx: {
               aspectRatio: "1 / 1",
-              borderRadius: `${import_tokens35.tokens.radius.lg}px`,
+              borderRadius: `${import_tokens36.tokens.radius.lg}px`,
               overflow: "hidden",
               position: "relative",
               width: "100%",
-              backgroundColor: import_tokens35.tokens.colors.background,
+              backgroundColor: import_tokens36.tokens.colors.background,
               boxShadow: `
             0 2px 4px 0 rgba(0, 0, 0, 0.05),
             0 8px 16px -4px rgba(0, 0, 0, 0.1)
@@ -3703,8 +3799,8 @@ function ListingImageGallery({ images, title }) {
                 role: "button",
                 tabIndex: 0,
                 sx: {
-                  border: index === activeIndex ? `2px solid ${import_tokens35.tokens.colors.green}` : `2px solid transparent`,
-                  borderRadius: `${import_tokens35.tokens.radius.md}px`,
+                  border: index === activeIndex ? `2px solid ${import_tokens36.tokens.colors.green}` : `2px solid transparent`,
+                  borderRadius: `${import_tokens36.tokens.radius.md}px`,
                   cursor: "pointer",
                   flexShrink: 0,
                   height: 56,
@@ -3719,7 +3815,7 @@ function ListingImageGallery({ images, title }) {
                   },
                   "&:focus-visible": {
                     outline: "none",
-                    boxShadow: import_tokens35.tokens.shadows.focus
+                    boxShadow: import_tokens36.tokens.shadows.focus
                   }
                 },
                 "aria-label": `View image ${index + 1} of ${images.length}`,
@@ -3770,33 +3866,33 @@ function ConditionBadge({ grade, showLabel = false }) {
 }
 
 // src/components/commerce/PriceTag/PriceTag.tsx
-var import_Typography19 = __toESM(require("@mui/material/Typography"));
-var import_tokens36 = require("@mitumba/tokens");
+var import_Typography20 = __toESM(require("@mui/material/Typography"));
+var import_tokens37 = require("@mitumba/tokens");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function PriceTag({ priceKes, size = "medium", color = "default", strikethrough = false }) {
   const formattedNumber = new Intl.NumberFormat("en-KE").format(priceKes);
   const formatted = `KES ${formattedNumber}`;
   const sizeStyles = {
     small: {
-      fontSize: import_tokens36.tokens.typography.fontSizes.sm,
-      fontWeight: import_tokens36.tokens.typography.fontWeights.semibold
+      fontSize: import_tokens37.tokens.typography.fontSizes.sm,
+      fontWeight: import_tokens37.tokens.typography.fontWeights.semibold
     },
     medium: {
-      fontSize: import_tokens36.tokens.typography.fontSizes.base,
-      fontWeight: import_tokens36.tokens.typography.fontWeights.bold
+      fontSize: import_tokens37.tokens.typography.fontSizes.base,
+      fontWeight: import_tokens37.tokens.typography.fontWeights.bold
     },
     large: {
-      fontSize: import_tokens36.tokens.typography.fontSizes.xl,
-      fontWeight: import_tokens36.tokens.typography.fontWeights.extrabold
+      fontSize: import_tokens37.tokens.typography.fontSizes.xl,
+      fontWeight: import_tokens37.tokens.typography.fontWeights.extrabold
     }
   };
   const colorMap = {
-    green: import_tokens36.tokens.colors.green,
-    earth: import_tokens36.tokens.colors.earth,
-    default: import_tokens36.tokens.colors.textPrimary
+    green: import_tokens37.tokens.colors.green,
+    earth: import_tokens37.tokens.colors.earth,
+    default: import_tokens37.tokens.colors.textPrimary
   };
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_Typography19.default,
+    import_Typography20.default,
     {
       component: "span",
       sx: {
@@ -3834,11 +3930,11 @@ function DeliveryBadge({ type, estimatedDays }) {
 
 // src/components/commerce/CartItem/CartItem.tsx
 var import_Box30 = __toESM(require("@mui/material/Box"));
-var import_Typography20 = __toESM(require("@mui/material/Typography"));
+var import_Typography21 = __toESM(require("@mui/material/Typography"));
 var import_IconButton7 = __toESM(require("@mui/material/IconButton"));
 var import_Close4 = __toESM(require("@mui/icons-material/Close"));
 var import_Stack5 = __toESM(require("@mui/material/Stack"));
-var import_tokens37 = require("@mitumba/tokens");
+var import_tokens38 = require("@mitumba/tokens");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function CartItem({
   imageUrl,
@@ -3860,8 +3956,8 @@ function CartItem({
         {
           display: "flex",
           width: "100%",
-          backgroundColor: import_tokens37.tokens.colors.surface,
-          borderRadius: `${import_tokens37.tokens.radius.lg}px`,
+          backgroundColor: import_tokens38.tokens.colors.surface,
+          borderRadius: `${import_tokens38.tokens.radius.lg}px`,
           // 16px (Serious Standard)
           p: { xs: 2, md: 3 },
           boxShadow: `
@@ -3870,10 +3966,10 @@ function CartItem({
           `,
           transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
           position: "relative",
-          border: `1px solid ${import_tokens37.tokens.colors.divider}`,
+          border: `1px solid ${import_tokens38.tokens.colors.divider}`,
           "&:hover": {
             transform: "translateY(-4px)",
-            boxShadow: import_tokens37.tokens.shadows.deep
+            boxShadow: import_tokens38.tokens.shadows.deep
           }
         },
         ...Array.isArray(sx) ? sx : [sx]
@@ -3885,9 +3981,9 @@ function CartItem({
             sx: {
               width: { xs: 80, sm: 120, md: 140 },
               height: { xs: 80, sm: 120, md: 140 },
-              borderRadius: `${import_tokens37.tokens.radius.md}px`,
+              borderRadius: `${import_tokens38.tokens.radius.md}px`,
               overflow: "hidden",
-              backgroundColor: import_tokens37.tokens.colors.background,
+              backgroundColor: import_tokens38.tokens.colors.background,
               flexShrink: 0
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -3916,13 +4012,13 @@ function CartItem({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Box30.default, { sx: { flex: 1.5 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  import_Typography20.default,
+                  import_Typography21.default,
                   {
                     sx: {
-                      fontSize: import_tokens37.tokens.typography.fontSizes.lg,
+                      fontSize: import_tokens38.tokens.typography.fontSizes.lg,
                       fontWeight: 900,
-                      color: import_tokens37.tokens.colors.textPrimary,
-                      fontFamily: import_tokens37.tokens.typography.fontFamily,
+                      color: import_tokens38.tokens.colors.textPrimary,
+                      fontFamily: import_tokens38.tokens.typography.fontFamily,
                       textTransform: "uppercase",
                       lineHeight: 1.1,
                       mb: 0.5
@@ -3931,12 +4027,12 @@ function CartItem({
                   }
                 ),
                 subtitle && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  import_Typography20.default,
+                  import_Typography21.default,
                   {
                     variant: "caption",
                     sx: {
                       display: "block",
-                      color: import_tokens37.tokens.colors.textSecondary,
+                      color: import_tokens38.tokens.colors.textSecondary,
                       fontWeight: 700,
                       textTransform: "uppercase",
                       fontSize: 10
@@ -3945,12 +4041,12 @@ function CartItem({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  import_Typography20.default,
+                  import_Typography21.default,
                   {
                     variant: "caption",
                     sx: {
                       display: "block",
-                      color: import_tokens37.tokens.colors.green,
+                      color: import_tokens38.tokens.colors.green,
                       fontWeight: 800,
                       fontSize: 9,
                       mt: 1,
@@ -3963,7 +4059,7 @@ function CartItem({
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Stack5.default, { direction: "row", spacing: { xs: 2, sm: 4, md: 6 }, alignItems: "center", sx: { width: { xs: "100%", lg: "auto" } }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Box30.default, { sx: { width: 80 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Typography20.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens37.tokens.colors.textDisabled, fontSize: 10 }, children: "SIZE" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Typography21.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens38.tokens.colors.textDisabled, fontSize: 10 }, children: "SIZE" }),
                   /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     MitumbaSelect,
                     {
@@ -3977,7 +4073,7 @@ function CartItem({
                   )
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Box30.default, { sx: { width: 80 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Typography20.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens37.tokens.colors.textDisabled, fontSize: 10 }, children: "QUANTITY" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Typography21.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens38.tokens.colors.textDisabled, fontSize: 10 }, children: "QUANTITY" }),
                   /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     MitumbaSelect,
                     {
@@ -3991,8 +4087,8 @@ function CartItem({
                   )
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Box30.default, { sx: { textAlign: "right", minWidth: 100 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Typography20.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens37.tokens.colors.textDisabled, fontSize: 10 }, children: "PRICE" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Typography20.default, { sx: { fontWeight: 900, color: import_tokens37.tokens.colors.textPrimary, fontSize: import_tokens37.tokens.typography.fontSizes.base, fontFamily: import_tokens37.tokens.typography.fontFamily }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_Typography21.default, { variant: "caption", sx: { display: "block", mb: 1.5, fontWeight: 700, color: import_tokens38.tokens.colors.textDisabled, fontSize: 10 }, children: "PRICE" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_Typography21.default, { sx: { fontWeight: 900, color: import_tokens38.tokens.colors.textPrimary, fontSize: import_tokens38.tokens.typography.fontSizes.base, fontFamily: import_tokens38.tokens.typography.fontFamily }, children: [
                     "KES ",
                     priceKes.toLocaleString()
                   ] })
@@ -4009,10 +4105,10 @@ function CartItem({
               position: "absolute",
               top: 8,
               right: 8,
-              color: import_tokens37.tokens.colors.textDisabled,
+              color: import_tokens38.tokens.colors.textDisabled,
               "&:hover": {
-                color: import_tokens37.tokens.colors.error,
-                backgroundColor: import_tokens37.tokens.colors.errorLight,
+                color: import_tokens38.tokens.colors.error,
+                backgroundColor: import_tokens38.tokens.colors.errorLight,
                 transform: "rotate(90deg)"
               },
               transition: "all 0.3s ease"
@@ -4028,10 +4124,10 @@ function CartItem({
 
 // src/components/commerce/OrderStatusTimeline/OrderStatusTimeline.tsx
 var import_Box31 = __toESM(require("@mui/material/Box"));
-var import_Typography21 = __toESM(require("@mui/material/Typography"));
+var import_Typography22 = __toESM(require("@mui/material/Typography"));
 var import_CheckCircleOutlined = __toESM(require("@mui/icons-material/CheckCircleOutlined"));
 var import_RadioButtonUncheckedOutlined = __toESM(require("@mui/icons-material/RadioButtonUncheckedOutlined"));
-var import_tokens38 = require("@mitumba/tokens");
+var import_tokens39 = require("@mitumba/tokens");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var ORDER_STATUS_ORDER = [
   "CREATED",
@@ -4061,22 +4157,22 @@ function OrderStatusTimeline({ currentStatus, events }) {
     import_Box31.default,
     {
       sx: {
-        p: import_tokens38.tokens.spacing.base,
-        borderRadius: import_tokens38.tokens.radius.lg,
-        bgcolor: import_tokens38.tokens.colors.surface,
-        boxShadow: import_tokens38.tokens.shadows.card,
-        border: `1px solid ${import_tokens38.tokens.colors.divider}`
+        p: import_tokens39.tokens.spacing.base,
+        borderRadius: import_tokens39.tokens.radius.lg,
+        bgcolor: import_tokens39.tokens.colors.surface,
+        boxShadow: import_tokens39.tokens.shadows.card,
+        border: `1px solid ${import_tokens39.tokens.colors.divider}`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Box31.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens38.tokens.spacing.sm, mb: import_tokens38.tokens.spacing.base }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Box31.default, { sx: { display: "flex", alignItems: "center", gap: import_tokens39.tokens.spacing.sm, mb: import_tokens39.tokens.spacing.base }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            import_Typography21.default,
+            import_Typography22.default,
             {
               sx: {
-                fontWeight: import_tokens38.tokens.typography.fontWeights.bold,
-                fontSize: import_tokens38.tokens.typography.fontSizes.md,
-                color: import_tokens38.tokens.colors.textPrimary,
-                fontFamily: import_tokens38.tokens.typography.fontFamily
+                fontWeight: import_tokens39.tokens.typography.fontWeights.bold,
+                fontSize: import_tokens39.tokens.typography.fontSizes.md,
+                color: import_tokens39.tokens.colors.textPrimary,
+                fontFamily: import_tokens39.tokens.typography.fontFamily
               },
               children: "Order Tracking"
             }
@@ -4085,15 +4181,15 @@ function OrderStatusTimeline({ currentStatus, events }) {
             import_Box31.default,
             {
               sx: {
-                px: import_tokens38.tokens.spacing.sm,
+                px: import_tokens39.tokens.spacing.sm,
                 py: "2px",
-                borderRadius: import_tokens38.tokens.radius.sm,
-                bgcolor: import_tokens38.tokens.colors.greenLight,
-                color: import_tokens38.tokens.colors.greenDark,
+                borderRadius: import_tokens39.tokens.radius.sm,
+                bgcolor: import_tokens39.tokens.colors.greenLight,
+                color: import_tokens39.tokens.colors.greenDark,
                 fontSize: 10,
-                fontWeight: import_tokens38.tokens.typography.fontWeights.extrabold,
+                fontWeight: import_tokens39.tokens.typography.fontWeights.extrabold,
                 textTransform: "uppercase",
-                letterSpacing: import_tokens38.tokens.typography.letterSpacings.wide
+                letterSpacing: import_tokens39.tokens.typography.letterSpacings.wide
               },
               children: ORDER_STATUS_LABELS[currentStatus]
             }
@@ -4103,19 +4199,19 @@ function OrderStatusTimeline({ currentStatus, events }) {
           import_Box31.default,
           {
             sx: {
-              p: import_tokens38.tokens.spacing.sm,
-              borderRadius: import_tokens38.tokens.radius.sm,
-              bgcolor: import_tokens38.tokens.colors.background,
-              borderLeft: `3px solid ${import_tokens38.tokens.colors.info}`,
-              mb: import_tokens38.tokens.spacing.lg
+              p: import_tokens39.tokens.spacing.sm,
+              borderRadius: import_tokens39.tokens.radius.sm,
+              bgcolor: import_tokens39.tokens.colors.background,
+              borderLeft: `3px solid ${import_tokens39.tokens.colors.info}`,
+              mb: import_tokens39.tokens.spacing.lg
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-              import_Typography21.default,
+              import_Typography22.default,
               {
                 sx: {
-                  color: import_tokens38.tokens.colors.textPrimary,
-                  fontSize: import_tokens38.tokens.typography.fontSizes.sm,
-                  fontFamily: import_tokens38.tokens.typography.fontFamily,
+                  color: import_tokens39.tokens.colors.textPrimary,
+                  fontSize: import_tokens39.tokens.typography.fontSizes.sm,
+                  fontFamily: import_tokens39.tokens.typography.fontFamily,
                   fontStyle: "italic"
                 },
                 children: [
@@ -4139,7 +4235,7 @@ function OrderStatusTimeline({ currentStatus, events }) {
               sx: {
                 display: "flex",
                 alignItems: "flex-start",
-                gap: import_tokens38.tokens.spacing.base,
+                gap: import_tokens39.tokens.spacing.base,
                 position: "relative"
               },
               children: [
@@ -4163,14 +4259,14 @@ function OrderStatusTimeline({ currentStatus, events }) {
                             width: "24px",
                             height: "24px",
                             zIndex: 1,
-                            backgroundColor: import_tokens38.tokens.colors.surface
+                            backgroundColor: import_tokens39.tokens.colors.surface
                           },
                           children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             import_CheckCircleOutlined.default,
                             {
                               sx: {
                                 fontSize: 20,
-                                color: isCurrent ? import_tokens38.tokens.colors.green : import_tokens38.tokens.colors.textDisabled
+                                color: isCurrent ? import_tokens39.tokens.colors.green : import_tokens39.tokens.colors.textDisabled
                               }
                             }
                           ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -4178,7 +4274,7 @@ function OrderStatusTimeline({ currentStatus, events }) {
                             {
                               sx: {
                                 fontSize: 18,
-                                color: import_tokens38.tokens.colors.divider
+                                color: import_tokens39.tokens.colors.divider
                               }
                             }
                           )
@@ -4190,8 +4286,8 @@ function OrderStatusTimeline({ currentStatus, events }) {
                           sx: {
                             width: "2px",
                             flex: 1,
-                            minHeight: import_tokens38.tokens.spacing.lg,
-                            bgcolor: index < currentIndex ? import_tokens38.tokens.colors.green : import_tokens38.tokens.colors.divider,
+                            minHeight: import_tokens39.tokens.spacing.lg,
+                            bgcolor: index < currentIndex ? import_tokens39.tokens.colors.green : import_tokens39.tokens.colors.divider,
                             marginBlock: "2px"
                           }
                         }
@@ -4199,27 +4295,27 @@ function OrderStatusTimeline({ currentStatus, events }) {
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Box31.default, { sx: { pt: "2px", pb: import_tokens38.tokens.spacing.lg }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_Box31.default, { sx: { pt: "2px", pb: import_tokens39.tokens.spacing.lg }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                    import_Typography21.default,
+                    import_Typography22.default,
                     {
                       sx: {
-                        fontWeight: isCurrent ? import_tokens38.tokens.typography.fontWeights.bold : import_tokens38.tokens.typography.fontWeights.medium,
-                        fontSize: import_tokens38.tokens.typography.fontSizes.sm,
-                        fontFamily: import_tokens38.tokens.typography.fontFamily,
-                        color: isCompleted ? import_tokens38.tokens.colors.textPrimary : import_tokens38.tokens.colors.textDisabled,
+                        fontWeight: isCurrent ? import_tokens39.tokens.typography.fontWeights.bold : import_tokens39.tokens.typography.fontWeights.medium,
+                        fontSize: import_tokens39.tokens.typography.fontSizes.sm,
+                        fontFamily: import_tokens39.tokens.typography.fontFamily,
+                        color: isCompleted ? import_tokens39.tokens.colors.textPrimary : import_tokens39.tokens.colors.textDisabled,
                         lineHeight: 1
                       },
                       children: ORDER_STATUS_LABELS[status]
                     }
                   ),
                   latestEvent && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                    import_Typography21.default,
+                    import_Typography22.default,
                     {
                       sx: {
-                        color: import_tokens38.tokens.colors.textSecondary,
+                        color: import_tokens39.tokens.colors.textSecondary,
                         fontSize: 10,
-                        fontFamily: import_tokens38.tokens.typography.fontFamily,
+                        fontFamily: import_tokens39.tokens.typography.fontFamily,
                         mt: "4px"
                       },
                       children: latestEvent.timestamp
@@ -4243,13 +4339,14 @@ var import_AccountBalanceWallet = __toESM(require("@mui/icons-material/AccountBa
 var import_History = __toESM(require("@mui/icons-material/History"));
 var import_ErrorOutline2 = __toESM(require("@mui/icons-material/ErrorOutline"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function EscrowStatusBanner({ status, amountKes, hoursRemaining, sx }) {
+function EscrowStatusBanner({ status, amountKes = 0, hoursRemaining, sx }) {
+  const formattedAmount = (amountKes || 0).toLocaleString();
   const config = {
     FUNDED: {
       severity: "info",
       icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_Security.default, {}),
       title: "Payment in Escrow",
-      message: `KES ${amountKes.toLocaleString()} is securely held. We'll release it once you confirm delivery.`
+      message: `KES ${formattedAmount} is securely held. We'll release it once you confirm delivery.`
     },
     SHIPPED: {
       severity: "info",
@@ -4273,7 +4370,7 @@ function EscrowStatusBanner({ status, amountKes, hoursRemaining, sx }) {
       severity: "error",
       icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_ErrorOutline2.default, {}),
       title: "Payment Refunded",
-      message: `The escrow has been cancelled and KES ${amountKes.toLocaleString()} has been returned to your wallet.`
+      message: `The escrow has been cancelled and KES ${formattedAmount} has been returned to your wallet.`
     }
   };
   const { severity, icon, title, message } = config[status];
@@ -4290,12 +4387,13 @@ function EscrowStatusBanner({ status, amountKes, hoursRemaining, sx }) {
 }
 
 // src/components/vazi/VAZIOutfitCard/VAZIOutfitCard.tsx
-var import_Box32 = __toESM(require("@mui/material/Box"));
-var import_Card = __toESM(require("@mui/material/Card"));
-var import_CardContent = __toESM(require("@mui/material/CardContent"));
-var import_Typography22 = __toESM(require("@mui/material/Typography"));
-var import_tokens39 = require("@mitumba/tokens");
 var import_react14 = require("react");
+var import_Box32 = __toESM(require("@mui/material/Box"));
+var import_Typography23 = __toESM(require("@mui/material/Typography"));
+var import_Stack6 = __toESM(require("@mui/material/Stack"));
+var import_AutoAwesome3 = __toESM(require("@mui/icons-material/AutoAwesome"));
+var import_LocalShipping3 = __toESM(require("@mui/icons-material/LocalShipping"));
+var import_tokens40 = require("@mitumba/tokens");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function VAZIOutfitCard({
   outfitName,
@@ -4316,239 +4414,211 @@ function VAZIOutfitCard({
     [onTap]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-    import_Card.default,
+    import_Box32.default,
     {
       onClick: onTap,
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: onTap ? 0 : -1,
       sx: {
-        borderRadius: import_tokens39.tokens.radius.lg,
-        boxShadow: import_tokens39.tokens.shadows.card,
+        width: "100%",
+        position: "relative",
         cursor: onTap ? "pointer" : "default",
-        display: "flex",
-        flexDirection: "column",
+        borderRadius: `${import_tokens40.tokens.radius.lg}px`,
         overflow: "hidden",
-        transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
-        width: "100%",
-        backgroundColor: import_tokens39.tokens.colors.surface,
-        border: `1px solid ${import_tokens39.tokens.colors.divider}`,
-        "&:hover": onTap ? {
-          transform: "translateY(-4px)",
-          boxShadow: import_tokens39.tokens.shadows.elevated,
-          borderColor: import_tokens39.tokens.colors.earthLight
-        } : void 0,
-        "&:focus-visible": {
-          outline: `2px solid ${import_tokens39.tokens.colors.earthLight}`,
-          boxShadow: import_tokens39.tokens.shadows.focus
+        backgroundColor: import_tokens40.tokens.colors.surface,
+        boxShadow: `
+          0 4px 12px 0 rgba(0, 0, 0, 0.05),
+          0 12px 32px 0 rgba(31, 38, 135, 0.1)
+        `,
+        transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "&:hover": {
+          transform: "translateY(-8px) scale(1.01)",
+          boxShadow: import_tokens40.tokens.shadows.deep,
+          "& .collage-image-2": { transform: "rotate(4deg) translate(8px, -4px)" },
+          "& .collage-image-3": { transform: "rotate(-4deg) translate(-8px, -4px)" }
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-          import_Box32.default,
-          {
-            sx: {
-              alignItems: "center",
-              display: "flex",
-              gap: import_tokens39.tokens.spacing.sm,
-              paddingInline: import_tokens39.tokens.spacing.base,
-              paddingBlock: import_tokens39.tokens.spacing.base,
-              borderBottom: `1px solid ${import_tokens39.tokens.colors.background}`
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VAZIBadge, { size: "small" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                import_Typography22.default,
-                {
-                  sx: {
-                    color: import_tokens39.tokens.colors.textPrimary,
-                    flex: 1,
-                    fontSize: import_tokens39.tokens.typography.fontSizes.base,
-                    fontWeight: import_tokens39.tokens.typography.fontWeights.bold,
-                    lineHeight: import_tokens39.tokens.typography.lineHeights.snug,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  children: outfitName
-                }
-              )
-            ]
-          }
-        ),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           import_Box32.default,
           {
             sx: {
-              display: "flex",
-              gap: import_tokens39.tokens.spacing.sm,
-              overflowX: "auto",
-              padding: import_tokens39.tokens.spacing.base,
-              backgroundColor: import_tokens39.tokens.colors.background,
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
+              position: "absolute",
+              top: 12,
+              left: 12,
+              zIndex: 10
             },
-            children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-              import_Box32.default,
-              {
-                sx: {
-                  flexShrink: 0,
-                  width: "88px"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    import_Box32.default,
-                    {
-                      sx: {
-                        aspectRatio: "3 / 4",
-                        borderRadius: import_tokens39.tokens.radius.sm,
-                        overflow: "hidden",
-                        width: "100%",
-                        backgroundColor: import_tokens39.tokens.colors.surface,
-                        border: `1px solid ${import_tokens39.tokens.colors.divider}`
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                        import_Box32.default,
-                        {
-                          component: "img",
-                          src: item.imageUrl,
-                          alt: `${item.garmentType} \u2014 ${item.sellerName}`,
-                          loading: "lazy",
-                          sx: {
-                            display: "block",
-                            height: "100%",
-                            objectFit: "cover",
-                            width: "100%"
-                          }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    import_Typography22.default,
-                    {
-                      sx: {
-                        color: import_tokens39.tokens.colors.textSecondary,
-                        fontSize: 10,
-                        fontWeight: import_tokens39.tokens.typography.fontWeights.semibold,
-                        textTransform: "uppercase",
-                        letterSpacing: import_tokens39.tokens.typography.letterSpacings.wide,
-                        marginTop: import_tokens39.tokens.spacing.xs,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        textAlign: "center"
-                      },
-                      children: item.sellerName
-                    }
-                  )
-                ]
-              },
-              item.listingId
-            ))
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VAZIBadge, { size: "small" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-          import_CardContent.default,
+          import_Box32.default,
           {
             sx: {
+              position: "relative",
+              width: "100%",
+              height: 280,
+              backgroundColor: import_tokens40.tokens.colors.background,
               display: "flex",
-              flexDirection: "column",
-              gap: import_tokens39.tokens.spacing.sm,
-              padding: import_tokens39.tokens.spacing.base,
-              "&:last-child": {
-                paddingBottom: import_tokens39.tokens.spacing.base
-              }
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              p: 3
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 import_Box32.default,
                 {
                   sx: {
-                    alignItems: "center",
-                    display: "flex",
-                    gap: import_tokens39.tokens.spacing.sm,
-                    justifyContent: "space-between"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PriceTag, { priceKes: totalPriceKes, size: "large", color: "earth" }),
-                    onBuyAll && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Box32.default, { sx: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      MitumbaPrimaryButton,
-                      {
-                        label: "Buy all",
-                        variant: "earth",
-                        size: "small",
-                        fullWidth: false,
-                        onClick: (e) => {
-                          if (e && e.stopPropagation) {
-                            e.stopPropagation();
-                          }
-                          onBuyAll();
-                        }
-                      }
-                    ) })
-                  ]
+                    position: "absolute",
+                    inset: 0,
+                    background: "radial-gradient(circle at center, rgba(160, 98, 53, 0.05) 0%, rgba(255,255,255,0) 70%)",
+                    pointerEvents: "none"
+                  }
                 }
               ),
-              sellersCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-                import_Box32.default,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: import_tokens39.tokens.spacing.xs,
-                    mt: import_tokens39.tokens.spacing.xs
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-                      import_Typography22.default,
-                      {
-                        sx: {
-                          color: import_tokens39.tokens.colors.textSecondary,
-                          fontSize: import_tokens39.tokens.typography.fontSizes.sm,
-                          lineHeight: 1
-                        },
-                        children: [
-                          "Ships from ",
-                          sellersCount,
-                          " sellers"
-                        ]
-                      }
-                    ),
-                    isMultiCity && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Box32.default, { sx: { position: "relative", width: 140, height: 180 }, children: items.slice(0, 3).map((item, index) => {
+                const isMain = index === 0;
+                let rotation = 0;
+                if (index === 1) rotation = -4;
+                if (index === 2) rotation = 4;
+                let leftOffset = 0;
+                if (index === 1) leftOffset = -12;
+                if (index === 2) leftOffset = 12;
+                return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  import_Box32.default,
+                  {
+                    className: `collage-image-${index + 1}`,
+                    sx: {
+                      position: "absolute",
+                      top: isMain ? 0 : 4,
+                      left: isMain ? 0 : leftOffset,
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: `${import_tokens40.tokens.radius.md}px`,
+                      overflow: "hidden",
+                      zIndex: 3 - index,
+                      boxShadow: import_tokens40.tokens.shadows.card,
+                      border: `2px solid ${import_tokens40.tokens.colors.white}`,
+                      transform: `rotate(${rotation}deg)`,
+                      transition: "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                      backgroundColor: import_tokens40.tokens.colors.surface
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                       import_Box32.default,
                       {
-                        component: "span",
-                        sx: {
-                          fontSize: import_tokens39.tokens.typography.fontSizes.xs,
-                          color: import_tokens39.tokens.colors.textDisabled
-                        },
-                        children: "\u2022"
-                      }
-                    ),
-                    isMultiCity && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      import_Typography22.default,
-                      {
-                        sx: {
-                          color: import_tokens39.tokens.colors.earth,
-                          fontSize: import_tokens39.tokens.typography.fontSizes.xs,
-                          fontWeight: import_tokens39.tokens.typography.fontWeights.bold,
-                          textTransform: "uppercase",
-                          letterSpacing: import_tokens39.tokens.typography.letterSpacings.wide,
-                          lineHeight: 1
-                        },
-                        children: "Multi-city"
+                        component: "img",
+                        src: item.imageUrl,
+                        alt: item.garmentType,
+                        sx: { width: "100%", height: "100%", objectFit: "cover" }
                       }
                     )
-                  ]
+                  },
+                  item.listingId
+                );
+              }) }),
+              items.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                MitumbaGlass,
+                {
+                  rounding: "full",
+                  opacity: 0.8,
+                  blur: 12,
+                  sx: {
+                    position: "absolute",
+                    bottom: 20,
+                    right: 20,
+                    px: 1.5,
+                    py: 0.5,
+                    zIndex: 5
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Typography23.default, { sx: { fontSize: 10, fontWeight: 900, color: import_tokens40.tokens.colors.earth }, children: [
+                    "+",
+                    items.length - 3,
+                    " MORE"
+                  ] })
                 }
               )
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Box32.default, { sx: { p: 2.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_Typography23.default,
+            {
+              sx: {
+                fontSize: import_tokens40.tokens.typography.fontSizes.lg,
+                fontWeight: 900,
+                color: import_tokens40.tokens.colors.textPrimary,
+                fontFamily: import_tokens40.tokens.typography.fontFamily,
+                lineHeight: 1.1,
+                mb: 1,
+                letterSpacing: "-0.01em"
+              },
+              children: outfitName
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack6.default, { direction: "row", spacing: 1, alignItems: "center", sx: { mb: 2.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              import_Typography23.default,
+              {
+                sx: {
+                  fontSize: 11,
+                  fontWeight: 700,
+                  color: import_tokens40.tokens.colors.textSecondary,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: [
+                  sellersCount,
+                  " Sellers"
+                ]
+              }
+            ),
+            isMultiCity && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Box32.default, { sx: { width: 4, height: 4, borderRadius: "50%", bgcolor: import_tokens40.tokens.colors.divider } }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack6.default, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_LocalShipping3.default, { sx: { fontSize: 14, color: import_tokens40.tokens.colors.earth } }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                  import_Typography23.default,
+                  {
+                    sx: {
+                      fontSize: 10,
+                      fontWeight: 800,
+                      color: import_tokens40.tokens.colors.earth,
+                      textTransform: "uppercase"
+                    },
+                    children: "Multi-City"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Stack6.default, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Box32.default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_Typography23.default, { sx: { fontSize: 10, fontWeight: 800, color: import_tokens40.tokens.colors.textDisabled, textTransform: "uppercase", mb: 0.2 }, children: "Total Look" }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_Typography23.default, { sx: { fontSize: import_tokens40.tokens.typography.fontSizes.xl, fontWeight: 900, color: import_tokens40.tokens.colors.textPrimary, fontFamily: import_tokens40.tokens.typography.fontFamily }, children: [
+                "KES ",
+                totalPriceKes.toLocaleString()
+              ] })
+            ] }),
+            onBuyAll && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              MitumbaPrimaryButton,
+              {
+                label: "Buy entire look",
+                variant: "earth",
+                size: "small",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_AutoAwesome3.default, { sx: { fontSize: 16 } }),
+                iconPosition: "right",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onBuyAll();
+                },
+                sx: { borderRadius: import_tokens40.tokens.radius.full, height: 36, px: 3 }
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -4556,175 +4626,99 @@ function VAZIOutfitCard({
 
 // src/components/vazi/VAZIOutfitCardSkeleton/VAZIOutfitCardSkeleton.tsx
 var import_Box33 = __toESM(require("@mui/material/Box"));
-var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
-var import_tokens40 = require("@mitumba/tokens");
+var import_tokens41 = require("@mitumba/tokens");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var SKELETON_IMAGE_KEYS = ["image-1", "image-2", "image-3", "image-4"];
 function VAZIOutfitCardSkeleton() {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     import_Box33.default,
     {
       sx: {
-        borderRadius: import_tokens40.tokens.radius.lg,
-        boxShadow: import_tokens40.tokens.shadows.card,
-        display: "flex",
-        flexDirection: "column",
+        borderRadius: `${import_tokens41.tokens.radius.lg}px`,
         overflow: "hidden",
+        backgroundColor: import_tokens41.tokens.colors.surface,
+        boxShadow: import_tokens41.tokens.shadows.card,
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           import_Box33.default,
           {
             sx: {
-              alignItems: "center",
+              height: 280,
+              backgroundColor: import_tokens41.tokens.colors.background,
               display: "flex",
-              gap: import_tokens40.tokens.spacing.sm,
-              paddingInline: import_tokens40.tokens.spacing.base,
-              paddingBlock: import_tokens40.tokens.spacing.base
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative"
             },
-            children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box33.default, { sx: { position: "relative", width: 140, height: 180 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_Skeleton.default,
+                MitumbaSkeleton,
                 {
-                  "aria-label": "Loading VAZI label",
-                  variant: "rounded",
+                  variant: "rectangular",
                   sx: {
-                    borderRadius: import_tokens40.tokens.radius.sm,
-                    height: import_tokens40.tokens.spacing.lg,
-                    width: 48
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: 2,
+                    border: `2px solid ${import_tokens41.tokens.colors.white}`
                   }
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_Skeleton.default,
+                MitumbaSkeleton,
                 {
-                  "aria-label": "Loading outfit name",
-                  variant: "text",
+                  variant: "rectangular",
                   sx: {
-                    flex: 1,
-                    fontSize: import_tokens40.tokens.typography.fontSizes.base
+                    position: "absolute",
+                    top: 4,
+                    left: -12,
+                    width: "100%",
+                    height: "100%",
+                    borderRadius: 2,
+                    zIndex: -1,
+                    transform: "rotate(-4deg)",
+                    opacity: 0.5
                   }
                 }
               )
-            ]
+            ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_Box33.default,
-          {
-            sx: {
-              display: "flex",
-              gap: import_tokens40.tokens.spacing.sm,
-              overflowX: "auto",
-              paddingInline: import_tokens40.tokens.spacing.base,
-              paddingBottom: import_tokens40.tokens.spacing.base,
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
-            },
-            children: SKELETON_IMAGE_KEYS.map((imgKey) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-              import_Box33.default,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box33.default, { sx: { p: 2.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "70%",
+              height: 24,
+              sx: { mb: 1, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            MitumbaSkeleton,
+            {
+              variant: "rectangular",
+              width: "40%",
+              height: 12,
+              sx: { mb: 3, borderRadius: 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box33.default, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_Box33.default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MitumbaSkeleton, { variant: "rectangular", width: 60, height: 10, sx: { mb: 0.5, borderRadius: 0.5 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MitumbaSkeleton, { variant: "rectangular", width: 100, height: 28, sx: { borderRadius: 0.5 } })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              MitumbaSkeleton,
               {
-                sx: {
-                  flexShrink: 0,
-                  width: `${3 / 4 * 100}px`,
-                  minWidth: "88px"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                    import_Skeleton.default,
-                    {
-                      "aria-label": `Loading item image ${imgKey.split("-")[1]}`,
-                      variant: "rounded",
-                      sx: {
-                        aspectRatio: "3 / 4",
-                        borderRadius: import_tokens40.tokens.radius.md,
-                        width: "100%"
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                    import_Skeleton.default,
-                    {
-                      "aria-label": `Loading seller name ${imgKey.split("-")[1]}`,
-                      variant: "text",
-                      sx: {
-                        fontSize: import_tokens40.tokens.typography.fontSizes.xs,
-                        marginTop: import_tokens40.tokens.spacing.xs,
-                        width: "80%"
-                      }
-                    }
-                  )
-                ]
-              },
-              imgKey
-            ))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          import_Box33.default,
-          {
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              gap: import_tokens40.tokens.spacing.sm,
-              paddingInline: import_tokens40.tokens.spacing.base,
-              paddingBlock: import_tokens40.tokens.spacing.base
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-                import_Box33.default,
-                {
-                  sx: {
-                    alignItems: "center",
-                    display: "flex",
-                    gap: import_tokens40.tokens.spacing.sm,
-                    justifyContent: "space-between"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                      import_Skeleton.default,
-                      {
-                        "aria-label": "Loading total price",
-                        variant: "text",
-                        sx: {
-                          fontSize: import_tokens40.tokens.typography.fontSizes.lg,
-                          width: "40%"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                      import_Skeleton.default,
-                      {
-                        "aria-label": "Loading buy button",
-                        variant: "rounded",
-                        sx: {
-                          borderRadius: import_tokens40.tokens.radius.md,
-                          height: "36px",
-                          width: 100
-                        }
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_Skeleton.default,
-                {
-                  "aria-label": "Loading seller info",
-                  variant: "text",
-                  sx: {
-                    fontSize: import_tokens40.tokens.typography.fontSizes.sm,
-                    width: "60%"
-                  }
-                }
-              )
-            ]
-          }
-        )
+                variant: "rounded",
+                width: 120,
+                height: 36,
+                sx: { borderRadius: 100 }
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -4732,43 +4726,12 @@ function VAZIOutfitCardSkeleton() {
 
 // src/components/vazi/VAZIFeedSection/VAZIFeedSection.tsx
 var import_Box34 = __toESM(require("@mui/material/Box"));
-var import_tokens41 = require("@mitumba/tokens");
+var import_Typography24 = __toESM(require("@mui/material/Typography"));
+var import_Stack7 = __toESM(require("@mui/material/Stack"));
+var import_AutoAwesome4 = __toESM(require("@mui/icons-material/AutoAwesome"));
+var import_ArrowForward = __toESM(require("@mui/icons-material/ArrowForward"));
+var import_tokens42 = require("@mitumba/tokens");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var renderOutfitCards = (outfits) => outfits.map((outfit) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-  import_Box34.default,
-  {
-    sx: {
-      flexShrink: 0,
-      width: { xs: "82%", md: "100%" },
-      maxWidth: { xs: "340px", md: "none" }
-    },
-    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-      VAZIOutfitCard,
-      {
-        outfitName: outfit.outfitName,
-        items: outfit.items,
-        totalPriceKes: outfit.totalPriceKes,
-        sellersCount: outfit.sellersCount,
-        isMultiCity: outfit.isMultiCity,
-        onTap: outfit.onTap,
-        onBuyAll: outfit.onBuyAll
-      }
-    )
-  },
-  outfit.outfitName
-));
-var renderSkeletons = () => Array.from({ length: 3 }, (_, skeletonIdx) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-  import_Box34.default,
-  {
-    sx: {
-      flexShrink: 0,
-      width: { xs: "82%", md: "100%" },
-      maxWidth: { xs: "340px", md: "none" }
-    },
-    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(VAZIOutfitCardSkeleton, {})
-  },
-  `skeleton-${skeletonIdx}`
-));
 function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     import_Box34.default,
@@ -4776,7 +4739,7 @@ function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: import_tokens41.tokens.spacing.base,
+        gap: 4,
         width: "100%"
       },
       children: [
@@ -4784,80 +4747,94 @@ function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
           import_Box34.default,
           {
             sx: {
-              alignItems: "center",
               display: "flex",
               justifyContent: "space-between",
-              paddingInline: { xs: import_tokens41.tokens.spacing.base, md: 0 }
+              alignItems: "flex-end",
+              paddingInline: { xs: 2, md: 0 }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                import_Box34.default,
-                {
-                  component: "h2",
-                  sx: {
-                    color: import_tokens41.tokens.colors.textPrimary,
-                    fontFamily: import_tokens41.tokens.typography.fontFamily,
-                    fontSize: import_tokens41.tokens.typography.fontSizes.xl,
-                    fontWeight: import_tokens41.tokens.typography.fontWeights.bold,
-                    lineHeight: import_tokens41.tokens.typography.lineHeights.snug,
-                    margin: 0
-                  },
-                  children: "VAZI Picks"
-                }
-              ),
-              onSeeAll && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Stack7.default, { spacing: 1, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_Stack7.default, { direction: "row", spacing: 1, alignItems: "center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_AutoAwesome4.default, { sx: { fontSize: 18, color: import_tokens42.tokens.colors.earth } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    import_Typography24.default,
+                    {
+                      sx: {
+                        fontSize: 12,
+                        fontWeight: 900,
+                        color: import_tokens42.tokens.colors.earth,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.1em"
+                      },
+                      children: "AI Curation"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  import_Typography24.default,
+                  {
+                    component: "h2",
+                    sx: {
+                      color: import_tokens42.tokens.colors.textPrimary,
+                      fontFamily: import_tokens42.tokens.typography.fontFamily,
+                      fontSize: import_tokens42.tokens.typography.fontSizes.xxl,
+                      fontWeight: 900,
+                      lineHeight: 1,
+                      margin: 0
+                    },
+                    children: "VAZI Picks for You"
+                  }
+                )
+              ] }),
+              onSeeAll && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                 import_Box34.default,
                 {
-                  component: "button",
                   onClick: onSeeAll,
                   sx: {
-                    backgroundColor: "transparent",
-                    border: "none",
-                    color: import_tokens41.tokens.colors.earth,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                    color: import_tokens42.tokens.colors.earth,
                     cursor: "pointer",
-                    fontFamily: import_tokens41.tokens.typography.fontFamily,
-                    fontSize: import_tokens41.tokens.typography.fontSizes.base,
-                    fontWeight: import_tokens41.tokens.typography.fontWeights.semibold,
-                    lineHeight: import_tokens41.tokens.typography.lineHeights.normal,
-                    padding: 0,
-                    textDecoration: "none",
-                    transition: "color 200ms ease",
-                    whiteSpace: "nowrap",
+                    transition: "all 0.3s ease",
                     "&:hover": {
-                      color: import_tokens41.tokens.colors.earthDark,
-                      textDecoration: "underline"
-                    },
-                    "&:focus-visible": {
-                      outline: `${import_tokens41.tokens.spacing.xs}px solid transparent`,
-                      boxShadow: import_tokens41.tokens.shadows.focus,
-                      borderRadius: import_tokens41.tokens.radius.sm
+                      gap: 1.5,
+                      color: import_tokens42.tokens.colors.earthDark
                     }
                   },
-                  children: "See all"
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                      import_Typography24.default,
+                      {
+                        sx: {
+                          fontSize: 12,
+                          fontWeight: 900,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em"
+                        },
+                        children: "Explore All"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_ArrowForward.default, { sx: { fontSize: 16 } })
+                  ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_Box34.default,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MitumbaGrid, { columns: { xs: 1, sm: 2, md: 3, lg: 3 }, gap: 3, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(VAZIOutfitCardSkeleton, {}, `vazi-skeleton-${i + 1}`)) : outfits.map((outfit) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          VAZIOutfitCard,
           {
-            sx: {
-              display: { xs: "flex", md: "grid" },
-              gridTemplateColumns: { md: "repeat(3, 1fr)" },
-              gap: import_tokens41.tokens.spacing.base,
-              overflowX: { xs: "auto", md: "visible" },
-              paddingInline: { xs: import_tokens41.tokens.spacing.base, md: 0 },
-              paddingBottom: { xs: import_tokens41.tokens.spacing.sm, md: 0 },
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
-              }
-            },
-            children: loading ? renderSkeletons() : renderOutfitCards(outfits)
-          }
-        )
+            outfitName: outfit.outfitName,
+            items: outfit.items,
+            totalPriceKes: outfit.totalPriceKes,
+            sellersCount: outfit.sellersCount,
+            isMultiCity: outfit.isMultiCity,
+            onTap: outfit.onTap,
+            onBuyAll: outfit.onBuyAll
+          },
+          outfit.outfitName
+        )) })
       ]
     }
   );
@@ -4865,90 +4842,71 @@ function VAZIFeedSection({ outfits, loading = false, onSeeAll }) {
 
 // src/components/vazi/CompleteThisLookPanel/CompleteThisLookPanel.tsx
 var import_Box35 = __toESM(require("@mui/material/Box"));
-var import_Typography23 = __toESM(require("@mui/material/Typography"));
-var import_tokens42 = require("@mitumba/tokens");
+var import_Typography25 = __toESM(require("@mui/material/Typography"));
+var import_Stack8 = __toESM(require("@mui/material/Stack"));
+var import_AutoAwesome5 = __toESM(require("@mui/icons-material/AutoAwesome"));
+var import_tokens43 = require("@mitumba/tokens");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function CompleteThisLookPanel({ outfits, loading = false }) {
   if (!loading && outfits.length === 0) {
     return null;
   }
-  const renderOutfitCards2 = () => outfits.map((outfit) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_Box35.default,
-    {
-      sx: {
-        flexShrink: 0,
-        width: { xs: "82%", md: "100%" },
-        maxWidth: { xs: "340px", md: "none" }
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        VAZIOutfitCard,
-        {
-          outfitName: outfit.outfitName,
-          items: outfit.items,
-          totalPriceKes: outfit.totalPriceKes,
-          sellersCount: outfit.sellersCount,
-          isMultiCity: outfit.isMultiCity,
-          onTap: outfit.onTap,
-          onBuyAll: outfit.onBuyAll
-        }
-      )
-    },
-    outfit.outfitName
-  ));
-  const renderSkeletons2 = () => ["skel-0", "skel-1", "skel-2"].map((skelKey) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_Box35.default,
-    {
-      sx: {
-        flexShrink: 0,
-        width: { xs: "82%", md: "100%" },
-        maxWidth: { xs: "340px", md: "none" }
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(VAZIOutfitCardSkeleton, {})
-    },
-    skelKey
-  ));
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     import_Box35.default,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: import_tokens42.tokens.spacing.base,
+        gap: 3,
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-          import_Typography23.default,
-          {
-            component: "h2",
-            sx: {
-              color: import_tokens42.tokens.colors.textPrimary,
-              fontSize: import_tokens42.tokens.typography.fontSizes.xl,
-              fontWeight: import_tokens42.tokens.typography.fontWeights.bold,
-              lineHeight: import_tokens42.tokens.typography.lineHeights.snug,
-              margin: 0
-            },
-            children: "Complete this look"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-          import_Box35.default,
-          {
-            sx: {
-              display: { xs: "flex", md: "grid" },
-              gridTemplateColumns: { md: "repeat(3, 1fr)" },
-              gap: import_tokens42.tokens.spacing.base,
-              overflowX: { xs: "auto", md: "visible" },
-              paddingBottom: { xs: import_tokens42.tokens.spacing.sm, md: 0 },
-              scrollbarWidth: "none",
-              msOverflowStyle: "none",
-              "&::-webkit-scrollbar": {
-                display: "none"
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack8.default, { spacing: 1, sx: { paddingInline: { xs: 2, md: 0 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack8.default, { direction: "row", spacing: 1, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_AutoAwesome5.default, { sx: { fontSize: 16, color: import_tokens43.tokens.colors.earth } }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              import_Typography25.default,
+              {
+                sx: {
+                  fontSize: 11,
+                  fontWeight: 900,
+                  color: import_tokens43.tokens.colors.earth,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.08em"
+                },
+                children: "AI Recommendations"
               }
-            },
-            children: loading ? renderSkeletons2() : renderOutfitCards2()
-          }
-        )
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            import_Typography25.default,
+            {
+              component: "h2",
+              sx: {
+                color: import_tokens43.tokens.colors.textPrimary,
+                fontFamily: import_tokens43.tokens.typography.fontFamily,
+                fontSize: import_tokens43.tokens.typography.fontSizes.xl,
+                fontWeight: 900,
+                lineHeight: 1,
+                margin: 0
+              },
+              children: "Complete this look"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MitumbaGrid, { columns: { xs: 1, sm: 2, md: 3, lg: 3 }, gap: 3, children: loading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(VAZIOutfitCardSkeleton, {}, `vazi-skel-${i + 1}`)) : outfits.map((outfit) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          VAZIOutfitCard,
+          {
+            outfitName: outfit.outfitName,
+            items: outfit.items,
+            totalPriceKes: outfit.totalPriceKes,
+            sellersCount: outfit.sellersCount,
+            isMultiCity: outfit.isMultiCity,
+            onTap: outfit.onTap,
+            onBuyAll: outfit.onBuyAll
+          },
+          outfit.outfitName
+        )) })
       ]
     }
   );
@@ -4960,7 +4918,7 @@ var import_styles3 = require("@mui/material/styles");
 
 // src/theme/theme.ts
 var import_styles2 = require("@mui/material/styles");
-var import_tokens43 = require("@mitumba/tokens");
+var import_tokens44 = require("@mitumba/tokens");
 var transitions = {
   standard: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
   spring: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"
@@ -4969,86 +4927,86 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
   // Spacing factor 4px (Mandate)
   spacing: (factor) => `${factor * 4}px`,
   breakpoints: {
-    values: import_tokens43.tokens.breakpoints
+    values: import_tokens44.tokens.breakpoints
   },
   palette: {
     mode: "light",
     primary: {
-      main: import_tokens43.tokens.colors.green,
-      light: import_tokens43.tokens.colors.greenLight,
-      dark: import_tokens43.tokens.colors.greenDark,
-      contrastText: import_tokens43.tokens.colors.textOnGreen
+      main: import_tokens44.tokens.colors.green,
+      light: import_tokens44.tokens.colors.greenLight,
+      dark: import_tokens44.tokens.colors.greenDark,
+      contrastText: import_tokens44.tokens.colors.textOnGreen
     },
     secondary: {
-      main: import_tokens43.tokens.colors.earth,
-      light: import_tokens43.tokens.colors.earthLight,
-      dark: import_tokens43.tokens.colors.earthDark,
-      contrastText: import_tokens43.tokens.colors.textOnEarth
+      main: import_tokens44.tokens.colors.earth,
+      light: import_tokens44.tokens.colors.earthLight,
+      dark: import_tokens44.tokens.colors.earthDark,
+      contrastText: import_tokens44.tokens.colors.textOnEarth
     },
     earth: {
-      main: import_tokens43.tokens.colors.earth,
-      light: import_tokens43.tokens.colors.earthLight,
-      dark: import_tokens43.tokens.colors.earthDark,
-      contrastText: import_tokens43.tokens.colors.textOnEarth
+      main: import_tokens44.tokens.colors.earth,
+      light: import_tokens44.tokens.colors.earthLight,
+      dark: import_tokens44.tokens.colors.earthDark,
+      contrastText: import_tokens44.tokens.colors.textOnEarth
     },
     success: {
-      main: import_tokens43.tokens.colors.success,
-      light: import_tokens43.tokens.colors.successLight,
-      dark: import_tokens43.tokens.colors.successDark,
-      contrastText: import_tokens43.tokens.colors.textOnGreen
+      main: import_tokens44.tokens.colors.success,
+      light: import_tokens44.tokens.colors.successLight,
+      dark: import_tokens44.tokens.colors.successDark,
+      contrastText: import_tokens44.tokens.colors.textOnGreen
     },
     error: {
-      main: import_tokens43.tokens.colors.error,
-      light: import_tokens43.tokens.colors.errorLight,
-      dark: import_tokens43.tokens.colors.errorDark,
-      contrastText: import_tokens43.tokens.colors.white
+      main: import_tokens44.tokens.colors.error,
+      light: import_tokens44.tokens.colors.errorLight,
+      dark: import_tokens44.tokens.colors.errorDark,
+      contrastText: import_tokens44.tokens.colors.white
     },
     warning: {
-      main: import_tokens43.tokens.colors.warning,
-      light: import_tokens43.tokens.colors.warningLight,
-      dark: import_tokens43.tokens.colors.warningDark,
-      contrastText: import_tokens43.tokens.colors.textPrimary
+      main: import_tokens44.tokens.colors.warning,
+      light: import_tokens44.tokens.colors.warningLight,
+      dark: import_tokens44.tokens.colors.warningDark,
+      contrastText: import_tokens44.tokens.colors.textPrimary
     },
     info: {
-      main: import_tokens43.tokens.colors.info,
-      light: import_tokens43.tokens.colors.infoLight,
-      dark: import_tokens43.tokens.colors.infoDark,
-      contrastText: import_tokens43.tokens.colors.white
+      main: import_tokens44.tokens.colors.info,
+      light: import_tokens44.tokens.colors.infoLight,
+      dark: import_tokens44.tokens.colors.infoDark,
+      contrastText: import_tokens44.tokens.colors.white
     },
     background: {
-      default: import_tokens43.tokens.colors.background,
-      paper: import_tokens43.tokens.colors.surface
+      default: import_tokens44.tokens.colors.background,
+      paper: import_tokens44.tokens.colors.surface
     },
-    divider: import_tokens43.tokens.colors.divider,
+    divider: import_tokens44.tokens.colors.divider,
     text: {
-      primary: import_tokens43.tokens.colors.textPrimary,
-      secondary: import_tokens43.tokens.colors.textSecondary,
-      disabled: import_tokens43.tokens.colors.textDisabled
+      primary: import_tokens44.tokens.colors.textPrimary,
+      secondary: import_tokens44.tokens.colors.textSecondary,
+      disabled: import_tokens44.tokens.colors.textDisabled
     },
     common: {
-      black: import_tokens43.tokens.colors.textPrimary,
-      white: import_tokens43.tokens.colors.white
+      black: import_tokens44.tokens.colors.textPrimary,
+      white: import_tokens44.tokens.colors.white
     }
   },
   shape: {
-    borderRadius: import_tokens43.tokens.radius.md
+    borderRadius: import_tokens44.tokens.radius.md
     // 8px default
   },
   shadows: [
     "none",
-    import_tokens43.tokens.shadows.card,
+    import_tokens44.tokens.shadows.card,
     // 1
-    import_tokens43.tokens.shadows.elevated,
+    import_tokens44.tokens.shadows.elevated,
     // 2
-    import_tokens43.tokens.shadows.deep,
+    import_tokens44.tokens.shadows.deep,
     // 3
-    import_tokens43.tokens.shadows.bottomSheet,
+    import_tokens44.tokens.shadows.bottomSheet,
     // 4
-    import_tokens43.tokens.shadows.focus,
+    import_tokens44.tokens.shadows.focus,
     // 5
-    import_tokens43.tokens.shadows.green,
+    import_tokens44.tokens.shadows.green,
     // 6
-    import_tokens43.tokens.shadows.earth,
+    import_tokens44.tokens.shadows.earth,
     // 7
     "none",
     "none",
@@ -5069,45 +5027,45 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
     "none"
   ],
   typography: {
-    fontFamily: import_tokens43.tokens.typography.fontFamily,
-    fontWeightRegular: import_tokens43.tokens.typography.fontWeights.regular,
-    fontWeightMedium: import_tokens43.tokens.typography.fontWeights.medium,
-    fontWeightBold: import_tokens43.tokens.typography.fontWeights.bold,
+    fontFamily: import_tokens44.tokens.typography.fontFamily,
+    fontWeightRegular: import_tokens44.tokens.typography.fontWeights.regular,
+    fontWeightMedium: import_tokens44.tokens.typography.fontWeights.medium,
+    fontWeightBold: import_tokens44.tokens.typography.fontWeights.bold,
     h1: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.display}px`,
-      fontWeight: import_tokens43.tokens.typography.fontWeights.extrabold,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.display}px`,
+      fontWeight: import_tokens44.tokens.typography.fontWeights.extrabold,
       lineHeight: 1.1
     },
     h2: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.xxxl}px`,
-      fontWeight: import_tokens43.tokens.typography.fontWeights.bold,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.xxxl}px`,
+      fontWeight: import_tokens44.tokens.typography.fontWeights.bold,
       lineHeight: 1.2
     },
     h3: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.xxl}px`,
-      fontWeight: import_tokens43.tokens.typography.fontWeights.bold,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.xxl}px`,
+      fontWeight: import_tokens44.tokens.typography.fontWeights.bold,
       lineHeight: 1.2
     },
     h4: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.xl}px`,
-      fontWeight: import_tokens43.tokens.typography.fontWeights.bold,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.xl}px`,
+      fontWeight: import_tokens44.tokens.typography.fontWeights.bold,
       lineHeight: 1.2
     },
     body1: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.md}px`,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.md}px`,
       lineHeight: 1.5
     },
     body2: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.base}px`,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.base}px`,
       lineHeight: 1.5
     },
     button: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.base}px`,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.base}px`,
       fontWeight: 600,
       textTransform: "none"
     },
     caption: {
-      fontSize: `${import_tokens43.tokens.typography.fontSizes.sm}px`,
+      fontSize: `${import_tokens44.tokens.typography.fontSizes.sm}px`,
       lineHeight: 1.5
     }
   },
@@ -5115,9 +5073,9 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
     MuiCssBaseline: {
       styleOverrides: {
         body: {
-          backgroundColor: import_tokens43.tokens.colors.background,
-          color: import_tokens43.tokens.colors.textPrimary,
-          fontFamily: import_tokens43.tokens.typography.fontFamily,
+          backgroundColor: import_tokens44.tokens.colors.background,
+          color: import_tokens44.tokens.colors.textPrimary,
+          fontFamily: import_tokens44.tokens.typography.fontFamily,
           WebkitFontSmoothing: "antialiased",
           MozOsxFontSmoothing: "grayscale"
         },
@@ -5132,7 +5090,7 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
       },
       styleOverrides: {
         root: {
-          borderRadius: `${import_tokens43.tokens.radius.md}px`,
+          borderRadius: `${import_tokens44.tokens.radius.md}px`,
           transition: transitions.standard,
           fontWeight: 600,
           "&:hover": {
@@ -5142,40 +5100,40 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
             transform: "translateY(0) scale(0.98)"
           },
           "&.Mui-disabled": {
-            backgroundColor: import_tokens43.tokens.colors.divider,
-            color: import_tokens43.tokens.colors.textDisabled,
-            borderColor: import_tokens43.tokens.colors.divider
+            backgroundColor: import_tokens44.tokens.colors.divider,
+            color: import_tokens44.tokens.colors.textDisabled,
+            borderColor: import_tokens44.tokens.colors.divider
           }
         },
         containedPrimary: {
-          backgroundColor: import_tokens43.tokens.colors.green,
+          backgroundColor: import_tokens44.tokens.colors.green,
           "&:hover": {
-            backgroundColor: import_tokens43.tokens.colors.greenDark,
-            boxShadow: import_tokens43.tokens.shadows.green
+            backgroundColor: import_tokens44.tokens.colors.greenDark,
+            boxShadow: import_tokens44.tokens.shadows.green
           }
         },
         containedSecondary: {
-          backgroundColor: import_tokens43.tokens.colors.earth,
+          backgroundColor: import_tokens44.tokens.colors.earth,
           "&:hover": {
-            backgroundColor: import_tokens43.tokens.colors.earthDark,
-            boxShadow: import_tokens43.tokens.shadows.earth
+            backgroundColor: import_tokens44.tokens.colors.earthDark,
+            boxShadow: import_tokens44.tokens.shadows.earth
           }
         },
         outlinedPrimary: {
           borderWidth: "2px !important",
-          borderColor: import_tokens43.tokens.colors.border,
-          color: import_tokens43.tokens.colors.textPrimary,
+          borderColor: import_tokens44.tokens.colors.border,
+          color: import_tokens44.tokens.colors.textPrimary,
           "&:hover": {
-            backgroundColor: import_tokens43.tokens.colors.background,
-            borderColor: import_tokens43.tokens.colors.green,
-            color: import_tokens43.tokens.colors.green
+            backgroundColor: import_tokens44.tokens.colors.background,
+            borderColor: import_tokens44.tokens.colors.green,
+            color: import_tokens44.tokens.colors.green
           }
         },
         textPrimary: {
-          color: import_tokens43.tokens.colors.textSecondary,
+          color: import_tokens44.tokens.colors.textSecondary,
           "&:hover": {
-            backgroundColor: import_tokens43.tokens.colors.background,
-            color: import_tokens43.tokens.colors.textPrimary
+            backgroundColor: import_tokens44.tokens.colors.background,
+            color: import_tokens44.tokens.colors.textPrimary
           }
         }
       }
@@ -5183,16 +5141,16 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
     MuiCard: {
       styleOverrides: {
         root: {
-          borderRadius: `${import_tokens43.tokens.radius.xl}px`,
-          backgroundColor: import_tokens43.tokens.colors.surface,
-          boxShadow: import_tokens43.tokens.shadows.card,
+          borderRadius: `${import_tokens44.tokens.radius.xl}px`,
+          backgroundColor: import_tokens44.tokens.colors.surface,
+          boxShadow: import_tokens44.tokens.shadows.card,
           transition: transitions.standard,
           border: "1px solid",
-          borderColor: import_tokens43.tokens.colors.divider,
+          borderColor: import_tokens44.tokens.colors.divider,
           "&:hover": {
             transform: "translateY(-4px)",
-            boxShadow: import_tokens43.tokens.shadows.elevated,
-            borderColor: import_tokens43.tokens.colors.border
+            boxShadow: import_tokens44.tokens.shadows.elevated,
+            borderColor: import_tokens44.tokens.colors.border
           }
         }
       }
@@ -5200,36 +5158,36 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
     MuiPaper: {
       styleOverrides: {
         rounded: {
-          borderRadius: `${import_tokens43.tokens.radius.xl}px`
+          borderRadius: `${import_tokens44.tokens.radius.xl}px`
         },
         elevation1: {
-          boxShadow: import_tokens43.tokens.shadows.card
+          boxShadow: import_tokens44.tokens.shadows.card
         }
       }
     },
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          borderRadius: `${import_tokens43.tokens.radius.md}px`,
-          backgroundColor: import_tokens43.tokens.colors.surface,
+          borderRadius: `${import_tokens44.tokens.radius.md}px`,
+          backgroundColor: import_tokens44.tokens.colors.surface,
           transition: transitions.standard,
           "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: import_tokens43.tokens.colors.border,
+            borderColor: import_tokens44.tokens.colors.border,
             borderWidth: "1px",
             transition: transitions.standard
           },
           "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: import_tokens43.tokens.colors.textDisabled
+            borderColor: import_tokens44.tokens.colors.textDisabled
           },
           "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: import_tokens43.tokens.colors.green,
+            borderColor: import_tokens44.tokens.colors.green,
             borderWidth: "2px"
           },
           "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-            borderColor: import_tokens43.tokens.colors.error
+            borderColor: import_tokens44.tokens.colors.error
           },
           "&.Mui-focused": {
-            boxShadow: import_tokens43.tokens.shadows.focus
+            boxShadow: import_tokens44.tokens.shadows.focus
           }
         }
       }
@@ -5241,7 +5199,7 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
           cursor: "pointer",
           "&:hover": {
             transform: "perspective(1000px) rotateY(15deg) rotateX(-5deg) scale(1.1)",
-            boxShadow: import_tokens43.tokens.shadows.elevated
+            boxShadow: import_tokens44.tokens.shadows.elevated
           },
           "&:active": {
             transform: "perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05)"
@@ -5252,8 +5210,8 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
     MuiDialog: {
       styleOverrides: {
         paper: {
-          borderRadius: `${import_tokens43.tokens.radius.xxxl}px`,
-          boxShadow: import_tokens43.tokens.shadows.bottomSheet,
+          borderRadius: `${import_tokens44.tokens.radius.xxxl}px`,
+          boxShadow: import_tokens44.tokens.shadows.bottomSheet,
           backgroundImage: "none"
         }
       }
@@ -5261,7 +5219,7 @@ var mitumbaTheme = (0, import_styles2.createTheme)({
     MuiAlert: {
       styleOverrides: {
         root: {
-          borderRadius: `${import_tokens43.tokens.radius.lg}px`,
+          borderRadius: `${import_tokens44.tokens.radius.lg}px`,
           alignItems: "center"
         }
       }