diff --git a/lang/en/checkout.php b/lang/en/checkout.php
index c943daf..9fe04cb 100644
--- a/lang/en/checkout.php
+++ b/lang/en/checkout.php
@@ -68,4 +68,6 @@ return [
     'shipping' => 'Shipping:',
     'estimated_total' => 'Estimated total:',
     'proceed_to_checkout' => 'Proceed to checkout',
+    'order_summary' => 'Order summary',
+    'calculated_at_checkout' => 'Calculated at checkout',
 ];
diff --git a/lang/en/navbar.php b/lang/en/navbar.php
index ffd7c6e..0a2389e 100644
--- a/lang/en/navbar.php
+++ b/lang/en/navbar.php
@@ -14,5 +14,8 @@ return [
     'sign_up' => 'Sign Up',
     'contact' => 'Contact',
     'terms_conditions' => 'Terms & Conditions',
-    'categories' => 'Categories'
+    'categories' => 'Categories',
+    'delivery' => 'Delivery',
+    'set_your_address' => 'Set your address',
+    'gender' => 'Gender',
 ];
diff --git a/lang/id/checkout.php b/lang/id/checkout.php
index 04e4c3c..96c4b45 100644
--- a/lang/id/checkout.php
+++ b/lang/id/checkout.php
@@ -68,4 +68,6 @@ return [
     'shipping' => 'Pengiriman:',
     'estimated_total' => 'Total estimasi:',
     'proceed_to_checkout' => 'Lanjut ke checkout',
+    'order_summary' => 'Ringkasan pesanan',
+    'calculated_at_checkout' => 'Dihitung di checkout',
 ];
diff --git a/lang/id/navbar.php b/lang/id/navbar.php
index 9054bce..69defed 100644
--- a/lang/id/navbar.php
+++ b/lang/id/navbar.php
@@ -15,4 +15,7 @@ return [
     'contact' => 'Kontak',
     'terms_conditions' => 'Syarat & Ketentuan',
     'categories' => 'Kategori',
+    'delivery' => 'Pengiriman',
+    'set_your_address' => 'Atur alamat Anda',
+    'gender' => 'Gender',
 ];
diff --git a/resources/views/checkout/v1-cart.blade.php b/resources/views/checkout/v1-cart.blade.php
index 8a2a074..ec076bb 100644
--- a/resources/views/checkout/v1-cart.blade.php
+++ b/resources/views/checkout/v1-cart.blade.php
@@ -42,12 +42,12 @@
                         </div> --}}
 
                         <!-- Table of items -->
-                        <table class="table position-relative z-2 mb-4">
+                        <table class="table z-2 mb-4">
                             <thead>
                                 <tr>
                                     <th scope="col" class="fs-sm fw-normal py-3 ps-0"><span
                                             class="text-body">Product</span></th>
-                                
+
                                     <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
                                             class="text-body">Quantity</span></th>
                                     <th scope="col" class="text-body fs-sm fw-normal py-3 d-none d-md-table-cell"><span
@@ -79,7 +79,9 @@
                                     </tr>
                                 @else
                                     @foreach ($carts as $key => $cart)
+                                    
                                         <tr data-cart-id="{{ $cart->id }}">
+                                           
                                             <td class="py-3 ps-0">
                                                 <div class="d-flex align-items-center">
                                                     <a class="flex-shrink-0"
@@ -88,7 +90,7 @@
                                                             width="80" alt="{{ $cart->name ?? 'Product' }}">
                                                     </a>
 
-                                                    
+
                                                     <div class="w-100 min-w-0 ps-2 ps-xl-3">
                                                         <h5 class="d-flex animate-underline mb-2">
                                                             <a class="d-block fs-sm fw-medium text-truncate animate-target"
@@ -105,9 +107,10 @@
                                                         </li>
                                                     </ul> --}}
 
