fix arrow background color

src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css

@@ -97,8 +97,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: var(--background);
+  border: 1px solid var(--border);
   border-radius: 50%;
   width: 30px;
   height: 30px;
@@ -109,7 +109,7 @@
 }
 
 .arrowButton:hover {
-  background: rgba(255, 255, 255, 1);
+  background: var(--background);
   transform: scale(1.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
@@ -127,6 +127,7 @@
   width: 24px;
   height: 24px;
   transition: transform 0.2s ease;
+  padding: 3px;
 }
 
 .arrowButton:hover .arrowIcon {

src/utils/types/appTypes.ts

@@ -321,7 +321,7 @@ export interface CartItem {
   image: string;
   quantity: number;
   description: string;
-  variant?: Variant;
+  variant?: Variant | string;
   extras?: Extra[];
   extrasgroupnew?: Array<{ groupid: string; extrasid: Array<string> }>;
   extrasgroup?: Array<string>;