cart: clean css 1

src/pages/cart/page.tsx

@@ -157,48 +157,6 @@ export default function CartPage() {
     setIsEstimateTimeOpen(false);
   };
 
-  const getCartLayoutStyle = () => {
-    if (isMobile) {
-      return {
-        padding: "16px",
-        maxWidth: "100%",
-        paddingBottom: "12vh",
-      };
-    } else if (isTablet) {
-      return {
-        padding: "24px",
-        maxWidth: "100%",
-        paddingBottom: "12vh",
-      };
-    } else {
-      return {
-        padding: "32px",
-        maxWidth: "1400px",
-        margin: "0 auto",
-        paddingBottom: "12vh",
-      };
-    }
-  };
-
-  const getCartItemStyle = () => {
-    if (isMobile) {
-      return {
-        padding: "16px",
-        borderRadius: "12px",
-      };
-    } else if (isTablet) {
-      return {
-        padding: "20px",
-        borderRadius: "16px",
-      };
-    } else {
-      return {
-        padding: "24px",
-        borderRadius: "20px",
-      };
-    }
-  };
-
   const getMenuItemImageStyle = () => {
     if (isMobile) {
       return {
@@ -608,8 +566,7 @@ export default function CartPage() {
     <>
       <ProHeader>{t("cart.title")}</ProHeader>
       <div
-        className={`${styles.cartContainer} ${getResponsiveClass()}`}
-        style={getCartLayoutStyle()}
+        className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
       >
         <Space
           direction="vertical"
@@ -620,14 +577,7 @@ export default function CartPage() {
             <div className={styles.cartItems}>
               <Card
                 hoverable
-                styles={{
-                  body: {
-                    ...getCartItemStyle(),
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "space-between",
-                  },
-                }}
+                className={styles.cartItem}
               >
                 <div
                   style={{