<?php
// products.php
include "connection.php";

$products_array = [];

// Cart Count Logic
session_start();
$userId = 1; // For now dev mode
$cart_rs = Database::search("SELECT * FROM cart WHERE user_id = '$userId'");
$cart_num = $cart_rs->num_rows;

$q = "SELECT 
        product.product_id, 
        product.product_name, 
        product.path, 
        category.category_name, 
        brand.brand_name, 
        pack_model.model 
      FROM product 
      JOIN category ON product.category_category_id = category.category_id 
      JOIN brand ON product.brand_brand_id = brand.brand_id 
      JOIN pack_model ON product.pack_model_pack_model_id = pack_model.pack_model_id";

$rs = Database::search($q);

while ($row = $rs->fetch_assoc()) {
    // Price
    $pid = $row['product_id'];
    $w_rs = Database::search("SELECT price, offer_price FROM weight WHERE product_product_id = '$pid' ORDER BY offer_price ASC LIMIT 1");
    $w_data = $w_rs->fetch_assoc();

    $price = 0.00;
    $original_price = 0.00;

    if ($w_data) {
        $price = (float) $w_data['offer_price'];
        $original = (float) $w_data['price'];
        if ($original > $price) {
            $original_price = $original;
        }
    }

    // Image
    $image = !empty($row['path']) ? $row['path'] : "../teaCup.png";

    // Category mapping
    $cat = $row['category_name'];
    $lower_cat = strtolower($cat);
    if (in_array($lower_cat, ['black', 'green', 'white', 'oolong', 'herbal'])) {
        $cat = 'Tea';
    }
    $cat = ucfirst($cat);
    $sub_cat = ucfirst($row['category_name']);

    // Weights
    $weight_names_rs = Database::search("SELECT weight_name FROM weight WHERE product_product_id = '$pid' ORDER BY weight_id ASC");
    $weight_list = [];
    while ($wr = $weight_names_rs->fetch_assoc()) {
        $weight_list[] = $wr['weight_name'];
    }
    $weights_str = implode(', ', $weight_list);

    $products_array[] = [
        'id' => (int) $row['product_id'],
        'name' => $row['product_name'],
        'category' => $cat,
        'sub_category' => $sub_cat,
        'origin' => "Sri Lanka",
        'brand' => $row['brand_name'],
        'model' => $row['model'],
        'weights' => $weights_str,
        'price' => $price,
        'original_price' => $original_price,
        'image' => $image,
        'images' => [$image],
        'rating' => 5.0
    ];
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ═══ SEO META TAGS — Auto-generated by seo-optimize.js ═══ -->
    <title>Shop Premium Teas | Dropti Zeylona</title>
    <meta name="description" content="Browse our curated collection of premium organic teas — green, black, herbal & wellness blends. Shipped fresh from Ceylon highlands.">
    <meta name="keywords" content="buy Ceylon tea, organic tea shop, premium tea online, green tea, black tea">
    <meta name="author" content="Dropti Zeylona">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#1A3021">
    <link rel="canonical" href="http://localhost/dropti_zeylona_up/pages/shop.php">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://localhost/dropti_zeylona_up/pages/shop.php">
    <meta property="og:title" content="Shop Premium Teas | Dropti Zeylona">
    <meta property="og:description" content="Browse our curated collection of premium organic teas — green, black, herbal & wellness blends. Shipped fresh from Ceylon highlands.">
    <meta property="og:image" content="http://localhost/dropti_zeylona_up/pages/OPATea.png">
    <meta property="og:site_name" content="Dropti Zeylona">
    <meta property="og:locale" content="en_US">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Shop Premium Teas | Dropti Zeylona">
    <meta name="twitter:description" content="Browse our curated collection of premium organic teas — green, black, herbal & wellness blends. Shipped fresh from Ceylon highlands.">
    <meta name="twitter:image" content="http://localhost/dropti_zeylona_up/pages/OPATea.png">

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "http://localhost/dropti_zeylona_up/pages/#organization",
      "name": "Dropti Zeylona",
      "url": "http://localhost/dropti_zeylona_up/pages",
      "logo": {
        "@type": "ImageObject",
        "url": "http://localhost/dropti_zeylona_up/pages/dropti2.png"
      },
      "email": "info@droptiZeylona.com",
      "sameAs": [
        "https://www.instagram.com/droptiZeylona",
        "https://www.facebook.com/droptiZeylona"
      ]
    },
    {
      "@type": "WebPage",
      "@id": "http://localhost/dropti_zeylona_up/pages/shop.php",
      "url": "http://localhost/dropti_zeylona_up/pages/shop.php",
      "name": "Shop Premium Teas | Dropti Zeylona",
      "description": "Browse our curated collection of premium organic teas — green, black, herbal & wellness blends. Shipped fresh from Ceylon highlands.",
      "isPartOf": {
        "@id": "http://localhost/dropti_zeylona_up/pages/#website"
      },
      "publisher": {
        "@id": "http://localhost/dropti_zeylona_up/pages/#organization"
      },
      "inLanguage": "en-US",
      "image": "http://localhost/dropti_zeylona_up/pages/OPATea.png"
    }
  ]
}
    </script>
    <!-- ═════════════════════════════════════════════════════ -->
    

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Raleway:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1A3021',
                        accent: '#D4AF37',
                        background: '#FCF9F2',
                        surface: '#FFFFFF',
                        'luxury-dark': '#0E1A12',
                    },
                    fontFamily: {
                        serif: ['Cormorant Garamond', 'serif'],
                        sans: ['Raleway', 'sans-serif'],
                    }
                }
            }
        }
    </script>

    <!-- Custom Styles -->
    <style>
        body {
            background-color: #FCF9F2;
            color: #1A3021;
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(212, 175, 55, 0.2);
        }

        /* Lux Card Styles from Shop.php */
        .lux-card {
            position: relative;
            width: 100%;
            border-radius: 0px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            background: #fff;
            height: 420px;
            border: 1px solid #eee;
        }

        .lux-card:hover {
            transform: scale(1.02);
            box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.6);
            z-index: 10;
        }

        .lux-img-box {
            position: relative;
            height: 280px;
            overflow: hidden;
        }

        .lux-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .lux-img-box .hover-image {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .lux-card:hover .hover-image {
            opacity: 1;
        }

        .lux-card:hover .main-image {
            opacity: 0;
            transform: scale(1.1);
        }

        .lux-details {
            padding: 15px;
        }

        .lux-details .details-box {
            background: transparent;
            backdrop-filter: none;
            border-radius: 0px;
            padding: 12px;
        }

        .lux-details h3 {
            color: #1A3021;
            margin: 0 0 5px 0;
            font-size: 1.1rem;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
        }

        .lux-details p {
            color: #666;
            margin: 0 0 8px 0;
            font-size: 0.85rem;
        }

        .lux-details .price {
            color: #1A3021;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 1rem;
        }

        /* Action Buttons in Image */
        .action-buttons {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 1px;
            opacity: 0;
            transform: translateY(100%);
            transition: all 0.3s ease;
            z-index: 20;
            background: rgba(255, 255, 255, 0.95);
            border-top: 1px solid #eee;
        }

        .lux-card:hover .action-buttons {
            opacity: 1;
            transform: translateY(0);
        }

        .action-btn {
            flex: 1;
            height: 45px;
            background: transparent;
            color: #1A3021;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            border-right: 1px solid #eee;
            font-size: 1.1rem;
        }

        .action-btn:last-child {
            border-right: none;
        }

        .action-btn:hover {
            background: #1A3021;
            color: #fff;
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #FCF9F2;
        }

        ::-webkit-scrollbar-thumb {
            background: #D4AF37;
            border-radius: 4px;
        }

        .custom-checkbox input:checked+div {
            background-color: #D4AF37;
            border-color: #D4AF37;
        }

        .custom-checkbox input:checked+div svg {
            display: block;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #D4AF37;
            cursor: pointer;
            margin-top: -8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: #000000;
            border-radius: 2px;
        }

        /* Updated Navigation Styles from cartTest.php */
        #mainNav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            transition: all 0.5s ease;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 64px;
        }

        .logo img {
            height: 40px;
            width: auto;
        }

        .nav-links {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: #d1d5db;
            font-weight: 500;
            transition: color 0.3s;
            padding-bottom: 4px;
            font-family: 'Raleway', sans-serif;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: #D4AF37;
        }

        .nav-links a.active {
            border-bottom: 2px solid #D4AF37;
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            color: #d1d5db;
        }

        .mobile-menu-btn svg {
            width: 24px;
            height: 24px;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 64px;
                left: 0;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.95);
                flex-direction: column;
                gap: 20px;
                padding: 20px;
            }

            .nav-links.show {
                display: flex;
            }

            .mobile-menu-btn {
                display: block;
            }
        }

        .top-bar-item {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            letter-spacing: 0.5px;
        }

        .top-bar-texts {
            animation: vertical-scroll 6s linear infinite;
        }

        @keyframes vertical-scroll {

            0%,
            20% {
                transform: translateY(0);
            }

            30%,
            50% {
                transform: translateY(-40px);
            }

            55%,
            70% {
                transform: translateY(-80px);
            }

            75%,
            90% {
                transform: translateY(-120px);
            }

            100% {
                transform: translateY(0);
            }
        }

        .own_blend {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            padding: 5px;
            width: 185px;
            height: 40px;
            border: 1px solid #500331ff;
            border-radius: 10px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.4s ease;
            box-shadow: 0 2px 10px rgba(255, 204, 35, 0.2);
            font-family: 'Raleway', sans-serif;
            background: transparent;
            /* Reset linear gradient if applied incorrectly */
        }

        .own_blend:hover {
            transform: translateY(-3px) scale(1.03);
        }

        .own_blend::before {
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #c50159ff, #ec016bff, #f5509aff);
            transition: top 0.5s ease-in-out;
            border-radius: 10px;
            z-index: 0;
            pointer-events: none;
            mix-blend-mode: lighten;
        }

        .own_blend:hover::before {
            top: 0;
        }

        .own_blend span {
            position: relative;
            z-index: 1;
            color: #fff;
            transition: color 0.3s ease;
        }

        @media (max-width: 768px) {
            .own_blend {
                padding: 8px 16px;
                font-size: 12px;
                width: 125px;
                height: 35px;
                border: 1px solid #ffcc23ff;
                border-radius: 10px;
            }
        }

        .nav-icons {
            display: flex;
            gap: 25px;
            align-items: center;
        }

        .icon {
            position: relative;
            cursor: pointer;
        }

        .cart .badge {
            position: absolute;
            top: -6px;
            right: -10px;
            background: #D4AF37;
            color: black;
            font-weight: bold;
            font-size: 10px;
            padding: 2px 5px;
            border-radius: 50%;
        }

        /* Steam Cursor */
        .smoke-particle {
            position: fixed;
            width: 10px;
            height: 10px;
            background: rgba(26, 48, 33, 0.4);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            filter: blur(5px);
            opacity: 0;
        }

        .cursor-dot,
        .cursor-outline {
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 9999;
            pointer-events: none;
        }

        .cursor-dot {
            width: 8px;
            height: 8px;
            background-color: #D4AF37;
        }

        .cursor-outline {
            width: 40px;
            height: 40px;
            border: 1px solid rgba(212, 175, 55, 0.5);
            transition: width 0.2s, height 0.2s, background-color 0.2s;
        }

        body:hover .cursor-outline.hovered {
            width: 60px;
            height: 60px;
            background-color: rgba(212, 175, 55, 0.1);
            border-color: #D4AF37;
        }
    </style>
