/**
 * Rongini Premium Animation System (JavaScript)
 */

document.addEventListener('DOMContentLoaded', () => {

    // 1. Scroll Reveal (IntersectionObserver)
    const revealElements = document.querySelectorAll('.scroll-reveal');
    
    if (revealElements.length > 0) {
        const revealOptions = {
            threshold: 0.1, // Trigger when 10% visible
            rootMargin: "0px 0px -50px 0px" // Trigger slightly before it hits the bottom
        };

        const revealObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                    // Unobserve after revealing to prevent repeating animation
                    observer.unobserve(entry.target);
                }
            });
        }, revealOptions);

        revealElements.forEach(el => {
            revealObserver.observe(el);
        });
    }

    // 2. Global Setup
    setupWishlistMicroInteractions();
});

/**
 * Toast Notification System
 * Replaces native alert() with a premium floating toast.
 * 
 * @param {string} message - The message to display
 * @param {string} type - 'success', 'error', or 'info'
 */
window.showToast = function(message, type = 'success') {
    let container = document.getElementById('toast-container');
    if (!container) {
        container = document.createElement('div');
        container.id = 'toast-container';
        document.body.appendChild(container);
    }

    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;

    let icon = 'fa-info-circle';
    if (type === 'success') icon = 'fa-check-circle';
    if (type === 'error') icon = 'fa-exclamation-circle';

    toast.innerHTML = `<i class="fas ${icon}"></i> <span>${message}</span>`;
    
    container.appendChild(toast);

    // Trigger reflow for transition
    void toast.offsetWidth;
    toast.classList.add('toast-show');

    // Remove after 3 seconds
    setTimeout(() => {
        toast.classList.remove('toast-show');
        toast.classList.add('toast-hide');
        
        // Wait for CSS transition to finish before removing from DOM
        setTimeout(() => {
            if(toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 300); // matches --motion-normal
    }, 3000);
};

/**
 * Wishlist Heart Micro-Interaction
 * Attaches pulse animation to all wishlist buttons
 */
function setupWishlistMicroInteractions() {
    const wishlistBtns = document.querySelectorAll('.wishlist-btn');
    
    wishlistBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Toggle state
            const isCurrentlyActive = this.classList.contains('active');
            
            if (isCurrentlyActive) {
                this.classList.remove('active');
                this.innerHTML = '<i class="far fa-heart"></i>';
                showToast('Removed from wishlist', 'info');
            } else {
                // Add active class (triggers CSS pop animation)
                this.classList.add('active');
                this.innerHTML = '<i class="fas fa-heart"></i>';
                showToast('Added to wishlist', 'success');
            }
            
            // Note: In a real implementation, you would also make an AJAX call here 
            // to update the backend database.
        });
    });
}

<!-- Hero Section -->
<link rel="stylesheet" href="https://rongini.shop/assets/css/editorial-slider.css">
    <div class="editorial-slider-wrapper">
        <div class="editorial-slider" id="homeEditorialSlider">
                        <div class="ed-slide active" 
                 style="background-color: #ffffff;"
                 data-autoplay="1" 
                 data-interval="5000">
                 
                                    <div class="ed-bg-image" style="background-image: url('https://rongini.shop/uploads/banners/1788541962_6a9afc0ae3580_Screenshot-2026-09-04-230259.jpg');"></div>
                                
                                
                
                <div class="ed-slide-inner ed-layout-image-right">
                    
                    <div class="ed-content-area ed-align-left">
                                                    <div class="ed-label animate-fade-in delay-100" style="
                                color: #333333;
                                font-size: 14px;
                            ">Combo Offer</div>
                                                
                                                    <h1 class="ed-title animate-fade-up delay-200" style="
                                color: #000000;
                                font-weight: 900;
                            ">limited time offer</h1>
                                                
                                                
                                                    <a href="https://rongini.shop/shop" class="ed-cta animate-fade-up delay-400" style="
                                background-color: #000000;
                            ">shop now</a>
                                            </div>

                                            <div class="ed-image-area">
                            <img src="https://rongini.shop/uploads/banners/1788542045_6a9afc5d8e4b3_banner-img-4.jpg" 
                                 class="animate-slide-up">
                        </div>
                    
                </div>
                
            </div>
                        
                        
        </div>
    </div>
<script src="https://rongini.shop/assets/js/editorial-slider.js"></script>

