ok

src/components/CoverflowCarousel.js

@@ -182,7 +182,7 @@ const CoverflowCarousel = ({ products, onCardClick }) => {
               <div className={styles.cardWrapper}>
                 <ProductCard 
                   product={product} 
-                  onCardClick={(p) => { onCardClick && onCardClick(p); }}
+                  onCardClick={(p,d) => { onCardClick && onCardClick(p,d); }}
                   isCenter={position === 0}
                   canHover={position === 0 && animationState === 'ready' && !shiftDirection && !isDragging}
                   onCollapse={position === 0 ? collapseOverlay : undefined}

src/components/ProductCard.js

@@ -33,7 +33,7 @@ const ProductCard = ({ product, onCardClick, isCenter, canHover, onCollapse }) =
             <div className={styles.buttonGroup}>
               <button
                 className={styles.detailButton}
-                onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCardClick && onCardClick(product); }}
+                onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCardClick && onCardClick(product, true); }}
               >
                 Detail
               </button>

src/components/ProductSection.js

@@ -41,7 +41,12 @@ const ProductSection = ({ setSelectedProduct, setShowedModal, productSectionRef,
   }, [selectedCategory, products]);
 
   // Handle product selection for detail view
-  const handleViewDetail = (product) => {
+  const handleViewDetail = (product, detailed) => {
+    if(detailed) {
+      setSelectedProduct(product);
+      setShowedModal('product');
+      return;
+    }
     setSelectedProduct(product);
     setShowedModal('product');
     setWillDo('checkout');