доделал адаптацию под мобильные устройства

src/components/Footer/Footer.module.css

@@ -9,7 +9,7 @@ padding: 40px 0;
 width: 90%;
 margin: 0 auto;
 display: flex;
-align-items: flex-start;
+align-items: center;
 justify-content: space-between;
 }
 
@@ -56,7 +56,9 @@ color: #fff;
 
 
 .right {
+    
 text-align: right;
+
 }
 
 
@@ -165,6 +167,7 @@ color: #fff;
         flex-direction: column;
         gap: 4px;
         font-size: 10px;
+        width: 30%;
     }
 
     .footer {
@@ -174,6 +177,8 @@ padding: 20px 0;
 
 .left {
 gap: 10px;
+width: 30%;
+align-items: center;
 }
 
 .copy {
@@ -194,7 +199,7 @@ text-align: right;
 
 .phone {
 color: #fff;
-font-size: 14px;
+font-size: 10px;
 font-weight: 400;
 }
 

src/features/catalog/Catalog.module.css

@@ -265,7 +265,7 @@ button:disabled {
 
 @media (max-width: 600px) {
   .grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 
   .wrap{
@@ -273,10 +273,6 @@ button:disabled {
     padding-bottom: 10px;
   }
   
-  .go {
-  display: none;
-}
-  
 }
 
 @media (max-width: 1300px) {
@@ -285,7 +281,10 @@ button:disabled {
   }
 }
 
-@media (max-width: 1254px) {
+@media (max-width: 500px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media (max-width: 1045px) {

src/pages/Products/Products.module.css

@@ -1,8 +1,6 @@
 /* ===== ОБЩИЙ ЛЭЙАУТ ===== */
 .wrapper {
-  display: flex;
+ 
-    margin: 0;
-    justify-content: center;
 }
 
 .container{
@@ -10,7 +8,7 @@
   background: #f3f3f3;
   min-height: 100vh;
   font-family: Arial, sans-serif;
-  width: 80%;
+  
 }
 
 /* ===== САЙДБАР ===== */
@@ -177,6 +175,65 @@
   color: #000;
 }
 
+.mobileFilterBtn {
+  display: none;
+  margin-bottom: 15px;
+  padding: 12px;
+  background: #000;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+/* overlay */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+
+/* кнопка закрытия */
+.closeBtn {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  margin-top: 70px;
+}
+
+/* ================= MOBILE ================= */
+
+@media (max-width: 600px) {
+  .mobileFilterBtn {
+    display: block;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 80%;
+    height: 100%;
+    background: white;
+    z-index: 100;
+    padding: 20px;
+    overflow-y: auto;
+    transition: 0.3s;
+  }
+
+  .sidebarOpen {
+    left: 0;
+  }
+
+  .closeBtn {
+    display: block;
+  }
+
+  
+}
+
 /* ===== АДАПТИВ ===== */
 
 
@@ -210,9 +267,7 @@
 }
 
 @media (max-width: 768px) {
-  .wrapper {
+  
-    flex-direction: column;
-  }
 
   
 
@@ -231,8 +286,12 @@
 
 @media (max-width: 600px){
   .products {
-    width: 150px;
+    width: 100%;
 }
 
+.main{
+  justify-content: center;
+  
+}
 
 }

src/pages/Products/Products.tsx

@@ -7,33 +7,44 @@ import ProductGrid from "../../features/catalog/ProductGrid";
 import Pagination from "../../features/catalog/Pagination";
 import { useAppSelector } from "../../app/hooks";
 import SEO from "../../shared/ui/SEO";
+import { useState } from "react";
 
 const ProductsPage: React.FC = () => {
-  const { selectedCategoryId, items } = useAppSelector(s => s.categories);
+  const { selectedCategoryId, items } = useAppSelector((s) => s.categories);
-  const category = items.find(c => c.id === selectedCategoryId);
+  const category = items.find((c) => c.id === selectedCategoryId);
+
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
       <SEO
-          title={
+        title={category ? `${category.name} купить` : "Каталог продукции"}
-            category
-              ? `${category.name} купить`
-              : "Каталог продукции"
-          }
         description={
           category
             ? `Купить ${category.name} по выгодной цене. Большой выбор товаров.`
             : "Каталог продукции: трубы ПВХ, аксессуары и комплектующие"
         }
       />
+      
+
+        
       <div className={styles.wrapper}>
         <div className={styles.container}>
-          <aside className={styles.sidebar}>
+          <aside className={`${styles.sidebar} ${isOpen ? styles.sidebarOpen : ""}`}>
+            <button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
+              ✕
+            </button>
             <SidebarCategories />
             {selectedCategoryId && <Filters />}
           </aside>
 
           <main className={styles.main}>
+            <button
+              className={styles.mobileFilterBtn}
+              onClick={() => setIsOpen(true)}
+            >
+              Фильтры и категории
+            </button>
             {!selectedCategoryId ? (
               <CategoryCards />
             ) : (