<!-- Categories -->
<section class="section scroll-reveal" style="overflow-x: hidden;">
    <div class="container">
        <h2 class="section-title">Shop by Category</h2>
        <div class="category-scroll-wrapper" style="display: flex; gap: clamp(1rem, 3vw, 2rem); overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; padding-left: 1rem; padding-right: 1rem; margin-left: -1rem; margin-right: -1rem; -webkit-overflow-scrolling: touch;">
                        <a href="https://rongini.shop/shop/category/কম্বো" class="category-card" style="flex: 0 0 auto; scroll-snap-align: start;">
                <div class="category-image">
                    <i class="fas fa-th-large"></i>
                </div>
                <h3>কম্বো</h3>
            </a>
                        <a href="https://rongini.shop/shop/category/jewellary" class="category-card" style="flex: 0 0 auto; scroll-snap-align: start;">
                <div class="category-image">
                    <i class="fas fa-th-large"></i>
                </div>
                <h3>Jewellary</h3>
            </a>
                        <a href="https://rongini.shop/shop/category/💄-cosmetics" class="category-card" style="flex: 0 0 auto; scroll-snap-align: start;">
                <div class="category-image">
                    <i class="fas fa-th-large"></i>
                </div>
                <h3>💄 Cosmetics</h3>
            </a>
                        <a href="https://rongini.shop/shop/category/হাতের-চুরি" class="category-card" style="flex: 0 0 auto; scroll-snap-align: start;">
                <div class="category-image">
                    <i class="fas fa-th-large"></i>
                </div>
                <h3>হাতের চুরি</h3>
            </a>
                    </div>
        <style>
            .category-scroll-wrapper::-webkit-scrollbar { display: none; }
        </style>
    </div>
</section>

<!-- New Arrivals -->
<section class="section scroll-reveal" style="background-color: var(--secondary);">
    <div class="container">
        <h2 class="section-title">New Arrivals</h2>
        <p class="section-subtitle">Discover the latest additions to Rongini</p>
        <div class="grid grid-cols-4">
            <div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/studend-combo-black-1788998371">
            <img src="https://rongini.shop/uploads/products/1789493108_0_2066.jpg" alt="Studend Combo Black" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-21%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/17" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: COMBO-003</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/studend-combo-black-1788998371">Studend Combo Black</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳950.00</span>
                <span class="original-price">৳1,200.00</span>
                    </div>
    </div>
</div>
<div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/ঘুঙুর-কাশ্মীরি-মিক্সড-1788708423">
            <img src="https://rongini.shop/uploads/products/1789493148_0_939.jpg" alt="ঘুঙুর কাশ্মীরি মিক্সড" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-30%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/16" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: JWR-BRD</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/ঘুঙুর-কাশ্মীরি-মিক্সড-1788708423">ঘুঙুর কাশ্মীরি মিক্সড</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳350.00</span>
                <span class="original-price">৳499.00</span>
                    </div>
    </div>
</div>
<div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/এক্সক্লুসিভ-স্টোন-ও-মুক্তার-কানের-দুল-এবং-মাং-টিক্কা-সেট-(সাহারা-চেইন-সহ)-1786952617">
            <img src="https://rongini.shop/uploads/products/1786952618_0_14583.jpg" alt="এক্সক্লুসিভ স্টোন ও মুক্তার কানের দুল এবং মাং টিক্কা সেট (সাহারা চেইন সহ)" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-20%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/15" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: JWR-BAD</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/এক্সক্লুসিভ-স্টোন-ও-মুক্তার-কানের-দুল-এবং-মাং-টিক্কা-সেট-(সাহারা-চেইন-সহ)-1786952617">এক্সক্লুসিভ স্টোন ও মুক্তার কানের দুল এবং মাং টিক্কা সেট (সাহারা চেইন সহ)</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳200.00</span>
                <span class="original-price">৳250.00</span>
                    </div>
    </div>
</div>
<div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/রয়্যাল-ম্যাজেন্টা-জামদানি-শাড়ি-1786780562">
            <img src="https://rongini.shop/uploads/products/1789493391_0_1021.jpg" alt="রয়্যাল ম্যাজেন্টা জামদানি শাড়ি" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-7%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/14" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: SHR-UGD</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/রয়্যাল-ম্যাজেন্টা-জামদানি-শাড়ি-1786780562">রয়্যাল ম্যাজেন্টা জামদানি শাড়ি</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳1,250.00</span>
                <span class="original-price">৳1,350.00</span>
                    </div>
    </div>
