// ... (Upar ka saara CSS aur PHP pehle jaisa hi hai, koi badlav nahi) ...

<header id="empireHeader">
    <div class="nav-top">
        <div class="nav-left">
            <a href="/"><img src="/img/my-logo.png" alt="Logo" class="nav-logo-img"></a>
        </div>
        <div class="nav-right">
            <div class="account-dropdown" onclick="openAccMenu()">
                <div class="nav-auth-link">
                    <span class="auth-bold" style="font-size: 13px;">Login / Register ▾</span>
                </div>
            </div>
            <a href="/cart.php" style="color:white; text-decoration:none; position:relative; font-size:20px;">
                <i class="fas fa-shopping-cart"></i>
                <span id="header-cart-count" style="position:absolute; top:-4px; right:-6px; background:var(--amzn-yellow); color:black; font-size:9px; font-weight:900; padding:1px 5px; border-radius:50%;">0</span>
            </a>
        </div>
    </div>

    <div class="nav-search-container">
        <form action="/search.php" method="GET" class="search-form">
            <input type="text" name="q" class="search-input" placeholder="Search Limkrt.com">
            <button type="submit" class="search-btn"><i class="fas fa-search"></i></button>
        </form>
    </div>

    <div class="nav-bottom-container">
        <div style="color:white; padding: 0 12px; cursor:pointer;" onclick="openSidebar()"><i class="fas fa-bars"></i></div>
        <div class="nav-bottom">
            <a href="/category.php?cat=fruit" class="cat-box">Fruit Plants</a>
            <a href="/category.php?cat=indoor" class="cat-box">Indoor</a>
            <a href="/category.php?cat=flower" class="cat-box">Flower</a>
            <a href="/category.php?cat=outdoor" class="cat-box">Outdoor</a>
            <a href="/category.php?cat=air-purifying" class="cat-box">Air Purifying</a>
            <a href="/category.php?cat=succulents" class="cat-box">Succulents</a>
            <a href="/category.php?cat=herbs" class="cat-box">Herbs</a>
        </div>
    </div>

    <div class="location-bar-wrapper">
        <div class="loc-clickable" onclick="getFullLiveLocation()">
            <i class="fas fa-map-marker-alt" id="locIcon" style="color:var(--amzn-yellow)"></i>
            <span class="loc-address" id="userLocation">Tap to get full live location</span>
        </div>
        <div class="delivery-tag" id="deliveryTag">⚡ 30 MIN DELIVERY</div>
    </div>
</header>

