From a8a07289b62089e58cc11d3fb04230e4913b8fde Mon Sep 17 00:00:00 2001
From: anielsen99 <amanda.nielsen@gmx.ch>
Date: Wed, 25 Mar 2026 14:52:03 +0100
Subject: [PATCH] add product-card hover and active state

---
 parfum-shop/src/App.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/parfum-shop/src/App.css b/parfum-shop/src/App.css
index 2907b2a..d2248cd 100644
--- a/parfum-shop/src/App.css
+++ b/parfum-shop/src/App.css
@@ -173,6 +173,20 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  cursor: pointer;
+}
+
+.product-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+  border-color: #bbbbbb; 
+}
+
+.product-card:active {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border-color: #ff6a00; 
 }
 
 .product-top {
@@ -211,6 +225,11 @@
   height: auto;
   object-fit: contain;
   border-radius: 10px;
+  transition: transform 0.4s ease;
+}
+
+.product-card:hover .product-image {
+  transform: scale(1.05);
 }
 
 .product-bottom {