</div>
        </div>
        <div style="text-align: center; margin-top: 3rem;">
            <a href="https://rongini.shop/shop" class="btn btn-outline">VIEW ALL →</a>
        </div>
    </div>
</section>

<!-- Premium Promotional Banner -->
<section class="section scroll-reveal">
    <div class="container">
        <div class="promo-banner" style="display: flex; flex-wrap: wrap; background-color: var(--secondary); border-radius: 8px; overflow: hidden; align-items: center;">
            <div class="promo-content" style="flex: 1; padding: clamp(2rem, 5vw, 4rem); min-width: 300px;">
                <h2 class="bangla-text" style="font-size: clamp(1.8rem, 5vw, 2.5rem); color: var(--primary); margin-bottom: 1rem;">অপরূপ আভিজাত্য</h2>
                <p class="bangla-text" style="font-size: clamp(0.95rem, 3vw, 1.1rem); margin-bottom: 2rem; color: var(--muted);">আপনার সাজে স্নিগ্ধতা ও আভিজাত্যের ছোঁয়া নিয়ে আসতে আমাদের শাড়ি ও অনুষঙ্গের বিশেষ কালেকশন থেকে আজই বেছে নিন আপনার পছন্দেরটি।</p>
                <a href="https://rongini.shop/shop" class="btn btn-primary">EXPLORE COLLECTION →</a>
            </div>
            <div class="promo-image" style="flex: 1; min-width: 300px; min-height: 400px; background-image: url('https://rongini.shop/assets/images/promo-1.jpg'); background-size: cover; background-position: center;">
            </div>
        </div>
    </div>
</section>

<!-- Best Sellers -->
<section class="section">
    <div class="container">
        <h2 class="section-title">Best Sellers</h2>
        <p class="section-subtitle">Loved by our customers</p>
        <div class="grid grid-cols-4">
            <div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/প্রিমিয়াম-অক্সিডাইজড-হ্যান্ডপেইন্টেড-দুল-–-শাড়ি-ও-ফিউশন-লুকের-পারফেক্ট-ম্যাচ-1786730070">
            <img src="https://rongini.shop/uploads/products/1786730070_0_file_00000000ef2c7208acb3ad1d084f908d(1).png" alt="প্রিমিয়াম অক্সিডাইজড হ্যান্ডপেইন্টেড দুল – শাড়ি ও ফিউশন লুকের পারফেক্ট ম্যাচ" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-20%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/9" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: JWR-001</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/প্রিমিয়াম-অক্সিডাইজড-হ্যান্ডপেইন্টেড-দুল-–-শাড়ি-ও-ফিউশন-লুকের-পারফেক্ট-ম্যাচ-1786730070">প্রিমিয়াম অক্সিডাইজড হ্যান্ডপেইন্টেড দুল – শাড়ি ও ফিউশন লুকের পারফেক্ট ম্যাচ</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳399.00</span>
                <span class="original-price">৳500.00</span>
                    </div>
    </div>
</div>
<div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/এক্সক্লুসিভ-রেড-ভেলভেট-ও-কুন্দন-কাজের-গর্জিয়াস-চুড়ি-সেট-1786759383">
            <img src="https://rongini.shop/uploads/products/1786759383_0_14273.png" alt="এক্সক্লুসিভ রেড ভেলভেট ও কুন্দন কাজের গর্জিয়াস চুড়ি সেট" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-20%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/10" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: JWR-002</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/এক্সক্লুসিভ-রেড-ভেলভেট-ও-কুন্দন-কাজের-গর্জিয়াস-চুড়ি-সেট-1786759383">এক্সক্লুসিভ রেড ভেলভেট ও কুন্দন কাজের গর্জিয়াস চুড়ি সেট</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳799.00</span>
                <span class="original-price">৳999.00</span>
                    </div>
    </div>
</div>
<div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/রাজকীয়-লাল-সোনালি-কুন্দন-চুড়ি-সেট-1786778318">
            <img src="https://rongini.shop/uploads/products/1789493893_0_666011430_122125029183110832_5010673783423500739_n.jpg" alt="রাজকীয় লাল-সোনালি কুন্দন চুড়ি সেট" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-13%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/11" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: JWR-KDD</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/রাজকীয়-লাল-সোনালি-কুন্দন-চুড়ি-সেট-1786778318">রাজকীয় লাল-সোনালি কুন্দন চুড়ি সেট</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳650.00</span>
                <span class="original-price">৳750.00</span>
                    </div>
    </div>
