x

apps/spa/src/components/ProductCard.tsx

@@ -57,13 +57,13 @@ export default function ProductCard({ product, enableQuickShop = false, category
             (e.target as HTMLImageElement).style.display = 'none';
           }}
         />
-        <div className="ui-chip absolute left-3 top-3 border-white/20 bg-white/90 px-2.5 py-1 text-[10px] text-spa-forest shadow-sm backdrop-blur-sm">
+        <div className="ui-chip absolute left-3 top-3 border-spa-light bg-spa-light px-2.5 py-1 text-[10px] text-spa-forest shadow-sm backdrop-blur-sm">
           {displayCategoryName}
         </div>
         <button
           type="button"
           onClick={handleWishlistClick}
-          className="absolute right-3 top-3 z-10 rounded-full bg-white/90 p-2 shadow-sm backdrop-blur-sm transition-transform hover:scale-110 cursor-pointer"
+          className="absolute right-3 top-3 z-10 rounded-full bg-spa-light p-2 shadow-sm backdrop-blur-sm transition-transform hover:scale-110 cursor-pointer"
         >
           <Heart 
             className={`w-4 h-4 transition-colors ${isWished ? 'fill-rose-500 text-rose-500' : 'text-spa-stone/60 hover:text-rose-500'}`} 
@@ -96,8 +96,8 @@ export default function ProductCard({ product, enableQuickShop = false, category
                   }}
                   className={`rounded-full border px-3 py-1 text-[10px] font-bold uppercase tracking-wider transition-all cursor-pointer ${
                     isSelected
-                      ? 'border-spa-forest bg-spa-forest text-white shadow-sm'
-                      : 'border-spa-stone/10 bg-white text-spa-stone hover:border-spa-forest/30'
+                      ? 'border-spa-forest bg-spa-forest text-spa-light shadow-sm'
+                      : 'border-spa-stone/10 bg-spa-light text-spa-stone hover:border-spa-forest/30'
                   }`}
                 >
                   {variant.size}