{{-- resources/views/storefront/partials/product-card.blade.php --}}
@php
    // Safely handle product data
    if (empty($product) || !(is_object($product) || is_array($product))) {
        return;
    }
    
    $images = \App\Support\StorefrontPresenter::productImages($product);
    $image = $images[0] ?? null;
    
    // Safely get variant data
    $variants = data_get($product, 'variants', collect());
    $defaultVariant = null;
    if ($variants instanceof \Illuminate\Support\Collection) {
        $defaultVariant = $variants->firstWhere('is_default', true) ?: $variants->first();
    } elseif (is_array($variants)) {
        $defaultVariant = collect($variants)->firstWhere('is_default', true) ?: collect($variants)->first();
    }
    
    $price = data_get($defaultVariant, 'price') ?? data_get($product, 'base_price') ?? data_get($product, 'discounted_price') ?? data_get($product, 'price') ?? 0;
    $comparePrice = data_get($defaultVariant, 'compare_price') ?? data_get($product, 'compare_price') ?? (data_get($product, 'discounted_price') !== null ? data_get($product, 'price') : 0);
    $variantLabel = data_get($defaultVariant, 'name') ?: (data_get($product, 'short_description') ?: (data_get($product, 'category.name') ?: '1 unit'));
    
    $hasDiscount = $comparePrice && (float) $comparePrice > (float) $price;
    $discountPercent = $hasDiscount ? (int) round((((float) $comparePrice - (float) $price) / (float) $comparePrice) * 100) : null;
    $savingAmount = $hasDiscount ? ((float) $comparePrice - (float) $price) : 0;
    
    $productUrl = route('storefront.products.show', ['product' => data_get($product, 'id')] + array_filter([
        'zone' => $selectedZone?->slug,
        'service' => $selectedService ?? null,
    ]));
    
    // Safely get ratings
    $productRatingCount = (int) (data_get($product, 'reviews_count') ?? data_get($product, 'reviews.count') ?? 0);
    $productRatingAverage = (float) (data_get($product, 'reviews_avg_rating') ?? 0);
    $storeRatingCount = (int) (data_get($product, 'store.reviews_count') ?? 0);
    $storeRatingAverage = (float) (data_get($product, 'store.reviews_avg_rating') ?? 0);
    $ratingCount = $productRatingCount > 0 ? $productRatingCount : $storeRatingCount;
    $ratingAverage = $productRatingCount > 0 ? $productRatingAverage : $storeRatingAverage;
    $rating = $ratingAverage > 0 && $ratingCount > 0 ? number_format($ratingAverage, 1) : null;
    
    // Cart data
    $productId = data_get($product, 'id');
    $variantId = data_get($defaultVariant, 'id');
    $cartKey = $productId . ':' . ($variantId ?? 0);
    $cartEntry = data_get($cartLookup, $cartKey);
    $quantity = (int) data_get($cartEntry, 'quantity', 0);
    $cartItemId = data_get($cartEntry, 'cart_item_id');
    
    $hasStock = data_get($product, 'in_stock', true) && (! data_get($product, 'track_inventory', false) || data_get($product, 'available_quantity', data_get($product, 'stock_quantity')) === null || (int) data_get($product, 'available_quantity', data_get($product, 'stock_quantity', 0)) > 0);
    $productName = data_get($product, 'name', 'Product');
    $categoryName = data_get($product, 'category.name', data_get($product, 'category_name', ''));
    $storeName = data_get($product, 'store.name', data_get($product, 'restaurant_name', ''));
    $isActive = data_get($product, 'is_active', data_get($product, 'is_available', true));
    
    $cardService = $selectedService ?? request('service', 'hyperlocal');
    $isFoodCard = in_array($cardService, ['food', 'restaurant'], true);
    $isGroceryCard = in_array($cardService, ['grocery', 'hyperlocal'], true);
    
    // Check if product is valid
    $isValidProduct = $productId && $isActive;
@endphp