-                                                      <input type="hidden" id="price_{{ $cart->id }}"
-                                                    value="{{ $cart->itemVariant->display_price ?? 0 }}">
-                                                Rp {{ number_format($cart->itemVariant->display_price ?? 0, 0, ',', '.') }}
+                                                        <input type="hidden" id="price_{{ $cart->id }}"
+                                                            value="{{ $cart->itemVariant->display_price ?? 0 }}">
+                                                        Rp
+                                                        {{ number_format($cart->itemVariant->display_price ?? 0, 0, ',', '.') }}
 
                                                         <div class="count-input rounded-2 d-md-none mt-3">
                                                             <button type="button" class="btn btn-sm btn-icon"
@@ -124,7 +127,7 @@
                                                     </div>
                                                 </div>
                                             </td>
-                                           
+
                                             <td class="py-3 d-none d-md-table-cell">
                                                 <div class="count-input">
                                                     <button type="button" class="btn btn-icon" data-decrement
@@ -177,7 +180,7 @@
                         <div class="position-sticky top-0" style="padding-top: 100px">
                             <div class="bg-body-tertiary rounded-5 p-4 mb-3">
                                 <div class="p-sm-2 p-lg-0 p-xl-2">
-                                    <h5 class="border-bottom pb-4 mb-4">Order summary</h5>
+                                    <h5 class="border-bottom pb-4 mb-4">{{ __('checkout.order_summary') }}</h5>
                                     <ul class="list-unstyled fs-sm gap-3 mb-0">
                                         <li class="d-flex justify-content-between">
                                             <div>Subtotal (<span
@@ -187,7 +190,8 @@
                                         </li>
                                         <li class="d-flex justify-content-between">
                                             {{ __('checkout.saving') }}
-                                            <span class="text-danger fw-medium">Rp {{ number_format(session('use_point') ?? 0,0,",",".") }}</span>
+                                            <span class="text-danger fw-medium">Rp
+                                                {{ number_format(session('use_point') ?? 0, 0, ',', '.') }}</span>
                                         </li>
                                         {{-- <li class="d-flex justify-content-between" id="tax-row" style="display: none;">
                                             Tax collected:
@@ -195,7 +199,7 @@
                                         </li> --}}
                                         <li class="d-flex justify-content-between">
                                             {{ __('checkout.shipping') }}
-                                            <span class="text-dark-emphasis fw-medium">Calculated at checkout</span>
+                                            <span class="text-dark-emphasis fw-medium">{{ __('checkout.calculated_at_checkout') }}</span>
                                         </li>
                                     </ul>
                                     <div class="border-top pt-4 mt-4">
@@ -203,8 +207,7 @@
                                             <span class="fs-sm">{{ __('checkout.estimated_total') }}</span>
                                             <span class="h5 mb-0" id="cart-estimated-total">$0.00</span>
                                         </div>
-                                        <a class="btn btn-lg btn-primary w-100"
-                                            href="{{ route('checkout.delivery') }}">
+                                        <a class="btn btn-lg btn-primary w-100" href="{{ route('checkout.delivery') }}">
                                             {{ __('checkout.proceed_to_checkout') }}
                                             <i class="ci-chevron-right fs-lg ms-1 me-n1"></i>
                                         </a>
diff --git a/resources/views/checkout/v1-delivery-1.blade.php b/resources/views/checkout/v1-delivery-1.blade.php
index 6ebed3d..a31a8d3 100644
--- a/resources/views/checkout/v1-delivery-1.blade.php
+++ b/resources/views/checkout/v1-delivery-1.blade.php
@@ -1,5 +1,10 @@
 @extends('layouts.landing', ['title' => 'Checkout'])
 
+@push('styles')
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+@endpush
+
 @section('content')
     <x-layout.header-grocery />
 
@@ -128,6 +133,12 @@
 
                                                 </div>
 
+                                                <div class="mt-3">
+                                                    <div id="address-map"
+                                                        style="height: 300px; width: 100%; border-radius: 8px; overflow: hidden;">
+                                                    </div>
+                                                </div>
+
 
 
 
@@ -191,8 +202,7 @@
                 <!-- Order summary (sticky sidebar) -->
                 <aside class="col-lg-4 offset-xl-1" style="margin-top: -100px">
                     <div class="position-sticky top-0" style="padding-top: 100px">
-                        <x-checkout.order-summary :subtotal="$subtotal" :total="$total"
-                            :showEdit="true" :editUrl="route('cart.index')" />
+                        <x-checkout.order-summary :subtotal="$subtotal" :total="$total" :showEdit="true" :editUrl="route('cart.index')" />
                     </div>
                 </aside>
             </div>
@@ -203,6 +213,8 @@
 @endsection
 
 @section('scripts')
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Delivery method selection
@@ -309,6 +321,9 @@
                         document.getElementById('longitude').textContent = selectedOption.dataset.longitude || '';
                         document.getElementById('zip').textContent = selectedOption.dataset.postcode || '';
 
+                        // Update map with coordinates
+                        updateAddressMap(selectedOption.dataset.latitude, selectedOption.dataset.longitude);
+
                         // Update order summary with postcode
                         if (selectedOption.dataset.postcode) {
                             updateOrderSummaryWithShipping();
@@ -316,6 +331,69 @@
                     }
                 }
 
