From 81f7fd5b8bfc84a193c31a2b2f8bf7d4860ae604 Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Tue, 28 Jul 2026 21:06:32 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=82=D0=B5=D0=B3=D0=BE=D1=80=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/catalog/Catalog.module.css | 54 +++++++++++++++++++++++--
 src/features/catalog/CategoryCards.tsx  | 12 ++++--
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/features/catalog/Catalog.module.css b/src/features/catalog/Catalog.module.css
index 9e9c1c6..7bce883 100644
--- a/src/features/catalog/Catalog.module.css
+++ b/src/features/catalog/Catalog.module.css
@@ -56,6 +56,41 @@
   object-fit: contain;
 }
 
+.categoryCard {
+  min-height: 0;
+  padding: 0;
+  justify-content: flex-start;
+}
+
+.categoryImageFrame {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  background: #f5f7fa;
+}
+
+.categoryImageFrame .img {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+  object-fit: cover;
+  transition: transform 0.28s ease;
+}
+
+.categoryCard:hover .img {
+  transform: scale(1.04);
+}
+
+.categoryCard .name {
+  min-height: 76px;
+  padding: 16px 18px 18px;
+  display: flex;
+  align-items: center;
+}
+
 .productCard {
   min-height: 0;
   padding: 0;
@@ -302,10 +337,6 @@ button:disabled {
   transform: none;
 }
 
-.categoryCard {
-  position: relative;
-}
-
 @media (max-width: 1090px) {
   .grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -328,6 +359,21 @@ button:disabled {
     max-width: 150px;
   }
 
+  .categoryCard {
+    min-height: 0;
+    padding: 0;
+  }
+
+  .categoryImageFrame .img {
+    height: 100%;
+    max-width: none;
+  }
+
+  .categoryCard .name {
+    min-height: 68px;
+    padding: 14px 16px 16px;
+  }
+
   .productCard {
     min-height: 0;
     padding: 0;
diff --git a/src/features/catalog/CategoryCards.tsx b/src/features/catalog/CategoryCards.tsx
index aef5d71..6a8ba23 100644
--- a/src/features/catalog/CategoryCards.tsx
+++ b/src/features/catalog/CategoryCards.tsx
@@ -19,12 +19,18 @@ const CategoryCards: React.FC = () => {
   return (
     <div className={styles.grid}>
       {categories.map(c => (
-        <div key={c.id} className={styles.card} onClick={() => onSelect(c.id)}>
-          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+        <div key={c.id} className={`${styles.card} ${styles.categoryCard}`} onClick={() => onSelect(c.id)}>
+          <div className={styles.categoryImageFrame}>
+            <img
+              src={c.image || "/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png"}
+              alt={c.name}
+              className={styles.img}
+            />
+          </div>
           <div className={styles.name}>{c.name}</div>
         </div>
       ))}
     </div>
   );
 };
-export default CategoryCards;
\ No newline at end of file
+export default CategoryCards;