</div>
<div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/রয়্যাল-ব্লু-হাফ-সিল্ক-শাড়ি-1786780221">
            <img src="https://rongini.shop/uploads/products/1786780221_0_14304.jpg" alt="রয়্যাল ব্লু হাফ সিল্ক শাড়ি" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-7%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/12" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: SHR-KDD</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/রয়্যাল-ব্লু-হাফ-সিল্ক-শাড়ি-1786780221">রয়্যাল ব্লু হাফ সিল্ক শাড়ি</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳650.00</span>
                <span class="original-price">৳700.00</span>
                    </div>
    </div>
</div>
        </div>
    </div>
</section>

<!-- Shop by Collection -->
<section class="section" style="background-color: var(--secondary);">
    <div class="container">
        <h2 class="section-title">Shop By Collection</h2>
        <div class="grid grid-cols-2" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
            <div class="collection-card" style="position: relative; aspect-ratio: unset; min-height: clamp(350px, 60vh, 450px); overflow: hidden; border-radius: 4px; display: flex; align-items: flex-end; padding: 2rem;">
                <img src="https://rongini.shop/assets/images/banner-img-2.jpg" alt="Festive Edit" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s ease;">
                <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 1;"></div>
                <div class="collection-content" style="position: relative; z-index: 2; color: var(--white);">
                    <h3 style="color: var(--white); font-size: 1.5rem;">FESTIVE EDIT</h3>
                    <p style="margin-bottom: 1rem; color: #eee;">Elegant pieces for unforgettable moments.</p>
                    <a href="https://rongini.shop/shop" class="btn btn-outline" style="color: var(--white); border-color: var(--white);">EXPLORE →</a>
                </div>
            </div>
            <div class="collection-card" style="position: relative; aspect-ratio: unset; min-height: clamp(350px, 60vh, 450px); overflow: hidden; border-radius: 4px; display: flex; align-items: flex-end; padding: 2rem;">
                <img src="https://rongini.shop/assets/images/promo-1.jpg" alt="Everyday Elegance" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s ease;">
                <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 1;"></div>
                <div class="collection-content" style="position: relative; z-index: 2; color: var(--white);">
                    <h3 style="color: var(--white); font-size: 1.5rem;">EVERYDAY ELEGANCE</h3>
                    <p style="margin-bottom: 1rem; color: #eee;">Minimalist fashion for your daily grace.</p>
                    <a href="https://rongini.shop/shop" class="btn btn-outline" style="color: var(--white); border-color: var(--white);">EXPLORE →</a>
                </div>
            </div>
            <style>
                .collection-card:hover img { transform: scale(1.05); }
                .collection-card:hover .btn-outline { background: var(--white); color: var(--dark) !important; }
            </style>
        </div>
    </div>
</section>

<!-- Rongini Combo Collection -->
<section class="section">
    <div class="container">
        <h2 class="section-title">Rongini Combo Collection</h2>
        <p class="section-subtitle">Curated matching sets for your special occasions</p>
        <div class="grid grid-cols-3">
            <div class="product-card">
    <div class="product-image">
        <a href="https://rongini.shop/shop/show/studend-combo-black-1788998371">
            <img src="https://rongini.shop/uploads/products/1789493108_0_2066.jpg" alt="Studend Combo Black" loading="lazy">
        </a>
        <button class="wishlist-btn" title="Add to Wishlist">
            <i class="far fa-heart"></i>
        </button>
                                <div class="discount-badge">-21%</div>
                <div class="quick-action">
            <a href="https://rongini.shop/cart/add/17" class="btn btn-outline btn-full" style="background-color: var(--white);">Add to Cart</a>
        </div>
    </div>
    <div class="product-info">
                <div class="product-sku">SKU: COMBO-003</div>
                <h3 class="product-title"><a href="https://rongini.shop/shop/show/studend-combo-black-1788998371">Studend Combo Black</a></h3>
        <div class="product-price">
                            <span class="discount-price">৳950.00</span>
                <span class="original-price">৳1,200.00</span>
                    </div>
    </div>
</div>
        </div>
        <div style="text-align: center; margin-top: 3rem;">
            <a href="https://rongini.shop/shop/combo" class="btn btn-outline">VIEW ALL COMBOS →</a>
        </div>
    </div>
</section>

