cart: move "you may like" styles

src/pages/cart/cart.module.css

@@ -19,18 +19,7 @@
   justify-content: space-between;
 }
 
-.youMightAlsoLikeContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  overflow: auto;
-  scrollbar-width: none;
-}
 
-:global(.darkApp) .youMightAlsoLikeContainer path {
-  fill: var(--primary);
-}
 
 .cartContent {
   width: 100%;
@@ -68,37 +57,6 @@
   transform: scale(1.05);
 }
 
-.popularMenuItemImage {
-  width: 73px;
-  height: 73px;
-  object-fit: cover;
-  border-radius: 8px;
-  transition: transform 0.3s ease;
-}
-
-.popularMenuItemImage:hover {
-  transform: scale(1.05);
-}
-
-.popularMenuItemImageMobile {
-  width: 73px;
-  height: 73px;
-  min-height: 73px;
-  object-fit: cover;
-}
-
-.popularMenuItemImageTablet {
-  width: 90px;
-  height: 90px;
-  border-radius: 12px;
-}
-
-.popularMenuItemImageDesktop {
-  width: 110px;
-  height: 110px;
-  border-radius: 16px;
-}
-
 .itemDescription {
   font-size: 12px !important;
   transition: color 0.3s ease;
@@ -388,8 +346,7 @@
   box-shadow: 0 0 0 0 !important;
 }
 
-[data-theme="dark"] .menuItemImage,
-[data-theme="dark"] .popularMenuItemImage {
+[data-theme="dark"] .menuItemImage{
   border-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
@@ -398,10 +355,7 @@
   color: rgba(255, 255, 255, 0.75) !important;
 }
 
-.itemDescriptionIcons svg {
-  width: 18px;
-  height: 18px;
-}
+
 
 /* Keyframe animations */
 @keyframes fadeInUp {
@@ -556,8 +510,7 @@
 /* Large screens (min-width: 768px) */
 @media (min-width: 768px) {
   .cartContainer:focus,
-  .menuItemImage:focus,
-  .popularMenuItemImage:focus {
+  .menuItemImage:focus{
     outline-offset: 4px;
   }
 
@@ -646,8 +599,7 @@
 
 /* Hover effects for devices that support hover */
 @media (hover: hover) {
-  .menuItemImage:hover,
-  .popularMenuItemImage:hover {
+  .menuItemImage:hover {
     transform: scale(1.05);
   }
 
@@ -681,8 +633,7 @@
 
 /* Focus states for accessibility */
 .cartContainer:focus,
-.menuItemImage:focus,
-.popularMenuItemImage:focus {
+.menuItemImage:focus {
   outline: 2px solid var(--primary);
   outline-offset: 2px;
 }

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

@@ -0,0 +1,69 @@
+.youMightAlsoLikeContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+:global(.darkApp) .youMightAlsoLikeContainer path {
+    fill: var(--primary);
+}
+
+.popularMenuItemImage {
+    width: 73px;
+    height: 73px;
+    object-fit: cover;
+    border-radius: 8px;
+    transition: transform 0.3s ease;
+}
+
+.popularMenuItemImage:hover {
+    transform: scale(1.05);
+}
+
+.popularMenuItemImageMobile {
+    width: 73px;
+    height: 73px;
+    min-height: 73px;
+    object-fit: cover;
+}
+
+.popularMenuItemImageTablet {
+    width: 90px;
+    height: 90px;
+    border-radius: 12px;
+}
+
+.popularMenuItemImageDesktop {
+    width: 110px;
+    height: 110px;
+    border-radius: 16px;
+}
+[data-theme="dark"] .popularMenuItemImage {
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+@media (min-width: 768px) {
+    .popularMenuItemImage:focus {
+        outline-offset: 4px;
+    }
+
+}
+
+/* Hover effects for devices that support hover */
+@media (hover: hover) {
+    .popularMenuItemImage:hover {
+        transform: scale(1.05);
+    }
+}
+/* Focus states for accessibility */
+.popularMenuItemImage:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+.itemDescriptionIcons svg {
+    width: 18px;
+    height: 18px;
+}

src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx

@@ -11,7 +11,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 import { colors } from "ThemeConstants.ts";
 import { default_image } from "utils/constants.ts";
 import { Product } from "utils/types/appTypes.ts";
-import styles from "pages/cart/cart.module.css";
+import styles from "./YouMayAlsoLike.module.css";
 
 const { useBreakpoint } = Grid;