From c6abc64239f819c506f301ef0a06d37626df929e Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Wed, 15 Jul 2026 18:38:44 +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=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=BA=D0=B0=D1=80=D1=82=D0=B8=D0=BD=D0=BE=D0=BA?=
 =?UTF-8?q?=20=D0=B2=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=85=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/catalog/Catalog.module.css | 45 +++++++++++++++++++++++--
 src/features/catalog/ProductCard.tsx    |  9 ++---
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/features/catalog/Catalog.module.css b/src/features/catalog/Catalog.module.css
index de2e490..9e9c1c6 100644
--- a/src/features/catalog/Catalog.module.css
+++ b/src/features/catalog/Catalog.module.css
@@ -44,7 +44,6 @@
   background: linear-gradient(135deg, rgba(247, 251, 255, 0.9), transparent 42%);
 }
 
-.card img,
 .categoryImg,
 .img {
   position: relative;
@@ -57,6 +56,33 @@
   object-fit: contain;
 }
 
+.productCard {
+  min-height: 0;
+  padding: 0;
+  justify-content: flex-start;
+}
+
+.productImageFrame {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  background: #f5f7fa;
+}
+
+.productImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.28s ease;
+}
+
+.productCard:hover .productImage {
+  transform: scale(1.04);
+}
+
 .cardContent {
   position: relative;
   z-index: 1;
@@ -66,6 +92,12 @@
   justify-content: space-between;
 }
 
+.productCard .cardContent {
+  min-height: 86px;
+  padding: 16px 18px 18px;
+  align-items: center;
+}
+
 .name,
 .categoryName {
   position: relative;
@@ -290,13 +322,22 @@ button:disabled {
     padding: 18px;
   }
 
-  .card img,
   .categoryImg,
   .img {
     height: 128px;
     max-width: 150px;
   }
 
+  .productCard {
+    min-height: 0;
+    padding: 0;
+  }
+
+  .productCard .cardContent {
+    min-height: 76px;
+    padding: 14px 16px 16px;
+  }
+
   .name,
   .categoryName {
     font-size: 14px;
diff --git a/src/features/catalog/ProductCard.tsx b/src/features/catalog/ProductCard.tsx
index 46c2a69..1ec4939 100644
--- a/src/features/catalog/ProductCard.tsx
+++ b/src/features/catalog/ProductCard.tsx
@@ -18,11 +18,12 @@ const ProductCard: React.FC<Props> = ({ product }) => {
 
   return (
     <div 
-      className={styles.card}
+      className={`${styles.card} ${styles.productCard}`}
       onClick={() => onSelect(product.id)}
     >
-      
-      <img src={product.images[0]} alt={product.name} />
+      <div className={styles.productImageFrame}>
+        <img className={styles.productImage} src={product.images[0]} alt={product.name} />
+      </div>
       <div className={styles.cardContent}>
       <p className={styles.name}>{product.name}</p>
       <button className={styles.plus}>+</button>
@@ -31,4 +32,4 @@ const ProductCard: React.FC<Props> = ({ product }) => {
   );
 };
 
-export default ProductCard;
\ No newline at end of file
+export default ProductCard;