diff --git a/app/templates/shop/product.html b/app/templates/shop/product.html
index 40a50e8a..33e46c71 100644
--- a/app/templates/shop/product.html
+++ b/app/templates/shop/product.html
@@ -1,771 +1,387 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ product.name if product else 'Product' }} - {{ vendor.name }}</title>
-    <link rel="stylesheet" href="/static/css/shared/base.css">
-    <link rel="stylesheet" href="/static/css/vendor/vendor.css">
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-</head>
-<body>
-    <div x-data="productDetail()"
-         x-init="loadProduct()"
-         data-vendor-id="{{ vendor.id }}"
-         data-product-id="{{ product_id }}"
-    >
-        <!-- Header -->
-        <header class="header">
-            <div class="header-left">
-                <a href="{{ base_url }}shop/products" class="btn-back">← Back to Products</a>
-                <h1>{{ vendor.name }}</h1>
-            </div>
-            <div class="header-right">
-                <a href="{{ base_url }}shop/cart" class="btn-primary">
-                    🛒 Cart (<span x-text="cartCount"></span>)
-                </a>
-            </div>
-        </header>
+{# app/templates/shop/product.html #}
+{% extends "shop/base.html" %}
 
-        <!-- Loading State -->
-        <div x-show="loading" class="container">
-            <div class="loading">
-                <div class="loading-spinner-lg"></div>
-                <p>Loading product...</p>
-            </div>
-        </div>
+{% block title %}{{ product.name if product else 'Product' }}{% endblock %}
 
-        <!-- Product Detail -->
-        <div x-show="!loading && product" class="container">
-            <div class="product-detail-container">
-                <!-- Product Images -->
-                <div class="product-images">
-                    <div class="main-image">
-                        <img
-                            :src="selectedImage || '/static/images/placeholder.png'"
-                            :alt="product?.marketplace_product?.title"
-                            class="product-main-image"
-                        >
-                    </div>
+{# Alpine.js component #}
+{% block alpine_data %}productDetail(){% endblock %}
 
-                    <!-- Thumbnail Gallery -->
-                    <div class="image-gallery" x-show="product?.marketplace_product?.images?.length > 1">
-                        <template x-for="(image, index) in product?.marketplace_product?.images" :key="index">
-                            <img
-                                :src="image"
-                                :alt="`Product image ${index + 1}`"
-                                class="thumbnail"
-                                :class="{ 'active': selectedImage === image }"
-                                @click="selectedImage = image"
-                            >
-                        </template>
-                    </div>
-                </div>
-
-                <!-- Product Info -->
-                <div class="product-info-detail">
-                    <h1 x-text="product?.marketplace_product?.title" class="product-title-detail"></h1>
-
-                    <!-- Brand & Category -->
-                    <div class="product-meta">
-                        <span x-show="product?.marketplace_product?.brand" class="meta-item">
-                            <strong>Brand:</strong> <span x-text="product?.marketplace_product?.brand"></span>
-                        </span>
-                        <span x-show="product?.marketplace_product?.google_product_category" class="meta-item">
-                            <strong>Category:</strong> <span x-text="product?.marketplace_product?.google_product_category"></span>
-                        </span>
-                        <span class="meta-item">
-                            <strong>SKU:</strong> <span x-text="product?.product_id || product?.marketplace_product?.mpn"></span>
-                        </span>
-                    </div>
-
-                    <!-- Price -->
-                    <div class="product-pricing">
-                        <div x-show="product?.sale_price && product?.sale_price < product?.price">
-                            <span class="price-original">€<span x-text="parseFloat(product?.price).toFixed(2)"></span></span>
-                            <span class="price-sale">€<span x-text="parseFloat(product?.sale_price).toFixed(2)"></span></span>
-                            <span class="price-badge">SALE</span>
-                        </div>
-                        <div x-show="!product?.sale_price || product?.sale_price >= product?.price">
-                            <span class="price-current">€<span x-text="parseFloat(product?.price || 0).toFixed(2)"></span></span>
-                        </div>
-                    </div>
-
-                    <!-- Availability -->
-                    <div class="product-availability">
-                        <span
-                            x-show="product?.available_inventory > 0"
-                            class="availability-badge in-stock"
-                        >
-                            ✓ In Stock (<span x-text="product?.available_inventory"></span> available)
-                        </span>
-                        <span
-                            x-show="!product?.available_inventory || product?.available_inventory <= 0"
-                            class="availability-badge out-of-stock"
-                        >
-                            ✗ Out of Stock
-                        </span>
-                    </div>
-
-                    <!-- Description -->
-                    <div class="product-description">
-                        <h3>Description</h3>
-                        <p x-text="product?.marketplace_product?.description || 'No description available'"></p>
-                    </div>
-
-                    <!-- Additional Details -->
-                    <div class="product-details" x-show="hasAdditionalDetails">
-                        <h3>Product Details</h3>
-                        <ul>
-                            <li x-show="product?.marketplace_product?.gtin">
-                                <strong>GTIN:</strong> <span x-text="product?.marketplace_product?.gtin"></span>
-                            </li>
-                            <li x-show="product?.condition">
-                                <strong>Condition:</strong> <span x-text="product?.condition"></span>
-                            </li>
-                            <li x-show="product?.marketplace_product?.color">
-                                <strong>Color:</strong> <span x-text="product?.marketplace_product?.color"></span>
-                            </li>
-                            <li x-show="product?.marketplace_product?.size">
-                                <strong>Size:</strong> <span x-text="product?.marketplace_product?.size"></span>
-                            </li>
-                            <li x-show="product?.marketplace_product?.material">
-                                <strong>Material:</strong> <span x-text="product?.marketplace_product?.material"></span>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <!-- Add to Cart Section -->
-                    <div class="add-to-cart-section">
-                        <!-- Quantity Selector -->
-                        <div class="quantity-selector">
-                            <label>Quantity:</label>
-                            <div class="quantity-controls">
-                                <button
-                                    @click="decreaseQuantity()"
-                                    :disabled="quantity <= (product?.min_quantity || 1)"
-                                    class="btn-quantity"
-                                >
-                                    −
-                                </button>
-                                <input
-                                    type="number"
-                                    x-model.number="quantity"
-                                    :min="product?.min_quantity || 1"
-                                    :max="product?.max_quantity || product?.available_inventory"
-                                    class="quantity-input"
-                                    @change="validateQuantity()"
-                                >
-                                <button
-                                    @click="increaseQuantity()"
-                                    :disabled="quantity >= (product?.max_quantity || product?.available_inventory)"
-                                    class="btn-quantity"
-                                >
-                                    +
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Add to Cart Button -->
-                        <button
-                            @click="addToCart()"
-                            :disabled="!canAddToCart || addingToCart"
-                            class="btn-add-to-cart"
-                        >
-                            <span x-show="!addingToCart">
-                                🛒 Add to Cart
-                            </span>
-                            <span x-show="addingToCart">
-                                <span class="loading-spinner"></span> Adding...
-                            </span>
-                        </button>
-
-                        <!-- Total Price -->
-                        <div class="total-price">
-                            <strong>Total:</strong> €<span x-text="totalPrice.toFixed(2)"></span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Related Products / You May Also Like -->
-            <div class="related-products" x-show="relatedProducts.length > 0">
-                <h2>You May Also Like</h2>
-                <div class="product-grid">
-                    <template x-for="related in relatedProducts" :key="related.id">
-                        <div class="product-card">
-                            <img
-                                :src="related.image_url || '/static/images/placeholder.png'"
-                                :alt="related.name"
-                                class="product-image"
-                                @click="viewProduct(related.id)"
-                            >
-                            <div class="product-info">
-                                <h3
-                                    class="product-title"
-                                    @click="viewProduct(related.id)"
-                                    x-text="related.name"
-                                ></h3>
-                                <p class="product-price">
-                                    €<span x-text="parseFloat(related.price).toFixed(2)"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </div>
-
-        <!-- Toast Notification -->
-        <div
-            x-show="toast.show"
-            x-transition
-            :class="'toast toast-' + toast.type"
-            x-text="toast.message"
-        ></div>
+{% block content %}
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+     data-vendor-id="{{ vendor.id }}"
+     data-product-id="{{ product_id }}"
+>
+    {# Breadcrumbs #}
+    <div class="breadcrumb mb-6">
+        <a href="{{ base_url }}" class="hover:text-primary">Home</a>
+        <span>/</span>
+        <a href="{{ base_url }}shop/products" class="hover:text-primary">Products</a>
+        <span>/</span>
+        <span class="text-gray-900 dark:text-gray-200 font-medium" x-text="product?.marketplace_product?.title || 'Product'">Product</span>
     </div>
 
-    <script>
-        function productDetail() {
-            return {
-                // Data
-                product: null,
-                relatedProducts: [],
-                loading: false,
-                addingToCart: false,
-                quantity: 1,
-                selectedImage: null,
-                cartCount: 0,
-                vendorId: null,
-                productId: null,
-                sessionId: null,
+    {# Loading State #}
+    <div x-show="loading" class="flex justify-center items-center py-12">
+        <div class="spinner"></div>
+    </div>
 
-                // Toast notification
-                toast: {
-                    show: false,
-                    type: 'success',
-                    message: ''
-                },
+    {# Product Detail #}
+    <div x-show="!loading && product" class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
 
-                // Computed properties
-                get canAddToCart() {
-                    return this.product?.is_active &&
-                           this.product?.available_inventory > 0 &&
-                           this.quantity > 0 &&
-                           this.quantity <= this.product?.available_inventory;
-                },
+        {# Product Images #}
+        <div class="product-images">
+            <div class="main-image bg-white dark:bg-gray-800 rounded-lg overflow-hidden mb-4">
+                <img
+                    :src="selectedImage || '/static/shop/img/placeholder.jpg'"
+                    :alt="product?.marketplace_product?.title"
+                    class="w-full h-auto object-contain"
+                    style="max-height: 600px;"
+                >
+            </div>
 
-                get totalPrice() {
-                    const price = this.product?.sale_price || this.product?.price || 0;
-                    return price * this.quantity;
-                },
+            {# Thumbnail Gallery #}
+            <div x-show="product?.marketplace_product?.images?.length > 1" class="grid grid-cols-4 gap-2">
+                <template x-for="(image, index) in product?.marketplace_product?.images" :key="index">
+                    <img
+                        :src="image"
+                        :alt="`Product image ${index + 1}`"
+                        class="w-full aspect-square object-cover rounded-lg cursor-pointer border-2 transition-all"
+                        :class="selectedImage === image ? 'border-primary' : 'border-transparent hover:border-gray-300'"
+                        @click="selectedImage = image"
+                    >
+                </template>
+            </div>
+        </div>
 
-                get hasAdditionalDetails() {
-                    return this.product?.marketplace_product?.gtin ||
-                           this.product?.condition ||
-                           this.product?.marketplace_product?.color ||
-                           this.product?.marketplace_product?.size ||
-                           this.product?.marketplace_product?.material;
-                },
+        {# Product Info #}
+        <div class="product-info-detail">
+            <h1 x-text="product?.marketplace_product?.title" class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">
+                Product
+            </h1>
 
-                // Initialize
-                init() {
-                    this.vendorId = this.$el.dataset.vendorId;
-                    this.productId = this.$el.dataset.productId;
-                    this.sessionId = this.getOrCreateSessionId();
-                    this.loadCartCount();
-                },
+            {# Brand & Category #}
+            <div class="flex flex-wrap gap-4 mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
+                <span x-show="product?.marketplace_product?.brand" class="text-sm text-gray-600 dark:text-gray-400">
+                    <strong>Brand:</strong> <span x-text="product?.marketplace_product?.brand"></span>
+                </span>
+                <span x-show="product?.marketplace_product?.google_product_category" class="text-sm text-gray-600 dark:text-gray-400">
+                    <strong>Category:</strong> <span x-text="product?.marketplace_product?.google_product_category"></span>
+                </span>
+                <span class="text-sm text-gray-600 dark:text-gray-400">
+                    <strong>SKU:</strong> <span x-text="product?.product_id || product?.marketplace_product?.mpn"></span>
+                </span>
+            </div>
 
-                // Get or create session ID
-                getOrCreateSessionId() {
-                    let sessionId = localStorage.getItem('cart_session_id');
-                    if (!sessionId) {
-                        sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-                        localStorage.setItem('cart_session_id', sessionId);
-                    }
-                    return sessionId;
-                },
+            {# Price #}
+            <div class="mb-6">
+                <div x-show="product?.sale_price && product?.sale_price < product?.price">
+                    <span class="text-xl text-gray-500 line-through mr-3">€<span x-text="parseFloat(product?.price).toFixed(2)"></span></span>
+                    <span class="text-4xl font-bold text-red-600">€<span x-text="parseFloat(product?.sale_price).toFixed(2)"></span></span>
+                    <span class="ml-2 inline-block bg-red-600 text-white px-3 py-1 rounded-full text-sm font-semibold">SALE</span>
+                </div>
+                <div x-show="!product?.sale_price || product?.sale_price >= product?.price">
+                    <span class="text-4xl font-bold text-gray-800 dark:text-gray-200">€<span x-text="parseFloat(product?.price || 0).toFixed(2)"></span></span>
+                </div>
+            </div>
 
-                // Load product details
-                async loadProduct() {
-                    this.loading = true;
+            {# Availability #}
+            <div class="mb-6">
+                <span
+                    x-show="product?.available_inventory > 0"
+                    class="inline-block px-4 py-2 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 rounded-lg font-semibold"
+                >
+                    ✓ In Stock (<span x-text="product?.available_inventory"></span> available)
+                </span>
+                <span
+                    x-show="!product?.available_inventory || product?.available_inventory <= 0"
+                    class="inline-block px-4 py-2 bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded-lg font-semibold"
+                >
+                    ✗ Out of Stock
+                </span>
+            </div>
 
-                    try {
-                        const response = await fetch(
-                            `/api/v1/shop/products/${this.productId}`
-                        );
+            {# Description #}
+            <div class="mb-6 p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                <h3 class="text-xl font-semibold mb-3">Description</h3>
+                <p class="text-gray-600 dark:text-gray-400 leading-relaxed" x-text="product?.marketplace_product?.description || 'No description available'"></p>
+            </div>
 
-                        if (!response.ok) {
-                            throw new Error('Product not found');
-                        }
+            {# Additional Details #}
+            <div x-show="hasAdditionalDetails" class="mb-6 p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                <h3 class="text-xl font-semibold mb-3">Product Details</h3>
+                <ul class="space-y-2">
+                    <li x-show="product?.marketplace_product?.gtin" class="text-sm text-gray-600 dark:text-gray-400">
+                        <strong>GTIN:</strong> <span x-text="product?.marketplace_product?.gtin"></span>
+                    </li>
+                    <li x-show="product?.condition" class="text-sm text-gray-600 dark:text-gray-400">
+                        <strong>Condition:</strong> <span x-text="product?.condition"></span>
+                    </li>
+                    <li x-show="product?.marketplace_product?.color" class="text-sm text-gray-600 dark:text-gray-400">
+                        <strong>Color:</strong> <span x-text="product?.marketplace_product?.color"></span>
+                    </li>
+                    <li x-show="product?.marketplace_product?.size" class="text-sm text-gray-600 dark:text-gray-400">
+                        <strong>Size:</strong> <span x-text="product?.marketplace_product?.size"></span>
+                    </li>
+                    <li x-show="product?.marketplace_product?.material" class="text-sm text-gray-600 dark:text-gray-400">
+                        <strong>Material:</strong> <span x-text="product?.marketplace_product?.material"></span>
+                    </li>
+                </ul>
+            </div>
 
-                        this.product = await response.json();
+            {# Add to Cart Section #}
+            <div class="p-6 bg-white dark:bg-gray-800 rounded-lg border-2 border-primary">
+                {# Quantity Selector #}
+                <div class="mb-4">
+                    <label class="block font-semibold text-lg mb-2">Quantity:</label>
+                    <div class="flex items-center gap-2">
+                        <button
+                            @click="decreaseQuantity()"
+                            :disabled="quantity <= (product?.min_quantity || 1)"
+                            class="w-10 h-10 flex items-center justify-center border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            −
+                        </button>
+                        <input
+                            type="number"
+                            x-model.number="quantity"
+                            :min="product?.min_quantity || 1"
+                            :max="product?.max_quantity || product?.available_inventory"
+                            class="w-20 text-center px-3 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-lg font-semibold dark:bg-gray-700 dark:text-white"
+                            @change="validateQuantity()"
+                        >
+                        <button
+                            @click="increaseQuantity()"
+                            :disabled="quantity >= (product?.max_quantity || product?.available_inventory)"
+                            class="w-10 h-10 flex items-center justify-center border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            +
+                        </button>
+                    </div>
+                </div>
 
-                        // Set default image
-                        if (this.product?.marketplace_product?.image_link) {
-                            this.selectedImage = this.product.marketplace_product.image_link;
-                        }
+                {# Add to Cart Button #}
+                <button
+                    @click="addToCart()"
+                    :disabled="!canAddToCart || addingToCart"
+                    class="w-full px-6 py-4 bg-primary text-white rounded-lg font-semibold text-lg hover:bg-primary-dark transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    <span x-show="!addingToCart">
+                        🛒 Add to Cart
+                    </span>
+                    <span x-show="addingToCart">
+                        <span class="inline-block animate-spin">⏳</span> Adding...
+                    </span>
+                </button>
 
-                        // Set initial quantity
-                        this.quantity = this.product?.min_quantity || 1;
+                {# Total Price #}
+                <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg text-center">
+                    <strong class="text-xl">Total:</strong> <span class="text-2xl font-bold">€<span x-text="totalPrice.toFixed(2)"></span></span>
+                </div>
+            </div>
+        </div>
+    </div>
 
-                        // Load related products (optional)
-                        await this.loadRelatedProducts();
+    {# Related Products #}
+    <div x-show="relatedProducts.length > 0" class="mt-12 pt-12 border-t-2 border-gray-200 dark:border-gray-700">
+        <h2 class="text-3xl font-bold mb-6">You May Also Like</h2>
+        <div class="product-grid">
+            <template x-for="related in relatedProducts" :key="related.id">
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer">
+                    <a :href="`{{ base_url }}shop/products/${related.id}`">
+                        <img
+                            :src="related.marketplace_product?.image_link || '/static/shop/img/placeholder.jpg'"
+                            :alt="related.marketplace_product?.title"
+                            class="w-full h-48 object-cover"
+                        >
+                    </a>
+                    <div class="p-4">
+                        <a :href="`{{ base_url }}shop/products/${related.id}`">
+                            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2 line-clamp-2" x-text="related.marketplace_product?.title"></h3>
+                        </a>
+                        <p class="text-2xl font-bold text-primary">
+                            €<span x-text="parseFloat(related.price).toFixed(2)"></span>
+                        </p>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
 
-                    } catch (error) {
-                        console.error('Failed to load product:', error);
-                        this.showToast('Failed to load product', 'error');
-                        // Redirect back to products after error
-                        setTimeout(() => {
-                            window.location.href = '/shop/products';
-                        }, 2000);
-                    } finally {
-                        this.loading = false;
-                    }
-                },
+</div>
+{% endblock %}
 
-                // Load related products (same category or brand)
-                async loadRelatedProducts() {
-                    try {
-                        const response = await fetch(
-                            `/api/v1/shop/products?limit=4`
-                        );
+{% block extra_scripts %}
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('productDetail', () => ({
+        ...shopLayoutData(),
 
-                        if (response.ok) {
-                            const data = await response.json();
-                            // Filter out current product
-                            this.relatedProducts = data.products
-                                .filter(p => p.id !== parseInt(this.productId))
-                                .slice(0, 4);
-                        }
-                    } catch (error) {
-                        console.error('Failed to load related products:', error);
-                    }
-                },
+        // Data
+        product: null,
+        relatedProducts: [],
+        loading: false,
+        addingToCart: false,
+        quantity: 1,
+        selectedImage: null,
+        vendorId: null,
+        productId: null,
 
-                // Load cart count
-                async loadCartCount() {
-                    try {
-                        const response = await fetch(
-                            `/api/v1/shop/cart/${this.sessionId}`
-                        );
+        // Computed properties
+        get canAddToCart() {
+            return this.product?.is_active &&
+                   this.product?.available_inventory > 0 &&
+                   this.quantity > 0 &&
+                   this.quantity <= this.product?.available_inventory;
+        },
 
-                        if (response.ok) {
-                            const data = await response.json();
-                            this.cartCount = (data.items || []).reduce((sum, item) =>
-                                sum + item.quantity, 0
-                            );
-                        }
-                    } catch (error) {
-                        console.error('Failed to load cart count:', error);
-                    }
-                },
+        get totalPrice() {
+            const price = this.product?.sale_price || this.product?.price || 0;
+            return price * this.quantity;
+        },
 
-                // Quantity controls
-                increaseQuantity() {
-                    const max = this.product?.max_quantity || this.product?.available_inventory;
-                    if (this.quantity < max) {
-                        this.quantity++;
-                    }
-                },
+        get hasAdditionalDetails() {
+            return this.product?.marketplace_product?.gtin ||
+                   this.product?.condition ||
+                   this.product?.marketplace_product?.color ||
+                   this.product?.marketplace_product?.size ||
+                   this.product?.marketplace_product?.material;
+        },
 
-                decreaseQuantity() {
-                    const min = this.product?.min_quantity || 1;
-                    if (this.quantity > min) {
-                        this.quantity--;
-                    }
-                },
+        // Initialize
+        async init() {
+            console.log('[SHOP] Product detail page initializing...');
+            this.vendorId = this.$el.dataset.vendorId;
+            this.productId = this.$el.dataset.productId;
+            await this.loadProduct();
+        },
 
-                validateQuantity() {
-                    const min = this.product?.min_quantity || 1;
-                    const max = this.product?.max_quantity || this.product?.available_inventory;
+        // Load product details
+        async loadProduct() {
+            this.loading = true;
 
-                    if (this.quantity < min) {
-                        this.quantity = min;
-                    } else if (this.quantity > max) {
-                        this.quantity = max;
-                    }
-                },
+            try {
+                console.log(`[SHOP] Loading product ${this.productId}...`);
+                const response = await fetch(`/api/v1/shop/products/${this.productId}`);
 
-                // Add to cart
-                async addToCart() {
-                    if (!this.canAddToCart) return;
-
-                    this.addingToCart = true;
-
-                    try {
-                        const response = await fetch(
-                            `/api/v1/shop/cart/${this.sessionId}/items`,
-                            {
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': 'application/json'
-                                },
-                                body: JSON.stringify({
-                                    product_id: parseInt(this.productId),
-                                    quantity: this.quantity
-                                })
-                            }
-                        );
-
-                        if (response.ok) {
-                            this.cartCount += this.quantity;
-                            this.showToast(
-                                `${this.quantity} item(s) added to cart!`,
-                                'success'
-                            );
-
-                            // Reset quantity to minimum
-                            this.quantity = this.product?.min_quantity || 1;
-                        } else {
-                            const error = await response.json();
-                            throw new Error(error.detail || 'Failed to add to cart');
-                        }
-                    } catch (error) {
-                        console.error('Add to cart error:', error);
-                        this.showToast(error.message || 'Failed to add to cart', 'error');
-                    } finally {
-                        this.addingToCart = false;
-                    }
-                },
-
-                // View other product
-                viewProduct(productId) {
-                    window.location.href = `/shop/products/${productId}`;
-                },
-
-                // Show toast notification
-                showToast(message, type = 'success') {
-                    this.toast = {
-                        show: true,
-                        type: type,
-                        message: message
-                    };
-
-                    setTimeout(() => {
-                        this.toast.show = false;
-                    }, 3000);
+                if (!response.ok) {
+                    throw new Error('Product not found');
                 }
+
+                this.product = await response.json();
+                console.log('[SHOP] Product loaded:', this.product);
+
+                // Set default image
+                if (this.product?.marketplace_product?.image_link) {
+                    this.selectedImage = this.product.marketplace_product.image_link;
+                }
+
+                // Set initial quantity
+                this.quantity = this.product?.min_quantity || 1;
+
+                // Load related products
+                await this.loadRelatedProducts();
+
+            } catch (error) {
+                console.error('[SHOP] Failed to load product:', error);
+                this.showToast('Failed to load product', 'error');
+                // Redirect back to products after error
+                setTimeout(() => {
+                    window.location.href = '{{ base_url }}shop/products';
+                }, 2000);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Load related products
+        async loadRelatedProducts() {
+            try {
+                const response = await fetch(`/api/v1/shop/products?limit=4`);
+
+                if (response.ok) {
+                    const data = await response.json();
+                    // Filter out current product
+                    this.relatedProducts = data.products
+                        .filter(p => p.id !== parseInt(this.productId))
+                        .slice(0, 4);
+
+                    console.log('[SHOP] Loaded related products:', this.relatedProducts.length);
+                }
+            } catch (error) {
+                console.error('[SHOP] Failed to load related products:', error);
+            }
+        },
+
+        // Quantity controls
+        increaseQuantity() {
+            const max = this.product?.max_quantity || this.product?.available_inventory;
+            if (this.quantity < max) {
+                this.quantity++;
+            }
+        },
+
+        decreaseQuantity() {
+            const min = this.product?.min_quantity || 1;
+            if (this.quantity > min) {
+                this.quantity--;
+            }
+        },
+
+        validateQuantity() {
+            const min = this.product?.min_quantity || 1;
+            const max = this.product?.max_quantity || this.product?.available_inventory;
+
+            if (this.quantity < min) {
+                this.quantity = min;
+            } else if (this.quantity > max) {
+                this.quantity = max;
+            }
+        },
+
+        // Add to cart
+        async addToCart() {
+            if (!this.canAddToCart) return;
+
+            this.addingToCart = true;
+
+            try {
+                console.log('[SHOP] Adding to cart:', { productId: this.productId, quantity: this.quantity });
+
+                const response = await fetch(
+                    `/api/v1/shop/cart/${this.sessionId}/items`,
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            product_id: parseInt(this.productId),
+                            quantity: this.quantity
+                        })
+                    }
+                );
+
+                if (response.ok) {
+                    this.cartCount += this.quantity;
+                    this.showToast(
+                        `${this.quantity} item(s) added to cart!`,
+                        'success'
+                    );
+
+                    // Reset quantity to minimum
+                    this.quantity = this.product?.min_quantity || 1;
+                } else {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Failed to add to cart');
+                }
+            } catch (error) {
+                console.error('[SHOP] Add to cart error:', error);
+                this.showToast(error.message || 'Failed to add to cart', 'error');
+            } finally {
+                this.addingToCart = false;
             }
         }
-    </script>
-
-    <style>
-        /* Product Detail Styles */
-        .product-detail-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: var(--spacing-2xl);
-            margin-top: var(--spacing-xl);
-            margin-bottom: var(--spacing-2xl);
-        }
-
-        .product-images {
-            position: sticky;
-            top: var(--spacing-lg);
-            height: fit-content;
-        }
-
-        .main-image {
-            width: 100%;
-            aspect-ratio: 1;
-            border-radius: var(--radius-lg);
-            overflow: hidden;
-            background: var(--gray-50);
-            margin-bottom: var(--spacing-md);
-        }
-
-        .product-main-image {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        .image-gallery {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-            gap: var(--spacing-sm);
-        }
-
-        .thumbnail {
-            width: 100%;
-            aspect-ratio: 1;
-            object-fit: cover;
-            border-radius: var(--radius-md);
-            cursor: pointer;
-            border: 2px solid transparent;
-            transition: all var(--transition-base);
-        }
-
-        .thumbnail:hover {
-            border-color: var(--primary-color);
-        }
-
-        .thumbnail.active {
-            border-color: var(--primary-color);
-            box-shadow: var(--shadow-md);
-        }
-
-        .product-info-detail {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-lg);
-        }
-
-        .product-title-detail {
-            font-size: var(--font-4xl);
-            font-weight: 700;
-            color: var(--text-primary);
-            margin: 0;
-        }
-
-        .product-meta {
-            display: flex;
-            flex-wrap: wrap;
-            gap: var(--spacing-md);
-            padding-bottom: var(--spacing-md);
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .meta-item {
-            font-size: var(--font-sm);
-            color: var(--text-secondary);
-        }
-
-        .product-pricing {
-            padding: var(--spacing-lg);
-            background: var(--gray-50);
-            border-radius: var(--radius-lg);
-        }
-
-        .price-original {
-            font-size: var(--font-xl);
-            color: var(--text-muted);
-            text-decoration: line-through;
-            margin-right: var(--spacing-md);
-        }
-
-        .price-sale {
-            font-size: var(--font-4xl);
-            font-weight: 700;
-            color: var(--danger-color);
-        }
-
-        .price-current {
-            font-size: var(--font-4xl);
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .price-badge {
-            display: inline-block;
-            background: var(--danger-color);
-            color: white;
-            padding: 4px 12px;
-            border-radius: var(--radius-full);
-            font-size: var(--font-sm);
-            font-weight: 600;
-            margin-left: var(--spacing-sm);
-        }
-
-        .product-availability {
-            padding: var(--spacing-md);
-            background: white;
-            border-radius: var(--radius-md);
-        }
-
-        .availability-badge {
-            display: inline-block;
-            padding: 8px 16px;
-            border-radius: var(--radius-md);
-            font-weight: 600;
-            font-size: var(--font-base);
-        }
-
-        .availability-badge.in-stock {
-            background: #d4edda;
-            color: #155724;
-        }
-
-        .availability-badge.out-of-stock {
-            background: #f8d7da;
-            color: #721c24;
-        }
-
-        .product-description {
-            padding: var(--spacing-lg);
-            background: white;
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--border-color);
-        }
-
-        .product-description h3 {
-            margin-bottom: var(--spacing-md);
-            font-size: var(--font-xl);
-        }
-
-        .product-description p {
-            line-height: 1.6;
-            color: var(--text-secondary);
-        }
-
-        .product-details {
-            padding: var(--spacing-lg);
-            background: white;
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--border-color);
-        }
-
-        .product-details h3 {
-            margin-bottom: var(--spacing-md);
-            font-size: var(--font-xl);
-        }
-
-        .product-details ul {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .product-details li {
-            padding: var(--spacing-sm) 0;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .product-details li:last-child {
-            border-bottom: none;
-        }
-
-        .add-to-cart-section {
-            padding: var(--spacing-xl);
-            background: white;
-            border-radius: var(--radius-lg);
-            border: 2px solid var(--primary-color);
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-lg);
-        }
-
-        .quantity-selector {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sm);
-        }
-
-        .quantity-selector label {
-            font-weight: 600;
-            font-size: var(--font-lg);
-        }
-
-        .quantity-controls {
-            display: flex;
-            gap: var(--spacing-sm);
-            align-items: center;
-        }
-
-        .btn-quantity {
-            width: 40px;
-            height: 40px;
-            border: 2px solid var(--border-color);
-            background: white;
-            border-radius: var(--radius-md);
-            cursor: pointer;
-            font-size: var(--font-xl);
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all var(--transition-base);
-        }
-
-        .btn-quantity:hover:not(:disabled) {
-            background: var(--gray-50);
-            border-color: var(--primary-color);
-        }
-
-        .btn-quantity:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .quantity-input {
-            width: 80px;
-            text-align: center;
-            padding: 10px;
-            border: 2px solid var(--border-color);
-            border-radius: var(--radius-md);
-            font-size: var(--font-lg);
-            font-weight: 600;
-        }
-
-        .btn-add-to-cart {
-            width: 100%;
-            padding: 16px 32px;
-            background: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: var(--radius-lg);
-            font-size: var(--font-xl);
-            font-weight: 600;
-            cursor: pointer;
-            transition: all var(--transition-base);
-        }
-
-        .btn-add-to-cart:hover:not(:disabled) {
-            background: var(--primary-dark);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-lg);
-        }
-
-        .btn-add-to-cart:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .total-price {
-            padding: var(--spacing-md);
-            background: var(--gray-50);
-            border-radius: var(--radius-md);
-            text-align: center;
-            font-size: var(--font-2xl);
-        }
-
-        .related-products {
-            margin-top: var(--spacing-2xl);
-            padding-top: var(--spacing-2xl);
-            border-top: 2px solid var(--border-color);
-        }
-
-        .related-products h2 {
-            margin-bottom: var(--spacing-xl);
-            font-size: var(--font-3xl);
-        }
-
-        /* Responsive */
-        @media (max-width: 1024px) {
-            .product-detail-container {
-                grid-template-columns: 1fr;
-            }
-
-            .product-images {
-                position: static;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .product-title-detail {
-                font-size: var(--font-2xl);
-            }
-
-            .price-current,
-            .price-sale {
-                font-size: var(--font-3xl);
-            }
-
-            .add-to-cart-section {
-                padding: var(--spacing-lg);
-            }
-        }
-    </style>
-</body>
-</html>
\ No newline at end of file
+    }));
+});
+</script>
+{% endblock %}