<!-- Special Offer -->
<section class="section" style="background-color: var(--dark); color: var(--white); padding: clamp(3rem, 6vw, 5rem) 0;">
    <div class="container text-center">
        <h2 style="color: var(--gold); margin-bottom: 1rem; font-size: clamp(1.8rem, 5vw, 2.5rem);">LIMITED TIME OFFER</h2>
        <p style="color: #ccc; max-width: 600px; margin: 0 auto 2rem; font-size: clamp(0.95rem, 3vw, 1.1rem);">Your signature look, now more special. Enjoy exclusive discounts on our premium range.</p>
        <a href="https://rongini.shop/shop/offers" class="btn" style="background-color: var(--gold); color: var(--dark); padding: 1rem 2.5rem; font-weight: 600;">SHOP THE OFFER →</a>
    </div>
</section>

<!-- Trust Section (Why Choose Rongini) -->
<section class="section trust-section" style="background-color: var(--secondary);">
    <div class="container">
        <div class="grid grid-cols-4" style="grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1.5rem;">
            <div class="trust-item" style="text-align: center;">
                <i class="fas fa-gem" style="font-size: 2rem; color: var(--primary); margin-bottom: 1rem;"></i>
                <h4 style="font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase;">Quality Products</h4>
                <p style="color: var(--muted); font-size: 0.9rem;">Carefully selected pieces.</p>
            </div>
            <div class="trust-item" style="text-align: center;">
                <i class="fas fa-hand-holding-usd" style="font-size: 2rem; color: var(--primary); margin-bottom: 1rem;"></i>
                <h4 style="font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase;">Cash on Delivery</h4>
                <p style="color: var(--muted); font-size: 0.9rem;">Available everywhere.</p>
            </div>
            <div class="trust-item" style="text-align: center;">
                <i class="fas fa-shield-alt" style="font-size: 2rem; color: var(--primary); margin-bottom: 1rem;"></i>
                <h4 style="font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase;">Secure Shopping</h4>
                <p style="color: var(--muted); font-size: 0.9rem;">Your data is protected.</p>
            </div>
            <div class="trust-item" style="text-align: center;">
                <i class="fas fa-truck" style="font-size: 2rem; color: var(--primary); margin-bottom: 1rem;"></i>
                <h4 style="font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase;">Fast Delivery</h4>
                <p style="color: var(--muted); font-size: 0.9rem;">Nationwide reliable shipping.</p>
            </div>
        </div>
    </div>
</section>

<!-- About Rongini -->
<section class="section">
    <div class="container" style="max-width: 800px; text-align: center;">
        <h2 class="section-title">ABOUT RONGINI</h2>
        <p style="color: var(--muted); font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.8;">
            Rongini brings you a signature collection of elegant sarees and exquisite jewelry, curated for women who desire sophisticated style and impeccable quality. With a focus on fine craftsmanship and timeless designs, our pieces are made to celebrate you.
        </p>
        <a href="https://rongini.shop/page/about" class="btn btn-outline">LEARN MORE</a>
    </div>
</section>

<!-- Signature Style CTA -->
<section class="section" style="background-color: var(--secondary); text-align: center;">
    <div class="container">
        <h2 style="font-family: var(--font-serif); font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom: 1rem; color: var(--dark);">FIND YOUR SIGNATURE STYLE</h2>
        <p style="color: var(--muted); margin-bottom: 2rem; font-size: clamp(0.95rem, 3vw, 1.1rem);">Explore the finest collection today.</p>
        <a href="https://rongini.shop/shop" class="btn btn-primary" style="padding: clamp(0.75rem, 2vw, 1rem) clamp(2rem, 5vw, 3rem);">SHOP NOW</a>
    </div>