+                // Initialize map
+                let map = null;
+                let marker = null;
+
+                function initializeMap() {
+                    if (typeof L !== 'undefined' && document.getElementById('address-map')) {
+                        // Get initial coordinates from selected address or default to Jakarta
+                        const addressSelect = document.getElementById('addressSelect');
+                        let initialLat = -6.2088; // Default Jakarta latitude
+                        let initialLng = 106.8456; // Default Jakarta longitude
+                        let initialZoom = 13;
+
+                        if (addressSelect && addressSelect.value && addressSelect.value !== 'new') {
+                            const selectedOption = addressSelect.options[addressSelect.selectedIndex];
+                            const lat = selectedOption.dataset.latitude;
+                            const lng = selectedOption.dataset.longitude;
+                            
+                            if (lat && lng) {
+                                initialLat = parseFloat(lat);
+                                initialLng = parseFloat(lng);
+                                initialZoom = 15; // Zoom in closer for specific address
+                            }
+                        }
+
+                        // Initialize map with address coordinates
+                        map = L.map('address-map').setView([initialLat, initialLng], initialZoom);
+
+                        // Add OpenStreetMap tiles
+                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                            attribution: ' OpenStreetMap contributors'
+                        }).addTo(map);
+
+                        // Add initial marker if we have coordinates
+                        if (initialLat !== -6.2088 || initialLng !== 106.8456) {
+                            marker = L.marker([initialLat, initialLng]).addTo(map);
+                        }
+                    }
+                }
+
+                function updateAddressMap(lat, lng) {
+                    if (!map || !lat || !lng) return;
+
+                    const coordinates = [parseFloat(lat), parseFloat(lng)];
+
+                    // Remove existing marker if any
+                    if (marker) {
+                        map.removeLayer(marker);
+                    }
+
+                    // Add new marker
+                    marker = L.marker(coordinates).addTo(map);
+
+                    // Center map on new coordinates
+                    map.setView(coordinates, 15);
+                }
+
+                function clearAddressMap() {
+                    if (marker && map) {
+                        map.removeLayer(marker);
+                        marker = null;
+                    }
+                }
+
                 // Populate on page load
                 populateAddressForm();
                 // Set initial address ID
@@ -338,33 +416,22 @@
                         document.getElementById('latitude').textContent = '';
                         document.getElementById('longitude').textContent = '';
                         document.getElementById('zip').textContent = '';
+
+                        // Clear map
+                        clearAddressMap();
+
                         // Clear address ID input
                         document.getElementById('addressIdInput').value = '';
                     } else {
                         // Populate form fields with selected address
-                        document.getElementById('firstName').textContent = selectedOption.dataset
-                            .firstName || '';
-                        // document.getElementById('lastName').value = selectedOption.dataset.lastName || '';
-                        document.getElementById('address').textContent = selectedOption.dataset.address ||
-                            '';
-                        document.getElementById('city').textContent = selectedOption.dataset.city || '';
-                        document.getElementById('state').textContent = selectedOption.dataset.state || '';
-                        document.getElementById('zip').textContent = selectedOption.dataset.postcode || '';
-                        document.getElementById('phone').textContent = selectedOption.dataset.phone || '';
-                        document.getElementById('latitude').textContent = selectedOption.dataset.latitude ||
-                            '';
-                        document.getElementById('longitude').textContent = selectedOption.dataset
-                            .longitude || '';
-                        document.getElementById('zip').textContent = selectedOption.dataset.postcode || '';
+                        populateAddressForm();
                         // Update address ID input
                         document.getElementById('addressIdInput').value = this.value;
-
-                        // Update order summary with postcode
-                        if (selectedOption.dataset.postcode) {
-                            updateOrderSummaryWithShipping();
-                        }
                     }
                 });
