<?php
// Database connection - update these credentials
$dbHost = 'localhost';
$dbUser = 'harves_hugong-webshop';
$dbPass = 'Hugong321..';
$dbName = 'harves_hugongshop';

// Connect to database
try {
    $db = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
    $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
} catch(PDOException $e) {
    die("Database connection failed: " . $e->getMessage());
}

// Get product slug from URL
$productSlug = isset($_GET['slug']) ? trim($_GET['slug']) : '';

// Redirect if no slug provided
if (empty($productSlug)) {
    header('Location: /');
    exit;
}

// Function to get product by slug
function getProductBySlug($db, $slug) {
    $stmt = $db->prepare("SELECT * FROM products WHERE slug = ? AND status = 'active'");
    $stmt->execute([$slug]);
    return $stmt->fetch();
}

// Function to get product images
function getProductImages($db, $productId) {
    $stmt = $db->prepare("SELECT * FROM product_images WHERE product_id = ? ORDER BY sort_order ASC");
    $stmt->execute([$productId]);
    return $stmt->fetchAll();
}

// Function to get product categories
function getProductCategories($db, $productId) {
    $stmt = $db->prepare("
        SELECT c.id, c.name, c.slug 
        FROM categories c 
        JOIN product_categories pc ON c.id = pc.category_id 
        WHERE pc.product_id = ?
    ");
    $stmt->execute([$productId]);
    return $stmt->fetchAll();
}

// Function to get product reviews
function getProductReviews($db, $productId, $limit = 5) {
    $stmt = $db->prepare("
        SELECT r.*, u.name as user_name 
        FROM reviews r 
        LEFT JOIN users u ON r.user_id = u.id 
        WHERE r.product_id = ? AND r.status = 'approved'
        ORDER BY r.created_at DESC
        LIMIT ?
    ");
    $stmt->execute([$productId, $limit]);
    return $stmt->fetchAll();
}

// Function to get related products
function getRelatedProducts($db, $productId, $limit = 4) {
    // Get categories of this product
    $stmt = $db->prepare("SELECT category_id FROM product_categories WHERE product_id = ?");
    $stmt->execute([$productId]);
    $categories = $stmt->fetchAll(PDO::FETCH_COLUMN);
    
    if (empty($categories)) {
        return [];
    }
    
    // Prepare placeholders for SQL IN clause
    $placeholders = implode(',', array_fill(0, count($categories), '?'));
    
    // Get related products from same categories
    $stmt = $db->prepare("
        SELECT DISTINCT p.*, 
        (SELECT image FROM product_images WHERE product_id = p.id ORDER BY sort_order ASC LIMIT 1) as image,
        p.rating_sum / NULLIF(p.rating_count, 0) as rating_avg,
        p.rating_count
        FROM products p
        JOIN product_categories pc ON p.id = pc.product_id
        WHERE pc.category_id IN ($placeholders)
        AND p.id != ? AND p.status = 'active'
        ORDER BY RAND()
        LIMIT ?
    ");
    
    $params = array_merge($categories, [$productId, $limit]);
    $stmt->execute($params);
    return $stmt->fetchAll();
}

// Function to calculate average rating
function calculateAverageRating($product) {
    if (!isset($product['rating_count']) || $product['rating_count'] <= 0) {
        return 0;
    }
    
    return round($product['rating_sum'] / $product['rating_count'], 1);
}

// Function to calculate discount percentage
function calculateDiscountPercent($product) {
    if (empty($product['sale_price']) || $product['price'] <= 0) {
        return 0;
    }
    
    return round((($product['price'] - $product['sale_price']) / $product['price']) * 100);
}

// Function to get stock status
function getStockStatus($product) {
    $result = [
        'available' => true,
        'limited' => false,
        'count' => $product['stock'] ?? 999,
        'class' => 'available',
        'label' => 'DOSTUPNO'
    ];
    
    if (isset($product['stock'])) {
        if ($product['stock'] <= 0) {
            $result['available'] = false;
            $result['class'] = 'unavailable';
            $result['label'] = 'TRENUTNO NEDOSTUPNO';
        } elseif ($product['stock'] <= 5) {
            $result['limited'] = true;
            $result['class'] = 'limited';
            $result['label'] = 'OGRANIČENA KOLIČINA';
        }
    }
    
    return $result;
}

// Function to format price
function formatPrice($price) {
    return number_format($price, 0, ',', '.') . ' RSD';
}

// Get the product data
$product = getProductBySlug($db, $productSlug);

// Show 404 if product not found
if (!$product) {
    http_response_code(404);
    echo "<h1>Page Not Found</h1>";
    exit;
}

// Get additional product data
$productImages = getProductImages($db, $product['id']);
$productCategories = getProductCategories($db, $product['id']);
$productReviews = getProductReviews($db, $product['id']);
$relatedProducts = getRelatedProducts($db, $product['id'], 4);

// Calculate important product metrics
$averageRating = calculateAverageRating($product);
$discountPercent = calculateDiscountPercent($product);
$stockStatus = getStockStatus($product);

// Prepare specifications if they exist
$specifications = [];
if (!empty($product['specifications'])) {
    $specifications = json_decode($product['specifications'], true);
}

// Get cart count if session exists
session_start();
$cartCount = 0;
if (isset($_SESSION['cart']) && is_array($_SESSION['cart'])) {
    foreach ($_SESSION['cart'] as $qty) {
        $cartCount += $qty;
    }
}

// SEO Optimization
$pageTitle = $product['name'] . ' | ' . ($productCategories[0]['name'] ?? 'Shop');
$metaDescription = !empty($product['meta_description']) ? $product['meta_description'] : 
    substr(strip_tags($product['short_description'] ?? $product['description']), 0, 160);
$canonicalUrl = 'https://' . $_SERVER['HTTP_HOST'] . '/' . $productSlug;

// Generate schema.org structured data for product
$currentPrice = !empty($product['sale_price']) ? $product['sale_price'] : $product['price'];
$schemaData = [
    '@context' => 'https://schema.org/',
    '@type' => 'Product',
    'name' => $product['name'],
    'image' => !empty($productImages) ? 'https://' . $_SERVER['HTTP_HOST'] . '/uploads/products/' . $productImages[0]['image'] : '',
    'description' => strip_tags($product['short_description'] ?? $product['description']),
    'sku' => $product['sku'] ?? '',
    'brand' => [
        '@type' => 'Brand',
        'name' => 'Your Brand'
    ],
    'offers' => [
        '@type' => 'Offer',
        'url' => $canonicalUrl,
        'priceCurrency' => 'RSD',
        'price' => $currentPrice,
        'priceValidUntil' => date('Y-m-d', strtotime('+1 year')),
        'availability' => $stockStatus['available'] ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
        'itemCondition' => 'https://schema.org/NewCondition'
    ]
];

// Add rating data if available
if ($product['rating_count'] > 0) {
    $schemaData['aggregateRating'] = [
        '@type' => 'AggregateRating',
        'ratingValue' => $averageRating,
        'reviewCount' => $product['rating_count']
    ];
}
?>
<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($pageTitle); ?></title>
    <meta name="description" content="<?php echo htmlspecialchars($metaDescription); ?>">
    <link rel="canonical" href="<?php echo $canonicalUrl; ?>">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="product">
    <meta property="og:url" content="<?php echo $canonicalUrl; ?>">
    <meta property="og:title" content="<?php echo htmlspecialchars($pageTitle); ?>">
    <meta property="og:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
    <?php if (!empty($productImages)): ?>
    <meta property="og:image" content="https://<?php echo $_SERVER['HTTP_HOST']; ?>/uploads/products/<?php echo $productImages[0]['image']; ?>">
    <?php endif; ?>
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="<?php echo $canonicalUrl; ?>">
    <meta property="twitter:title" content="<?php echo htmlspecialchars($pageTitle); ?>">
    <meta property="twitter:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
    <?php if (!empty($productImages)): ?>
    <meta property="twitter:image" content="https://<?php echo $_SERVER['HTTP_HOST']; ?>/uploads/products/<?php echo $productImages[0]['image']; ?>">
    <?php endif; ?>
    
    <!-- Structured data -->
    <script type="application/ld+json">
        <?php echo json_encode($schemaData, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT); ?>
    </script>
    
    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <style>
        /* CSS Variables */
        :root {
            --primary-color: #f6cc00;
            --primary-light: #fff8e1;
            --primary-dark: #e6b900;
            --secondary-color: #333333;
            --success-color: #28a745;
            --success-light: #e8f5e9;
            --danger-color: #dc3545;
            --danger-light: #ffebee;
            --text-color: #333333;
            --text-light: #757575;
            --background: #f8f8f8;
            --white: #ffffff;
            --border-color: #dee2e6;
            --border-radius: 8px;
            --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            background-color: var(--background);
            min-width: 320px;
        }
        
        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition);
        }
        
        a:hover {
            color: var(--primary-color);
        }
        
        img {
            max-width: 100%;
            height: auto;
        }
        
        ul, ol {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        button {
            font-family: inherit;
            border: none;
            background: none;
            cursor: pointer;
            transition: var(--transition);
        }
        
        input, select, textarea {
            font-family: inherit;
            font-size: inherit;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
            width: 100%;
        }
        
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        
        .d-none {
            display: none !important;
        }
        
        /* Header */
        .header {
            background-color: var(--white);
            box-shadow: var(--box-shadow);
            position: relative;
            z-index: 100;
            border-bottom: 1px solid var(--border-color);
        }
        
        .header-top {
            background-color: var(--secondary-color);
            color: var(--white);
            padding: 8px 0;
            font-size: 14px;
        }
        
        .header-top-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-contact {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .header-contact-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .header-main {
            padding: 15px 0;
        }
        
        .header-main-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .logo {
            display: block;
            width: 160px;
        }
        
        .logo img {
            width: 100%;
            height: auto;
        }
        
        .header-search {
            flex: 1;
            max-width: 500px;
            margin: 0 20px;
        }
        
        .search-form {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
        }
        
        .search-button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--primary-color);
            color: var(--secondary-color);
            width: 40px;
            height: 40px;
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .action-button {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .action-icon {
            font-size: 20px;
            color: var(--secondary-color);
        }
        
        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--primary-color);
            color: var(--secondary-color);
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 10px;
            font-weight: bold;
        }
        
        .nav-main {
            background-color: var(--white);
            border-top: 1px solid var(--border-color);
        }
        
        .nav-list {
            display: flex;
            align-items: center;
            height: 50px;
        }
        
        .nav-item {
            height: 100%;
        }
        
        .nav-link {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 15px;
            font-weight: 600;
            position: relative;
        }
        
        .nav-link:hover,
        .nav-link.active {
            color: var(--primary-color);
        }
        
        .nav-link:hover::after,
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        /* Mobile Header */
        .mobile-header {
            background-color: var(--white);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: var(--box-shadow);
            display: none;
        }
        
        .mobile-header-top {
            height: 5px;
            background-color: var(--primary-color);
        }
        
        .mobile-header-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
        }
        
        .mobile-logo {
            max-width: 120px;
        }
        
        .mobile-logo img {
            width: 100%;
            height: auto;
        }
        
        .mobile-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .mobile-action {
            position: relative;
            color: var(--secondary-color);
            font-size: 20px;
        }
        
        .mobile-menu-button {
            display: flex;
            flex-direction: column;
            width: 30px;
            height: 20px;
            justify-content: space-between;
            cursor: pointer;
        }
        
        .mobile-menu-button span {
            width: 100%;
            height: 2px;
            background-color: var(--secondary-color);
            transition: all 0.3s;
        }
        
        .mobile-menu {
            position: fixed;
            top: 0;
            left: -280px;
            width: 280px;
            height: 100%;
            background-color: var(--white);
            z-index: 1001;
            transition: left 0.3s;
            overflow-y: auto;
            box-shadow: var(--box-shadow);
        }
        
        .mobile-menu.active {
            left: 0;
        }
        
        .mobile-menu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .mobile-menu-close {
            font-size: 24px;
            color: var(--secondary-color);
        }
        
        .mobile-nav-list {
            padding: 15px;
        }
        
        .mobile-nav-item {
            margin-bottom: 10px;
        }
        
        .mobile-nav-link {
            display: block;
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            font-weight: 500;
        }
        
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        
        .mobile-menu-overlay.active {
            display: block;
        }
        
        /* Breadcrumbs */
        .breadcrumbs {
            padding: 10px 0;
            background-color: var(--white);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
            font-size: 13px;
        }
        
        .breadcrumbs-list {
            display: flex;
            flex-wrap: wrap;
        }
        
        .breadcrumbs-item {
            display: flex;
            align-items: center;
        }
        
        .breadcrumbs-item:not(:last-child)::after {
            content: '/';
            margin: 0 8px;
            color: var(--text-light);
        }
        
        .breadcrumbs-link {
            color: var(--text-light);
        }
        
        .breadcrumbs-current {
            color: var(--text-color);
            font-weight: 500;
        }
        
        /* Product Section */
        .product-section {
            padding-bottom: 60px;
        }
        
        .product-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        @media (min-width: 992px) {
            .product-container {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            }
        }
        
        /* Product Gallery */
        .product-gallery {
            background-color: var(--white);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--box-shadow);
            position: relative;
        }
        
        .product-labels {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .product-label {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }
        
        .product-label.sale {
            background-color: var(--danger-color);
            color: var(--white);
        }
        
        .product-label.new {
            background-color: var(--success-color);
            color: var(--white);
        }
        
        .main-image {
            position: relative;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            background-color: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            cursor: zoom-in;
        }
        
        .main-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.3s;
        }
        
        .thumbnails {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        
        .thumbnail {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            padding: 0;
            transition: var(--transition);
        }
        
        .thumbnail.active {
            border-color: var(--primary-color);
        }
        
        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .stock-indicator {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .stock-indicator.available {
            background-color: var(--success-light);
            color: var(--success-color);
        }
        
        .stock-indicator.unavailable {
            background-color: var(--danger-light);
            color: var(--danger-color);
        }
        
        .stock-indicator.limited {
            background-color: #fff3cd;
            color: #856404;
        }
        
        /* Product Info */
        .product-info {
            background-color: var(--white);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--box-shadow);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .product-brand {
            margin-bottom: 10px;
        }
        
        .product-brand img {
            height: 30px;
            width: auto;
        }
        
        .product-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 10px;
            color: var(--secondary-color);
        }
        
        .product-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 10px;
        }
        
        .product-sku {
            font-size: 14px;
            color: var(--text-light);
        }
        
        .product-rating {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .stars {
            display: flex;
            color: #ddd;
        }
        
        .stars .icon {
            font-size: 16px;
        }
        
        .stars .icon.filled {
            color: var(--primary-color);
        }
        
        .rating-text {
            font-size: 14px;
            color: var(--text-light);
        }
        
        .rating-link {
            color: var(--primary-color);
        }
        
        .product-short-description {
            margin-bottom: 10px;
            font-size: 15px;
            color: var(--text-light);
            line-height: 1.6;
        }
        
        .features-list {
            list-style: none;
            margin-bottom: 15px;
        }
        
        .features-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .features-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--success-color);
            font-weight: bold;
        }
        
        .product-benefits {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
            background-color: var(--primary-light);
            padding: 15px;
            border-radius: var(--border-radius);
        }
        
        .benefit-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .benefit-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--white);
            border-radius: 50%;
            color: var(--primary-color);
        }
        
        .benefit-content {
            font-size: 14px;
            color: var(--secondary-color);
        }
        
        .benefit-title {
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        /* Price Section */
        .price-section {
            margin-bottom: 20px;
        }
        
        .price-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .current-price {
            font-size: 28px;
            font-weight: 700;
            color: var(--secondary-color);
        }
        
        .old-price {
            font-size: 18px;
            color: var(--text-light);
            text-decoration: line-through;
        }
        
        .price-save {
            font-size: 14px;
            color: var(--danger-color);
            font-weight: 500;
        }
        
        .installment-info {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        
        .installment-title {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .installment-options {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .installment-amount {
            font-size: 14px;
        }
        
        .installment-amount strong {
            color: var(--secondary-color);
        }
        
        .installment-toggle {
            color: var(--primary-color);
            font-weight: 500;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* Add to Cart Section */
        .add-to-cart-section {
            margin-bottom: 20px;
        }
        
        .quantity-selector {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .quantity-selector label {
            font-weight: 500;
            font-size: 14px;
        }
        
        .quantity-controls {
            display: flex;
            width: fit-content;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        .quantity-btn {
            width: 36px;
            height: 36px;
            background-color: #f5f5f5;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            transition: var(--transition);
            border: none;
        }
        
        .quantity-btn:hover {
            background-color: #e0e0e0;
        }
        
        .quantity-input {
            width: 50px;
            height: 36px;
            border: none;
            border-left: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            text-align: center;
            font-size: 16px;
        }
        
        .quantity-input::-webkit-inner-spin-button, 
        .quantity-input::-webkit-outer-spin-button { 
            -webkit-appearance: none;
            margin: 0;
        }
        
        .purchase-buttons {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        
        @media (min-width: 576px) {
            .purchase-buttons {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        .btn-add-to-cart, .btn-buy-now {
            padding: 14px;
            border-radius: var(--border-radius);
            font-weight: 700;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
        }
        
        .btn-add-to-cart {
            background-color: var(--white);
            color: var(--secondary-color);
            border: 2px solid var(--primary-color);
        }
        
        .btn-add-to-cart:hover {
            background-color: var(--primary-light);
            transform: translateY(-2px);
        }
        
        .btn-buy-now {
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border: none;
        }
        
        .btn-buy-now:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
        }
        
        .btn-add-to-cart:disabled, .btn-buy-now:disabled {
            background-color: #f5f5f5;
            border-color: #e0e0e0;
            color: #999;
            cursor: not-allowed;
            transform: none;
        }
        
        /* Additional Actions */
        .product-actions {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .action-link {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: var(--text-light);
        }
        
        .action-link:hover {
            color: var(--primary-color);
        }
        
        /* Shipping Info */
        .shipping-section {
            margin-top: 20px;
        }
        
        .shipping-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .shipping-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .shipping-option {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: var(--border-radius);
        }
        
        .shipping-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background-color: var(--white);
            border-radius: 50%;
            color: var(--primary-color);
            flex-shrink: 0;
        }
        
        .shipping-content {
            font-size: 14px;
            line-height: 1.4;
        }
        
        .shipping-name {
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        /* Tabs Section */
        .product-tabs {
            background-color: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-bottom: 40px;
        }
        
        .tabs-nav {
            display: flex;
            overflow-x: auto;
            border-bottom: 1px solid var(--border-color);
        }
        
        .tab-button {
            padding: 15px;
            white-space: nowrap;
            font-weight: 600;
            color: var(--text-color);
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
        }
        
        .tab-button:hover {
            color: var(--primary-color);
        }
        
        .tab-button.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }
        
        .tab-content {
            display: none;
            padding: 20px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* Description Tab */
        .description-content {
            line-height: 1.8;
            color: var(--text-color);
        }
        
        .description-content p {
            margin-bottom: 15px;
        }
        
        .description-content h2 {
            font-size: 20px;
            margin: 25px 0 15px;
        }
        
        .description-content h3 {
            font-size: 18px;
            margin: 20px 0 10px;
        }
        
        .description-content ul, .description-content ol {
            margin-left: 20px;
            margin-bottom: 15px;
        }
        
        .description-content li {
            margin-bottom: 5px;
        }
        
        .description-content img {
            max-width: 100%;
            height: auto;
            margin: 15px 0;
            border-radius: var(--border-radius);
        }
        
        /* Specifications Tab */
        .specifications-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        .specifications-table tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
        
        .specifications-table th, .specifications-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .specifications-table th {
            width: 30%;
            font-weight: 600;
        }
        
        .specifications-table tr:last-child th,
        .specifications-table tr:last-child td {
            border-bottom: none;
        }
        
        /* Reviews Tab */
        .reviews-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .rating-average {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: var(--border-radius);
            min-width: 180px;
        }
        
        .big-rating {
            font-size: 48px;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 10px;
        }
        
        .rating-stars {
            margin-bottom: 10px;
        }
        
        .rating-count {
            font-size: 14px;
            color: var(--text-light);
        }
        
        .rating-bars {
            flex: 1;
            min-width: 250px;
        }
        
        .rating-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .bar-label {
            width: 35px;
            text-align: right;
            font-size: 14px;
            color: var(--text-light);
        }
        
        .bar-progress {
            flex: 1;
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .bar-filled {
            height: 100%;
            background-color: var(--primary-color);
        }
        
        .bar-percent {
            width: 40px;
            font-size: 14px;
            color: var(--text-light);
        }
        
        .write-review {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            min-width: 180px;
        }
        
        .btn-write-review {
            padding: 12px 20px;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            transition: var(--transition);
        }
        
        .btn-write-review:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
        }
        
        .review-list {
            margin-bottom: 30px;
        }
        
        .review-item {
            padding: 20px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .review-item:last-child {
            border-bottom: none;
        }
        
        .review-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .reviewer-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .reviewer-name {
            font-weight: 600;
            font-size: 15px;
        }
        
        .verified-badge {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            color: var(--success-color);
            background-color: var(--success-light);
            padding: 3px 8px;
            border-radius: 12px;
        }
        
        .review-date {
            font-size: 13px;
            color: var(--text-light);
        }
        
        .review-rating {
            margin-bottom: 10px;
        }
        
        .review-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .review-content {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-color);
            margin-bottom: 15px;
        }
        
        .review-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        .btn-helpful {
            display: flex;
            align-items: center;
            gap: 5px;
            background: none;
            border: none;
            color: var(--text-light);
            font-size: 13px;
            padding: 5px 10px;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .btn-helpful:hover {
            background-color: #f5f5f5;
            color: var(--secondary-color);
        }
        
        .btn-helpful.voted {
            color: var(--success-color);
        }
        
        .review-form {
            display: none;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: var(--border-radius);
            margin-bottom: 30px;
        }
        
        .review-form h3 {
            font-size: 18px;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 14px;
        }
        
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
        }
        
        .form-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
            min-height: 120px;
            resize: vertical;
        }
        
        .rating-input-group {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 5px;
        }
        
        .rating-input-group input {
            display: none;
        }
        
        .rating-input-group label {
            cursor: pointer;
            font-size: 24px;
            color: #ddd;
            margin: 0;
        }
        
        .rating-input-group label::before {
            content: "★";
        }
        
        .rating-input-group input:checked ~ label,
        .rating-input-group label:hover,
        .rating-input-group label:hover ~ label {
            color: var(--primary-color);
        }
        
        .form-checkboxes {
            margin-bottom: 20px;
        }
        
        .form-checkbox {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
        }
        
        .form-checkbox input {
            margin-top: 3px;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .btn-cancel {
            padding: 10px 20px;
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-weight: 500;
            font-size: 14px;
        }
        
        .btn-submit {
            padding: 10px 20px;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            font-size: 14px;
        }
        
        .btn-submit:hover {
            background-color: var(--primary-dark);
        }
        
        /* Related Products */
        .related-products {
            margin-bottom: 60px;
        }
        
        .section-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--secondary-color);
            text-align: center;
            position: relative;
            padding-bottom: 15px;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        .products-container {
            position: relative;
        }
        
        .products-slider {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding: 10px 0;
            scroll-behavior: smooth;
            scrollbar-width: none;
        }
        
        .products-slider::-webkit-scrollbar {
            display: none;
        }
        
        .product-card {
            flex: 0 0 auto;
            width: 220px;
            background-color: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            transition: var(--transition);
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .product-card-image {
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background-color: #f9f9f9;
        }
        
        .product-card-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.3s;
        }
        
        .product-card:hover .product-card-image img {
            transform: scale(1.05);
        }
        
        .product-card-content {
            padding: 15px;
        }
        
        .product-card-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
            height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .product-card-price {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }
        
        .product-card-price .old-price {
            font-size: 13px;
        }
        
        .product-card-price .current-price {
            font-size: 16px;
        }
        
        .btn-quick-add {
            position: absolute;
            bottom: 15px;
            right: 15px;
            width: 36px;
            height: 36px;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s, transform 0.3s;
        }
        
        .product-card:hover .btn-quick-add {
            opacity: 1;
            transform: translateY(0);
        }
        
        .btn-quick-add:hover {
            background-color: var(--primary-dark);
        }
        
        .slider-controls {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            pointer-events: none;
            z-index: 1;
        }
        
        .slider-button {
            width: 40px;
            height: 40px;
            background-color: var(--white);
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: auto;
            opacity: 0.8;
            transition: var(--transition);
        }
        
        .slider-button:hover {
            opacity: 1;
            background-color: var(--primary-color);
            color: var(--secondary-color);
        }
        
        /* Mobile Sticky Cart */
        .sticky-cart {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: var(--white);
            display: none;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .sticky-cart-info {
            overflow: hidden;
        }
        
        .sticky-cart-title {
            font-weight: 600;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 3px;
        }
        
        .sticky-cart-price {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .sticky-cart-price .current-price {
            font-size: 16px;
            font-weight: 700;
        }
        
        .sticky-cart-price .old-price {
            font-size: 13px;
            text-decoration: line-through;
            color: var(--text-light);
        }
        
        .sticky-cart-button {
            padding: 10px 20px;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border: none;
            border-radius: var(--border-radius);
            font-weight: 700;
            font-size: 14px;
            transition: var(--transition);
        }
        
        .sticky-cart-button:hover {
            background-color: var(--primary-dark);
        }
        
        .sticky-cart-button:disabled {
            background-color: #f5f5f5;
            color: #999;
            cursor: not-allowed;
        }
        
        /* Image Modal */
        .image-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .image-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
        }
        
        .modal-inner {
            position: relative;
            max-width: 90%;
            max-height: 90%;
        }
        
        .modal-image {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
        }
        
        .modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            width: 30px;
            height: 30px;
            background: none;
            border: none;
            color: var(--white);
            font-size: 30px;
            cursor: pointer;
        }
        
        /* Cart Success Modal */
        .cart-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .cart-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
        }
        
        .cart-modal-content {
            background-color: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 90%;
            max-width: 500px;
        }
        
        .cart-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .cart-modal-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        .cart-modal-close {
            font-size: 24px;
            color: var(--text-light);
            background: none;
            border: none;
            cursor: pointer;
        }
        
        .cart-modal-body {
            padding: 20px;
            text-align: center;
        }
        
        .cart-success-icon {
            color: var(--success-color);
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .cart-success-message {
            margin-bottom: 20px;
            font-size: 16px;
        }
        
        .cart-modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .btn-go-to-cart {
            padding: 12px 20px;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-go-to-cart:hover {
            background-color: var(--primary-dark);
            color: var(--secondary-color);
        }
        
        .btn-continue-shopping {
            padding: 12px 20px;
            background-color: var(--white);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-weight: 600;
            transition: var(--transition);
        }
        
        .btn-continue-shopping:hover {
            background-color: #f5f5f5;
        }
        
        /* Payment Options Modal */
        .payment-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .payment-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
        }
        
        .payment-modal-content {
            background-color: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .payment-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            background-color: var(--white);
            z-index: 1;
        }
        
        .payment-modal-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        .payment-modal-close {
            font-size: 24px;
            color: var(--text-light);
            background: none;
            border: none;
            cursor: pointer;
        }
        
        .payment-modal-body {
            padding: 20px;
        }
        
        .payment-methods {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .payment-method {
            background-color: #f9f9f9;
            border-radius: var(--border-radius);
            padding: 15px;
        }
        
        .payment-method-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .payment-method-icon {
            width: 40px;
            height: 40px;
            background-color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            flex-shrink: 0;
        }
        
        .payment-method-title {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
        }
        
        .payment-method-content {
            font-size: 14px;
            color: var(--text-light);
        }
        
        .payment-method-details {
            margin-top: 15px;
            background-color: var(--white);
            padding: 15px;
            border-radius: var(--border-radius);
        }
        
        .installment-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        
        .installment-table th, .installment-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .installment-table th {
            font-weight: 600;
            background-color: #f5f5f5;
        }
        
        /* Footer */
        .footer {
            background-color: var(--secondary-color);
            color: var(--white);
            padding-top: 60px;
            margin-top: 60px;
        }
        
        .footer-widgets {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .footer-widget {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .footer-widget-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-widget-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .footer-link {
            color: var(--white);
            opacity: 0.8;
            transition: var(--transition);
        }
        
        .footer-link:hover {
            opacity: 1;
            color: var(--primary-color);
        }
        
        .footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .footer-contact-icon {
            color: var(--primary-color);
            font-size: 16px;
            margin-top: 4px;
        }
        
        .footer-contact-text {
            opacity: 0.8;
        }
        
        .footer-bottom {
            background-color: rgba(0, 0, 0, 0.2);
            padding: 20px 0;
            text-align: center;
            font-size: 14px;
        }
        
        .copyright {
            opacity: 0.8;
        }
        
        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 99;
            cursor: pointer;
        }
        
        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }
        
        .back-to-top:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
        }
        
        /* Media Queries */
        @media (min-width: 768px) {
            .main-image {
                height: 400px;
            }
            
            .product-title {
                font-size: 28px;
            }
            
            .product-benefits {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .purchase-buttons {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 991px) {
            .header {
                display: none;
            }
            
            .mobile-header {
                display: block;
            }
            
            body {
                padding-top: 60px;
            }
        }
        
        @media (max-width: 767px) {
            .product-tabs {
                margin-bottom: 20px;
            }
            
            .reviews-summary {
                flex-direction: column;
            }
            
            .rating-average {
                width: 100%;
            }
            
            .main-image {
                height: 300px;
            }
            
            .sticky-cart {
                display: flex;
            }
            
            body {
                margin-bottom: 60px;
            }
            
            .cart-modal-buttons {
                flex-direction: column;
            }
        }
        
        @media (max-width: 575px) {
            .tab-button {
                padding: 12px 10px;
                font-size: 14px;
            }
            
            .tab-content {
                padding: 15px;
            }
            
            .main-image {
                height: 250px;
            }
            
            .product-title {
                font-size: 20px;
            }
            
            .current-price {
                font-size: 24px;
            }
            
            .old-price {
                font-size: 16px;
            }
            
            .thumbnail {
                width: 50px;
                height: 50px;
            }
            
            .review-header {
                flex-direction: column;
                gap: 5px;
            }
        }
    </style>
</head>

<body>
    <!-- Mobile Header -->
    <header class="mobile-header">
        <div class="mobile-header-top"></div>
        <div class="mobile-header-main">
            <a href="/" class="mobile-logo">
                <img src="/uploads/logo.png" alt="Your Shop Logo">
            </a>
            <div class="mobile-actions">
                <a href="#" class="mobile-action mobile-search-toggle">
                    <i class="icon">🔍</i>
                </a>
                <a href="/cart" class="mobile-action mobile-cart">
                    <i class="icon">🛒</i>
                    <span class="cart-count"><?php echo $cartCount; ?></span>
                </a>
                <button class="mobile-menu-button" id="mobile-menu-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
        </div>
    </header>

    <!-- Mobile Menu -->
    <div class="mobile-menu" id="mobile-menu">
        <div class="mobile-menu-header">
            <h3>Menu</h3>
            <button class="mobile-menu-close" id="mobile-menu-close">&times;</button>
        </div>
        <nav>
            <ul class="mobile-nav-list">
                <li class="mobile-nav-item"><a href="/" class="mobile-nav-link">Home</a></li>
                <li class="mobile-nav-item"><a href="/products" class="mobile-nav-link">Products</a></li>
                <li class="mobile-nav-item"><a href="/about" class="mobile-nav-link">About Us</a></li>
                <li class="mobile-nav-item"><a href="/contact" class="mobile-nav-link">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>

    <!-- Desktop Header -->
    <header class="header">
        <div class="header-top">
            <div class="container">
                <div class="header-top-content">
                    <div class="header-contact">
                        <div class="header-contact-item">
                            <i class="icon">📱</i>
                            <span>+123 456 789</span>
                        </div>
                        <div class="header-contact-item">
                            <i class="icon">✉️</i>
                            <span>info@shop.com</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-main">
            <div class="container">
                <div class="header-main-content">
                    <a href="/" class="logo">
                        <img src="/uploads/logo.png" alt="Your Shop Logo">
                    </a>
                    <div class="header-search">
                        <form class="search-form">
                            <input type="text" class="search-input" placeholder="Search products...">
                            <button type="submit" class="search-button">
                                <i class="icon">🔍</i>
                            </button>
                        </form>
                    </div>
                    <div class="header-actions">
                        <a href="/account" class="action-button">
                            <i class="action-icon">👤</i>
                            <span>Account</span>
                        </a>
                        <a href="/wishlist" class="action-button">
                            <i class="action-icon">❤️</i>
                            <span>Wishlist</span>
                        </a>
                        <a href="/cart" class="action-button">
                            <i class="action-icon">🛒</i>
                            <span>Cart</span>
                            <span class="cart-count"><?php echo $cartCount; ?></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <nav class="nav-main">
            <div class="container">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="/" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="/products" class="nav-link active">Products</a>
                    </li>
                    <li class="nav-item">
                        <a href="/about" class="nav-link">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a href="/contact" class="nav-link">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- Breadcrumbs -->
    <div class="breadcrumbs">
        <div class="container">
            <ul class="breadcrumbs-list" itemscope itemtype="https://schema.org/BreadcrumbList">
                <li class="breadcrumbs-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a href="/" class="breadcrumbs-link" itemprop="item">
                        <span itemprop="name">Home</span>
                    </a>
                    <meta itemprop="position" content="1" />
                </li>
                
                <?php if (!empty($productCategories)): ?>
                <li class="breadcrumbs-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a href="/category/<?php echo htmlspecialchars($productCategories[0]['slug']); ?>" class="breadcrumbs-link" itemprop="item">
                        <span itemprop="name"><?php echo htmlspecialchars($productCategories[0]['name']); ?></span>
                    </a>
                    <meta itemprop="position" content="2" />
                </li>
                <?php endif; ?>
                
                <li class="breadcrumbs-item">
                    <span class="breadcrumbs-current"><?php echo htmlspecialchars($product['name']); ?></span>
                </li>
            </ul>
        </div>
    </div>

    <!-- Product Section -->
    <section class="product-section">
        <div class="container">
            <div class="product-container">
                <!-- Product Gallery -->
                <div class="product-gallery">
                    <!-- Product Labels -->
                    <div class="product-labels">
                        <?php if ($discountPercent > 0): ?>
                        <div class="product-label sale">-<?php echo $discountPercent; ?>%</div>
                        <?php endif; ?>
                        
                        <?php if (isset($product['is_new']) && $product['is_new']): ?>
                        <div class="product-label new">New</div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Stock Status -->
                    <div class="stock-indicator <?php echo $stockStatus['class']; ?>">
                        <i class="icon"><?php echo $stockStatus['available'] ? '✓' : '✕'; ?></i>
                        <span><?php echo $stockStatus['label']; ?></span>
                    </div>
                    
                    <!-- Main Image -->
                    <div class="main-image" id="main-product-image">
                        <?php if (!empty($productImages)): ?>
                        <img src="/uploads/products/<?php echo htmlspecialchars($productImages[0]['image']); ?>" 
                             alt="<?php echo htmlspecialchars($productImages[0]['alt_text'] ?? $product['name']); ?>"
                             id="current-image">
                        <?php else: ?>
                        <img src="/uploads/placeholder.jpg" alt="<?php echo htmlspecialchars($product['name']); ?>" id="current-image">
                        <?php endif; ?>
                    </div>
                    
                    <!-- Thumbnails -->
                    <?php if (count($productImages) > 1): ?>
                    <div class="thumbnails">
                        <?php foreach($productImages as $index => $image): ?>
                        <button class="thumbnail <?php echo $index === 0 ? 'active' : ''; ?>" 
                                data-image="/uploads/products/<?php echo htmlspecialchars($image['image']); ?>"
                                data-index="<?php echo $index; ?>">
                            <img src="/uploads/products/thumbs/<?php echo htmlspecialchars($image['image']); ?>" 
                                 alt="<?php echo htmlspecialchars($image['alt_text'] ?? 'Thumbnail ' . ($index + 1)); ?>">
                        </button>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>
                </div>
                
                <!-- Product Info -->
                <div class="product-info">
                    <!-- Brand (if available) -->
                    <?php if (isset($product['brand']) && !empty($product['brand'])): ?>
                    <div class="product-brand">
                        <img src="/uploads/brands/<?php echo htmlspecialchars($product['brand']); ?>.png" alt="Brand Logo">
                    </div>
                    <?php endif; ?>
                    
                    <!-- Product Title -->
                    <h1 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h1>
                    
                    <!-- Product Meta -->
                    <div class="product-meta">
                        <?php if (isset($product['sku'])): ?>
                        <div class="product-sku">
                            SKU: <?php echo htmlspecialchars($product['sku']); ?>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Rating -->
                        <div class="product-rating">
                            <div class="stars">
                                <?php 
                                for ($i = 1; $i <= 5; $i++) {
                                    $starClass = $i <= round($averageRating) ? 'icon filled' : 'icon';
                                    echo '<span class="'.$starClass.'">★</span>';
                                }
                                ?>
                            </div>
                            <div class="rating-text">
                                <strong><?php echo number_format($averageRating, 1); ?></strong>/5
                                <span>(<?php echo $product['rating_count']; ?> reviews)</span>
                                <a href="#reviews" class="rating-link">Read reviews</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Short Description -->
                    <?php if (isset($product['short_description']) && !empty($product['short_description'])): ?>
                    <div class="product-short-description">
                        <?php echo $product['short_description']; ?>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Key Features -->
                    <?php if (isset($product['features']) && !empty($product['features'])): ?>
                    <div class="features-list">
                        <?php 
                        $features = explode("\n", $product['features']);
                        foreach($features as $feature): 
                            if(trim($feature)):
                        ?>
                        <li><?php echo trim($feature); ?></li>
                        <?php 
                            endif;
                        endforeach;
                        ?>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Trust Badges / Benefits -->
                    <div class="product-benefits">
                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="icon">✓</i>
                            </div>
                            <div class="benefit-content">
                                <div class="benefit-title">Free Shipping</div>
                                <div class="benefit-desc">On all orders</div>
                            </div>
                        </div>
                        
                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="icon">🔄</i>
                            </div>
                            <div class="benefit-content">
                                <div class="benefit-title">Easy Returns</div>
                                <div class="benefit-desc">30 day return policy</div>
                            </div>
                        </div>
                        
                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="icon">🛡️</i>
                            </div>
                            <div class="benefit-content">
                                <div class="benefit-title">2 Year Warranty</div>
                                <div class="benefit-desc">Full coverage</div>
                            </div>
                        </div>
                        
                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="icon">💰</i>
                            </div>
                            <div class="benefit-content">
                                <div class="benefit-title">Secure Payment</div>
                                <div class="benefit-desc">100% secure checkout</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Price Section -->
                    <div class="price-section">
                        <div class="price-wrapper">
                            <?php if (!empty($product['sale_price'])): ?>
                            <div class="current-price" data-price="<?php echo $product['sale_price']; ?>">
                                <?php echo formatPrice($product['sale_price']); ?>
                            </div>
                            <div class="old-price" data-price="<?php echo $product['price']; ?>">
                                <?php echo formatPrice($product['price']); ?>
                            </div>
                            <div class="price-save">
                                Save <?php echo formatPrice($product['price'] - $product['sale_price']); ?> (<?php echo $discountPercent; ?>%)
                            </div>
                            <?php else: ?>
                            <div class="current-price" data-price="<?php echo $product['price']; ?>">
                                <?php echo formatPrice($product['price']); ?>
                            </div>
                            <?php endif; ?>
                        </div>
                        
                        <!-- Installment Options -->
                        <?php 
                        $currentPrice = !empty($product['sale_price']) ? $product['sale_price'] : $product['price'];
                        if ($currentPrice >= 5000): // Only show installment for products >5000
                        ?>
                        <div class="installment-info">
                            <div class="installment-title">
                                <i class="icon">💳</i>
                                <span>Payment in installments</span>
                            </div>
                            <div class="installment-options">
                                <div class="installment-amount">
                                    From <strong><?php echo formatPrice(ceil($currentPrice / 12)); ?></strong> monthly
                                </div>
                                <a href="#" class="installment-toggle" id="payment-options-toggle">
                                    Payment options
                                    <i class="icon">⌄</i>
                                </a>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Add to Cart Section -->
                    <div class="add-to-cart-section">
                        <div class="quantity-selector">
                            <label for="quantity">Quantity:</label>
                            <div class="quantity-controls">
                                <button type="button" class="quantity-btn minus" id="quantity-minus">−</button>
                                <input type="number" id="quantity" class="quantity-input" value="1" min="1" max="<?php echo $stockStatus['count']; ?>" aria-label="Quantity">
                                <button type="button" class="quantity-btn plus" id="quantity-plus">+</button>
                            </div>
                        </div>
                        
                        <div class="purchase-buttons">
                            <button type="button" class="btn-add-to-cart" id="add-to-cart" 
                                    data-product-id="<?php echo $product['id']; ?>"
                                    <?php echo !$stockStatus['available'] ? 'disabled' : ''; ?>>
                                <i class="icon">🛒</i>
                                Add to Cart
                            </button>
                            <button type="button" class="btn-buy-now" id="buy-now" 
                                    data-product-id="<?php echo $product['id']; ?>"
                                    <?php echo !$stockStatus['available'] ? 'disabled' : ''; ?>>
                                <i class="icon">⚡</i>
                                Buy Now
                            </button>
                        </div>
                    </div>
                    
                    <!-- Additional Actions -->
                    <div class="product-actions">
                        <button type="button" class="action-link add-to-wishlist" id="add-to-wishlist" 
                                data-product-id="<?php echo $product['id']; ?>">
                            <i class="icon">❤️</i>
                            Add to Wishlist
                        </button>
                        <button type="button" class="action-link ask-question" id="ask-question">
                            <i class="icon">❓</i>
                            Ask a Question
                        </button>
                        <button type="button" class="action-link share-product" id="share-product">
                            <i class="icon">📤</i>
                            Share Product
                        </button>
                    </div>
                    
                    <!-- Shipping Information -->
                    <div class="shipping-section">
                        <h3 class="shipping-title">Shipping Options:</h3>
                        <div class="shipping-options">
                            <div class="shipping-option">
                                <div class="shipping-icon">
                                    <i class="icon">🚚</i>
                                </div>
                                <div class="shipping-content">
                                    <div class="shipping-name">Free Shipping</div>
                                    <div>Delivery in 2-3 business days</div>
                                </div>
                            </div>
                            <div class="shipping-option">
                                <div class="shipping-icon">
                                    <i class="icon">🏬</i>
                                </div>
                                <div class="shipping-content">
                                    <div class="shipping-name">Store Pickup</div>
                                    <div>Ready for pickup in 24 hours</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Product Tabs -->
            <div class="product-tabs">
                <div class="tabs-nav" role="tablist">
                    <button type="button" class="tab-button active" id="tab-description" role="tab" aria-selected="true" aria-controls="content-description">
                        Description
                    </button>
                    <button type="button" class="tab-button" id="tab-specifications" role="tab" aria-selected="false" aria-controls="content-specifications">
                        Specifications
                    </button>
                    <button type="button" class="tab-button" id="tab-reviews" role="tab" aria-selected="false" aria-controls="content-reviews">
                        Reviews (<?php echo $product['rating_count']; ?>)
                    </button>
                    <button type="button" class="tab-button" id="tab-shipping" role="tab" aria-selected="false" aria-controls="content-shipping">
                        Shipping & Returns
                    </button>
                </div>
                
                <div class="tab-content active" id="content-description" role="tabpanel" aria-labelledby="tab-description">
                    <div class="description-content">
                        <?php echo $product['description']; ?>
                    </div>
                </div>
                
                <div class="tab-content" id="content-specifications" role="tabpanel" aria-labelledby="tab-specifications">
                    <?php if (!empty($specifications)): ?>
                    <table class="specifications-table">
                        <tbody>
                            <?php foreach ($specifications as $spec): ?>
                            <tr>
                                <th><?php echo htmlspecialchars($spec['name']); ?></th>
                                <td><?php echo htmlspecialchars($spec['value']); ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    <?php else: ?>
                    <p>No specifications available for this product.</p>
                    <?php endif; ?>
                </div>
                
                <div class="tab-content" id="content-reviews" role="tabpanel" aria-labelledby="tab-reviews">
                    <div id="reviews">
                        <!-- Reviews Summary -->
                        <div class="reviews-summary">
                            <div class="rating-average">
                                <div class="big-rating"><?php echo number_format($averageRating, 1); ?></div>
                                <div class="rating-stars">
                                    <?php 
                                    for ($i = 1; $i <= 5; $i++) {
                                        $starClass = $i <= round($averageRating) ? 'icon filled' : 'icon';
                                        echo '<span class="'.$starClass.'">★</span>';
                                    }
                                    ?>
                                </div>
                                <div class="rating-count"><?php echo $product['rating_count']; ?> reviews</div>
                            </div>
                            
                            <div class="rating-bars">
                                <?php
                                $ratingDistribution = [5 => 0, 4 => 0, 3 => 0, 2 => 0, 1 => 0];
                                
                                foreach ($productReviews as $review) {
                                    if (isset($review['rating']) && $review['rating'] >= 1 && $review['rating'] <= 5) {
                                        $ratingDistribution[$review['rating']]++;
                                    }
                                }
                                
                                for ($i = 5; $i >= 1; $i--) {
                                    $percent = $product['rating_count'] > 0 ? ($ratingDistribution[$i] / $product['rating_count']) * 100 : 0;
                                ?>
                                <div class="rating-bar">
                                    <div class="bar-label"><?php echo $i; ?> ★</div>
                                    <div class="bar-progress">
                                        <div class="bar-filled" style="width: <?php echo $percent; ?>%"></div>
                                    </div>
                                    <div class="bar-percent"><?php echo round($percent); ?>%</div>
                                </div>
                                <?php } ?>
                            </div>
                            
                            <div class="write-review">
                                <button type="button" class="btn-write-review" id="write-review-btn">Write a Review</button>
                            </div>
                        </div>
                        
                        <!-- Review Form (initially hidden) -->
                        <div class="review-form" id="review-form-container">
                            <h3>Write a Review</h3>
                            <form id="review-form" action="/submit-review.php" method="post">
                                <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
                                
                                <div class="form-group">
                                    <label for="rating">Your Rating</label>
                                    <div class="rating-input-group">
                                        <input type="radio" id="star5" name="rating" value="5" checked>
                                        <label for="star5" title="5 stars"></label>
                                        <input type="radio" id="star4" name="rating" value="4">
                                        <label for="star4" title="4 stars"></label>
                                        <label for="star3" title="3 stars"></label>
                                        <input type="radio" id="star2" name="rating" value="2">
                                        <label for="star2" title="2 stars"></label>
                                        <input type="radio" id="star1" name="rating" value="1">
                                        <label for="star1" title="1 star"></label>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="review-title">Review Title</label>
                                    <input type="text" id="review-title" name="title" class="form-input" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="review-comment">Your Review</label>
                                    <textarea id="review-comment" name="comment" class="form-textarea" required></textarea>
                                </div>
                                
                                <div class="form-checkboxes">
                                    <div class="form-checkbox">
                                        <input type="checkbox" id="review-consent" name="consent" required>
                                        <label for="review-consent">I confirm that this review is based on my own experience and is my genuine opinion.</label>
                                    </div>
                                </div>
                                
                                <div class="form-actions">
                                    <button type="button" class="btn-cancel" id="cancel-review">Cancel</button>
                                    <button type="submit" class="btn-submit">Submit Review</button>
                                </div>
                            </form>
                        </div>
                        
                        <!-- Reviews List -->
                        <?php if (!empty($productReviews)): ?>
                        <div class="review-list">
                            <?php foreach($productReviews as $review): ?>
                            <div class="review-item">
                                <div class="review-header">
                                    <div class="reviewer-info">
                                        <div class="reviewer-name"><?php echo htmlspecialchars($review['name'] ?? $review['user_name']); ?></div>
                                        <?php if (isset($review['verified_purchase']) && $review['verified_purchase']): ?>
                                        <div class="verified-badge">
                                            <i class="icon">✓</i>
                                            Verified Purchase
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                    <div class="review-date"><?php echo date('M d, Y', strtotime($review['created_at'])); ?></div>
                                </div>
                                
                                <div class="review-rating">
                                    <?php 
                                    for ($i = 1; $i <= 5; $i++) {
                                        $starClass = $i <= $review['rating'] ? 'icon filled' : 'icon';
                                        echo '<span class="'.$starClass.'">★</span>';
                                    }
                                    ?>
                                </div>
                                
                                <?php if(!empty($review['title'])): ?>
                                <h4 class="review-title"><?php echo htmlspecialchars($review['title']); ?></h4>
                                <?php endif; ?>
                                
                                <div class="review-content">
                                    <?php echo nl2br(htmlspecialchars($review['comment'])); ?>
                                </div>
                                
                                <div class="review-actions">
                                    <button type="button" class="btn-helpful" data-review-id="<?php echo $review['id']; ?>">
                                        <i class="icon">👍</i>
                                        Helpful (<span class="helpful-count"><?php echo $review['helpful_count'] ?? 0; ?></span>)
                                    </button>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php else: ?>
                        <p>There are no reviews yet. Be the first to review this product!</p>
                        <?php endif; ?>
                    </div>
                </div>
                
                <div class="tab-content" id="content-shipping" role="tabpanel" aria-labelledby="tab-shipping">
                    <h3>Shipping Information</h3>
                    <p>We offer free standard shipping on all orders within the country. Orders are typically processed and shipped within 1-2 business days.</p>
                    
                    <h4>Delivery Times</h4>
                    <ul>
                        <li>Standard Shipping: 2-5 business days</li>
                        <li>Express Shipping: 1-2 business days (additional fee may apply)</li>
                    </ul>
                    
                    <h3>Return Policy</h3>
                    <p>We accept returns within 30 days of delivery for most items in new, unused condition with original packaging and accessories.</p>
                    
                    <h4>Return Process</h4>
                    <ol>
                        <li>Contact our customer service team to initiate a return</li>
                        <li>Pack the item securely in its original packaging</li>
                        <li>Ship the item back using the provided return label</li>
                        <li>Once received and inspected, we'll process your refund</li>
                    </ol>
                    
                    <p>For more information on our shipping and return policies, please visit our <a href="/shipping-policy">Shipping Policy</a> and <a href="/return-policy">Return Policy</a> pages.</p>
                </div>
            </div>
            
            <!-- Related Products -->
            <?php if (!empty($relatedProducts)): ?>
            <div class="related-products">
                <h2 class="section-title">Related Products</h2>
                
                <div class="products-container">
                    <div class="products-slider" id="related-products-slider">
                        <?php foreach($relatedProducts as $relatedProduct): 
                            $relatedProductPrice = !empty($relatedProduct['sale_price']) ? $relatedProduct['sale_price'] : $relatedProduct['price'];
                            $relatedProductOldPrice = !empty($relatedProduct['sale_price']) ? $relatedProduct['price'] : null;
                        ?>
                        <div class="product-card">
                            <a href="/product/<?php echo htmlspecialchars($relatedProduct['slug']); ?>" class="product-card-link">
                                <div class="product-card-image">
                                    <img src="/uploads/products/<?php echo htmlspecialchars($relatedProduct['image']); ?>" 
                                         alt="<?php echo htmlspecialchars($relatedProduct['name']); ?>">
                                </div>
                                <div class="product-card-content">
                                    <h3 class="product-card-title"><?php echo htmlspecialchars($relatedProduct['name']); ?></h3>
                                    <div class="product-card-price">
                                        <?php if ($relatedProductOldPrice): ?>
                                        <div class="old-price"><?php echo formatPrice($relatedProductOldPrice); ?></div>
                                        <?php endif; ?>
                                        <div class="current-price"><?php echo formatPrice($relatedProductPrice); ?></div>
                                    </div>
                                </div>
                            </a>
                            
                            <button type="button" class="btn-quick-add" data-product-id="<?php echo $relatedProduct['id']; ?>">
                                <i class="icon">+</i>
                            </button>
                        </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <div class="slider-controls">
                        <button type="button" class="slider-button prev" id="related-prev">
                            <i class="icon">◂</i>
                        </button>
                        <button type="button" class="slider-button next" id="related-next">
                            <i class="icon">▸</i>
                        </button>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- Mobile Sticky Cart -->
    <div class="sticky-cart">
        <div class="sticky-cart-info">
            <div class="sticky-cart-title"><?php echo htmlspecialchars($product['name']); ?></div>
            <div class="sticky-cart-price">
                <div class="current-price"><?php echo formatPrice(!empty($product['sale_price']) ? $product['sale_price'] : $product['price']); ?></div>
                <?php if (!empty($product['sale_price'])): ?>
                <div class="old-price"><?php echo formatPrice($product['price']); ?></div>
                <?php endif; ?>
            </div>
        </div>
        <button type="button" class="sticky-cart-button" id="sticky-add-to-cart" 
                data-product-id="<?php echo $product['id']; ?>"
                <?php echo !$stockStatus['available'] ? 'disabled' : ''; ?>>
            <?php echo $stockStatus['available'] ? 'ADD TO CART' : 'OUT OF STOCK'; ?>
        </button>
    </div>

    <!-- Image Zoom Modal -->
    <div class="image-modal" id="image-modal">
        <div class="modal-inner">
            <button type="button" class="modal-close" id="image-modal-close">&times;</button>
            <img src="" alt="Zoomed product image" class="modal-image" id="zoomed-image">
        </div>
    </div>

    <!-- Cart Success Modal -->
    <div class="cart-modal" id="cart-success-modal">
        <div class="cart-modal-content">
            <div class="cart-modal-header">
                <h3 class="cart-modal-title">Added to Cart</h3>
                <button type="button" class="cart-modal-close" id="cart-modal-close">&times;</button>
            </div>
            <div class="cart-modal-body">
                <div class="cart-success-icon">✓</div>
                <p class="cart-success-message">
                    <strong><?php echo htmlspecialchars($product['name']); ?></strong> has been added to your cart.
                </p>
                <div class="cart-modal-buttons">
                    <a href="/cart" class="btn-go-to-cart">View Cart</a>
                    <button type="button" class="btn-continue-shopping" id="continue-shopping-btn">Continue Shopping</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Options Modal -->
    <div class="payment-modal" id="payment-options-modal">
        <div class="payment-modal-content">
            <div class="payment-modal-header">
                <h3 class="payment-modal-title">Payment Options</h3>
                <button type="button" class="payment-modal-close" id="payment-modal-close">&times;</button>
            </div>
            <div class="payment-modal-body">
                <div class="payment-methods">
                    <!-- Credit Card Installments -->
                    <div class="payment-method">
                        <div class="payment-method-header">
                            <div class="payment-method-icon">
                                <i class="icon">💳</i>
                            </div>
                            <h4 class="payment-method-title">Credit Card Installments</h4>
                        </div>
                        <div class="payment-method-content">
                            <p>Pay in installments with your credit card with no interest or fees.</p>
                            
                            <div class="payment-method-details">
                                <p>For product price of <strong><?php echo formatPrice($currentPrice); ?></strong>:</p>
                                
                                <table class="installment-table">
                                    <thead>
                                        <tr>
                                            <th>Installments</th>
                                            <th>Amount per Month</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>3 installments</td>
                                            <td><?php echo formatPrice(ceil($currentPrice / 3)); ?></td>
                                        </tr>
                                        <tr>
                                            <td>6 installments</td>
                                            <td><?php echo formatPrice(ceil($currentPrice / 6)); ?></td>
                                        </tr>
                                        <tr>
                                            <td>12 installments</td>
                                            <td><?php echo formatPrice(ceil($currentPrice / 12)); ?></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Direct Bank Transfer -->
                    <div class="payment-method">
                        <div class="payment-method-header">
                            <div class="payment-method-icon">
                                <i class="icon">🏦</i>
                            </div>
                            <h4 class="payment-method-title">Direct Bank Transfer</h4>
                        </div>
                        <div class="payment-method-content">
                            <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference.</p>
                        </div>
                    </div>
                    
                    <!-- Cash on Delivery -->
                    <div class="payment-method">
                        <div class="payment-method-header">
                            <div class="payment-method-icon">
                                <i class="icon">💵</i>
                            </div>
                            <h4 class="payment-method-title">Cash on Delivery</h4>
                        </div>
                        <div class="payment-method-content">
                            <p>Pay with cash upon delivery. Available for selected regions only.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-widgets">
                <div class="footer-widget">
                    <h3 class="footer-widget-title">About Us</h3>
                    <p>We are dedicated to providing the best products at the best prices, along with exceptional customer service.</p>
                </div>
                
                <div class="footer-widget">
                    <h3 class="footer-widget-title">Categories</h3>
                    <div class="footer-links">
                        <a href="/category1" class="footer-link">Category 1</a>
                        <a href="/category2" class="footer-link">Category 2</a>
                        <a href="/category3" class="footer-link">Category 3</a>
                        <a href="/category4" class="footer-link">Category 4</a>
                    </div>
                </div>
                
                <div class="footer-widget">
                    <h3 class="footer-widget-title">Customer Service</h3>
                    <div class="footer-links">
                        <a href="/contact" class="footer-link">Contact Us</a>
                        <a href="/shipping" class="footer-link">Shipping Policy</a>
                        <a href="/returns" class="footer-link">Returns & Refunds</a>
                        <a href="/faq" class="footer-link">FAQ</a>
                    </div>
                </div>
                
                <div class="footer-widget">
                    <h3 class="footer-widget-title">Contact Info</h3>
                    <div class="footer-contact-item">
                        <div class="footer-contact-icon">📍</div>
                        <div class="footer-contact-text">123 Street Name, City, Country</div>
                    </div>
                    <div class="footer-contact-item">
                        <div class="footer-contact-icon">📱</div>
                        <div class="footer-contact-text">+123 456 789</div>
                    </div>
                    <div class="footer-contact-item">
                        <div class="footer-contact-icon">✉️</div>
                        <div class="footer-contact-text">info@shop.com</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="footer-bottom">
            <div class="container">
                <div class="copyright">
                    &copy; <?php echo date('Y'); ?> Your Shop Name. All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button type="button" class="back-to-top" id="back-to-top">
        <i class="icon">▲</i>
    </button>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Elements
            const mainImage = document.getElementById('current-image');
            const thumbnails = document.querySelectorAll('.thumbnail');
            const quantityInput = document.getElementById('quantity');
            const quantityMinus = document.getElementById('quantity-minus');
            const quantityPlus = document.getElementById('quantity-plus');
            const addToCartBtn = document.getElementById('add-to-cart');
            const buyNowBtn = document.getElementById('buy-now');
            const stickyAddToCartBtn = document.getElementById('sticky-add-to-cart');
            const backToTopBtn = document.getElementById('back-to-top');
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            const writeReviewBtn = document.getElementById('write-review-btn');
            const reviewForm = document.getElementById('review-form-container');
            const cancelReviewBtn = document.getElementById('cancel-review');
            const relatedProductsSlider = document.getElementById('related-products-slider');
            const relatedPrevBtn = document.getElementById('related-prev');
            const relatedNextBtn = document.getElementById('related-next');
            const imageModal = document.getElementById('image-modal');
            const zoomedImage = document.getElementById('zoomed-image');
            const imageModalClose = document.getElementById('image-modal-close');
            const cartSuccessModal = document.getElementById('cart-success-modal');
            const cartModalClose = document.getElementById('cart-modal-close');
            const continueShoppingBtn = document.getElementById('continue-shopping-btn');
            const paymentOptionsToggle = document.getElementById('payment-options-toggle');
            const paymentOptionsModal = document.getElementById('payment-options-modal');
            const paymentModalClose = document.getElementById('payment-modal-close');
            const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            const mobileMenuClose = document.getElementById('mobile-menu-close');
            const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');

            // Mobile Menu
            if (mobileMenuToggle && mobileMenu && mobileMenuClose && mobileMenuOverlay) {
                mobileMenuToggle.addEventListener('click', function() {
                    mobileMenu.classList.add('active');
                    mobileMenuOverlay.classList.add('active');
                    document.body.style.overflow = 'hidden';
                });

                mobileMenuClose.addEventListener('click', function() {
                    mobileMenu.classList.remove('active');
                    mobileMenuOverlay.classList.remove('active');
                    document.body.style.overflow = '';
                });

                mobileMenuOverlay.addEventListener('click', function() {
                    mobileMenu.classList.remove('active');
                    mobileMenuOverlay.classList.remove('active');
                    document.body.style.overflow = '';
                });
            }

            // Product Gallery
            if (mainImage && thumbnails.length > 0) {
                // Thumbnail click handlers
                thumbnails.forEach(thumbnail => {
                    thumbnail.addEventListener('click', function() {
                        // Update main image
                        mainImage.src = this.getAttribute('data-image');
                        
                        // Update active thumbnail
                        thumbnails.forEach(t => t.classList.remove('active'));
                        this.classList.add('active');
                    });
                });
                
                // Image zoom click
                mainImage.addEventListener('click', function() {
                    zoomedImage.src = this.src;
                    imageModal.classList.add('active');
                    document.body.style.overflow = 'hidden';
                });
                
                // Close image modal
                imageModalClose.addEventListener('click', function() {
                    imageModal.classList.remove('active');
                    document.body.style.overflow = '';
                });
                
                // Also close on clicking the modal background
                imageModal.addEventListener('click', function(e) {
                    if (e.target === imageModal) {
                        imageModal.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                });
            }

            // Quantity Controls
            if (quantityInput && quantityMinus && quantityPlus) {
                quantityMinus.addEventListener('click', function() {
                    const currentValue = parseInt(quantityInput.value);
                    if (currentValue > 1) {
                        quantityInput.value = currentValue - 1;
                    }
                });
                
                quantityPlus.addEventListener('click', function() {
                    const currentValue = parseInt(quantityInput.value);
                    const max = parseInt(quantityInput.getAttribute('max') || 999);
                    if (currentValue < max) {
                        quantityInput.value = currentValue + 1;
                    }
                });
                
                // Validate manual input
                quantityInput.addEventListener('change', function() {
                    let value = parseInt(this.value);
                    const min = parseInt(this.getAttribute('min') || 1);
                    const max = parseInt(this.getAttribute('max') || 999);
                    
                    if (isNaN(value) || value < min) {
                        this.value = min;
                    } else if (value > max) {
                        this.value = max;
                    }
                });
            }

            // Back to Top Button
            if (backToTopBtn) {
                window.addEventListener('scroll', function() {
                    if (window.pageYOffset > 300) {
                        backToTopBtn.classList.add('visible');
                    } else {
                        backToTopBtn.classList.remove('visible');
                    }
                });
                
                backToTopBtn.addEventListener('click', function() {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                });
            }

            // Tabs
            if (tabButtons.length > 0 && tabContents.length > 0) {
                tabButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // Remove active class from all tabs
                        tabButtons.forEach(btn => {
                            btn.classList.remove('active');
                            btn.setAttribute('aria-selected', 'false');
                        });
                        
                        tabContents.forEach(content => {
                            content.classList.remove('active');
                        });
                        
                        // Add active class to current tab
                        this.classList.add('active');
                        this.setAttribute('aria-selected', 'true');
                        
                        // Show corresponding content
                        const tabId = this.id.replace('tab-', 'content-');
                        document.getElementById(tabId).classList.add('active');
                    });
                });
                
                // Handle URL hash for direct tab access
                if (window.location.hash) {
                    const tabId = window.location.hash.substring(1);
                    if (tabId === 'reviews') {
                        document.getElementById('tab-reviews').click();
                    }
                }
            }

            // Review Form
            if (writeReviewBtn && reviewForm && cancelReviewBtn) {
                writeReviewBtn.addEventListener('click', function() {
                    reviewForm.style.display = 'block';
                    this.style.display = 'none';
                });
                
                cancelReviewBtn.addEventListener('click', function() {
                    reviewForm.style.display = 'none';
                    writeReviewBtn.style.display = 'block';
                });
            }

            // Related Products Slider
            if (relatedProductsSlider && relatedPrevBtn && relatedNextBtn) {
                relatedPrevBtn.addEventListener('click', function() {
                    relatedProductsSlider.scrollBy({
                        left: -300,
                        behavior: 'smooth'
                    });
                });
                
                relatedNextBtn.addEventListener('click', function() {
                    relatedProductsSlider.scrollBy({
                        left: 300,
                        behavior: 'smooth'
                    });
                });
            }

            // Add to Cart Functionality
            if (addToCartBtn) {
                addToCartBtn.addEventListener('click', function() {
                    if (this.disabled) return;
                    
                    const productId = this.getAttribute('data-product-id');
                    const quantity = quantityInput.value;
                    
                    // AJAX request to add to cart
                    fetch('/add-to-cart.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `product_id=${productId}&quantity=${quantity}`
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Update cart count
                            updateCartCount(parseInt(quantity));
                            
                            // Show success modal
                            cartSuccessModal.classList.add('active');
                            document.body.style.overflow = 'hidden';
                        } else {
                            alert(data.message || 'Error adding product to cart.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred while adding product to cart.');
                    });
                });
            }

            // Buy Now Functionality
            if (buyNowBtn) {
                buyNowBtn.addEventListener('click', function() {
                    if (this.disabled) return;
                    
                    const productId = this.getAttribute('data-product-id');
                    const quantity = quantityInput.value;
                    
                    // AJAX request to add to cart and redirect
                    fetch('/add-to-cart.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `product_id=${productId}&quantity=${quantity}&buy_now=1`
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Redirect to checkout
                            window.location.href = '/checkout';
                        } else {
                            alert(data.message || 'Error adding product to cart.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred while processing your request.');
                    });
                });
            }

            // Sticky Add to Cart
            if (stickyAddToCartBtn) {
                stickyAddToCartBtn.addEventListener('click', function() {
                    if (this.disabled) return;
                    
                    // Trigger the main add to cart button
                    addToCartBtn.click();
                });
            }

            // Cart Success Modal
            if (cartModalClose && continueShoppingBtn) {
                // Close modal functions
                const closeCartModal = function() {
                    cartSuccessModal.classList.remove('active');
                    document.body.style.overflow = '';
                };
                
                cartModalClose.addEventListener('click', closeCartModal);
                continueShoppingBtn.addEventListener('click', closeCartModal);
                
                // Also close on clicking the modal background
                cartSuccessModal.addEventListener('click', function(e) {
                    if (e.target === cartSuccessModal) {
                        closeCartModal();
                    }
                });
            }

            // Payment Options Modal
            if (paymentOptionsToggle && paymentOptionsModal && paymentModalClose) {
                paymentOptionsToggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    paymentOptionsModal.classList.add('active');
                    document.body.style.overflow = 'hidden';
                });
                
                paymentModalClose.addEventListener('click', function() {
                    paymentOptionsModal.classList.remove('active');
                    document.body.style.overflow = '';
                });
                
                // Also close on clicking the modal background
                paymentOptionsModal.addEventListener('click', function(e) {
                    if (e.target === paymentOptionsModal) {
                        paymentOptionsModal.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                });
            }

            // Helpful Review Button
            const helpfulButtons = document.querySelectorAll('.btn-helpful');
            if (helpfulButtons.length > 0) {
                helpfulButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        if (this.classList.contains('voted')) return;
                        
                        const reviewId = this.getAttribute('data-review-id');
                        const countElement = this.querySelector('.helpful-count');
                        
                        fetch('/mark-helpful.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                            },
                            body: `review_id=${reviewId}`
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Update count
                                countElement.textContent = parseInt(countElement.textContent) + 1;
                                
                                // Mark as voted
                                this.classList.add('voted');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                    });
                });
            }

            // Quick Add functionality for related products
            const quickAddButtons = document.querySelectorAll('.btn-quick-add');
            if (quickAddButtons.length > 0) {
                quickAddButtons.forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        const productId = this.getAttribute('data-product-id');
                        
                        // AJAX request to add to cart
                        fetch('/add-to-cart.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                            },
                            body: `product_id=${productId}&quantity=1`
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Update cart count
                                updateCartCount(1);
                                
                                // Show success modal
                                cartSuccessModal.classList.add('active');
                                document.body.style.overflow = 'hidden';
                            } else {
                                alert(data.message || 'Error adding product to cart.');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                    });
                });
            }

            // Function to update cart count
            function updateCartCount(quantity) {
                const cartCountElements = document.querySelectorAll('.cart-count');
                
                cartCountElements.forEach(element => {
                    const currentCount = parseInt(element.textContent);
                    element.textContent = currentCount + quantity;
                });
            }

            // ESC key to close modals
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    // Close image modal
                    if (imageModal.classList.contains('active')) {
                        imageModal.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                    
                    // Close cart success modal
                    if (cartSuccessModal.classList.contains('active')) {
                        cartSuccessModal.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                    
                    // Close payment options modal
                    if (paymentOptionsModal.classList.contains('active')) {
                        paymentOptionsModal.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                    
                    // Close mobile menu
                    if (mobileMenu && mobileMenu.classList.contains('active')) {
                        mobileMenu.classList.remove('active');
                        mobileMenuOverlay.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                }
            });
        });
    </script>
</body>
</html>