change font weight on deatils and selected

src/components/ProductDetails/ProductDetails.jsx

@@ -208,7 +208,13 @@ const ProductDetails = () => {
       <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
         {/* Section 1: Product Info */}
         <Box>
-          <Typography variant="h5" sx={{ fontWeight: "bold", mb: 2 }}>
+          <Typography variant="body2" sx={{
+            fontWeight: "400", fontSize: {
+              xs: "0.875rem",
+              sm: "0.875rem",
+              md: "1.1rem",
+            }
+          }}>
             {product?.title}
           </Typography>
           {/* <Typography variant="body2" color="text.secondary">
@@ -216,10 +222,13 @@ const ProductDetails = () => {
           </Typography> */}
 
 
-          <Typography
-            variant="body1"
-            sx={{ fontWeight: "bold" }}
-          >
+          <Typography variant="body2" sx={{
+            fontWeight: "100", fontSize: {
+              xs: "0.875rem",
+              sm: "0.875rem",
+              md: "1.1rem",
+            }
+          }}>
             {(variantSelection?.quantityAvailable == 0) ? <span style={{ color: "red", fontWeight: "bolder" }}>{`OUT OF STOCK`}</span> : `${variantSelection.currencyCode} ${parseFloat(variantSelection.amount).toFixed(2)}`}
           </Typography>
 
@@ -232,14 +241,21 @@ const ProductDetails = () => {
 
             return (
               <Box sx={{ display: (name == "Title") ? "none" : "block" }}>
-                <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb: 1 }}>
+                <Typography variant="body2" sx={{
+                  fontWeight: "100", fontSize: {
+                    xs: "0.875rem",
+                    sm: "0.875rem",
+                    md: "1.1rem",
+                  },
+                  mb:1
+                }}>
                   {name}
                 </Typography>
 
                 <Box sx={{
                   display: "flex",
                   flexWrap: "wrap",
-                  
+
                   mb: 2
                 }} gap={2}>
                   {options?.map((value) => (
@@ -264,7 +280,14 @@ const ProductDetails = () => {
 
         {/* Section 3: Quantity */}
         <Box sx={{ mb: 5 }}>
-          <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb: 2 }}>
+          <Typography variant="body2" sx={{
+            fontWeight: "100", fontSize: {
+              xs: "0.875rem",
+              sm: "0.875rem",
+              md: "1.1rem",
+            },
+            mb:1
+          }}>
             Quantity
           </Typography>
           <Box display="flex" alignItems="center" gap={2}>

src/components/SearchProduct/SearchProduct.jsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid2';
 import { Box, Button, TextField, InputAdornment, Typography, Card, CardContent, CardMedia } from '@mui/material';
 import { useSelector } from 'react-redux';
 
-const SearchProduct = ({onClose}) => {
+const SearchProduct = ({ onClose }) => {
 
     const products = useSelector((state) => state.products.products.data)
     const [searchedProducts, setSearchedProducts] = useState([]);
@@ -108,9 +108,9 @@ const SearchProduct = ({onClose}) => {
                                     borderBottom: "1px solid rgba(0,0,0,0.2)",
                                     transition: "all 0.3s ease-in-out",
                                     ":hover": {
-                                      backgroundColor: "#95AAC5"
+                                        backgroundColor: "#95AAC5"
                                     }
-                                  }}
+                                }}
                                 onClick={() => {
                                     window.location.href = `/products/${product?.handle}`
                                 }}
@@ -121,8 +121,32 @@ const SearchProduct = ({onClose}) => {
                                     image={product?.images[0]?.url}
                                     alt={product?.title}
                                 />
-                                <CardContent sx={{ flex: '1 0 auto' }}>
-                                    <Typography variant="h5">{product?.title}</Typography>
+                                <CardContent>
+                                    <Typography variant="body2" sx={{
+                                        fontWeight: "100", fontSize: {
+                                            xs: "0.875rem",
+                                            sm: "0.875rem",
+                                            md: "1.1rem",
+                                        }
+                                    }}>
+                                        {`${product?.collections[0]?.title}`}
+                                    </Typography>
+                                    <Typography variant="body2" sx={{
+                                        fontWeight: "400", fontSize: {
+                                            xs: "0.875rem",
+                                            sm: "0.875rem",
+                                            md: "1.1rem",
+                                        },
+                                    }}>{product?.title}</Typography>
+                                    <Typography variant="body2" sx={{
+                                        fontWeight: "100", fontSize: {
+                                            xs: "0.875rem",
+                                            sm: "0.875rem",
+                                            md: "1.1rem",
+                                        }
+                                    }}>
+                                        {`${product?.minVariantPrice?.currencyCode} ${parseFloat(product?.minVariantPrice?.amount).toFixed(2)}`}
+                                    </Typography>
                                 </CardContent>
                             </Card>
                         </Grid>