@if($isValidProduct)
<article class="fm-product-card" 
         data-product-card 
         data-product-id="{{ $productId }}"
         data-variant-id="{{ $variantId ?? '' }}"
         data-cart-item-id="{{ $cartItemId ?? '' }}"
         data-quantity="{{ $quantity }}">

    {{-- Thumbnail --}}
    <div class="fm-product-thumb">
        @if($image)
            <img src="{{ $image }}" alt="{{ $productName }}" loading="lazy" width="200" height="200">
        @else
            <div class="fm-product-placeholder">
                <span>{{ Str::upper(Str::substr($productName, 0, 1)) }}</span>
            </div>
        @endif
        @if($discountPercent)
            <span class="fm-product-discount">{{ $discountPercent }}%<small>OFF</small></span>
        @endif
    </div>

    {{-- Product Info --}}
    <div class="fm-product-info">
        <a href="{{ $productUrl }}" class="fm-product-name">{{ Str::limit($productName, 30) }}</a>
        <div class="fm-product-unit">{{ $variantLabel }}</div>

        {{-- Rating --}}
        @if($rating)
            <div class="fm-product-rating-row">
                <span class="fm-product-stars">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#f59e0b"/>
                    </svg>
                    <strong>{{ $rating }}</strong>
                </span>
                <span class="fm-product-reviews">({{ $ratingCount }})</span>
            </div>
        @endif
    </div>

    {{-- Footer --}}
    <div class="fm-product-footer">
        <div class="fm-product-price">
            <strong>{{ \App\Support\StorefrontPresenter::money($price) }}</strong>
            @if($hasDiscount)
                <small>{{ \App\Support\StorefrontPresenter::money($comparePrice) }}</small>
            @endif
        </div>

        @if(! $isActive || ! $hasStock)
            <button type="button" class="fm-product-add is-out" disabled>×</button>
        @else
            <div class="fm-product-actions" data-product-actions>
                @if($quantity > 0 && $cartItemId)
                    <div class="fm-product-stepper" data-cart-stepper>
                        <button type="button" class="fm-stepper-btn" data-cart-decrement data-cart-item-id="{{ $cartItemId }}" data-product-id="{{ $productId }}" data-variant-id="{{ $variantId ?? '' }}" aria-label="Decrease">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                        </button>
                        <strong data-cart-quantity>{{ $quantity }}</strong>
                        <button type="button" class="fm-stepper-btn" data-cart-increment data-cart-item-id="{{ $cartItemId }}" data-product-id="{{ $productId }}" data-variant-id="{{ $variantId ?? '' }}" aria-label="Increase">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                <line x1="12" y1="5" x2="12" y2="19"/>
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                        </button>
                    </div>
                @else
                    <button type="button" class="fm-product-add" data-add-to-cart data-product-id="{{ $productId }}" data-variant-id="{{ $variantId ?? '' }}" aria-label="Add to cart">
                        <span class="fm-add-label">+</span>
                        <span class="fm-add-check" style="display:none;">✓</span>
                    </button>
                @endif
            </div>
        @endif
    </div>

    {{-- Discount Badge --}}
    @if($hasDiscount)
        <div class="fm-product-discount-badge">
            <span class="fm-discount-percent">{{ $discountPercent }}% OFF</span>
            @if($savingAmount > 0)
                <span class="fm-discount-saving">Save {{ \App\Support\StorefrontPresenter::money($savingAmount) }}</span>
            @endif
        </div>
    @endif
    
    {{-- Store name for food cards --}}
    @if($isFoodCard && $storeName)
        <div class="fm-product-store">{{ $storeName }}</div>
    @endif
</article>

<style>
/* ==========================================
   PRODUCT CARD - FreshMart Style
   ========================================== */
