hey-pharmacist-ecommerce 1.1.17 → 1.1.19

package/src/screens/CurrentOrdersScreen.tsx

@@ -26,8 +26,8 @@ export function CurrentOrdersScreen() {
 
   return (
     <div className="min-h-screen bg-slate-50">
-      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+      <section className="relative overflow-hidden bg-linear-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.35),transparent_60%)]" />
         <div className="relative container mx-auto px-4 py-16">
           <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
             <motion.div
@@ -35,7 +35,7 @@ export function CurrentOrdersScreen() {
               animate={{ opacity: 1, y: 0 }}
               className="space-y-4"
             >
-              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
+              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur-sm">
                 <Truck className="h-4 w-4" />
                 Live order tracking
               </span>
@@ -49,7 +49,7 @@ export function CurrentOrdersScreen() {
               initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
-              className="rounded-3xl bg-white/15 p-6 backdrop-blur"
+              className="rounded-3xl bg-white/15 p-6 backdrop-blur-sm"
             >
               <p className="text-sm font-semibold uppercase tracking-[0.35em] text-white/70">
                 Quick actions
@@ -93,7 +93,7 @@ export function CurrentOrdersScreen() {
                   ))}
                 </div>
               ) : (
-                <div className="rounded-3xl border border-slate-100 bg-white p-10 shadow-sm">
+                <div className="rounded-3xl border border-slate-100 bg-white p-10 shadow-xs">
                   <EmptyState
                     icon={PackageCheck}
                     title="No active orders"
@@ -135,7 +135,7 @@ export function CurrentOrdersScreen() {
                 </div>
               </div>
 
-              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm">
+              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-xs">
                 <p className="font-semibold uppercase tracking-[0.3em]">Need support?</p>
                 <p className="mt-3 leading-relaxed">
                   Our fulfillment team is online 7 days a week. Message us if you need to adjust

package/src/screens/EditProfileScreen.tsx

@@ -149,7 +149,7 @@ export function EditProfileScreen() {
               </Button>
               <Button
                 type="button"
-                variant="outline"
+                variant="outline-solid"
                 size="lg"
                 className="border-slate-300 text-slate-800 hover:bg-slate-50"
                 onClick={() => router.push(buildPath('/account'))}

package/src/screens/LoginScreen.tsx

@@ -71,7 +71,7 @@ export function LoginScreen() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
       <div className="grid min-h-screen overflow-hidden pb-12">
         <motion.section
           initial={{ opacity: 0, x: 24 }}
@@ -137,7 +137,7 @@ export function LoginScreen() {
                 <label className="flex items-center gap-2 text-slate-600">
                   <input
                     type="checkbox"
-                    className="h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                    className="h-4 w-4 rounded-sm border-slate-300 text-primary-600 focus:ring-primary-500"
                   />
                   Remember me
                 </label>

package/src/screens/NewAddressScreen.tsx

@@ -91,8 +91,8 @@ export default function NewAddressPage() {
 
     return (
         <div className="min-h-screen bg-slate-50">
-            <div className="relative bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
-                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+            <div className="relative bg-linear-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.35),transparent_60%)]" />
                 <div className="relative container mx-auto px-4 py-8">
                     <button
                         onClick={() => router.back()}
@@ -175,7 +175,7 @@ export default function NewAddressPage() {
                             <div className="flex justify-end gap-4">
                                 <Button
                                     type="button"
-                                    variant="outline"
+                                    variant="outline-solid"
                                     onClick={() => router.back()}
                                 >
                                     Cancel

package/src/screens/OrdersScreen.tsx

@@ -112,7 +112,7 @@ export function OrdersScreen() {
           {!isLoading && pagination.totalPages > 1 && hasOrders && (
             <div className="mt-8 flex flex-wrap items-center justify-center gap-4 pt-6 border-t border-gray-200">
               <Button
-                variant="outline"
+                variant="outline-solid"
                 onClick={() => setPage((current) => Math.max(1, current - 1))}
                 disabled={page === 1}
                 className="rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -124,7 +124,7 @@ export function OrdersScreen() {
                 Page {page} of {pagination.totalPages}
               </span>
               <Button
-                variant="outline"
+                variant="outline-solid"
                 onClick={() =>
                   setPage((current) => Math.min(pagination.totalPages, current + 1))
                 }

package/src/screens/ProductDetailScreen.tsx

@@ -293,7 +293,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 ))}
               </div>
             </div>
-            <div className="space-y-4 rounded-3xl bg-white p-6 shadow-sm">
+            <div className="space-y-4 rounded-3xl bg-white p-6 shadow-xs">
               <div className="h-8 w-32 animate-pulse rounded-full bg-slate-200" />
               <div className="h-10 w-48 animate-pulse rounded-full bg-slate-200" />
               <div className="h-6 w-full animate-pulse rounded-full bg-slate-200" />
@@ -310,7 +310,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
     return (
       <div className="min-h-screen bg-slate-50">
         <div className="container mx-auto px-4 py-16">
-          <div className="rounded-3xl bg-white p-10 text-center shadow-sm">
+          <div className="rounded-3xl bg-white p-10 text-center shadow-xs">
             <Sparkles className="mx-auto h-10 w-10 text-primary-500" />
             <h1 className="mt-6 text-2xl font-semibold text-gray-900">Product not found</h1>
             <p className="mt-2 text-gray-600">
@@ -381,10 +381,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       ) : null}
 
                       <div className="absolute top-6 left-6 flex flex-col gap-3">
-                        {product.salePrice && (
+                        {discount > 0 && (
                           <div className="bg-[#E67E50] text-white rounded-full px-4 py-2">
                             <span className="font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide">
-                              Save {product.discount}%
+                              Save {discount}%
                             </span>
                           </div>
                         )}
@@ -442,7 +442,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                     {product.brand} • {product.parentCategories?.[0].name}
                   </p>
                   <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3">
-                    {product.name}
+                    {selectedVariant?.name || product.name}
                   </h1>
                     {/* Rating */}
                 <div className="flex items-center gap-3">
@@ -465,16 +465,16 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                   <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
                     <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
-                      {selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.finalPrice || product.price || 0)}
+                      ${variantPrice.toFixed(2)}
                     </span>
                     {variantComparePrice && variantComparePrice > variantPrice && (
                     <>
                       <span className="font-['Poppins',sans-serif] text-[24px] text-muted line-through">
-                        ${product.price.toFixed(2)}
+                        ${variantComparePrice.toFixed(2)}
                       </span>
                       <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
                         <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
-                          Save ${formatPrice(variantComparePrice)}
+                          Save ${formatPrice(variantComparePrice - variantPrice)}
                         </span>
                       </div>
                     </>
@@ -495,8 +495,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           </>
                         ) : selectedVariant.inventoryCount <= 10 ? (
                         <>
-                          <div className="size-3 rounded-full bg-orange-500 animate-pulse" />
-                          <span className="font-['Poppins',sans-serif] text-[13px] text-orange-600 font-medium">
+                          <div className="size-3 rounded-full bg-primary animate-pulse" />
+                          <span className="font-['Poppins',sans-serif] text-[13px] text-primary font-medium">
                             Only {selectedVariant.inventoryCount} left in stock - Order soon!
                           </span>
                         </>
@@ -547,7 +547,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                                 : 'border-gray-200 hover:border-primary/50'
                             }`}
                             >
-                              <div className={`relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
+                              <div className={`relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
                                 <Image
                                   src={variantImage}
                                   alt={variant.name || 'Variant image'}
@@ -565,7 +565,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                                 )}
                               </div>
                               {isSelected && (
-                                <Check className="h-5 w-5 text-secondary flex-shrink-0" />
+                                <Check className="h-5 w-5 text-secondary shrink-0" />
                               )}
                             </button>
                           );
@@ -648,7 +648,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 </div>
 
                 {/* Benefits */}
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-gradient-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
                 <div className="flex items-start gap-3">
                   <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
                     <Truck className="size-5 text-primary" />

package/src/screens/ProfileScreen.tsx

@@ -89,7 +89,7 @@ export default function AccountPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
       {/* Header */}
       <div className="">
         <div className="container mx-auto px-4 py-4">
@@ -110,7 +110,7 @@ export default function AccountPage() {
 
       {/* Tab Content */}
       <div className="container mx-auto max-w-7xl">
-        <div className="rounded-2xl shadow-sm">
+        <div className="rounded-2xl shadow-xs">
           {renderTabContent()}
         </div>
       </div>

package/src/screens/RegisterScreen.tsx

@@ -88,7 +88,7 @@ export function RegisterScreen() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
       <div className="grid min-h-screen overflow-hidden pb-12">
         <motion.section
           initial={{ opacity: 0, x: 24 }}

package/src/screens/ShopScreen.tsx

@@ -674,7 +674,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   placeholder="Search..."
                   value={searchQuery}
                   onChange={handleInputChange}
-                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
                 />
               </div>
             </div>
@@ -822,7 +822,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, min: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
                     />
                     <Input
                       type="number"
@@ -832,7 +832,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, max: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
                     />
                   </div>
                   <button
@@ -881,8 +881,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
           >
             {/* Orange icon and badge */}
             <div className="flex items-center justify-center gap-2 mb-4">
-              <Star className="h-5 w-5 text-orange-500 fill-orange-500" />
-              <span className="text-sm font-semibold uppercase tracking-wider text-orange-500">
+              <Star className="h-5 w-5 text-primary fill-primary" />
+              <span className="text-sm font-semibold uppercase tracking-wider text-primary">
                 COMPLETE PHARMACY SHOP
               </span>
             </div>
@@ -910,7 +910,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   value={searchQuery}
                   onChange={handleInputChange}
                   onKeyDown={handleKeyDown}
-                  className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:opacity-50"
+                  className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-hidden focus:ring-2 focus:ring-primary-500/30 disabled:opacity-50"
                   disabled={isSearching}
                 />
               </div>
@@ -938,14 +938,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: index * 0.1 }}
-                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${!categoryFilter ? 'bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105'
-                      : 'bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
+                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${!categoryFilter ? 'bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105'
+                      : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
                       }`}
                   >
                     <div className="relative">
                       <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter
                         ? 'bg-white/20'
-                        : 'bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                        : 'bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
                         }`}>
                         <Icon className={`size-6 ${!categoryFilter ? 'text-white' : 'text-primary'
                           }`} />
@@ -968,14 +968,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: index * 0.1 }}
                     onClick={() => handleCategoryChange(category.id ?? '')}
-                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${isSelected ? 'bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105'
-                      : 'bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
+                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${isSelected ? 'bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105'
+                      : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
                       }`}
                   >
                     <div className="relative">
                       <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected
                         ? 'bg-white/20'
-                        : 'bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                        : 'bg-linear-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
                         }`}>
                         <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-primary'
                           }`} />
@@ -1000,14 +1000,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       <div className="relative pb-16 mt-8">
         <div className="container mx-auto px-4">
           <div className="flex flex-col gap-8 lg:flex-row">
-            <aside className="hidden w-72 flex-shrink-0 lg:block">
+            <aside className="hidden w-72 shrink-0 lg:block">
               <div className="sticky top-24 rounded-lg bg-white">
                 {renderFiltersPanel()}
               </div>
             </aside>
 
             <main className="flex-1 space-y-6">
-              <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
+              <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-xs">
                 <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                   <div>
                     <h2 className="text-base font-medium text-gray-700">
@@ -1025,7 +1025,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         onChange={(event) => {
                           setSortOption(event.target.value as SortOption);
                         }}
-                        className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-sm transition focus:outline-none focus:ring-1 focus:ring-secondary focus:border-primary"
+                        className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-xs transition focus:outline-hidden focus:ring-1 focus:ring-secondary focus:border-primary"
                       >
                         <option value="featured">Featured products</option>
                         <option value="price-low-high">Price: low to high</option>
@@ -1034,7 +1034,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       </select>
                       <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                     </div>
-                    <div className="flex items-center rounded-full border border-gray-200 bg-gray-100 shadow-sm p-1">
+                    <div className="flex items-center rounded-full border border-gray-200 bg-gray-100 shadow-xs p-1">
                       <button
                         type="button"
                         onClick={() => setViewMode('grid')}
@@ -1124,7 +1124,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                             <motion.div
                               key={product.id}
                               whileHover={{ y: -4 }}
-                              className="group flex cursor-pointer flex-col gap-6 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition hover:shadow-xl md:flex-row md:items-start"
+                              className="group flex cursor-pointer flex-col gap-6 rounded-2xl border border-gray-100 bg-white p-5 shadow-xs transition hover:shadow-xl md:flex-row md:items-start"
                               onClick={() => router.push(buildPath(`/products/${product._id}`))}
                             >
                               <div className="relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40">
@@ -1207,7 +1207,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 {pagination.totalPages > 1 && (
                   <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
                     <Button
-                      variant="outline"
+                      variant="outline-solid"
                       onClick={() => setPage((current) => Math.max(1, current - 1))}
                       disabled={page === 1}
                     >
@@ -1217,7 +1217,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       Page {page} of {pagination.totalPages}
                     </span>
                     <Button
-                      variant="outline"
+                      variant="outline-solid"
                       onClick={() =>
                         setPage((current) => Math.min(pagination.totalPages, current + 1))
                       }

package/src/screens/WishlistScreen.tsx

@@ -205,7 +205,7 @@ export default function WishlistScreen() {
                                                 type="checkbox"
                                                 checked={onlyInStock}
                                                 onChange={(event) => setOnlyInStock(event.target.checked)}
-                                                className="h-4 w-4 rounded border-slate-300 text-secondary focus:ring-secondary"
+                                                className="h-4 w-4 rounded-sm border-slate-300 text-secondary focus:ring-secondary"
                                             />
                                             Only show in-stock
                                         </label>
@@ -215,7 +215,7 @@ export default function WishlistScreen() {
                                             <select
                                                 value={sortOption}
                                                 onChange={(event) => setSortOption(event.target.value as SortOption)}
-                                                className="bg-transparent text-sm font-medium text-slate-700 outline-none"
+                                                className="bg-transparent text-sm font-medium text-slate-700 outline-hidden"
                                             >
                                                 {SORT_OPTIONS.map((option) => (
                                                     <option key={option.value} value={option.value}>
@@ -338,7 +338,7 @@ export default function WishlistScreen() {
                                                             animate={{ opacity: 1, y: 0 }}
                                                             exit={{ opacity: 0, y: -20 }}
                                                             transition={{ duration: 0.2 }}
-                                                            className="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-4 shadow-sm shadow-primary-50 sm:flex-row sm:items-center"
+                                                            className="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-4 shadow-xs shadow-primary-50 sm:flex-row sm:items-center"
                                                         >
                                                             <div className="relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40">
                                                                 <Image
@@ -390,7 +390,7 @@ export default function WishlistScreen() {
                                                                     </Button>
                                                                     <Button
                                                                         size="sm"
-                                                                        variant="outline"
+                                                                        variant="outline-solid"
                                                                         onClick={() => handleRemoveFromWishlist(product.id)}
                                                                         className="text-secondary"
                                                                     >

package/src/styles/globals.css

@@ -1,6 +1,117 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-primary-50: rgb(var(--color-primary-50));
+  --color-primary-100: rgb(var(--color-primary-100));
+  --color-primary-200: rgb(var(--color-primary-200));
+  --color-primary-300: rgb(var(--color-primary-300));
+  --color-primary-400: rgb(var(--color-primary-400));
+  --color-primary-500: rgb(var(--color-primary-500));
+  --color-primary-600: rgb(var(--color-primary-600));
+  --color-primary-700: rgb(var(--color-primary-700));
+  --color-primary-800: rgb(var(--color-primary-800));
+  --color-primary-900: rgb(var(--color-primary-900));
+  --color-primary-950: rgb(var(--color-primary-950));
+  --color-primary: var(--color-primary, #5b9bd5);
+  --color-primary-dark: var(--color-primary-dark, #4a8ac4);
+  --color-primary-bg: var(--color-primary-bg, #e6ebf0);
+
+  --color-secondary-50: rgb(var(--color-secondary-50));
+  --color-secondary-100: rgb(var(--color-secondary-100));
+  --color-secondary-200: rgb(var(--color-secondary-200));
+  --color-secondary-300: rgb(var(--color-secondary-300));
+  --color-secondary-400: rgb(var(--color-secondary-400));
+  --color-secondary-500: rgb(var(--color-secondary-500));
+  --color-secondary-600: rgb(var(--color-secondary-600));
+  --color-secondary-700: rgb(var(--color-secondary-700));
+  --color-secondary-800: rgb(var(--color-secondary-800));
+  --color-secondary-900: rgb(var(--color-secondary-900));
+  --color-secondary-950: rgb(var(--color-secondary-950));
+  --color-secondary: var(--color-secondary, #2b4b7c);
+
+  --color-accent-50: rgb(var(--color-accent-50));
+  --color-accent-100: rgb(var(--color-accent-100));
+  --color-accent-200: rgb(var(--color-accent-200));
+  --color-accent-300: rgb(var(--color-accent-300));
+  --color-accent-400: rgb(var(--color-accent-400));
+  --color-accent-500: rgb(var(--color-accent-500));
+  --color-accent-600: rgb(var(--color-accent-600));
+  --color-accent-700: rgb(var(--color-accent-700));
+  --color-accent-800: rgb(var(--color-accent-800));
+  --color-accent-900: rgb(var(--color-accent-900));
+  --color-accent-950: rgb(var(--color-accent-950));
+  --color-accent: var(--color-accent, #e67e50);
+  --color-accent-dark: var(--color-accent-dark, #d66f45);
+
+  --color-muted: var(--color-text-muted, #676c80);
+
+  --animate-fade-in: fadeIn 0.3s ease-in-out;
+  --animate-slide-up: slideUp 0.3s ease-out;
+  --animate-slide-down: slideDown 0.3s ease-out;
+  --animate-scale-in: scaleIn 0.2s ease-out;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes slideDown {
+    0% {
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes scaleIn {
+    0% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility animate-gradient {
+  animation: gradient 3s ease infinite;
+  background-size: 200% 200%;
+}
 
 @layer base {
   :root {
@@ -22,10 +133,6 @@
 }
 
 @layer utilities {
-  .animate-gradient {
-    animation: gradient 3s ease infinite;
-    background-size: 200% 200%;
-  }
   
   @keyframes gradient {
     0% {