hey-pharmacist-ecommerce 1.1.42 → 1.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.42",
+  "version": "1.1.44",
   "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -72,4 +72,4 @@
     "url": "https://github.com/yourusername/hey-pharmacist-customer/issues"
   },
   "homepage": "https://github.com/yourusername/hey-pharmacist-customer#readme"
-}
+}

package/src/components/AccountOverviewTab.tsx

@@ -34,7 +34,7 @@ export function AccountOverviewTab() {
             icon: Package,
             label: 'Total Orders',
             value: totalOrders,
-            color: 'bg-[#DBEAFE] text-[#5B9BD5]',
+            color: 'bg-hprimary-100 text-[#5B9BD5]',
         },
         {
             icon: CheckCircle,
@@ -95,7 +95,7 @@ export function AccountOverviewTab() {
                 </div>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
                             <User className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>
@@ -106,7 +106,7 @@ export function AccountOverviewTab() {
                         </div>
                     </div>
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
                             <Mail className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>
@@ -115,7 +115,7 @@ export function AccountOverviewTab() {
                         </div>
                     </div>
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
                             <Phone className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>
@@ -126,7 +126,7 @@ export function AccountOverviewTab() {
                         </div>
                     </div>
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
                             <MapPin className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>

package/src/components/AccountReviewsTab.tsx

@@ -31,7 +31,7 @@ export function AccountReviewsTab() {
           <p className="text-red-600 mb-4">Failed to load reviews</p>
           <button
             onClick={() => window.location.reload()}
-            className="text-[#E67E50] hover:underline text-sm"
+            className="text-haccent-500 hover:underline text-sm"
           >
             Try again
           </button>
@@ -44,8 +44,8 @@ export function AccountReviewsTab() {
     return (
       <div className="p-6">
         <div className="text-center py-12">
-          <div className="size-16 rounded-full bg-[#E67E50]/10 flex items-center justify-center mx-auto mb-4">
-            <Star className="size-8 text-[#E67E50]" />
+          <div className="size-16 rounded-full bg-haccent-500/10 flex items-center justify-center mx-auto mb-4">
+            <Star className="size-8 text-haccent-500" />
           </div>
           <h3 className="text-lg font-semibold text-gray-900 mb-2">
             No reviews yet
@@ -55,7 +55,7 @@ export function AccountReviewsTab() {
           </p>
           <button
             onClick={() => router.push(buildPath('/reviews'))}
-            className="inline-flex items-center gap-2 px-6 py-3 bg-[#E67E50] text-white rounded-lg font-medium hover:bg-[#d66f40] transition-colors"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-haccent-500 text-white rounded-lg font-medium hover:bg-[#d66f40] transition-colors"
           >
             <Star className="size-4" />
             Write Your First Review

package/src/components/CartItem.tsx

@@ -50,14 +50,12 @@ export function CartItem({ item }: CartItemProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, x: -100 }}
-      className="bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-hsecondary/30 transition-all duration-300"
+      className="bg-white border-2 border-gray-100 rounded-[24px] p-4 md:p-6 hover:border-hsecondary/30 transition-all duration-300"
     >
 
 
-      <div className="flex gap-4 pr-8">
-
-
-        <div className="w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
+      <div className="flex gap-3 md:gap-4">
+        <div className="w-20 h-20 md:w-28 md:h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
           <Image
             src={item.productVariantData.media[0]?.file || PLACEHOLDER_IMAGE_SRC}
             alt={item.productVariantData.name}
@@ -71,11 +69,11 @@ export function CartItem({ item }: CartItemProps) {
         <div className="flex-1 min-w-0">
           <div className="flex items-start justify-between gap-4 mb-3">
             <div className="flex-1 min-w-0">
-              <h3 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2">
+              <h3 className="font-semibold text-[#2B4B7C] mb-2">
                 {item.productVariantData.name}
               </h3>
               <div className="flex flex-wrap items-center gap-3">
-                <span className="font-['Poppins',sans-serif] text-[12px] text-[#676c80]">
+                <span className="text-[12px] text-[#676c80]">
                   Variant: <span className="font-medium text-[#2B4B7C]">{item.productVariantData.name}</span>
                 </span>
               </div>
@@ -98,34 +96,36 @@ export function CartItem({ item }: CartItemProps) {
           </div>
 
           {/* Quantity and Price */}
-          <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-auto">
             {/* Quantity Controls */}
-            <div className="flex items-center gap-3 bg-gray-50 rounded-full px-4 py-2">
+            <div className="flex items-center gap-3 bg-gray-50 rounded-full px-3 py-1.5 md:px-4 md:py-2 w-fit">
               <button
                 onClick={() => handleUpdateQuantity(item.quantity - 1)}
                 disabled={isUpdating || item.quantity <= 1}
                 className="p-1 hover:bg-white rounded-full transition-colors"
+                aria-label="Decrease quantity"
               >
-                <Minus className="size-4 text-[#2B4B7C]" />
+                <Minus className="size-3 md:size-4 text-[#2B4B7C]" />
               </button>
-              <span className="font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] min-w-[20px] text-center">
+              <span className="font-semibold text-[13px] md:text-[14px] text-[#2B4B7C] min-w-[20px] text-center">
                 {item.quantity}
               </span>
               <button
                 onClick={() => handleUpdateQuantity(item.quantity + 1)}
                 disabled={isUpdating || item.quantity >= (item.productVariantData.inventoryCount || 999)}
                 className="p-1 hover:bg-white rounded-full transition-colors"
+                aria-label="Increase quantity"
               >
-                <Plus className="size-4 text-[#2B4B7C]" />
+                <Plus className="size-3 md:size-4 text-[#2B4B7C]" />
               </button>
             </div>
 
             {/* Price */}
-            <div className="text-right">
-              <p className="font-['Poppins',sans-serif] font-bold text-[18px] text-hsecondary">
+            <div className="text-left sm:text-right">
+              <p className="font-bold text-[16px] md:text-[18px] text-hsecondary">
                 {formatPrice(itemTotal)}
               </p>
-              <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
+              <p className="text-[10px] md:text-[11px] text-[#676c80]">
                 {formatPrice(unitPrice)} each
               </p>
             </div>

package/src/components/Header.tsx

@@ -176,7 +176,7 @@ export function Header() {
                       <div className="absolute right-0 top-full mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg z-20">
                         <div className="p-2">
                           <div className="px-3 py-2 border-b border-slate-200 mb-1">
-                            <p className="text-sm font-medium text-hsecondary truncate">
+                            <p className="text-sm font-medium text-hprimary-900 truncate">
                               {user?.firstname} {user?.lastname}
                             </p>
                             <p className="text-xs text-slate-500 truncate">{user?.email}</p>

package/src/components/Notification.tsx

@@ -78,7 +78,7 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, x: 100, scale: 0.95 }}
             transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-            className={`relative bg-white rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
+            className={`relative bg-hprimary-50 rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
         >
             {/* Gradient accent bar */}
             <div className={`h-1 bg-linear-to-r ${config.gradient}`} />
@@ -96,11 +96,11 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
 
                 {/* Content */}
                 <div className="flex-1 min-w-0">
-                    <p className="font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] mb-1">
+                    <p className="font-semibold text-[14px] text-[#2B4B7C] mb-1">
                         {notification.message}
                     </p>
                     {notification.description && (
-                        <p className="font-['Poppins',sans-serif] text-[12px] text-[#676c80] leading-relaxed">
+                        <p className="text-[12px] text-[#676c80] leading-relaxed">
                             {notification.description}
                         </p>
                     )}

package/src/components/OrderCard.tsx

@@ -179,7 +179,7 @@ export function OrderCard({ order, onDelete }: OrderCardProps) {
           {isCompletedOrder && (
             <button
               onClick={handleReviewClick}
-              className="inline-flex items-center gap-2 rounded-lg border border-[#E67E50] bg-white hover:bg-[#E67E50]/5 text-[#E67E50] px-4 py-2 text-sm transition-colors"
+              className="inline-flex items-center gap-2 rounded-lg border border-haccent-500 bg-white hover:bg-haccent-500/5 text-haccent-500 px-4 py-2 text-sm transition-colors"
               onPointerDown={(e) => e.stopPropagation()}
             >
               <Star className="w-4 h-4" />

package/src/components/ProductCard.tsx

@@ -218,7 +218,7 @@ export function ProductCard({
           {displayInventoryCount === 0 && (
             <div className="absolute inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center">
               <div className="bg-white rounded-full px-4 py-2">
-                <span className="font-['Poppins',sans-serif] font-bold text-[11px] text-[#2B4B7C] uppercase">
+                <span className="font-bold text-[11px] text-[#2B4B7C] uppercase">
                   Out of Stock
                 </span>
               </div>
@@ -232,24 +232,24 @@ export function ProductCard({
             {/* ALL Status Badges */}
             <div className="flex items-center gap-1 mb-2 flex-wrap">
               {displayIsDiscounted && (
-                <span className="bg-[#E67E50] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
-                  <span className="font-['Poppins',sans-serif] font-bold text-[8px] uppercase">-{displayDiscountAmount}%</span>
+                <span className="bg-haccent-500 text-white rounded-full px-2 py-0.5 flex items-center gap-1">
+                  <span className="font-bold text-[8px] uppercase">-{displayDiscountAmount}%</span>
                 </span>
               )}
 
             </div>
             <div className="mb-1">
-              <p className="font-['Poppins',sans-serif] text-xs text-hsecondary uppercase tracking-wide font-medium">
+              <p className="text-xs text-hsecondary uppercase tracking-wide font-medium">
                 {product.brand}
               </p>
             </div>
 
             <div className="h-[40px] mb-3">
-              <h3 className="text-sm font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] line-clamp-2">
+              <h3 className="text-sm font-semibold text-[#2B4B7C] line-clamp-2">
                 {product.name}
               </h3>
               {selectedVariant && (
-                <p className="text-xs font-['Poppins',sans-serif] text-[#676c80]">
+                <p className="text-xs text-[#676c80]">
                   {selectedVariant.name}
                 </p>
               )}
@@ -261,24 +261,24 @@ export function ProductCard({
                   <Star
                     key={i}
                     className={`size-4 ${i < Math.floor(product.summary?.averageRating || 0)
-                      ? 'text-[#E67E50] fill-[#E67E50]'
+                      ? 'text-hsecondary fill-hsecondary-500'
                       : 'text-gray-300'
                       }`}
                   />
                 ))}
               </div>
-              <span className="font-['Poppins',sans-serif] text-[10px] text-[#676c80] ">
+              <span className="text-[10px] text-[#676c80] ">
                 ({product.summary?.reviewCount || 0})
               </span>
             </div>
 
             {/* Price */}
             <div className="flex items-center gap-1.5 mb-3">
-              <span className="font-['Poppins',sans-serif] font-bold text-md text-hprimary-600">
+              <span className="font-bold text-md text-hprimary-600">
                 ${displayFinalPrice.toFixed(2)}
               </span>
               {displayIsDiscounted && (
-                <span className="font-['Poppins',sans-serif] text-sm text-[#676c80] line-through">
+                <span className="text-sm text-[#676c80] line-through">
                   ${displayPriceBeforeDiscount.toFixed(2)}
                 </span>
               )}
@@ -358,7 +358,7 @@ export function ProductCard({
               }
             }}
             disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId) || displayInventoryCount === 0}
-            className="w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-hsecondary text-white hover:bg-hsecondary/80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+            className="w-full font-medium text-[11px] px-3 py-2 rounded-full bg-hsecondary text-white hover:bg-hsecondary/80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
           >
             <ShoppingCart className="h-4 w-4" />
             {displayInventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}

package/src/components/QuickViewModal.tsx

@@ -74,10 +74,10 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
           {/* Header */}
           <div className="flex items-start justify-between mb-6">
             <div>
-              <p className="font-['Poppins',sans-serif] text-[11px] text-hprimary uppercase tracking-wide font-medium mb-2">
+              <p className="text-[11px] text-hprimary uppercase tracking-wide font-medium mb-2">
                 {product.brand}
               </p>
-              <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary tracking-[-1px]">
+              <h2 className="font-semibold text-hsecondary tracking-[-1px]">
                 {displayName}
               </h2>
 
@@ -94,7 +94,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                     />
                   ))}
                 </div>
-                <span className="font-['Poppins',sans-serif] text-[13px] text-hmuted">
+                <span className="text-[13px] text-hmuted">
                   {product.summary?.averageRating || 0} ({product.summary?.reviewCount || 0} reviews)
                 </span>
               </div>
@@ -120,14 +120,14 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 <div className="absolute top-4 left-4 flex flex-col gap-2">
                   {isDiscounted && (
                     <div className="bg-haccent text-white rounded-full px-3 py-1.5">
-                      <span className="font-['Poppins',sans-serif] font-bold text-[11px] uppercase">
+                      <span className="font-bold text-[11px] uppercase">
                         -{discountAmount}%
                       </span>
                     </div>
                   )}
                   {/* {product.bestseller && (
                     <div className="bg-hsecondary text-white rounded-full px-3 py-1.5">
-                      <span className="font-['Poppins',sans-serif] font-semibold text-[10px] uppercase">
+                      <span className="font-semibold text-[10px] uppercase">
                         Bestseller
                       </span>
                     </div>
@@ -159,11 +159,11 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
             <div className="flex flex-col">
               {/* Price */}
               <div className="flex items-center gap-3 mb-4">
-                <span className="font-['Poppins',sans-serif] font-bold text-[32px] text-haccent">
+                <span className="font-bold text-[32px] text-haccent">
                   ${displayPrice.toFixed(2)}
                 </span>
                 {isDiscounted && (
-                  <span className="font-['Poppins',sans-serif] text-[20px] text-hmuted line-through">
+                  <span className="text-[20px] text-hmuted line-through">
                     ${displayOriginalPrice.toFixed(2)}
                   </span>
                 )}
@@ -172,16 +172,16 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
               {/* Stock Status */}
               <div className="mb-6">
                 {selectedVariant.inventoryCount === 0 ? (
-                  <span className="font-['Poppins',sans-serif] text-[12px] text-red-500 font-medium">
+                  <span className="text-[12px] text-red-500 font-medium">
                     Out of Stock
                   </span>
                 ) : selectedVariant.inventoryCount <= 10 ? (
-                  <span className="font-['Poppins',sans-serif] text-[12px] text-hprimary font-medium flex items-center gap-1">
+                  <span className="text-[12px] text-hprimary font-medium flex items-center gap-1">
                     <Package className="size-3" />
                     Only {selectedVariant.inventoryCount} left in stock
                   </span>
                 ) : (
-                  <span className="font-['Poppins',sans-serif] text-[12px] text-green-600 font-medium flex items-center gap-1">
+                  <span className="text-[12px] text-green-600 font-medium flex items-center gap-1">
                     <Package className="size-3" />
                     In Stock
                   </span>
@@ -190,13 +190,13 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
 
               {/* Description */}
               <div
-                className="font-['Poppins',sans-serif] text-[14px] text-hmuted leading-[1.7] mb-6 max-w-full overflow-hidden break-words"
+                className="text-[14px] text-hmuted leading-[1.7] mb-6 max-w-full overflow-hidden break-words"
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
 
               {/* Color Selection */}
               <div className="mb-6">
-                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
+                <h3 className="font-semibold text-[13px] text-hsecondary mb-3">
                   Selected Variant: <span className="font-normal text-hmuted">{product.variants[selectedVariantIndex].name}</span>
                 </h3>
                 <div className="flex flex-wrap gap-3">
@@ -232,7 +232,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                   {product.tags.slice(0, 3).map((feature: any, index: any) => (
                     <li key={index} className="flex items-start gap-2">
                       <Check className="size-4 text-hprimary shrink-0 mt-0.5" />
-                      <span className="font-['Poppins',sans-serif] text-[12px] text-hmuted">
+                      <span className="text-[12px] text-hmuted">
                         {feature}
                       </span>
                     </li>
@@ -242,7 +242,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
 
               {/* Quantity Selector */}
               <div className="mb-6">
-                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
+                <h3 className="font-semibold text-[13px] text-hsecondary mb-3">
                   Quantity
                 </h3>
                 <div className="flex items-center gap-4">
@@ -269,7 +269,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 <button
                   onClick={handleAddToCart}
                   disabled={addedToCart || selectedVariant.inventoryCount === 0}
-                  className={`w-full font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 ${addedToCart
+                  className={`w-full font-medium text-[14px] px-6 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 ${addedToCart
                     ? 'bg-green-500 text-white'
                     : 'bg-haccent text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed'
                     }`}
@@ -301,7 +301,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                       onClose();
                       // onNavigateToProduct?.(product._id || product.id);
                     }}
-                    className="w-full font-['Poppins',sans-serif] font-medium text-[13px] px-6 py-3 rounded-full bg-white text-hsecondary border-2 border-hprimary hover:bg-gray-50 transition-all flex items-center justify-center gap-2"
+                    className="w-full font-medium text-[13px] px-6 py-3 rounded-full bg-white text-hsecondary border-2 border-hprimary hover:bg-gray-50 transition-all flex items-center justify-center gap-2"
                   >
                     View Full Details
                     <ExternalLink className="size-4" />

package/src/components/RatingDistribution.tsx

@@ -55,12 +55,12 @@ export function RatingDistribution({ reviews, averageRating }: RatingDistributio
               <div key={rating} className="flex items-center gap-3">
                 <div className="flex items-center gap-1 w-16">
                   <span className="text-sm font-medium text-gray-700">{rating}</span>
-                  <Star className="size-3 fill-[#E67E50] text-[#E67E50]" />
+                  <Star className="size-3 fill-haccent-500 text-haccent-500" />
                 </div>
 
                 <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                   <div
-                    className="h-full bg-[#E67E50] transition-all duration-300"
+                    className="h-full bg-haccent-500 transition-all duration-300"
                     style={{ width: `${percentage}%` }}
                   />
                 </div>

package/src/components/ReviewCard.tsx

@@ -16,7 +16,7 @@ export function ReviewCard({ review, showProductInfo = false }: ReviewCardProps)
   const replyDate = review.replyDate ? new Date(review.replyDate) : null;
 
   return (
-    <div className="border border-gray-200 rounded-lg p-4 bg-white">
+    <div className="border border-gray-200 rounded-lg p-4 bg-hprimary-50">
       <div className="flex items-start justify-between mb-3">
         <div className="flex items-center gap-3">
           <div className="w-10 h-10 bg-hsecondary/10 rounded-full flex items-center justify-center">
@@ -33,7 +33,7 @@ export function ReviewCard({ review, showProductInfo = false }: ReviewCardProps)
       </div>
 
       {review.reviewType && (
-        <span className="inline-block px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded mb-2">
+        <span className="inline-block px-2 py-1 text-xs bg-hprimary-100 text-gray-600 rounded mb-2">
           {review.reviewType}
         </span>
       )}

package/src/components/ReviewForm.tsx

@@ -148,7 +148,7 @@ export function ReviewForm({
         <select
           id="reviewType"
           {...register('reviewType')}
-          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#E67E50] focus:border-transparent"
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-haccent-500 focus:border-transparent"
         >
           <option value="Product Review">Product Review</option>
           <option value="Quality Review">Quality Review</option>
@@ -169,7 +169,7 @@ export function ReviewForm({
           {...register('review')}
           rows={5}
           placeholder="Share your experience with this product..."
-          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#E67E50] focus:border-transparent resize-none"
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-haccent-500 focus:border-transparent resize-none"
         />
         {errors.review && (
           <p className="text-red-500 text-xs mt-1">{errors.review.message}</p>
@@ -180,7 +180,7 @@ export function ReviewForm({
         <button
           type="submit"
           disabled={isLoading}
-          className="flex-1 bg-[#E67E50] text-white py-3 px-6 rounded-lg font-medium hover:bg-[#d66f40] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          className="flex-1 bg-haccent-500 text-white py-3 px-6 rounded-lg font-medium hover:bg-[#d66f40] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
         >
           {isLoading ? (
             <>

package/src/components/ReviewPromptBanner.tsx

@@ -55,11 +55,11 @@ export function ReviewPromptBanner({
   if (!isVisible) return null;
 
   return (
-    <div className="bg-gradient-to-r from-[#E67E50]/10 to-[#E67E50]/5 border border-[#E67E50]/20 rounded-lg p-4 mb-4">
+    <div className="bg-gradient-to-r from-haccent-500/10 to-haccent-500/5 border border-haccent-500/20 rounded-lg p-4 mb-4">
       <div className="flex items-start gap-4">
         <div className="flex-shrink-0">
-          <div className="size-10 rounded-full bg-[#E67E50]/20 flex items-center justify-center">
-            <Star className="size-5 text-[#E67E50]" />
+          <div className="size-10 rounded-full bg-haccent-500/20 flex items-center justify-center">
+            <Star className="size-5 text-haccent-500" />
           </div>
         </div>
 
@@ -86,7 +86,7 @@ export function ReviewPromptBanner({
 
           <button
             onClick={handleReviewClick}
-            className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-[#E67E50] text-white text-sm font-medium rounded-lg hover:bg-[#d66f40] transition-colors"
+            className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-haccent-500 text-white text-sm font-medium rounded-lg hover:bg-[#d66f40] transition-colors"
           >
             <Star className="size-4" />
             Write a Review

package/src/components/ReviewsList.tsx

@@ -79,11 +79,10 @@ export function ReviewsList({ reviews, isLoading }: ReviewsListProps) {
           <div className="flex items-center gap-2">
             <button
               onClick={() => setFilterRating('all')}
-              className={`px-3 py-1 text-sm rounded-full transition-colors ${
-                filterRating === 'all'
-                  ? 'bg-[#E67E50] text-white'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              }`}
+              className={`px-3 py-1 text-sm rounded-full transition-colors ${filterRating === 'all'
+                ? 'bg-haccent-500 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
             >
               All
             </button>
@@ -91,11 +90,10 @@ export function ReviewsList({ reviews, isLoading }: ReviewsListProps) {
               <button
                 key={rating}
                 onClick={() => setFilterRating(rating as FilterOption)}
-                className={`flex items-center gap-1 px-3 py-1 text-sm rounded-full transition-colors ${
-                  filterRating === rating
-                    ? 'bg-[#E67E50] text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                }`}
+                className={`flex items-center gap-1 px-3 py-1 text-sm rounded-full transition-colors ${filterRating === rating
+                  ? 'bg-haccent-500 text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  }`}
               >
                 {rating}
                 <Star className="size-3 fill-current" />
@@ -109,7 +107,7 @@ export function ReviewsList({ reviews, isLoading }: ReviewsListProps) {
           <select
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as SortOption)}
-            className="px-3 py-1 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#E67E50] focus:border-transparent"
+            className="px-3 py-1 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-haccent-500 focus:border-transparent"
           >
             <option value="recent">Most Recent</option>
             <option value="oldest">Oldest First</option>

package/src/components/StarRating.tsx

@@ -72,15 +72,15 @@ export function StarRating({
                 <div className="relative">
                   <Star className={`${sizeClasses[size]} text-gray-300`} />
                   <div className="absolute inset-0 overflow-hidden" style={{ width: '50%' }}>
-                    <Star className={`${sizeClasses[size]} fill-[#E67E50] text-[#E67E50]`} />
+                    <Star className={`${sizeClasses[size]} fill-haccent-500 text-haccent-500`} />
                   </div>
                 </div>
               ) : (
                 <Star
                   className={`
                     ${sizeClasses[size]}
-                    ${isFilled ? 'fill-[#E67E50] text-[#E67E50]' : 'text-gray-300'}
-                    ${interactive && hoverRating > 0 && index < hoverRating ? 'fill-[#E67E50] text-[#E67E50]' : ''}
+                    ${isFilled ? 'fill-haccent-500 text-haccent-500' : 'text-gray-300'}
+                    ${interactive && hoverRating > 0 && index < hoverRating ? 'fill-haccent-500 text-haccent-500' : ''}
                   `}
                 />
               )}

package/src/hooks/useProducts.ts

@@ -24,7 +24,6 @@ export function useProducts(filters?: ProductFilters, page: number = 1, limit: n
     ],
     queryFn: async () => {
       const response = await new ProductsApi(AXIOS_CONFIG).getAllProducts(
-        filters?.search ?? "", // searchTerm
         filters?.maxPrice, // maxPrice
         filters?.minPrice, // minPrice
         undefined, // brandFilter