+
+                // Initialize map on page load
+                initializeMap();
             }
 
             // Auto-update order summary when postcode changes
@@ -482,7 +549,7 @@
             }
 
             function showShippingCost(cost, isFree = false) {
-                
+
             }
 
             function validateDeliveryForm() {
diff --git a/resources/views/components/grocery/header-category-dropdown.blade.php b/resources/views/components/grocery/header-category-dropdown.blade.php
index d58bfd7..57d2a45 100644
--- a/resources/views/components/grocery/header-category-dropdown.blade.php
+++ b/resources/views/components/grocery/header-category-dropdown.blade.php
@@ -2,13 +2,13 @@
     <button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill" data-bs-toggle="dropdown"
         aria-haspopup="true" aria-expanded="false">
         <i class="ci-grid fs-lg me-2 ms-n1"></i>
-        Categories
+        {{ __('navbar.categories') }}
         <i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
     </button>
     <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
         <div class="d-flex gap-4">
             <div style="min-width: 170px">
-                <div class="h6">Kategori</div>
+                <div class="h6">{{ __('navbar.categories') }}</div>
                 <ul class="nav flex-column gap-2 mt-n2">
 
                     @foreach ($categories as $category)
@@ -24,7 +24,7 @@
 
             </div>
             <div style="min-width: 170px">
-                <div class="h6">Gender</div>
+                <div class="h6">{{ __('navbar.gender') }}</div>
                 <ul class="nav flex-column gap-2 mt-n2">
                     @foreach ($genders as $gender)
                         <li class="d-flex w-100 pt-1">
diff --git a/resources/views/components/layout/header-grocery.blade.php b/resources/views/components/layout/header-grocery.blade.php
index 136283b..ac808ad 100644
--- a/resources/views/components/layout/header-grocery.blade.php
+++ b/resources/views/components/layout/header-grocery.blade.php
@@ -57,9 +57,9 @@
 
             <div class="nav me-4 me-xxl-5 d-none d-xl-block">
                 <a class="nav-link flex-column align-items-start animate-underline p-0" href="{{ route('addresses') }}">
-                    <div class="h6 fs-sm mb-0">Delivery</div>
+                    <div class="h6 fs-sm mb-0">{{ __('navbar.delivery') }}</div>
                     <div class="d-flex align-items-center fs-sm fw-normal text-body">
-                        <span class="animate-target text-nowrap">{{ auth()->user()->primary_address->label ?? 'Set your address' }}</span>
+                        <span class="animate-target text-nowrap">{{ auth()->user()->primary_address->label ?? __('navbar.set_your_address') }}</span>
                         <i class="ci-chevron-down fs-base ms-1"></i>
                     </div>
                 </a>
diff --git a/resources/views/shop/product-fashion.blade.php b/resources/views/shop/product-fashion.blade.php
index 7d15262..b0e7aa3 100644
--- a/resources/views/shop/product-fashion.blade.php
+++ b/resources/views/shop/product-fashion.blade.php
@@ -99,15 +99,12 @@
                             <div class=" flex-1">
                                 <h1 class="h3">{{ $product->name }}</h1>
                             </div>
-                            
+
 
                             {{-- wishlist/love button --}}
-                            <button type="button" 
-                                    class="btn btn-outline-danger gap-2" 
-                                    style="height: 50px;"
-                                    id="wishlist-btn"
-                                    data-item-id="{{ $product->id }}"
-                                    data-is-wishlist="{{ $product->isWishlist() ? 'true' : 'false' }}">
+                            <button type="button" class="btn btn-outline-danger gap-2" style="height: 50px;"
+                                id="wishlist-btn" data-item-id="{{ $product->id }}"
+                                data-is-wishlist="{{ $product->isWishlist() ? 'true' : 'false' }}">
                                 <i class="{{ $product->isWishlist() == true ? 'ci-heart-filled' : 'ci-heart' }}"></i>
                             </button>
                         </div>
@@ -118,12 +115,14 @@
                                 class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
                                 style="font-size:10pt;">{{ $product->category->name }}</a>
 
-                            <a href="{{ route('product.index', ['filter[brand_id]' => $product->brand->id]) }}"
-                                class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
-                                style="font-size:10pt;">{{ $product->brand->name }}</a>
+                            @if ($product->brand?->id != null)
+                                <a href="{{ route('product.index', ['filter[brand_id]' => $product->brand->id]) }}"
+                                    class="text-decoration-none text-body-emphasis animate-underline text-xs border border-secondary rounded-pill px-2 py-1"
+                                    style="font-size:10pt;">{{ $product->brand->name }}</a>
+                            @endif
 
-                        
-                        </div>   
+
+                        </div>
 
                         <!-- Description -->
                         <p class="fs-sm mb-0">{!! nl2br(Str::limit($product->description, 500)) !!}</p>
@@ -209,8 +208,9 @@
                         </div> --}}
 
                         <!-- Count input + Add to cart button -->
