chore: V2

frontend-prep/src/components/ProductCard.css

@@ -554,7 +554,7 @@ div[data-category="gros&semi"] .details-button:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 20px;
+    padding: 8px;
     animation: fadeIn 0.3s ease;
 }
 
@@ -570,9 +570,12 @@ div[data-category="gros&semi"] .details-button:hover {
 .video-modal-content {
     position: relative;
     width: 100%;
-    max-width: 900px;
+    max-width: 98vw;
+    max-height: calc(100vh - 16px);
+    display: flex;
+    flex-direction: column;
     background: #000;
-    border-radius: 12px;
+    border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     animation: scaleIn 0.3s ease;
@@ -625,9 +628,10 @@ div[data-category="gros&semi"] .details-button:hover {
 .video-player {
     width: 100%;
     height: auto;
-    max-height: 80vh;
+    max-height: calc(100vh - 16px);
     display: block;
     object-fit: contain;
+    background: #000;
 }
 
 /* ===== RESPONSIVE ===== */
@@ -650,12 +654,13 @@ div[data-category="gros&semi"] .details-button:hover {
     }
 
     .video-modal {
-        padding: 10px;
+        padding: 0;
     }
 
     .video-modal-content {
         max-width: 100%;
-        border-radius: 8px;
+        max-height: 100vh;
+        border-radius: 0;
     }
 
     .video-close-btn {
@@ -670,7 +675,7 @@ div[data-category="gros&semi"] .details-button:hover {
     }
 
     .video-player {
-        max-height: 70vh;
+        max-height: 100vh;
     }
 }
 

frontend-prep/src/pages/User/Cart.css

@@ -449,7 +449,10 @@
     position: relative;
     width: 100%;
     max-width: 860px;
-    background: var(--surface);
+    max-height: calc(100vh - 3rem);
+    display: flex;
+    flex-direction: column;
+    background: #000;
     border-radius: 12px;
     overflow: hidden;
 }
@@ -481,8 +484,9 @@
 .video-player {
     width: 100%;
     height: auto;
-    max-height: 80vh;
+    max-height: calc(100vh - 3rem);
     display: block;
+    object-fit: contain;
     background: #000;
 }
 

frontend-prep/src/pages/User/OrderDetails.css

@@ -375,7 +375,10 @@
     position: relative;
     width: 100%;
     max-width: 900px;
-    background: var(--surface);
+    max-height: calc(100vh - 4rem);
+    display: flex;
+    flex-direction: column;
+    background: #000;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
@@ -413,8 +416,9 @@
 .video-player {
     width: 100%;
     height: auto;
-    max-height: 80vh;
+    max-height: calc(100vh - 4rem);
     display: block;
+    object-fit: contain;
     background: #000;
 }
 

frontend-prep/src/pages/User/ProductDetail.css

@@ -71,11 +71,14 @@
   border-radius: 20px;
   overflow: hidden;
   display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(--surface);
   border: 1px solid var(--border);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
   backdrop-filter: blur(8px);
   transition: all 0.3s ease;
+  min-height: 320px;
 }
 
 .product-image-section:hover {
@@ -85,11 +88,10 @@
 
 .product-detail-image {
   width: 100%;
-  height: auto;
-  object-fit: contain;
+  height: 100%;
+  object-fit: cover;
   display: block;
   transition: all 0.3s ease;
-  padding: clamp(1rem, 3vw, 2rem);
 }
 
 .product-image-section.out-of-stock .product-detail-image {
@@ -473,8 +475,10 @@
   .product-image-section {
     flex: 1;
     max-width: 550px;
+    min-height: 480px;
     position: sticky;
     top: calc(60px + 2rem);
+    align-self: flex-start;
   }
   
   .product-info-section {

frontend-prep/src/pages/User/ProductDetail.tsx

@@ -238,6 +238,15 @@ function ProductDetail() {
                 </button>
 
                 <div className="product-detail-content">
+                    <div className={`product-image-section ${isOutOfStock ? "out-of-stock" : ""}`}>
+                        <img
+                            src={product.image || ""}
+                            alt={product.name}
+                            className="product-detail-image"
+                        />
+                        {isOutOfStock && <div className="sold-out-badge">SOLD OUT</div>}
+                    </div>
+
                     <div className="product-info-section">
                         <h1 className="product-detail-name">{product.name}</h1>