cart: move "you may like" styles

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;