<script>
    // 🛡️ SURGICAL EDIT: Full Reverse Geocoding & Distance Logic
    async function getFullLiveLocation() {
        const locText = document.getElementById("userLocation");
        const locIcon = document.getElementById("locIcon");
        const dTag = document.getElementById("deliveryTag");

        // CP Office (Nursery Base)
        const baseLat = 28.6315; 
        const baseLon = 77.2167;

        if (navigator.geolocation) {
            locText.innerText = "Finding your address...";
            locIcon.classList.add("fa-spin");

            navigator.geolocation.getCurrentPosition(async (position) => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;

                try {
                    // 🌍 Get Full Address from API
                    const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lon}`);
                    const data = await response.json();
                    
                    // Extract Details
                    const road = data.address.road || "";
                    const suburb = data.address.suburb || data.address.neighbourhood || "";
                    const city = data.address.city || data.address.town || data.address.state || "";
                    const pincode = data.address.postcode || "";

                    const fullAddress = `${road} ${suburb}, ${city} ${pincode}`.trim();
                    locText.innerText = fullAddress;
                    locIcon.classList.remove("fa-spin");

                    // 📏 Calculate Distance for Delivery Tag
                    const R = 6371; 
                    const dLat = (lat - baseLat) * Math.PI / 180;
                    const dLon = (lon - baseLon) * Math.PI / 180;
                    const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(baseLat * Math.PI / 180) * Math.cos(lat * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2);
                    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
                    const distance = R * c;

                    if (distance <= 25) {
                        dTag.innerHTML = "⚡ 30 MIN DELIVERY";
                        dTag.style.backgroundColor = "var(--proper-green)";
                    } else {
                        dTag.innerHTML = "🚚 STANDARD DELIVERY (3-5 DAYS)";
                        dTag.style.backgroundColor = "#ff9900"; 
                    }

                } catch (error) {
                    locText.innerText = "Location detected!";
                    locIcon.classList.remove("fa-spin");
                }
            });
        }
    }

    // Smart Scroll Logic (Untouched)
    let lastScrollTop = 0;
    window.addEventListener("scroll", function() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const header = document.getElementById("empireHeader");
        if (scrollTop > lastScrollTop && scrollTop > 100) {
            header.classList.add("smart-hide");
        } else {
            header.classList.remove("smart-hide");
        }
        lastScrollTop = scrollTop;
    });

    function openAccMenu() { document.getElementById('accSidebar').classList.add('active'); document.getElementById('accOverlay').classList.add('active'); }
    function closeAccMenu() { document.getElementById('accSidebar').classList.remove('active'); document.getElementById('accOverlay').classList.remove('active'); }
</script>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>ZZ Plant in 5 Inch Live Plant Glass Ceramic Pot (Any Design,Colour) - Limkrt</title>
</head>

<style>
    :root { --lim-green: #0c831f; --amz-orange: #FFA41C; --amz-gold: #FFD814; --text-main: #111; --text-light: #565959; }
    body { background: #fff; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding-bottom: 120px; color: var(--text-main); overflow-x: hidden; }
    
    .p-container { max-width: 1400px; margin: 0 auto; padding: 15px; box-sizing: border-box; }
    .img-box { width: 100%; text-align: center; margin-bottom: 20px; position: relative; }
    .main-img { width: 100%; max-width: 450px; height: auto; border-radius: 4px; object-fit: contain; }
    
    .amz-badge { background: #CC0C39; color: #fff; padding: 4px 8px; font-size: 12px; font-weight: 700; border-radius: 2px; display: inline-block; margin-bottom: 10px; }
    
    .price-row { display: flex; align-items: baseline; gap: 10px; margin: 10px 0; }
    .disc-percent { color: #CC0C39; font-size: 28px; font-weight: 300; }
    .final-p { font-size: 28px; font-weight: 500; }
    .mrp-striked { color: var(--text-light); font-size: 14px; text-decoration: line-through; margin-bottom: 15px; }
    
    .section-title { font-size: 18px; font-weight: 700; margin: 20px 0 10px 0; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
    
    .feature-list { padding: 0; list-style: none; margin: 15px 0; }
    .feature-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 14px; line-height: 1.5; color: #333; }
    .feature-list li::before { content: "•"; position: absolute; left: 0; color: var(--lim-green); font-weight: bold; font-size: 20px; line-height: 14px; }
    
    .del-box { background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin: 20px 0; }
    .del-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 8px; }

    /* 🛡️ STICKY FOOTER */
    .sticky-foot { 
        position: fixed; bottom: 0; left: 0; right: 0; 
        background: #fff; display: grid; grid-template-columns: 1fr 1fr; 
        gap: 12px; padding: 12px 15px; 
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1); z-index: 999; 
    }
    .btn-amz { height: 50px; border-radius: 25px; border: 1px solid; font-weight: 700; cursor: pointer; font-size: 14px; }
    .gold { background: var(--amz-gold); border-color: #FCD200; }
    .orange { background: var(--amz-orange); border-color: #FF8F00; }

    .qty-wrap { 
        display: none; height: 50px; border-radius: 25px; 
        background: var(--amz-gold); border: 1px solid #FCD200; 
        align-items: center; justify-content: space-between; padding: 0 15px; 
    }
    .qty-btn-circ { border: none; background: none; font-size: 24px; font-weight: bold; width: 40px; cursor: pointer; }

    @media (min-width: 992px) { .p-container { display: flex; gap: 50px; } .img-box, .details-box { flex: 1; } }
</style>

<div class="p-container">
    <div class="img-box">
        <img src="https://www.urvann.com/s/6176774ef575bbd2b3331c8a/68a4157c5506412aa225f8f3/37-480x480.jpg" class="main-img">
    </div>
    
    <div class="details-box">
        <a href="index.php" style="color:#007185; text-decoration:none; font-size:13px;">Visit the Limkrt Store</a>
        <h1 style="font-size: 22px; font-weight: 500; margin: 10px 0; line-height: 1.3;">ZZ Plant in 5 Inch Live Plant Glass Ceramic Pot (Any Design,Colour)</h1>
        
        <div style="margin-bottom:10px;">
            <span style="color:#ffa41c; font-size:16px;">★★★★★</span>
            <span style="color:#007185; font-size:14px; margin-left:10px;">433 ratings | Search Results</span>
        </div>
        
        <div class="amz-badge">Limited time deal</div>
        
        <div class="price-row">
            <span class="disc-percent">-70%</span>
            <span class="final-p"><sup>₹</sup>479</span>
        </div>
        <div class="mrp-striked">M.R.P.: ₹1,619</div>
        
        <div class="del-box">
            <div class="del-row">🚚 <span style="color:var(--lim-green); font-weight:700;">FREE delivery</span> in 30 minutes</div>
            <div class="del-row">📍 Delivering to Delhi/NCR - Update location</div>
            <p style="color:#007600; font-size:15px; font-weight:700; margin:10px 0;">In stock</p>
        </div>
        
        <div class="section-title">About this item</div>
        <ul class="feature-list">
            <li><strong>Premium Quality:</strong> Freshly picked from our best nurseries.</li>
            <li><strong>Healthy Growth:</strong> Organic soil mix used for all plants.</li>
            <li><strong>Fast Shipping:</strong> 30-minute delivery guarantee.</li>
            <li><strong>Care Instructions:</strong> Easy to maintain indoor/outdoor.</li>
        </ul>
        
        <div class="section-title">Product Description</div>
        <p style="font-size: 14px; line-height: 1.6; color: #333;">This premium plant is nurtured to bring nature's beauty into your home.</p>
    </div>
</div>

<div class="sticky-foot">
    <div id="empire_action_21750">
        <button id="add_btn_21750" class="btn-amz gold" style="width:100%;" onclick="empireUpdate(21750, 1)">Add to Cart</button>
        <div id="qty_box_21750" class="qty-wrap">
            <button class="qty-btn-circ" onclick="empireUpdate(21750, -1)">−</button>
            <span id="qty_val_21750" style="font-weight:700; font-size:18px;">1</span>
            <button class="qty-btn-circ" onclick="empireUpdate(21750, 1)">+</button>
        </div>
    </div>
    <button class="btn-amz orange" onclick="empireBuyNow(21750)">Buy Now</button>
</div>

<script>
    const getCart = () => JSON.parse(localStorage.getItem('lim_cart')) || {};

    function refreshPageButtons() {
        const cart = getCart();
        const pid = "21750";
        const btn = document.getElementById('add_btn_' + pid);
        const box = document.getElementById('qty_box_' + pid);
        const val = document.getElementById('qty_val_' + pid);

        if (cart[pid]) {
            btn.style.display = 'none';
            box.style.display = 'flex';
            val.innerText = cart[pid].qty;
        } else {
            btn.style.display = 'block';
            box.style.display = 'none';
        }
        if (typeof refreshV3 === "function") { refreshV3(); }
    }

    function empireUpdate(id, delta) {
        let cart = getCart();
        const price = 479;
        const name = "ZZ Plant in 5 Inch Live Plant Glass Ceramic Pot (Any Design,Colour)";
        const img = "https://www.urvann.com/s/6176774ef575bbd2b3331c8a/68a4157c5506412aa225f8f3/37-480x480.jpg";

        if (!cart[id] && delta > 0) {
            cart[id] = { qty: 1, price: price, name: name, img: img };
        } else if (cart[id]) {
            cart[id].qty += delta;
            if (cart[id].qty < 1) delete cart[id];
        }

        localStorage.setItem('lim_cart', JSON.stringify(cart));
        refreshPageButtons();

        fetch('add_to_cart.php', {
            method: 'POST',
            body: new URLSearchParams({ product_id: id, qty: cart[id] ? cart[id].qty : 0, product_price: price, product_name: name, product_image: img })
        });
    }

    function empireBuyNow(id) {
        let cart = getCart();
        if(!cart[id]) empireUpdate(id, 1);
        setTimeout(() => { window.location.href = 'cart.php'; }, 100);
    }

    document.addEventListener('DOMContentLoaded', refreshPageButtons);
    window.addEventListener('storage', refreshPageButtons);
</script>

<footer class="limkrt-main-footer" style="background: #0b0f13; color: #999; padding: 25px 0 20px; font-family: 'Segoe UI', Arial, sans-serif; border-top: 1px solid #1f2937; margin-top: 30px; width: 100%;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 15px;">
        
        <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #1f2937; margin-bottom: 20px;">
            <div>
                <span style="display: block; font-size: 10px; text-transform: uppercase; color: #777;">Customer Care</span>
                <b style="color: #febd69; font-size: 18px;">+91 8382292992</b>
            </div>
            <div style="display: flex; gap: 15px; font-size: 20px; color: #fff; opacity: 0.5;">
                <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
            <div>
                <h4 style="color: #fff; font-size: 13px; margin: 0 0 10px 0; text-transform: uppercase;">Categories</h4>
                <div style="font-size: 12px; line-height: 2.2;">
                    <a href="category.php?cat=fruit" style="color: #999; text-decoration: none; display: block;">Fruit Plants</a>
                    <a href="category.php?cat=indoor" style="color: #999; text-decoration: none; display: block;">Indoor Plants</a>
                    <a href="category.php?cat=succulents" style="color: #999; text-decoration: none; display: block;">Succulents</a>
                </div>
            </div>
            <div>
                <h4 style="color: #fff; font-size: 13px; margin: 0 0 10px 0; text-transform: uppercase;">Information</h4>
                <div style="font-size: 12px; line-height: 2.2;">
                    <a href="about.php" style="color: #999; text-decoration: none; display: block;">About Limkrt</a>
                    <a href="contact.php" style="color: #999; text-decoration: none; display: block;">Contact Us</a>
                </div>
            </div>
        </div>

        <div style="margin-bottom: 20px; padding-top: 15px; border-top: 1px solid #1f2937;">
            <h4 style="color: #fff; font-size: 13px; margin: 0 0 8px 0; text-transform: uppercase;">Registered Office</h4>
            <p style="font-size: 12px; line-height: 1.5; color: #999; margin: 0;">Connaught Place, New Delhi, India 110001</p>
            <div style="margin-top: 15px; background: #1a222c; padding: 12px; border-radius: 8px; border-left: 4px solid #0c831f;">
                <span style="color: #fff; font-size: 11px; font-weight: 800; display: block;">⚡ 30 MIN DELIVERY AREA</span>
                <p style="font-size: 10px; margin: 4px 0 0 0; color: #aaa;">Delhi, Noida, Gurgaon & NCR Region</p>
            </div>
        </div>

        <div style="text-align: center; font-size: 10px; color: #555; padding-top: 10px; border-top: 1px solid #1f2937;">
            <p>© 2026 Limkrt.in | Manish Bhai</p>
        </div>
    </div>
</footer>

<div id="empire-v3-popup" onclick="window.location.href='cart.php'">
    <div class="v3-content-full">
        <div class="v3-info-main">
            <div style="position: relative;">
                <span style="font-size: 24px;">🛒</span>
                <span class="v3-badge-main">0</span>
            </div>
            <div>
                <div style="font-size: 19px; font-weight: 900; line-height: 1;">₹<span class="v3-amt-main">0</span></div>
                <div style="font-size: 8px; font-weight: 800; color: #febd69;">ITEMS ADDED</div>
            </div>
        </div>
        <div class="v3-btn-main">VIEW CART ❯</div>
    </div>

    <div class="v3-content-small">
        <span style="font-size: 16px;">🛒</span>
        <span style="font-size: 10px; font-weight: 900; margin-left: 4px;">VIEW</span>
    </div>
</div>

<style>
    #empire-v3-popup {
        position: fixed; 
        bottom: 30px; 
        left: 50%; transform: translateX(-50%);
        width: 92%; max-width: 420px; 
        background: #0c1c3c !important; color: #fff !important;
        padding: 12px 18px; border-radius: 15px; 
        display: none; align-items: center; justify-content: center;
        z-index: 999999; box-shadow: 0 12px 35px rgba(0,0,0,0.6); 
        border: 2px solid #fff; cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 🛡️ FINAL TWEAK: Buttons ke ekdam kareeb (75px) */
    body.is-details-page #empire-v3-popup {
        bottom: 75px !important; 
    }

    .v3-content-full { display: flex; width: 100%; align-items: center; justify-content: space-between; }
    .v3-info-main { display: flex; align-items: center; gap: 10px; }
    .v3-badge-main { position: absolute; top: -8px; right: -8px; background: #cc0c39; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; border: 1.5px solid #fff; font-weight: 900; }
    .v3-btn-main { background: #fff; color: #0c1c3c; padding: 8px 15px; border-radius: 10px; font-weight: 800; font-size: 11px; }
    
    .v3-content-small { display: none; align-items: center; }

    #empire-v3-popup.is-scrolling {
        width: 100px; padding: 10px; border-radius: 50px;
        left: 88%; transform: translateX(-88%);
    }
    #empire-v3-popup.is-scrolling .v3-content-full { display: none; }
    #empire-v3-popup.is-scrolling .v3-content-small { display: flex; }
</style>

<script>
    let scrollStopTimer;

    function refreshV3() {
        const pop = document.getElementById('empire-v3-popup');
        const amts = document.querySelectorAll('.v3-amt-main');
        const badges = document.querySelectorAll('.v3-badge-main');
        
        if(window.location.href.indexOf('product_details.php') > -1) {
            document.body.classList.add('is-details-page');
        } else {
            document.body.classList.remove('is-details-page');
        }
        
        const cartData = JSON.parse(localStorage.getItem('lim_cart')) || {};
        let totalAmt = 0; let totalItems = 0;

        Object.keys(cartData).forEach(key => {
            totalAmt += (cartData[key].qty * cartData[key].price);
            totalItems += cartData[key].qty;
        });

        if (totalItems > 0) {
            amts.forEach(el => el.innerText = totalAmt.toLocaleString('en-IN'));
            badges.forEach(el => el.innerText = totalItems);
            if(pop.style.display !== 'flex') pop.style.display = 'flex';
        } else {
            pop.style.display = 'none';
        }
    }

    window.addEventListener('scroll', function() {
        const pop = document.getElementById('empire-v3-popup');
        if (!pop || pop.style.display === 'none') return;
        pop.classList.add('is-scrolling');
        clearTimeout(scrollStopTimer);
        scrollStopTimer = setTimeout(() => {
            pop.classList.remove('is-scrolling');
        }, 800); 
    });

    document.addEventListener('DOMContentLoaded', refreshV3);
    window.addEventListener('storage', refreshV3);
    setInterval(refreshV3, 1000);
</script>