.fm-product-card {
    background: var(--fm-card-bg, #ffffff);
    border-radius: var(--fm-radius, 10px);
    padding: 8px;
    box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
    max-height: 280px;
    transition: transform var(--fm-transition, 0.25s ease), box-shadow var(--fm-transition, 0.25s ease);
    position: relative;
}

.fm-product-card:active {
    transform: scale(0.97);
}

.fm-product-thumb {
    position: relative;
    border-radius: var(--fm-radius-sm, 6px);
    overflow: hidden;
    background: var(--fm-bg, #f5f7f8);
    aspect-ratio: 1 / 1;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.fm-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fm-product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--fm-bg, #f5f7f8);
    color: var(--fm-text-light, #9ca3af);
}

.fm-product-placeholder span {
    font-size: 28px;
    font-weight: 700;
    color: var(--fm-primary, #2daa37);
}

.fm-product-discount {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--fm-secondary, #ff6b00);
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--fm-radius-sm, 6px);
    line-height: 1.3;
    z-index: 2;
}

.fm-product-discount small {
    font-weight: 400;
    font-size: 7px;
    margin-left: 1px;
}

.fm-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 2px;
}

.fm-product-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-text, #1a1a2e);
    margin: 0 0 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    line-height: 1.3;
    min-height: 28px;
    max-height: 28px;
}

.fm-product-name:hover {
    color: var(--fm-primary, #2daa37);
}

.fm-product-unit {
    font-size: 10px;
    color: var(--fm-text-light, #9ca3af);
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 14px;
}

.fm-product-rating-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0 2px;
    min-height: 16px;
}

.fm-product-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f59e0b;
    font-weight: 600;
    font-size: 10px;
}

.fm-product-stars svg {
    width: 10px;
    height: 10px;
}

.fm-product-stars strong {
    color: var(--fm-text, #1a1a2e);
}

.fm-product-reviews {
    font-size: 9px;
    color: var(--fm-text-light, #9ca3af);
}

.fm-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding-top: 3px;
    border-top: 1px solid var(--fm-border, #e5e7eb);
    margin-top: auto;
    flex-shrink: 0;
    min-height: 32px;
}

.fm-product-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.fm-product-price strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
}

.fm-product-price small {
    font-size: 10px;
    color: var(--fm-text-light, #9ca3af);
    text-decoration: line-through;
}

.fm-product-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fm-primary, #2daa37);
    color: white;
    border: none;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--fm-transition, 0.25s ease), transform var(--fm-transition, 0.25s ease);
}

.fm-product-add:active {
    transform: scale(0.9);
}

.fm-product-add.is-out {
    background: var(--fm-text-light, #9ca3af);
    cursor: not-allowed;
}

.fm-product-add .fm-add-label {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

.fm-product-add .fm-add-check {
    font-size: 12px;
    font-weight: 700;
    display: none;
}

.fm-product-add.is-added .fm-add-label {
    display: none;
}

.fm-product-add.is-added .fm-add-check {
    display: inline;
}

.fm-product-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--fm-primary-light, #e8f5e9);
    border-radius: var(--fm-radius-full, 9999px);
    padding: 1px 2px;
    height: 28px;
}

.fm-stepper-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--fm-primary, #2daa37);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--fm-transition, 0.25s ease);
}

.fm-stepper-btn:hover {
    background: rgba(var(--fm-primary-rgb, 45,170,55), 0.1);
}

.fm-stepper-btn svg {
    width: 14px;
    height: 14px;
}

.fm-product-stepper strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
    min-width: 16px;
    text-align: center;
}

.fm-product-discount-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 2px;
    flex-shrink: 0;
    min-height: 18px;
}

