diff --git a/website/public/product.html b/website/public/product.html
index 0ca1c6d..71a3e33 100644
--- a/website/public/product.html
+++ b/website/public/product.html
@@ -10,6 +10,887 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    />
+    <link rel="stylesheet" href="/assets/css/main.css?v=1735692100" />
+    <link rel="stylesheet" href="/assets/css/navbar.css?v=1735692200" />
+    <link rel="stylesheet" href="/assets/css/cart-wishlist.css" />
+    <link rel="stylesheet" href="/assets/css/shopping.css" />
+    <link rel="stylesheet" href="/assets/css/responsive.css" />
+    <style>
+      /* Custom Scrollbar for Description Box */
+      div[style*="overflow-y: auto"] {
+        scrollbar-width: thin;
+        scrollbar-color: #6b46c1 #f3f4f6;
+      }
+
+      div[style*="overflow-y: auto"]::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
+        background: #f3f4f6;
+        border-radius: 4px;
+      }
+
+      div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
+        background: #6b46c1;
+        border-radius: 4px;
+      }
+
+      div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
+        background: #5936a3;
+      }
+
+      /* Smooth image transitions */
+      #primaryImage {
+        transition: opacity 0.3s ease-in-out;
+      }
+
+      /* Thumbnail hover effect */
+      .thumbnail-item:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      /* Color variant animation */
+      .color-variant-circle {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    </style>
+    <link rel="stylesheet" href="/assets/css/theme-colors.css" />
   </head>
+  <body>
+    <!-- Modern Navigation -->
+    <nav class="modern-navbar">
+      <div class="navbar-wrapper">
+        <div class="navbar-brand">
+          <a href="/home" class="brand-link">
+            <img
+              src="/uploads/cat-png-1767324141436-368259437.png"
+              alt="Sky Art Shop Logo"
+              class="brand-logo"
+            />
+            <span class="brand-name">Sky' Art Shop</span>
+          </a>
+        </div>
+
+        <div class="navbar-menu">
+          <ul class="nav-menu-list">
+            <li class="nav-item">
+              <a href="/home" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item">
+              <a href="/shop" class="nav-link">Shop</a>
+            </li>
+            <li class="nav-item">
+              <a href="/portfolio" class="nav-link">Portfolio</a>
+            </li>
+            <li class="nav-item">
+              <a href="/about" class="nav-link">About</a>
+            </li>
+            <li class="nav-item">
+              <a href="/blog" class="nav-link">Blog</a>
+            </li>
+            <li class="nav-item">
+              <a href="/contact" class="nav-link">Contact</a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="navbar-actions">
+          <div class="action-item wishlist-dropdown-wrapper">
+            <button
+              class="action-btn"
+              id="wishlistToggle"
+              aria-label="Wishlist"
+            >
+              <i class="bi bi-heart"></i>
+              <span class="action-badge" id="wishlistCount">0</span>
+            </button>
+            <div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
+              <div class="dropdown-head">
+                <h3>My Wishlist</h3>
+                <button class="dropdown-close" id="wishlistClose">
+                  <i class="bi bi-x-lg"></i>
+                </button>
+              </div>
+              <div class="dropdown-body" id="wishlistContent">
+                <p class="empty-state">Your wishlist is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <a href="/shop" class="btn-outline">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+
+          <div class="action-item cart-dropdown-wrapper">
+            <button
+              class="action-btn"
+              id="cartToggle"
+              aria-label="Shopping Cart"
+            >
+              <i class="bi bi-cart3"></i>
+              <span class="action-badge" id="cartCount">0</span>
+            </button>
+            <div class="action-dropdown cart-dropdown" id="cartPanel">
+              <div class="dropdown-head">
+                <h3>Shopping Cart</h3>
+                <button class="dropdown-close" id="cartClose">
+                  <i class="bi bi-x-lg"></i>
+                </button>
+              </div>
+              <div class="dropdown-body" id="cartContent">
+                <p class="empty-state">Your cart is empty</p>
+              </div>
+              <div class="dropdown-foot">
+                <div class="cart-summary">
+                  <span class="summary-label">Subtotal:</span>
+                  <span class="summary-value" id="cartSubtotal">$0.00</span>
+                </div>
+                <a href="/checkout" class="btn-primary-full"
+                  >Proceed to Checkout</a
+                >
+                <a href="/shop" class="btn-text">Continue Shopping</a>
+              </div>
+            </div>
+          </div>
+
+          <button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+            <span class="toggle-line"></span>
+          </button>
+        </div>
+      </div>
+
+      <div class="mobile-menu" id="mobileMenu">
+        <div class="mobile-menu-header">
+          <span class="mobile-brand">Sky' Art Shop</span>
+          <button class="mobile-close" id="mobileMenuClose">
+            <i class="bi bi-x-lg"></i>
+          </button>
+        </div>
+        <ul class="mobile-menu-list">
+          <li><a href="/home" class="mobile-link">Home</a></li>
+          <li><a href="/shop" class="mobile-link">Shop</a></li>
+          <li><a href="/portfolio" class="mobile-link">Portfolio</a></li>
+          <li><a href="/about" class="mobile-link">About</a></li>
+          <li><a href="/blog" class="mobile-link">Blog</a></li>
+          <li><a href="/contact" class="mobile-link">Contact</a></li>
+        </ul>
+      </div>
+    </nav>
+    <div
+      id="loading"
+      style="
+        text-align: center;
+        padding: 100px 20px;
+        font-size: 18px;
+        color: #202023;
+        background: #ffebeb;
+      "
+    >
+      <i
+        class="bi bi-hourglass-split"
+        style="font-size: 48px; display: block; margin-bottom: 20px"
+      ></i>
+      Loading product...
+    </div>
+
+    <div id="productDetail" style="display: none"></div>
+
+    <script src="/assets/js/shop-system.js"></script>
+    <script src="/assets/js/cart.js"></script>
+    <script src="/assets/js/page-transitions.js?v=1766709739"></script>
+    <script src="/assets/js/back-button-control.js?v=1766723554"></script>
+    <script src="/assets/js/navigation.js?v=1766708114"></script>
+    <script src="/assets/js/api-client.js"></script>
+    <script src="/assets/js/notifications.js"></script>
+    <script>
+      // Function to change primary image
+      function changePrimaryImage(imageUrl, index) {
+        const primaryImg = document.getElementById("primaryImage");
+        if (primaryImg) {
+          primaryImg.src = imageUrl;
+        }
+
+        // Update thumbnail borders
+        const thumbnails = document.querySelectorAll(".thumbnail-item");
+        thumbnails.forEach((thumb, idx) => {
+          if (idx === index) {
+            thumb.style.border = "2px solid #6b46c1";
+          } else {
+            thumb.style.border = "1px solid #e5e7eb";
+          }
+        });
+
+        // Update color variant borders
+        const variants = document.querySelectorAll(".color-variant-circle");
+        variants.forEach((variant) => {
+          const onclick = variant.getAttribute("onclick");
+          if (onclick && onclick.includes(imageUrl)) {
+            variant.style.border = "3px solid #6b46c1";
+          } else {
+            variant.style.border = "3px solid #e5e7eb";
+          }
+        });
+      }
+
+      async function loadProduct() {
+        const params = new URLSearchParams(window.location.search);
+        const productId = params.get("id");
+
+        console.log("Product page loaded. URL:", window.location.href);
+        console.log("Product ID from URL:", productId);
+
+        if (!productId) {
+          console.error("No product ID in URL");
+          document.getElementById("loading").innerHTML =
+            '<p style="text-align: center; padding: 40px; color: #ef4444; font-size: 18px;">Product not found - No product ID in URL</p><div style="text-align: center;"><a href="/shop" style="color: #FCB1D8; text-decoration: none; font-weight: 600;">← Back to Shop</a></div>';
+          return;
+        }
+
+        try {
+          console.log(
+            "Fetching product from API:",
+            `/api/products/${productId}`
+          );
+          const response = await fetch(`/api/products/${productId}`);
+          const data = await response.json();
+          console.log("API response:", data);
+
+          if (!data.success || !data.product) {
+            throw new Error("Product not found");
+          }
+
+          const product = data.product;
+          document.title = `${product.name} - Sky Art Shop`;
+
+          // Get primary image or first image from images array
+          let primaryImage = "/assets/images/placeholder.svg";
+          let imageGallery = [];
+
+          if (
+            product.images &&
+            Array.isArray(product.images) &&
+            product.images.length > 0
+          ) {
+            // Find primary image
+            const primary = product.images.find((img) => img.is_primary);
+            if (primary) {
+              primaryImage = primary.image_url;
+            } else {
+              primaryImage = product.images[0].image_url;
+            }
+            imageGallery = product.images;
+          }
+
+          // Build image gallery HTML
+          let galleryHTML = "";
+          if (imageGallery.length > 0) {
+            galleryHTML = `
+            <div style="display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; padding: 8px 0;">
+              ${imageGallery
+                .map(
+                  (img, idx) => `
+                <img src="${img.image_url}" 
+                     alt="${img.alt_text || product.name}"
+                     onclick="changePrimaryImage('${img.image_url}')"
+                     style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; border: ${
+                       img.image_url === primaryImage
+                         ? "3px solid #6b46c1"
+                         : "1px solid #e5e7eb"
+                     };"
+                     onerror="this.src='/assets/images/placeholder.svg'" />
+              `
+                )
+                .join("")}
+            </div>
+          `;
+          }
+
+          // Build product details HTML
+          let detailsHTML = "";
+          if (
+            product.sku ||
+            product.weight ||
+            product.dimensions ||
+            product.material
+          ) {
+            detailsHTML = `
+            <div style="margin-bottom: 24px; padding: 20px; background: #FFD0D0; border-radius: 8px; border: 1px solid #FCB1D8;">
+              <h3 style="font-size: 16px; font-weight: 600; color: #202023; margin-bottom: 16px;">Product Details</h3>
+              ${
+                product.sku
+                  ? `
+                <p style="margin-bottom: 8px; color: #202023; opacity: 0.8;">
+                  <span style="font-weight: 500;">SKU:</span> ${product.sku}
+                </p>
+              `
+                  : ""
+              }
+              ${
+                product.weight
+                  ? `
+                <p style="margin-bottom: 8px; color: #202023; opacity: 0.8;">
+                  <span style="font-weight: 500;">Weight:</span> ${product.weight}
+                </p>
+              `
+                  : ""
+              }
+              ${
+                product.dimensions
+                  ? `
+                <p style="margin-bottom: 8px; color: #202023; opacity: 0.8;">
+                  <span style="font-weight: 500;">Dimensions:</span> ${product.dimensions}
+                </p>
+              `
+                  : ""
+              }
+              ${
+                product.material
+                  ? `
+                <p style="margin-bottom: 8px; color: #6b7280;">
+                  <span style="font-weight: 500;">Material:</span> ${product.material}
+                </p>
+              `
+                  : ""
+              }
+            </div>
+          `;
+          }
+
+          // Build badges HTML
+          let badgesHTML = "";
+          if (product.isfeatured || product.isbestseller) {
+            badgesHTML = `
+            <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+              ${
+                product.isfeatured
+                  ? `
+                <span style="display: inline-block; padding: 6px 12px; background: #FCB1D8; color: #202023; border-radius: 6px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 4px rgba(252, 177, 216, 0.4);">
+                  <i class="bi bi-star-fill"></i> Featured
+                </span>
+              `
+                  : ""
+              }
+              ${
+                product.isbestseller
+                  ? `
+                <span style="display: inline-block; padding: 6px 12px; background: #F6CCDE; color: #202023; border-radius: 6px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 4px rgba(252, 177, 216, 0.4);">
+                  <i class="bi bi-trophy-fill"></i> Best Seller
+                </span>
+              `
+                  : ""
+              }
+            </div>
+          `;
+          }
+
+          document.getElementById("productDetail").innerHTML = `
+          <div style="font-family: 'Roboto', sans-serif;">
+            <nav style="background: #F6CCDE; padding: 16px 24px; box-shadow: 0 1px 3px rgba(252, 177, 216, 0.3);">
+              <div style="max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 20px;">
+                <a href="/home" style="font-size: 20px; font-weight: 600; color: #202023; text-decoration: none;">Sky Art Shop</a>
+                <span style="color: #202023; opacity: 0.5;">/</span>
+                <a href="/shop" style="color: #202023; opacity: 0.8; text-decoration: none; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">Shop</a>
+                <span style="color: #202023; opacity: 0.5;">/</span>
+                <span style="color: #202023; opacity: 0.7;">${
+                  product.name
+                }</span>
+              </div>
+            </nav>
+            
+            <div style="max-width: 1400px; margin: 40px auto; padding: 0 24px; background: #FFEBEB; border-radius: 12px; padding: 40px 24px;">
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px;">
+                
+                <!-- LEFT COLUMN: Image & Description -->
+                <div>
+                  <!-- Back to Shop Link -->
+                  <a href="/shop" style="display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #FCB1D8; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.3s;"
+                     onmouseover="this.style.gap='12px'; this.style.color='#d896c0'" 
+                     onmouseout="this.style.gap='8px'; this.style.color='#FCB1D8'">
+                    <i class="bi bi-arrow-left"></i> Back to Shop
+                  </a>
+                  
+                  <!-- Image Section with Thumbnails -->
+                  <div style="display: flex; gap: 16px;">
+                    <!-- Thumbnail Gallery (Vertical Left) -->
+                    ${
+                      imageGallery.length > 1
+                        ? `
+                    <div id="thumbnailGallery" style="display: flex; flex-direction: column; gap: 12px; max-height: 600px; overflow-y: auto;">
+                      ${imageGallery
+                        .map(
+                          (img, idx) => `
+                        <div onclick="changePrimaryImage('${
+                          img.image_url
+                        }', ${idx})" 
+                             class="thumbnail-item" 
+                             data-index="${idx}"
+                             style="width: 70px; height: 70px; border-radius: 4px; overflow: hidden; cursor: pointer; border: ${
+                               img.image_url === primaryImage
+                                 ? "2px solid #6b46c1"
+                                 : "1px solid #e5e7eb"
+                             }; transition: all 0.3s; flex-shrink: 0;">
+                          <img src="${img.image_url}" 
+                               alt="${img.alt_text || product.name}"
+                               style="width: 100%; height: 100%; object-fit: cover;"
+                               onerror="this.src='/assets/images/placeholder.svg'" />
+                        </div>
+                      `
+                        )
+                        .join("")}
+                    </div>
+                    `
+                        : ""
+                    }
+                    
+                    <!-- Main Product Image -->
+                    <div style="flex: 1; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(252, 177, 216, 0.2); border: 1px solid #FFD0D0; padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 500px; max-height: 600px;">
+                      <img id="primaryImage" 
+                           src="${primaryImage}" 
+                           alt="${product.name}"
+                           style="max-width: 100%; max-height: 560px; width: auto; height: auto; object-fit: contain; display: block;"
+                           onerror="this.src='/assets/images/placeholder.svg'" />
+                    </div>
+                  </div>
+                  
+                  <!-- Color Variants Section -->
+                  ${
+                    imageGallery.some(
+                      (img) => img.color_variant && img.color_code
+                    )
+                      ? `
+                  <div style="margin-top: 24px; padding: 20px; background: #FFD0D0; border-radius: 12px;">
+                    <h4 style="font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                      <i class="bi bi-palette"></i> 
+                      Available Colors (${
+                        imageGallery.filter((img) => img.color_variant).length
+                      })
+                    </h4>
+                    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+                      ${imageGallery
+                        .filter((img) => img.color_variant && img.color_code)
+                        .map(
+                          (img, idx) => `
+                        <div onclick="changePrimaryImage('${
+                          img.image_url
+                        }', ${imageGallery.indexOf(img)})" 
+                             class="color-variant-circle"
+                             title="${img.color_variant}"
+                             style="position: relative; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 3px solid ${
+                               img.image_url === primaryImage
+                                 ? "#FCB1D8"
+                                 : "#FFEBEB"
+                             }; transition: all 0.3s; overflow: hidden; box-shadow: 0 2px 4px rgba(252, 177, 216, 0.3);"
+                             onmouseover="this.querySelector('.color-name-tooltip').style.opacity='1'; this.querySelector('.color-name-tooltip').style.transform='translateY(0)'; this.style.transform='scale(1.15)'"
+                             onmouseout="this.querySelector('.color-name-tooltip').style.opacity='0'; this.querySelector('.color-name-tooltip').style.transform='translateY(-5px)'; this.style.transform='scale(1)'">
+                          <div style="width: 100%; height: 100%; background: ${
+                            img.color_code
+                          };"></div>
+                          <div class="color-name-tooltip" style="position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%) translateY(-5px); background: rgba(0,0,0,0.9); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: all 0.3s; z-index: 10;">
+                            ${img.color_variant}
+                          </div>
+                        </div>
+                      `
+                        )
+                        .join("")}
+                    </div>
+                  </div>
+                  `
+                      : ""
+                  }
+                  
+                  <!-- Description Box -->
+                  ${
+                    product.description
+                      ? `
+                  <div style="margin-top: 24px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(252, 177, 216, 0.2); border: 1px solid #FFD0D0;">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid #FCB1D8;">
+                      <i class="bi bi-pin-angle-fill" style="color: #FCB1D8; font-size: 18px;"></i>
+                      <h3 style="font-size: 16px; font-weight: 600; color: #202023; margin: 0;">Description</h3>
+                    </div>
+                    <div style="max-height: 200px; overflow-y: auto; color: #4b5563; line-height: 1.7; font-size: 15px; padding-right: 8px;">
+                      ${product.description}
+                    </div>
+                  </div>
+                  `
+                      : ""
+                  }
+                </div>
+                
+                <!-- RIGHT COLUMN: Product Info & Actions -->
+                <div style="padding: 20px 0;">
+                  ${badgesHTML}
+                  <h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">${
+                    product.name
+                  }</h1>
+                  
+                  <div style="display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px;">
+                    <p style="font-size: 36px; font-weight: 700; color: #FCB1D8; margin: 0;">$${parseFloat(
+                      product.price
+                    ).toFixed(2)}</p>
+                    ${
+                      product.stockquantity > 0
+                        ? `<span style="color: #10b981; font-weight: 500; display: flex; align-items: center; gap: 6px;"><i class="bi bi-check-circle-fill"></i> In Stock (${product.stockquantity} available)</span>`
+                        : `<span style="color: #ef4444; font-weight: 500; display: flex; align-items: center; gap: 6px;"><i class="bi bi-x-circle-fill"></i> Out of Stock</span>`
+                    }
+                  </div>
+                  
+                  ${
+                    product.shortdescription
+                      ? `
+                    <p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">${product.shortdescription}</p>
+                  `
+                      : ""
+                  }
+                  
+                  ${
+                    product.category
+                      ? `
+                    <p style="margin-bottom: 24px;">
+                      <span style="font-weight: 500; color: #6b7280;">Category:</span>
+                      <span style="display: inline-block; margin-left: 8px; padding: 6px 14px; background: #FFD0D0; border-radius: 6px; font-size: 14px; color: #202023;">
+                        <i class="bi bi-tag"></i> ${product.category}
+                      </span>
+                    </p>
+                  `
+                      : ""
+                  }
+                  
+                  <!-- Product Details (Moved from description area) -->
+                  ${detailsHTML}
+                  
+                  <!-- Add to Cart & Wishlist Buttons -->
+                  <div style="display: flex; gap: 12px; margin-top: 32px; margin-bottom: 24px;">
+                    <button onclick="addToCart()" 
+                            ${product.stockquantity <= 0 ? "disabled" : ""}
+                            style="padding: 14px 24px; background: ${
+                              product.stockquantity <= 0 ? "#9ca3af" : "#FCB1D8"
+                            }; color: #202023; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: ${
+            product.stockquantity <= 0 ? "not-allowed" : "pointer"
+          }; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(252, 177, 216, 0.3);"
+                            onmouseover="if(${
+                              product.stockquantity > 0
+                            }) this.style.transform='translateY(-2px)'; this.style.background='#F6CCDE'; this.style.boxShadow='0 6px 16px rgba(252, 177, 216, 0.4)'" 
+                            onmouseout="if(${
+                              product.stockquantity > 0
+                            }) this.style.transform='translateY(0)'; this.style.background='#FCB1D8'; this.style.boxShadow='0 4px 12px rgba(252, 177, 216, 0.3)'">
+                      <i class="bi bi-cart-plus" style="font-size: 20px;"></i>
+                      ${
+                        product.stockquantity <= 0
+                          ? "Out of Stock"
+                          : "Add to Cart"
+                      }
+                    </button>
+                    <button onclick="addToWishlist()" 
+                            style="padding: 14px 20px; background: white; color: #FCB1D8; border: 2px solid #FCB1D8; border-radius: 10px; font-size: 18px; cursor: pointer; transition: all 0.3s;"
+                            onmouseover="this.style.background='#FCB1D8'; this.style.color='white'; this.style.transform='scale(1.05)'" 
+                            onmouseout="this.style.background='white'; this.style.color='#FCB1D8'; this.style.transform='scale(1)'">
+                      <i class="bi bi-heart"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- Related Products Section -->
+              <div id="relatedProducts" style="margin-top: 60px; padding-top: 40px; border-top: 2px solid #e5e7eb;">
+                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px;">
+                  <h2 style="font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0; display: flex; align-items: center; gap: 12px;">
+                    <i class="bi bi-box-seam" style="color: #6b46c1;"></i>
+                    You May Also Like
+                  </h2>
+                </div>
+                <div id="relatedProductsGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px;">
+                  <!-- Products will be loaded here -->
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+
+          document.getElementById("loading").style.display = "none";
+          document.getElementById("productDetail").style.display = "block";
+
+          // Store product data with imageurl for shopping cart
+          window.currentProduct = {
+            ...product,
+            imageurl: primaryImage, // Add the primary image URL for cart display
+          };
+
+          // Track viewed product for smart recommendations
+          trackViewedProduct({
+            ...product,
+            imageurl: primaryImage,
+          });
+
+          // Load related products
+          loadRelatedProducts(product.category, product.id);
+
+          console.log("Product loaded successfully:", product.name);
+        } catch (error) {
+          console.error("Error loading product:", error);
+          document.getElementById("loading").innerHTML =
+            '<div style="text-align: center; padding: 40px;"><p style="color: #ef4444; font-size: 18px; margin-bottom: 16px;">Error loading product</p><p style="color: #6b7280; margin-bottom: 20px;">' +
+            error.message +
+            '</p><a href="/shop" style="color: #FCB1D8; text-decoration: none; font-weight: 600;">← Back to Shop</a></div>';
+        }
+      }
+
+      function addToCart() {
+        if (!window.currentProduct) {
+          alert("Product not loaded. Please refresh the page.");
+          return;
+        }
+
+        window.ShopSystem.addToCart(window.currentProduct, 1);
+      }
+
+      function addToWishlist() {
+        if (!window.currentProduct) {
+          alert("Product not loaded. Please refresh the page.");
+          return;
+        }
+
+        window.ShopSystem.addToWishlist(window.currentProduct);
+      }
+
+      // Track viewed products for smart recommendations
+      function trackViewedProduct(product) {
+        try {
+          let viewedProducts = JSON.parse(
+            localStorage.getItem("skyart_viewed_products") || "[]"
+          );
+
+          // Remove if already exists (to update timestamp)
+          viewedProducts = viewedProducts.filter((p) => p.id !== product.id);
+
+          // Add to beginning of array
+          viewedProducts.unshift({
+            id: product.id,
+            name: product.name,
+            category: product.category,
+            imageurl: product.imageurl,
+            price: product.price,
+            viewedAt: new Date().toISOString(),
+          });
+
+          // Keep only last 20 viewed products
+          viewedProducts = viewedProducts.slice(0, 20);
+
+          localStorage.setItem(
+            "skyart_viewed_products",
+            JSON.stringify(viewedProducts)
+          );
+        } catch (e) {
+          console.error("Error tracking viewed product:", e);
+        }
+      }
+
+      // Load related products (same category + recently viewed)
+      async function loadRelatedProducts(category, currentProductId) {
+        try {
+          const container = document.getElementById("relatedProductsGrid");
+          if (!container) return;
+
+          // Show loading
+          container.innerHTML =
+            '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280;">Loading recommendations...</div>';
+
+          // Fetch products from same category
+          const response = await fetch("/api/products");
+          const data = await response.json();
+
+          if (data.success && data.products) {
+            let relatedProducts = [];
+
+            // Get products from same category (excluding current)
+            const sameCategoryProducts = data.products.filter(
+              (p) => p.category === category && p.id !== currentProductId
+            );
+
+            // Get recently viewed products
+            const viewedProducts = JSON.parse(
+              localStorage.getItem("skyart_viewed_products") || "[]"
+            );
+            const viewedIds = viewedProducts
+              .map((p) => p.id)
+              .filter((id) => id !== currentProductId);
+            const recentlyViewedProducts = data.products.filter(
+              (p) => viewedIds.includes(p.id) && p.id !== currentProductId
+            );
+
+            // Combine: prioritize same category, then recently viewed
+            relatedProducts = [...sameCategoryProducts];
+            recentlyViewedProducts.forEach((p) => {
+              if (!relatedProducts.find((rp) => rp.id === p.id)) {
+                relatedProducts.push(p);
+              }
+            });
+
+            // Shuffle and limit to 4-8 products
+            relatedProducts = shuffleArray(relatedProducts).slice(0, 8);
+
+            if (relatedProducts.length === 0) {
+              container.innerHTML =
+                '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280;">No related products found.</div>';
+              return;
+            }
+
+            // Render products
+            container.innerHTML = relatedProducts
+              .map((product) => {
+                // Get product image (primary or first from images array)
+                let productImage = "/assets/images/placeholder.svg";
+                if (
+                  product.images &&
+                  Array.isArray(product.images) &&
+                  product.images.length > 0
+                ) {
+                  const primaryImg = product.images.find(
+                    (img) => img.is_primary
+                  );
+                  productImage = primaryImg
+                    ? primaryImg.image_url
+                    : product.images[0].image_url;
+                } else if (product.imageurl) {
+                  productImage = product.imageurl;
+                }
+
+                return `
+              <a href="/product?id=${
+                product.id
+              }" style="text-decoration: none; color: inherit; display: block; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s; border: 1px solid #e5e7eb;"
+                 onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 16px rgba(0,0,0,0.12)'"
+                 onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.08)'">
+                <div style="aspect-ratio: 1; overflow: hidden; background: #f9fafb;">
+                  <img src="${productImage}" 
+                       alt="${product.name}"
+                       style="width: 100%; height: 100%; object-fit: cover;"
+                       onerror="this.src='/assets/images/placeholder.svg'" />
+                </div>
+                <div style="padding: 16px;">
+                  <h3 style="font-size: 16px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                    ${product.name}
+                  </h3>
+                  ${
+                    product.shortdescription || product.description
+                      ? `
+                    <p style="font-size: 14px; color: #636e72; margin: 0 0 12px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
+                      ${
+                        product.shortdescription ||
+                        (product.description
+                          ? product.description.substring(0, 80) + "..."
+                          : "")
+                      }
+                    </p>
+                  `
+                      : ""
+                  }
+                  ${
+                    product.category
+                      ? `
+                    <p style="font-size: 13px; color: #6b7280; margin: 0 0 12px 0;">
+                      <i class="bi bi-tag"></i> ${product.category}
+                    </p>
+                  `
+                      : ""
+                  }
+                  <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <p style="font-size: 20px; font-weight: 700; color: #6b46c1; margin: 0;">
+                      $${parseFloat(product.price).toFixed(2)}
+                    </p>
+                    ${
+                      product.stockquantity > 0
+                        ? '<span style="font-size: 12px; color: #10b981; font-weight: 500;"><i class="bi bi-check-circle-fill"></i> In Stock</span>'
+                        : '<span style="font-size: 12px; color: #ef4444; font-weight: 500;"><i class="bi bi-x-circle-fill"></i> Out of Stock</span>'
+                    }
+                  </div>
+                </div>
+              </a>
+              `;
+              })
+              .join("");
+          }
+        } catch (error) {
+          console.error("Error loading related products:", error);
+          const container = document.getElementById("relatedProductsGrid");
+          if (container) {
+            container.innerHTML =
+              '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #ef4444;">Error loading recommendations.</div>';
+          }
+        }
+      }
+
+      // Shuffle array utility
+      function shuffleArray(array) {
+        const arr = [...array];
+        for (let i = arr.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [arr[i], arr[j]] = [arr[j], arr[i]];
+        }
+        return arr;
+      }
+
+      loadProduct();
+    </script>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <div class="footer-grid">
+          <div class="footer-col">
+            <h3 class="footer-title" id="footerSiteName">Sky Art Shop</h3>
+            <p class="footer-text">
+              Your destination for unique art pieces and creative supplies.
+            </p>
+            <div class="social-links">
+              <a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
+              <a href="#" class="social-link"
+                ><i class="bi bi-instagram"></i
+              ></a>
+              <a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
+              <a href="#" class="social-link"
+                ><i class="bi bi-pinterest"></i
+              ></a>
+            </div>
+          </div>
+          <div class="footer-col">
+            <h4 class="footer-heading">Shop</h4>
+            <ul class="footer-links">
+              <li><a href="/shop">All Products</a></li>
+              <li><a href="/shop?category=paintings">Paintings</a></li>
+              <li><a href="/shop?category=prints">Prints</a></li>
+              <li><a href="/shop?category=supplies">Art Supplies</a></li>
+            </ul>
+          </div>
+          <div class="footer-col">
+            <h4 class="footer-heading">About</h4>
+            <ul class="footer-links">
+              <li><a href="/about">Our Story</a></li>
+              <li><a href="/portfolio">Portfolio</a></li>
+              <li><a href="/blog">Blog</a></li>
+              <li><a href="/contact">Contact</a></li>
+            </ul>
+          </div>
+          <div class="footer-col">
+            <h4 class="footer-heading">Customer Service</h4>
+            <ul class="footer-links">
+              <li><a href="/shipping-info">Shipping Info</a></li>
+              <li><a href="/returns">Returns</a></li>
+              <li><a href="/faq">FAQ</a></li>
+              <li><a href="/privacy">Privacy Policy</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p id="footerText">&copy; 2025 Sky Art Shop. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  </body>
 </html>
