From 955b982a5a553ef8291d42f6f7192e967a88d43d Mon Sep 17 00:00:00 2001
From: anielsen99 <amanda.nielsen@gmx.ch>
Date: Fri, 27 Mar 2026 17:52:18 +0100
Subject: [PATCH] add rounded edges to shell and images

---
 .../src/components/ProductDetailPage.css      | 51 ++++++++++++-------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index 786a0bd..9586aa3 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -12,15 +12,17 @@
 
 .detail-page {
   min-height: 100vh;
-  background: #efefef;
   color: #191919;
-  padding: 20px;
+  padding: 38px;
+  background:
+    linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
 }
 
 .detail-shell {
   background: #f7f7f7;
-  border: 1px solid #d6d6d6;
-  padding: 22px;
+  border-radius: 18px;
+  padding: 38px;
 }
 
 /* --- Product Detail Page Wrapper End --- */
@@ -61,6 +63,7 @@
   background: #ddd;
   aspect-ratio: 1 / 1;
   overflow: hidden;
+  border-radius: 18px;
 }
 
 .detail-main-image img {
@@ -79,14 +82,20 @@
 .thumb-btn {
   width: 88px;
   height: 88px;
-  border: 1px solid #cfcfcf;
+  border: none;
+  border-radius: 18px;
   background: #fff;
   padding: 0;
   cursor: pointer;
 }
 
+.thumb-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
 .thumb-btn.active {
-  outline: 2px solid #4da3ff;
+  outline: 1px solid #ff6a00;
   outline-offset: 1px;
 }
 
@@ -364,15 +373,14 @@
 
 .detail-bottom-cta {
   margin: 20px;
-  margin-top: 42px;
   padding: 40px 38px;
   background-color: #ff6a00;
   border-radius: 24px;
 }
 
 .detail-bottom-cta h2 {
-  margin: 0 0 14px;
-  font-size: 52px;
+  margin: 0;
+  font-size: 42px;
   line-height: 0.95;
   font-weight: 300;
   letter-spacing: -0.04em;
@@ -380,8 +388,8 @@
 }
 
 .detail-bottom-cta p {
-  margin: 0 auto;
-  font-size: 18px;
+  margin-top: 18px;
+  font-size: 15px;
   line-height: 1.5;
   color: #fff;
   line-height: 1.5;
@@ -394,19 +402,24 @@
 }
 
 .detail-bottom-actions button {
+  border: none;
+  border-radius: 999px;
+  padding: 12px 18px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: transform 0.2s ease, opacity 0.2s ease;
   background-color: #fff;
   color: #ff6a00;
-  border-radius: 999px;
-  border: none;
-  padding: 16px 28px;
-  cursor: pointer;
-  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .detail-bottom-actions button:hover {
-  background: rgba(255, 255, 255, 0.4);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
+.detail-bottom-actions button:active {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.8);
 }
 
 /* --- Bottom CTA End --- */