</head>

<body class="font-sans antialiased">

    <!-- Navbar -->
    <!-- Navbar from cartTest.php -->
    <nav id="mainNav">
        <div class="top-bar-container"
            style="background-color:#fff; color:black; font-weight:bold; height:40px; overflow:hidden; position:relative; text-align:center;">
            <div class="top-bar-texts" style="position:absolute; top:0; width:100%;">
                <div class="top-bar-item">Free Shipping on all orders above $99!</div>
                <div class="top-bar-item" style="background-color: #000; color: #ffc60bff;">New User 20% OFF!</div>
                <div class="top-bar-item">Indulge in Pure Relaxation & Luxury With Ceylon Zeylona</div>
            </div>
        </div>
        <div class="nav-container">
            <div class="logo"><img src="dropti2.png" alt="Logo" style="height: 60px; width: 127px;"></div>
            <div class="nav-links" id="navLinks">
                <a href="shop.php">Shop</a>
                <a href="academy.php">Academy</a>
                <a href="homepage.html">Home</a>
                <a href="blog.html">Blog</a>
                <a href="about.html">About</a>
                <a href="products.php" class="active">Products</a>
                <a href="cart1.php">Cart</a>
            </div>
            <a href="make_my_blend.html" id="btnDiv" class="own_blend" style="text-decoration:none;"><span>Make My
                    Blend!</span></a>
            <div class="nav-icons">
                <div class="icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg></div>
                <a href="cart1.php">
                    <div class="icon cart cursor-pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="21" r="1"></circle>
                            <circle cx="20" cy="21" r="1"></circle>
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                        </svg><span class="badge"><?php echo $cart_num; ?></span></div>
                </a>
                <a href="user.php">
                    <div class="icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M4 21v-2a4 4 0 0 1 3-3.87"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg></div>
                </a>
            </div>
            <button class="mobile-menu-btn" id="mobileBtn"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
                    </path>
                </svg></button>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative pt-40 pb-12 md:pt-32 md:pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
        <div class="absolute inset-0 z-0">
            <video autoplay muted loop playsinline class="w-full h-full object-cover">
                <source src="bg.mp4" type="video/mp4">
            </video>
            <div class="absolute inset-0 bg-black/50"></div>
            <div class="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-[#FCF9F2] to-transparent"></div>
        </div>

        <div class="relative z-10 max-w-4xl mx-auto text-center">
            <span class="text-[#D4AF37] tracking-[0.3em] uppercase text-xs font-bold mb-6 block">The Collection</span>
            <h1 class="text-5xl md:text-7xl lg:text-8xl font-serif text-white leading-[1.1] mb-8">
                Lose yourself in our <br>
                <span class="italic text-[#D4AF37] font-light">world of tea</span>
            </h1>

            <div class="hidden md:block max-w-xl mx-auto relative group">
                <input type="text" id="heroSearch"
                    class="block w-full pl-12 pr-4 py-4 bg-white border border-gray-200 rounded-full text-primary placeholder-gray-400 focus:outline-none shadow-lg"
                    placeholder="Search for premium teas...">
                <button class="absolute right-2 top-2 bottom-2 bg-primary text-white w-12 rounded-full"><i
                        class="fas fa-search"></i></button>
            </div>
        </div>
    </section>

    <!-- Visual Category Slider (RESTORED WITH IMAGES) -->
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 mb-8">
        <div class="flex overflow-x-auto pb-8 pt-4 gap-8 md:gap-12 px-4 no-scrollbar items-start justify-start md:justify-center"
            id="categoryTabs">

            <!-- All -->
            <button class="group flex flex-col items-center min-w-[100px] cursor-pointer category-tab"
                data-category="All">
                <div
                    class="w-24 h-24 rounded-full shadow-lg overflow-hidden border-4 border-gray-200 group-hover:border-[#D4AF37] transition-all relative bg-[#1A3021]">
                    <img src="https://images.unsplash.com/photo-1597481499750-3e6b22637e12?q=80&w=400&auto=format&fit=crop"
                        class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-500">
                </div>
                <span
                    class="mt-4 font-serif font-bold text-gray-600 text-sm md:text-base tracking-wide group-hover:text-[#D4AF37]">All
                    Types</span>
            </button>

            <!-- Black -->
            <button class="group flex flex-col items-center min-w-[100px] cursor-pointer category-tab"
                data-category="Black">
                <div
                    class="w-24 h-24 rounded-full shadow-lg overflow-hidden border-4 border-gray-200 group-hover:border-[#D4AF37] transition-all relative bg-[#2C2C2C]">
                    <img src="https://imgs.search.brave.com/5J3C9w5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvNDY3/MjYzODc3L3Bob3Rv/L2JsYWNrLXRlYS5q/cGc_cz02MTJ4NjEy/Jnc9MCZrPTIwJmM9/Ml81Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql95Ql8="
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                </div>
                <span class="mt-4 font-serif font-bold text-gray-600 group-hover:text-[#D4AF37]">Black Tea</span>
            </button>

            <!-- Green -->
            <button class="group flex flex-col items-center min-w-[100px] cursor-pointer category-tab"
                data-category="Green">
                <div
                    class="w-24 h-24 rounded-full shadow-lg overflow-hidden border-4 border-gray-200 group-hover:border-[#D4AF37] transition-all relative bg-[#4A5D23]">
                    <img src="https://imgs.search.brave.com/5J3C9w5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvMTc1/NjAyNDk3L3Bob3Rv/L2hlYXAtb2YtZ3Jl/ZW4tdGVhLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1WNl95/Ql95Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql8="
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                </div>
                <span class="mt-4 font-serif font-bold text-gray-600 group-hover:text-[#D4AF37]">Green Tea</span>
            </button>

            <!-- Herbal -->
            <button class="group flex flex-col items-center min-w-[100px] cursor-pointer category-tab"
                data-category="Herbal">
                <div
                    class="w-24 h-24 rounded-full shadow-lg overflow-hidden border-4 border-gray-200 group-hover:border-[#D4AF37] transition-all relative bg-[#8B5A2B]">
                    <img src="https://imgs.search.brave.com/5J3C9w5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvNjkw/NzkzNjYvcGhvdG8v/Z3JlZW4tdGVhLmpw/Zz9zPTYxMng2MTIm/dz0wJms9MjAmYz12/Ql95Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql8="
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                </div>
                <span class="mt-4 font-serif font-bold text-gray-600 group-hover:text-[#D4AF37]">Herbal</span>
            </button>

            <!-- Cinnamon -->
            <button class="group flex flex-col items-center min-w-[100px] cursor-pointer category-tab"
                data-category="Cinnamon">
                <div
                    class="w-24 h-24 rounded-full shadow-lg overflow-hidden border-4 border-gray-200 group-hover:border-[#D4AF37] transition-all relative bg-[#654321]">
                    <img src="https://imgs.search.brave.com/5J3C9w5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvMTc1/NjAyNDk3L3Bob3Rv/L2hlYXAtb2YtZ3Jl/ZW4tdGVhLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1WNl95/Ql95Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql95Ql95Ql95Ql95/Ql8="
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 filter sepia brightness-50 contrast-125">
                </div>
                <span class="mt-4 font-serif font-bold text-gray-600 group-hover:text-[#D4AF37]">Cinnamon</span>
            </button>

            <!-- White -->
            <button class="group flex flex-col items-center min-w-[100px] cursor-pointer category-tab"
                data-category="White">
                <div
                    class="w-24 h-24 rounded-full shadow-lg overflow-hidden border-4 border-gray-200 group-hover:border-[#D4AF37] transition-all relative bg-[#E0E0E0]">
                    <img src="https://imgs.search.brave.com/5J3C9w5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5Q5/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvMTgz/MzQ0MzMxL3Bob3Rv/L3doaXRlLXRlYS5q/cGc_cz02MTJ4NjEy/Jnc9MCZrPTIwJmM9/MTgzMzQ0MzMx"
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                </div>
                <span class="mt-4 font-serif font-bold text-gray-600 group-hover:text-[#D4AF37]">White Tea</span>
            </button>

            <!-- Spices -->
            <button class="group flex flex-col items-center min-w-[100px] cursor-pointer category-tab"
                data-category="Spices">
                <div
                    class="w-24 h-24 rounded-full shadow-lg overflow-hidden border-4 border-gray-200 group-hover:border-[#D4AF37] transition-all relative bg-[#8C522B]">
                    <img src="https://media.istockphoto.com/id/175402660/photo/spices.jpg?s=612x612&w=0&k=20&c=K5R3-5i9-40_d_61_4A-6L-3G-8P-0A-00"
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                </div>
                <span class="mt-4 font-serif font-bold text-gray-600 group-hover:text-[#D4AF37]">Spices</span>
            </button>
        </div>
    </section>

    <!-- SOMMELIER'S CONTROL BAR (The Only New Feature) -->
    <div id="sommelierBar"
        class="sticky top-0 z-[40] transition-all duration-500 bg-[#FCF9F2]/95 backdrop-blur-md border-b border-[#D4AF37]/20 mb-8"
        style="margin-top: -2rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <span id="desktopResultCount" class="font-serif italic text-primary text-sm"><span
                        id="barResultCount">0</span> Elixirs Found</span>
                <div class="h-4 w-px bg-[#D4AF37]/30 mx-2 hidden md:block"></div>
                <div id="activeTags" class="hidden md:flex items-center gap-2"></div>
            </div>

            <!-- Mobile Scroll Wrapper -->
            <div
                class="flex items-center gap-1 md:gap-6 overflow-x-auto md:overflow-visible no-scrollbar w-full md:w-auto pb-1 md:pb-0 relative">
                <!-- Origin -->
                <div class="relative group shrink-0">
                    <button onclick="toggleDropdown('originDropdown')"
                        class="flex items-center gap-2 py-5 text-xs uppercase tracking-[0.2em] font-bold hover:text-[#D4AF37] transition-colors whitespace-nowrap">Origin
                        <i class="fas fa-chevron-down text-[8px] opacity-50"></i></button>
                    <!-- Dropdown -->
                    <div id="originDropdown"
                        class="hidden fixed top-20 left-4 right-4 md:absolute md:top-full md:left-0 md:right-auto md:w-64 z-[60] mt-2">
                        <div
                            class="bg-white border border-[#D4AF37]/20 p-4 shadow-2xl rounded-sm max-h-[70vh] overflow-y-auto">
                            <div class="flex justify-between items-center mb-2 md:hidden">
                                <h3 class="text-xs font-bold uppercase tracking-widest text-[#D4AF37]">Select Origin
                                </h3>
                                <button onclick="toggleDropdown('originDropdown')"
                                    class="text-gray-400 hover:text-red-500"><i class="fas fa-times"></i></button>
                            </div>
                            <div id="originDropdownList" class="space-y-2 max-h-64 overflow-y-auto custom-scrollbar">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Brand -->
                <div class="relative group shrink-0">
                    <button onclick="toggleDropdown('brandDropdown')"
                        class="flex items-center gap-2 py-5 text-xs uppercase tracking-[0.2em] font-bold hover:text-[#D4AF37] transition-colors whitespace-nowrap">Brand
                        <i class="fas fa-chevron-down text-[8px] opacity-50"></i></button>
                    <div id="brandDropdown"
                        class="hidden fixed top-20 left-4 right-4 md:absolute md:top-full md:left-0 md:right-auto md:w-64 z-[60] mt-2">
                        <div
                            class="bg-white border border-[#D4AF37]/20 p-4 shadow-2xl rounded-sm max-h-[70vh] overflow-y-auto">
                            <div class="flex justify-between items-center mb-2 md:hidden">
                                <h3 class="text-xs font-bold uppercase tracking-widest text-[#D4AF37]">Select Brand</h3>
                                <button onclick="toggleDropdown('brandDropdown')"
                                    class="text-gray-400 hover:text-red-500"><i class="fas fa-times"></i></button>
                            </div>
                            <div id="brandDropdownList" class="space-y-2 max-h-64 overflow-y-auto custom-scrollbar">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Grade -->
                <div class="relative group shrink-0">
                    <button onclick="toggleDropdown('gradeDropdown')"
                        class="flex items-center gap-2 py-5 text-xs uppercase tracking-[0.2em] font-bold hover:text-[#D4AF37] transition-colors whitespace-nowrap">Grade
                        <i class="fas fa-chevron-down text-[8px] opacity-50"></i></button>
                    <div id="gradeDropdown"
                        class="hidden fixed top-20 left-4 right-4 md:absolute md:top-full md:left-0 md:right-auto md:w-64 z-[60] mt-2">
                        <div
                            class="bg-white border border-[#D4AF37]/20 p-4 shadow-2xl rounded-sm max-h-[70vh] overflow-y-auto">
                            <div class="flex justify-between items-center mb-2 md:hidden">
                                <h3 class="text-xs font-bold uppercase tracking-widest text-[#D4AF37]">Select Grade</h3>
                                <button onclick="toggleDropdown('gradeDropdown')"
                                    class="text-gray-400 hover:text-red-500"><i class="fas fa-times"></i></button>
                            </div>
                            <div id="modelDropdownList" class="space-y-2 max-h-64 overflow-y-auto custom-scrollbar">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Price -->
                <div class="relative group pl-4 border-l border-[#D4AF37]/20 shrink-0">
                    <button onclick="toggleDropdown('priceDropdown')"
                        class="flex items-center gap-2 py-5 text-xs uppercase tracking-[0.2em] font-bold text-primary hover:text-[#D4AF37] transition-colors whitespace-nowrap">Sort
                        & Price <i class="fas fa-sliders-h text-[10px]"></i></button>
                    <div id="priceDropdown"
                        class="hidden fixed top-20 left-4 right-4 md:absolute md:top-full md:right-0 md:w-72 z-[60] mt-2">
                        <div
                            class="bg-white border border-[#D4AF37]/20 p-5 shadow-2xl rounded-sm space-y-5 max-h-[70vh] overflow-y-auto">
                            <div class="flex justify-between items-center mb-2 md:hidden">
                                <h3 class="text-xs font-bold uppercase tracking-widest text-[#D4AF37]">Refine</h3>
                                <button onclick="toggleDropdown('priceDropdown')"
                                    class="text-gray-400 hover:text-red-500"><i class="fas fa-times"></i></button>
                            </div>
                            <div>
                                <h5 class="text-[9px] uppercase tracking-widest text-gray-400 mb-2">Order By</h5>
                                <div class="space-y-1">
                                    <button onclick="setSort('newest')"
                                        class="w-full text-left px-3 py-2 text-xs hover:bg-[#FCF9F2] hover:text-[#D4AF37] transition-colors">Newest
                                        Arrivals</button>
                                    <button onclick="setSort('price_low')"
                                        class="w-full text-left px-3 py-2 text-xs hover:bg-[#FCF9F2] hover:text-[#D4AF37] transition-colors">Price:
                                        Low to High</button>
                                </div>
                            </div>
                            <div>
                                <h5 class="text-[9px] uppercase tracking-widest text-gray-400 mb-3">Max Price</h5>
                                <input type="range" id="navbarPriceRange" min="0" max="200" value="200" step="5"
                                    class="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                                <div class="flex justify-between mt-2 text-xs font-bold text-primary">
                                    <span>$0</span>
                                    <span id="navbarPriceValue">$200</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Overlay for Mobile -->
            <div id="dropdownOverlay" onclick="closeAllDropdowns()"
                class="hidden fixed inset-0 bg-black/40 z-[50] backdrop-blur-sm transition-opacity"></div>
        </div>
    </div>
    </div>

    <!-- Product Grid -->
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 md:pb-24 mt-8">
        <div class="w-full section-container">
            <main class="flex-1 w-full">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" id="productGrid">
                    <!-- Products -->
                </div>
                <div id="noResults" class="hidden text-center py-20">
                    <div class="text-6xl text-gray-200 mb-4"><i class="fas fa-leaf"></i></div>
                    <h3 class="text-xl font-serif font-bold text-gray-800">No products found</h3>
                    <p class="text-gray-500 mt-2">Try adjusting your filters or search terms.</p>
                </div>
            </main>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-luxury-dark text-white pt-10 md:pt-16 pb-8 border-t border-white/10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12 mb-8 md:mb-12">
                <div class="col-span-1 md:col-span-1">
                    <img src="../dropti2.png" alt="Logo" class="h-12 w-auto mb-6 brightness-0 invert">
                    <p class="text-gray-400 text-sm leading-relaxed">Experience the harmony of nature and luxury with
                        our premium organic teas and spices.</p>
                </div>
                <div>
                    <h4 class="font-serif text-lg font-bold text-accent mb-4">Shop</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="#" class="hover:text-accent transition">Tea Collection</a></li>
                        <li><a href="#" class="hover:text-accent transition">Cinnamon</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-serif text-lg font-bold text-accent mb-4">Company</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="about.html" class="hover:text-accent transition">About Us</a></li>
                        <li><a href="#" class="hover:text-accent transition">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-serif text-lg font-bold text-accent mb-4">Newsletter</h4>
                    <div class="flex">
                        <input type="email" placeholder="Your email"
                            class="bg-white/5 border border-white/10 rounded-l px-4 py-2 text-sm w-full focus:outline-none focus:border-accent">
                        <button
                            class="bg-accent text-primary px-4 py-2 rounded-r font-medium hover:bg-yellow-500 transition">Join</button>
                    </div>
                </div>
            </div>
            <div
                class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-gray-500">
                <p>&copy; 2026 Zeylona Teas.</p>
            </div>
        </div>
    </footer>

    <!-- Quick View Modal (Restored) -->
    <div id="quickViewModal" class="fixed inset-0 z-[100] hidden overflow-y-auto" onclick="closeQuickView()">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
            <div class="inline-block align-bottom bg-white text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full border border-0 rounded-none relative"
                onclick="event.stopPropagation()">
                <button onclick="closeQuickView()"
                    class="absolute top-4 right-4 text-gray-400 hover:text-gray-500 focus:outline-none"><i
                        class="fas fa-times text-xl"></i></button>
                <div class="flex flex-col md:flex-row h-full">
                    <div class="md:w-1/2 bg-gray-100 p-8 flex items-center justify-center">
                        <img id="modalImage" src="" alt="Product" class="max-h-64 object-contain">
                    </div>
                    <div class="md:w-1/2 p-8 flex flex-col justify-center">
                        <span id="modalCategory"
                            class="text-accent text-xs font-bold tracking-widest uppercase mb-2"></span>
                        <h2 id="modalTitle" class="text-3xl font-serif font-bold text-primary mb-2"></h2>
                        <div class="flex items-center mb-4 text-yellow-500 text-sm">
                            <i class="fas fa-star"></i><span id="modalRating" class="text-gray-500 ml-1"></span>
                        </div>
                        <div class="flex items-center justify-between mb-8">
                            <span id="modalPrice" class="text-2xl font-bold text-primary"></span>
                        </div>
                        <button
                            class="w-full bg-primary text-white py-3 font-bold hover:bg-accent hover:text-primary transition uppercase text-sm tracking-wide">Add
                            to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const products = <?php echo json_encode($products_array); ?>;

        let currentFilters = { category: 'All', search: '', origin: [], brand: [], model: [], maxPrice: 200, sortBy: 'newest' };

        document.addEventListener('DOMContentLoaded', () => {
            // 1. Steam Cursor
            initSteamCursor();
            // 2. Filters
            initializeFilters();
        });

        function initializeFilters() {
            const origins = [...new Set(products.map(p => p.origin))].sort();
            const brands = [...new Set(products.map(p => p.brand))].sort();
            const models = [...new Set(products.map(p => p.model))].sort();

            renderDropdownFilter('originDropdownList', origins, 'origin');
            renderDropdownFilter('brandDropdownList', brands, 'brand');
            renderDropdownFilter('modelDropdownList', models, 'model');

            const priceSlider = document.getElementById('navbarPriceRange');
            if (priceSlider) {
                priceSlider.addEventListener('input', (e) => {
                    document.getElementById('navbarPriceValue').innerText = '$' + e.target.value;
                    currentFilters.maxPrice = parseInt(e.target.value);
                    renderProducts();
                });
            }

            // Tab Click Logic
            document.querySelectorAll('.category-tab').forEach(tab => {
                tab.addEventListener('click', (e) => {
                    e.preventDefault();
                    // Reset selected styles (Ring)
                    document.querySelectorAll('.category-tab div').forEach(div => {
                        div.classList.remove('border-[#D4AF37]', 'ring-2', 'ring-[#D4AF37]/50');
                    });

                    // Add Ring to clicked
                    tab.querySelector('div').classList.add('border-[#D4AF37]', 'ring-2', 'ring-[#D4AF37]/50');

                    currentFilters.category = tab.dataset.category;
                    renderProducts();
                });
            });

            // Search Syncing (Hero & Mobile -> Logic)
            const heroSearch = document.getElementById('heroSearch');
            const mobileSearch = document.getElementById('mobileSearch');

            const handleSearch = (e) => {
                const val = e.target.value;
                currentFilters.search = val;
                // Sync values
                if (heroSearch && heroSearch !== e.target) heroSearch.value = val;
                if (mobileSearch && mobileSearch !== e.target) mobileSearch.value = val;
                renderProducts();
            };

            if (heroSearch) heroSearch.addEventListener('input', handleSearch);
            if (mobileSearch) mobileSearch.addEventListener('input', handleSearch);
            // Mobile Menu
            const mobileBtn = document.getElementById('mobileBtn');
            const navLinks = document.getElementById('navLinks');
            if (mobileBtn) mobileBtn.addEventListener('click', () => { navLinks.classList.toggle('show'); });

            // Make My Blend Visibility (from cartTest.php)
            const btnDiv = document.getElementById('btnDiv');
            if (btnDiv) {
                const checkBtn = () => {
                    if (window.innerWidth >= 1024) { btnDiv.style.display = 'inline-flex'; } else { btnDiv.style.display = 'none'; }
                };
                window.addEventListener('resize', checkBtn);
                checkBtn();
            }

            // Initial Render
            renderProducts();
        }

        function renderProducts() {
            const grid = document.getElementById('productGrid');
            const noResults = document.getElementById('noResults');
            const resultCount = document.getElementById('barResultCount');

            updateActiveTags();

            // FILTER LOGIC
            let filtered = products.filter(product => {
                if (currentFilters.category !== 'All') {
                    if (currentFilters.category === 'Tea') {
                        if (!['Tea', 'Green', 'Black', 'White', 'Oolong', 'Herbal'].includes(product.category) &&
                            !['Tea', 'Green', 'Black', 'White', 'Oolong', 'Herbal'].includes(product.sub_category)) return false;
                    } else if (product.category !== currentFilters.category && product.sub_category !== currentFilters.category) {
                        // Fallback for strict match if needed
                        // Check Cinnamon separate logic if needed, but 'All' logic handles generic.
                        // But wait, the categories in tabs are "Black", "Green", "White", "Herbal", "Cinnamon", "Spices"
                        // If product.previous category was "Black Tea", we store "Tea" in PHP cat?
                        // In PHP cat we mapped Black -> Tea.
                        // So checking `product.category` ("Tea") against filter ("Black") fails.
                        // We must check `product.sub_category` (Original category name) OR `product.category`.
                        if (!product.sub_category.includes(currentFilters.category) && product.category !== currentFilters.category) return false;
                    }
                }

                if (currentFilters.search) {
                    const term = currentFilters.search.toLowerCase();
                    if (!product.name.toLowerCase().includes(term) && !product.brand.toLowerCase().includes(term)) return false;
                }

                if (currentFilters.origin.length > 0 && !currentFilters.origin.includes(product.origin)) return false;
                if (currentFilters.brand.length > 0 && !currentFilters.brand.includes(product.brand)) return false;
                if (currentFilters.model.length > 0 && !currentFilters.model.includes(product.model)) return false;
                if (product.price > currentFilters.maxPrice) return false;

                return true;
            });

            // SORT
            if (currentFilters.sortBy === 'price_low') {
                filtered.sort((a, b) => a.price - b.price);
            } else if (currentFilters.sortBy === 'price_high') {
                filtered.sort((a, b) => b.price - a.price);
            } else {
                filtered.sort((a, b) => b.id - a.id);
            }

            if (resultCount) resultCount.innerText = filtered.length;

            if (filtered.length === 0) {
                grid.innerHTML = '';
                if (noResults) noResults.classList.remove('hidden');
            } else {
                if (noResults) noResults.classList.add('hidden');
                grid.innerHTML = filtered.map(product => `
                    <div class="lux-card animate-fade-in-up">
                         <div class="lux-img-box relative group">
                            <a href="product_detail.php?id=${product.id}">
                                ${product.original_price > product.price ? '<div class="absolute top-3 left-3 bg-[#D4AF37] text-black px-2 py-1 text-xs font-bold z-10">Offer</div>' : '<div class="absolute top-3 left-3 bg-white text-black px-2 py-1 text-xs font-bold z-10">New</div>'}
                                <img src="${product.image}" class="main-image" alt="${product.name}">
                                <img src="${product.image}" class="hover-image" alt="${product.name}">
                            </a>
                            <div class="action-buttons">
                                <button onclick="addToCart(${product.id})" class="action-btn" title="Add to Cart"><i class="fas fa-plus"></i></button>
                                <button onclick="addToWishlist(${product.id})" class="action-btn" title="Add to Wishlist"><i class="far fa-heart"></i></button>
                                <button onclick="openQuickView(${product.id})" class="action-btn" title="Quick View"><i class="far fa-eye"></i></button>
                            </div>
                         </div>
                         <div class="lux-details">
                            <div class="details-box">
                                <a href="product_detail.php?id=${product.id}">
                                    <h3>${product.name}</h3>
                                </a>
                                <p class="line-clamp-1 text-xs text-gray-400">${product.model} · ${product.brand}</p>
                                <div class="price">
                                    $${product.price.toFixed(2)}
                                    ${product.original_price > 0 ? `<span class="text-xs text-gray-500 line-through ml-2">$${product.original_price.toFixed(2)}</span>` : ''}
                                </div>
                            </div>
                         </div>
                    </div>
                `).join('');
            }
        }

        // Helper Functions
        function renderDropdownFilter(id, items, key) {
            const el = document.getElementById(id);
            if (!el) return;
            el.innerHTML = items.map(i => `
                <div class="hover:bg-gray-50 px-2 py-1 rounded-sm">
                    <label class="flex items-center cursor-pointer w-full">
                        <input type="checkbox" class="h-4 w-4 accent-[#D4AF37] filter-input" data-key="${key}" value="${i}">
                        <span class="ml-3 text-xs uppercase font-medium text-gray-600">${i}</span>
                    </label>
                </div>
             `).join('');

            // Re-attach listeners for new inputs
            el.querySelectorAll('.filter-input').forEach(input => {
                input.addEventListener('change', (e) => {
                    const val = e.target.value;
                    if (e.target.checked) currentFilters[key].push(val);
                    else currentFilters[key] = currentFilters[key].filter(item => item !== val);
                    renderProducts();
                });
            });
        }

        function updateActiveTags() {
            const el = document.getElementById('activeTags');
            if (!el) return;
            let html = '';
            [...currentFilters.origin, ...currentFilters.brand, ...currentFilters.model].forEach(t => {
                html += `<button onclick="removeFilter('${t}')" class="px-3 py-1 bg-white border border-[#D4AF37]/30 text-[9px] font-bold uppercase tracking-wider hover:bg-[#D4AF37] hover:text-white transition-all flex items-center gap-2 shadow-sm">${t} <i class="fas fa-times"></i></button>`;
            });
            if (currentFilters.maxPrice < 200) html += `<span class="px-2 py-1 bg-white border border-[#D4AF37]/30 text-[9px] font-bold uppercase text-[#D4AF37]">Max $${currentFilters.maxPrice}</span>`;
            el.innerHTML = html;
        }

        function removeFilter(val) {
            // Try removing from all arrays
            ['origin', 'brand', 'model'].forEach(key => {
                currentFilters[key] = currentFilters[key].filter(i => i !== val);
            });
            // Uncheck box
            document.querySelectorAll(`input[value="${val}"]`).forEach(i => i.checked = false);
            renderProducts();
        }

        function toggleDropdown(id) {
            const el = document.getElementById(id);
            const overlay = document.getElementById('dropdownOverlay');

            // Check if currently hidden
            const isHidden = el.classList.contains('hidden');

            // Close all first
            closeAllDropdowns();

            if (isHidden) {
                el.classList.remove('hidden');
                // Only show overlay on mobile
                if (window.innerWidth < 768) {
                    overlay.classList.remove('hidden');
                }
            } else {
                el.classList.add('hidden');
                overlay.classList.add('hidden');
            }
        }

        function closeAllDropdowns() {
            ['originDropdown', 'brandDropdown', 'gradeDropdown', 'priceDropdown'].forEach(d => {
                document.getElementById(d).classList.add('hidden');
            });
            document.getElementById('dropdownOverlay').classList.add('hidden');
        }

        function setSort(type) { currentFilters.sortBy = type; renderProducts(); }

        function openQuickView(id) {
            const p = products.find(x => x.id === id);
            if (!p) return;
            document.getElementById('modalImage').src = p.image;
            document.getElementById('modalTitle').innerText = p.name;
            document.getElementById('modalCategory').innerText = p.category;
            document.getElementById('modalPrice').innerText = '$' + p.price.toFixed(2);
            document.getElementById('modalRating').innerText = p.rating;
            document.getElementById('quickViewModal').classList.remove('hidden');
        }
        function closeQuickView() { document.getElementById('quickViewModal').classList.add('hidden'); }
        function addToCart(id) { alert('Added Item ' + id + ' to Cart'); }
        function startImageCycle(el, id) { /* Optional: slideshow logic */ }
        function stopImageCycle(el, id) { /* Optional: reset */ }

        // STEAM CURSOR
        function initSteamCursor() {
            document.addEventListener('mousemove', function (e) {
                if (Math.random() > 0.3) return;
                const particle = document.createElement('div');
                particle.classList.add('smoke-particle');
                particle.style.left = e.clientX + 'px';
                particle.style.top = e.clientY + 'px';
                const duration = 1.5 + Math.random();
                const xDrift = (Math.random() - 0.5) * 40;
                particle.animate([{ transform: 'translate(-50%, -50%) scale(0.5)', opacity: 0.4 }, { transform: `translate(${-50 + xDrift}px, -150px) scale(3)`, opacity: 0 }], { duration: duration * 1000, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', fill: 'forwards' });
                document.body.appendChild(particle);
                setTimeout(() => { particle.remove(); }, duration * 1000);
            });

            const cursorDot = document.createElement('div'); cursorDot.className = 'cursor-dot hidden md:block';
            const cursorOutline = document.createElement('div'); cursorOutline.className = 'cursor-outline hidden md:block';
            document.body.appendChild(cursorDot); document.body.appendChild(cursorOutline);

            window.addEventListener("mousemove", (e) => {
                cursorDot.style.left = `${e.clientX}px`; cursorDot.style.top = `${e.clientY}px`;
                cursorOutline.animate({ left: `${e.clientX}px`, top: `${e.clientY}px` }, { duration: 500, fill: "forwards" });
            });

            const targets = document.querySelectorAll('a, button, .category-tab, .lux-card');
            targets.forEach(el => {
                el.addEventListener('mouseenter', () => cursorOutline.classList.add('hovered'));
                el.addEventListener('mouseleave', () => cursorOutline.classList.remove('hovered'));
            });
        }
    </script>
    <!-- Mobile Bottom Search Bar -->
    <div
        class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 p-3 md:hidden z-40 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
        <div class="relative">
            <input type="text" id="mobileSearch"
                class="w-full pl-10 pr-4 py-3 bg-white border border-black text-sm font-medium text-black placeholder-gray-500 focus:outline-none focus:ring-0 transition-colors rounded-none"
                placeholder="Search products...">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-search text-black"></i>
            </div>
        </div>
    </div>
</body>

</html>