-                        <x-shop.add-to-cart :item_reference_id="$product->variants->first()->id" />
-
+                        @if ($product->variants->first()->reference)
+                            <x-shop.add-to-cart :item_reference_id="$product->variants->first()->reference->id" />
+                        @endif
                         <!-- Info list -->
                         {{-- <ul class="list-unstyled gap-3 pb-3 pb-lg-4 mb-3">
                             <li class="d-flex flex-wrap fs-sm">
@@ -1061,14 +1061,14 @@
                         discountSpan.style.display = 'none';
                     }
                     document.querySelector('.product-main-image').src = image;
-                    document.querySelector('.variantOption').textContent = labelText;
+                    // document.querySelector('.variantOption').textContent = labelText;
 
                     // Update AddToCart component with new variant ID
-                    const addToCartBtn = document.querySelector('[data-item-id]');
+                    const addToCartBtn = document.querySelector('[data-item-reference-id]');
                     if (addToCartBtn) {
                         console.log(this.value);
                         var item_id = this.value;
-                        addToCartBtn.setAttribute('data-item-id', item_id);
+                        addToCartBtn.setAttribute('data-item-reference-id', item_id);
                     }
                 });
             });
@@ -1088,95 +1088,100 @@
                     const isWishlist = this.getAttribute('data-is-wishlist') === 'true';
                     const icon = this.querySelector('i');
                     const text = this.querySelector('span');
-                    
+
                     // Get CSRF token