</section>
    </main>

    <footer class="footer" style="background-color: var(--dark); color: var(--white); padding: 4rem 0 2rem; margin-top: 4rem;">
        <div class="container">
            <div class="grid grid-cols-4" style="gap: 2rem;">
                <div>
                    <h3 style="color: var(--gold); margin-bottom: 1rem;">Rongini</h3>
                    <p style="color: #ccc; font-size: 0.9rem;">Your signature style. Premium sarees, jewelry, and fashion for every occasion.</p>
                </div>
                <div>
                    <h4 style="color: var(--white); margin-bottom: 1rem;">Quick Links</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li><a href="https://rongini.shop/shop" style="color: #ccc; text-decoration: none;">Shop All</a></li>
                        <li><a href="https://rongini.shop/buildCombo" style="color: #ccc; text-decoration: none;">Build Combo</a></li>
                        <li><a href="https://rongini.shop/account/wishlist" style="color: #ccc; text-decoration: none;">Wishlist</a></li>
                    </ul>
                </div>
                <div>
                    <h4 style="color: var(--white); margin-bottom: 1rem;">Customer Service</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li><a href="#" style="color: #ccc; text-decoration: none;">Contact Us</a></li>
                        <li><a href="#" style="color: #ccc; text-decoration: none;">Shipping & Returns</a></li>
                        <li><a href="#" style="color: #ccc; text-decoration: none;">FAQ</a></li>
                    </ul>
                </div>
                <div>
                    <h4 style="color: var(--white); margin-bottom: 1rem;">Connect</h4>
                    <div style="display: flex; gap: 1rem;">
                        <a href="#" style="color: var(--white); font-size: 1.2rem;"><i class="fab fa-facebook"></i></a>
                        <a href="#" style="color: var(--white); font-size: 1.2rem;"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div style="border-top: 1px solid #333; margin-top: 2rem; padding-top: 2rem; text-align: center; color: #888; font-size: 0.85rem;">
                &copy; 2026 Rongini. All Rights Reserved.
            </div>
        </div>
    </footer>

    <!-- Spin Wheel Popup -->
    <div id="spinWheelPopup" class="spin-popup-overlay" style="display: none;">
        <div class="spin-popup-container">
            <button class="spin-close-btn">&times;</button>
            <div class="spin-popup-content">
                <h2>Spin to Win!</h2>
                <p>Try your luck and win exciting prizes!</p>
                
                <div class="spin-wheel-wrapper">
                    <canvas id="spinCanvas" width="300" height="300"></canvas>
                    <div class="spin-pointer"></div>
                </div>
                
                <div id="spinFormContainer">
                    <input type="text" id="spinName" placeholder="Your Name" required style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;">
                    <input type="tel" id="spinPhone" placeholder="Your Phone Number (e.g. +8801...)" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px;">
                    <button id="spinBtn" class="btn btn-primary" style="width: 100%;">SEND OTP</button>
                    <div id="recaptcha-container" style="margin-top: 10px;"></div>
                    <p id="spinError" style="color: red; display: none; margin-top: 10px; font-size: 0.9rem;"></p>
                </div>

                <div id="spinOtpContainer" style="display: none; padding-top: 10px;">
                    <p style="margin-bottom: 10px; font-size: 0.9rem;">We sent an SMS with a 6-digit code to your phone.</p>
                    <input type="text" id="spinOtpInput" placeholder="Enter 6-digit OTP" required style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-size: 1.2rem; letter-spacing: 2px;">
                    <button id="verifyOtpBtn" class="btn btn-primary" style="width: 100%;">VERIFY & SPIN</button>
                    <p id="otpError" style="color: red; display: none; margin-top: 10px; font-size: 0.9rem;"></p>
                </div>
                
                <div id="spinResultContainer" style="display: none; padding-top: 20px;">
                    <h3 id="spinResultTitle">Congratulations!</h3>
                    <p id="spinResultMessage" style="font-size: 1.1rem; font-weight: bold; margin: 15px 0; color: var(--primary);"></p>
                    <button class="btn btn-outline spin-close-btn-secondary" style="margin-top: 15px;">Continue Shopping</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Floating Cart Button -->
    <a href="https://rongini.shop/cart" id="floatingCartBtn" class="floating-cart-btn">
        <i class="fas fa-shopping-cart"></i>
                <span class="floating-cart-count">0</span>
    </a>

    <!-- Cart Slide-Up Modal -->
    <div id="cartModalOverlay" class="cart-modal-overlay">
        <div class="cart-modal-panel">
            <div class="cart-modal-header">
                <h4>Your Cart</h4>
                <button class="cart-modal-close">&times;</button>
            </div>
            <div id="cartModalBody" class="cart-modal-body">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>

    <!-- Scripts and Styles -->
    <link rel="stylesheet" href="https://rongini.shop/assets/css/ajax-cart.css?v=1789743443">
    <script src="https://rongini.shop/assets/js/ajax-cart.js?v=1789743443"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
    <script>
        const URL_ROOT = 'https://rongini.shop';
    </script>
    <script src="https://rongini.shop/assets/js/spin-wheel.js?v=1789743443"></script>
    <script src="https://rongini.shop/assets/js/animations.js?v=1789743443"></script>
</body>
</html>