.fm-discount-percent {
    font-size: 9px;
    font-weight: 600;
    color: var(--fm-secondary, #ff6b00);
    background: #fff5f0;
    padding: 1px 6px;
    border-radius: var(--fm-radius-sm, 6px);
    display: inline-block;
}

.fm-discount-saving {
    font-size: 9px;
    color: var(--fm-primary, #2daa37);
    font-weight: 600;
    display: inline-block;
}

.fm-product-store {
    font-size: 10px;
    color: var(--fm-text-secondary, #6b7280);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 380px) {
    .fm-product-card {
        padding: 6px;
        min-height: 170px;
        max-height: 240px;
    }
    .fm-product-name {
        font-size: 11px;
        min-height: 24px;
        max-height: 24px;
    }
    .fm-product-price strong {
        font-size: 12px;
    }
    .fm-product-price small {
        font-size: 9px;
    }
    .fm-product-add {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    .fm-product-stepper {
        height: 24px;
    }
    .fm-stepper-btn {
        width: 20px;
        height: 20px;
    }
    .fm-stepper-btn svg {
        width: 12px;
        height: 12px;
    }
    .fm-product-stepper strong {
        font-size: 11px;
        min-width: 14px;
    }
    .fm-discount-percent {
        font-size: 8px;
        padding: 0 4px;
    }
    .fm-discount-saving {
        font-size: 8px;
    }
}

@media (min-width: 481px) {
    .fm-product-card {
        padding: 8px;
        min-height: 200px;
        max-height: 280px;
    }
    .fm-product-name {
        font-size: 12px;
        min-height: 28px;
        max-height: 28px;
    }
    .fm-product-price strong {
        font-size: 14px;
    }
    .fm-product-add {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    .fm-product-stepper {
        height: 28px;
    }
    .fm-stepper-btn {
        width: 24px;
        height: 24px;
    }
    .fm-stepper-btn svg {
        width: 14px;
        height: 14px;
    }
    .fm-product-stepper strong {
        font-size: 12px;
        min-width: 16px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    if (window.__storefrontProductCardScriptReady) {
        return;
    }
    window.__storefrontProductCardScriptReady = true;

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

    // ==========================================
    // TOAST
    // ==========================================
    function showToast(message, type = 'info', duration = 3000) {
        const container = document.getElementById('toast-container');
        if (!container) {
            const newContainer = document.createElement('div');
            newContainer.id = 'toast-container';
            document.body.appendChild(newContainer);
            return showToast(message, type, duration);
        }
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        const icons = { success: 'fa-check-circle', error: 'fa-exclamation-circle', warning: 'fa-triangle-exclamation', info: 'fa-info-circle' };
        toast.innerHTML = `
            <i class="fas ${icons[type] || icons.info}"></i>
            <span>${message}</span>
            <button onclick="this.closest('.toast').remove()"><i class="fas fa-times"></i></button>
        `;
        container.appendChild(toast);
        requestAnimationFrame(() => toast.classList.add('show'));
        setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 400); }, duration);
    }

    window.showToast = showToast;

    // ==========================================
    // UPDATE CART BADGE
    // ==========================================
    function updateCartBadge(count) {
        const total = Number(count || 0);
        document.querySelectorAll('[data-storefront-cart-badge]').forEach((badge) => {
            badge.textContent = total;
            badge.hidden = total <= 0;
        });
        document.querySelectorAll('[data-storefront-cart-dot]').forEach((dot) => {
            dot.hidden = total <= 0;
        });
    }

    // ==========================================
    // ADD TO CART
    // ==========================================
    document.addEventListener('click', async function(e) {
        const addBtn = e.target.closest('[data-add-to-cart]');
        if (!addBtn) return;
        if (addBtn.dataset.cartPending === 'true') return;
        e.preventDefault();
        e.stopPropagation();
        addBtn.dataset.cartPending = 'true';
        addBtn.disabled = true;

        const productId = addBtn.dataset.productId;
        const variantId = addBtn.dataset.variantId;
        const card = addBtn.closest('[data-product-card]');
        const addLabel = addBtn.querySelector('.fm-add-label');
        const checkLabel = addBtn.querySelector('.fm-add-check');

        if (!productId) {
            showToast('Product not found', 'error');
            return;
        }

        try {
            if (addLabel) addLabel.style.display = 'none';
            if (checkLabel) checkLabel.style.display = 'inline';
            addBtn.classList.add('is-added');

            const response = await fetch('{{ route('storefront.cart.items.store') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ 
                    product_id: productId, 
                    product_variant_id: variantId || null, 
                    quantity: 1 
                })
            });

            const data = await response.json();

            if (response.status === 401 && data.login_url) {
                window.location.href = data.login_url;
                return;
            }

            if (response.ok && data.success) {
                updateCartBadge(data.cart_count || 0);

                const wrapper = card?.querySelector('[data-product-actions]');
                if (wrapper) {
                    const cartItemId = data.cart_item_id || data.data?.cart_item_id || '';
                    wrapper.innerHTML = `
                        <div class="fm-product-stepper" data-cart-stepper>
                            <button type="button" class="fm-stepper-btn" data-cart-decrement data-cart-item-id="${cartItemId}" data-product-id="${productId}" data-variant-id="${variantId || ''}" aria-label="Decrease quantity">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                    <line x1="5" y1="12" x2="19" y2="12"/>
                                </svg>
                            </button>
                            <strong data-cart-quantity>1</strong>
                            <button type="button" class="fm-stepper-btn" data-cart-increment data-cart-item-id="${cartItemId}" data-product-id="${productId}" data-variant-id="${variantId || ''}" aria-label="Increase quantity">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                    <line x1="12" y1="5" x2="12" y2="19"/>
                                    <line x1="5" y1="12" x2="19" y2="12"/>
                                </svg>
                            </button>
                        </div>
                    `;
                    bindStepperEvents(wrapper);
                }

                showToast('Added to cart!', 'success');
                setTimeout(() => {
                    if (addLabel) addLabel.style.display = 'inline';
                    if (checkLabel) checkLabel.style.display = 'none';
                    addBtn.classList.remove('is-added');
                    delete addBtn.dataset.cartPending;
                    addBtn.disabled = false;
                }, 1500);
            } else {
                showToast(data.message || 'Failed to add', 'error');
                if (addLabel) addLabel.style.display = 'inline';
                if (checkLabel) checkLabel.style.display = 'none';
                addBtn.classList.remove('is-added');
                delete addBtn.dataset.cartPending;
                addBtn.disabled = false;
            }
        } catch (error) {
            console.error('Add to cart error:', error);
            showToast('Network error', 'error');
            if (addLabel) addLabel.style.display = 'inline';
            if (checkLabel) checkLabel.style.display = 'none';
            addBtn.classList.remove('is-added');
            delete addBtn.dataset.cartPending;
            addBtn.disabled = false;
        }
    });

    // ==========================================
    // STEPPER EVENTS
    // ==========================================
    function bindStepperEvents(container) {
        const decrement = container.querySelector('[data-cart-decrement]');
        const increment = container.querySelector('[data-cart-increment]');
        
        if (decrement) {
            decrement.removeEventListener('click', null);
            decrement.addEventListener('click', function(e) { 
                e.preventDefault(); 
                e.stopImmediatePropagation();
                handleQuantityChange(this, -1); 
            });
        }
        
        if (increment) {
            increment.removeEventListener('click', null);
            increment.addEventListener('click', function(e) { 
                e.preventDefault(); 
                e.stopImmediatePropagation();
                handleQuantityChange(this, 1); 
            });
        }
    }

    async function handleQuantityChange(button, delta) {
        const stepper = button.closest('[data-cart-stepper]');
        const quantityDisplay = stepper?.querySelector('[data-cart-quantity]');
        const cartItemId = button.dataset.cartItemId;
        const productId = button.dataset.productId;
        const variantId = button.dataset.variantId;
        const card = button.closest('[data-product-card]');

        let current = parseInt(quantityDisplay?.textContent || 0);
        let newQty = Math.max(0, current + delta);

        if (newQty === 0) {
            try {
                const response = await fetch(`/cart/items/${cartItemId}`, {
                    method: 'DELETE',
                    headers: { 
                        'X-CSRF-TOKEN': csrfToken, 
                        'X-Requested-With': 'XMLHttpRequest', 
                        'Accept': 'application/json' 
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    updateCartBadge(data.cart_count || 0);
                    
                    const wrapper = card?.querySelector('[data-product-actions]');
                    if (wrapper) {
                        wrapper.innerHTML = `
                            <button type="button" class="fm-product-add" data-add-to-cart data-product-id="${productId}" data-variant-id="${variantId || ''}" aria-label="Add to cart">
                                <span class="fm-add-label">+</span>
                                <span class="fm-add-check" style="display:none;">✓</span>
                            </button>
                        `;
                    }
                    showToast('Removed from cart', 'success');
                }
            } catch (error) {
                console.error('Remove from cart error:', error);
                showToast('Failed to update', 'error');
            }
            return;
        }

        if (quantityDisplay) quantityDisplay.textContent = newQty;

        try {
            const response = await fetch(`/cart/items/${cartItemId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ quantity: newQty })
            });
            
            if (response.ok) {
                const data = await response.json();
                updateCartBadge(data.cart_count || 0);
            }
        } catch (error) {
            console.error('Update cart error:', error);
            showToast('Failed to update', 'error');
            if (quantityDisplay) quantityDisplay.textContent = current;
        }
    }

    // ==========================================
    // BIND EXISTING STEPPERS
    // ==========================================
    document.querySelectorAll('[data-cart-stepper]').forEach((stepper) => {
        bindStepperEvents(stepper.parentElement || stepper);
    });

});
</script>
@endif