-                    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
-                    
+                    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute(
+                        'content');
+
                     if (isWishlist) {
                         // Remove from wishlist
                         fetch('/account/wishlist/' + itemId, {
-                            method: 'DELETE',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': token,
-                                'X-Requested-With': 'XMLHttpRequest'
-                            }
-                        })
-                        .then(response => response.json())
-                        .then(data => {
-                            if (data.success) {
-                                // Update button state
-                                this.setAttribute('data-is-wishlist', 'false');
-                                icon.className = 'ci-heart';
-                                text.textContent = 'Add to Wishlist';
-                                
-                                // Show success message
-                                const successAlert = document.createElement('div');
-                                successAlert.className = 'alert alert-success alert-dismissible fade show position-fixed';
-                                successAlert.style.css = 'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
-                                successAlert.innerHTML = `
+                                method: 'DELETE',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': token,
+                                    'X-Requested-With': 'XMLHttpRequest'
+                                }
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    // Update button state
+                                    this.setAttribute('data-is-wishlist', 'false');
+                                    icon.className = 'ci-heart';
+                                    text.textContent = 'Add to Wishlist';
+
+                                    // Show success message
+                                    const successAlert = document.createElement('div');
+                                    successAlert.className =
+                                        'alert alert-success alert-dismissible fade show position-fixed';
+                                    successAlert.style.css =
+                                        'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
+                                    successAlert.innerHTML = `
                                     <button type="button" class="btn-close" data-bs-dismiss="alert">&times;</button>
                                     Item removed from wishlist!
                                 `;
-                                document.body.appendChild(successAlert);
-                                
-                                // Auto-hide after 3 seconds
-                                setTimeout(() => {
-                                    if (successAlert.parentNode) {
-                                        successAlert.parentNode.removeChild(successAlert);
-                                    }
-                                }, 3000);
-                            } else {
-                                console.error('Failed to remove from wishlist:', data.message);
-                            }
-                        })
-                        .catch(error => {
-                            console.error('Error removing from wishlist:', error);
-                        });
+                                    document.body.appendChild(successAlert);
+
+                                    // Auto-hide after 3 seconds
+                                    setTimeout(() => {
+                                        if (successAlert.parentNode) {
+                                            successAlert.parentNode.removeChild(successAlert);
+                                        }
+                                    }, 3000);
+                                } else {
+                                    console.error('Failed to remove from wishlist:', data.message);
+                                }
+                            })
+                            .catch(error => {
+                                console.error('Error removing from wishlist:', error);
+                            });
                     } else {
                         // Add to wishlist
                         fetch('/account/wishlist', {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRF-TOKEN': token,
-                                'X-Requested-With': 'XMLHttpRequest'
-                            },
-                            body: JSON.stringify({
-                                item_id: itemId
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'X-CSRF-TOKEN': token,
+                                    'X-Requested-With': 'XMLHttpRequest'
+                                },
+                                body: JSON.stringify({
+                                    item_id: itemId
+                                })
                             })
-                        })
-                        .then(response => response.json())
-                        .then(data => {
-                            if (data.success) {
-                                // Update button state
-                                this.setAttribute('data-is-wishlist', 'true');
-                                icon.className = 'ci-heart-filled';
-                                text.textContent = 'In Wishlist';
-                                
-                                // Show success message
-                                const successAlert = document.createElement('div');
-                                successAlert.className = 'alert alert-success alert-dismissible fade show position-fixed';
-                                successAlert.style.css = 'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
-                                successAlert.innerHTML = `
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    // Update button state
+                                    this.setAttribute('data-is-wishlist', 'true');
+                                    icon.className = 'ci-heart-filled';
+                                    text.textContent = 'In Wishlist';
+
+                                    // Show success message
+                                    const successAlert = document.createElement('div');
+                                    successAlert.className =
+                                        'alert alert-success alert-dismissible fade show position-fixed';
+                                    successAlert.style.css =
+                                        'top: 20px; right: 20px; z-index: 9999; max-width: 300px;';
+                                    successAlert.innerHTML = `
                                     <button type="button" class="btn-close" data-bs-dismiss="alert">&times;</button>
                                     Item added to wishlist!
                                 `;
-                                document.body.appendChild(successAlert);
-                                
-                                // Auto-hide after 3 seconds
-                                setTimeout(() => {
-                                    if (successAlert.parentNode) {
-                                        successAlert.parentNode.removeChild(successAlert);
-                                    }
-                                }, 3000);
-                            } else {
-                                console.error('Failed to add to wishlist:', data.message);
-                            }
-                        })
-                        .catch(error => {
-                            console.error('Error adding to wishlist:', error);
-                        });
+                                    document.body.appendChild(successAlert);
+
+                                    // Auto-hide after 3 seconds
+                                    setTimeout(() => {
+                                        if (successAlert.parentNode) {
+                                            successAlert.parentNode.removeChild(successAlert);
+                                        }
+                                    }, 3000);
+                                } else {
+                                    console.error('Failed to add to wishlist:', data.message);
+                                }
+                            })
+                            .catch(error => {
+                                console.error('Error adding to wishlist:', error);
+                            });
                     }
                 });
             }