<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
    
    <!-- SEO Meta Tags -->
    <title>Taharah - Timeless & Classic Pakistani Fashion</title>
    <meta name="description" content="Discover Taharah's stunning collection of premium Pakistani suits. Elegant stitched lawn, traditional craftsmanship, and contemporary designs for the modern woman." />
    <meta name="keywords" content="pakistani suits, stitched lawn, taharah fashion, designer lawn, ethnic wear, pakistani fashion" />
    <meta name="author" content="Taharah" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="images/logos/taharah.png" />
    <link rel="apple-touch-icon" href="images/logos/taharah.png" />
    <link rel="manifest" href="/manifest.json" />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://taharah.in/" />
    <meta property="og:title" content="Taharah - Premium Pakistani Suits" />
    <meta property="og:description" content="Discover Taharah's stunning collection of premium Pakistani suits. Elegant stitched lawn and traditional craftsmanship." />
    <meta property="og:image" content="https://taharah.in/images/logos/taharah.png" />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://taharah.in/" />
    <meta property="twitter:title" content="Taharah - Premium Pakistani Suits" />
    <meta property="twitter:description" content="Discover Taharah's stunning collection of premium Pakistani suits." />
    <meta property="twitter:image" content="https://taharah.in/images/logos/taharah.png" />
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://taharah.in/" />

    <!-- Ensure proper character encoding for currency symbols -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .promo-banner{
            margin-bottom: 40px;
        }
          /* Login page specific styles - Force black navigation elements */

      /* Navigation links in desktop *
      .nav-link {
          color: #000 !important;
      }

      /* Navigation links hover state *
      .nav-link:hover {
          color: #333 !important;
      }
/* Dropdown arrow icons *
      .dropdown-toggle i {
          color: #000 !important;
      }

      /* Mobile menu close button *
      .meenu-close {
          color: #000 !important;
      }

      /* Mobile navigation links *
      .mobile-account-link {
          color: #000 !important;
      }

      /* Mobile navigation link text *
      .mobile-account-links .mobile-account-link {
          color: #000 !important;
      }

      /* Navigation icons - all icon images *
      .nav-icons .icon-link img {
          filter: brightness(0) !important;
      }

      /* Hamburger menu icon *
      .hamburger img {
          filter: brightness(0) !important;
      }

      /* Cart and wishlist count badges *
      .cart-count,
      .wishlist-count,
      .mobile-cart-count,
      .mobile-wishlist-count {
background-color: #000 !important;
          color: #fff !important;
      }

      /* Dropdown menu items *
      .dropdown-menu li a {
          color: #000 !important;
      }

      /* Dropdown menu items hover *
      .dropdown-menu li a:hover {
          color: #333 !important;
          background-color: #f5f5f5 !important;
      }

      /* Mobile menu background text color *
      .nav-menu {
          color: #000 !important;
      }

      /* Ensure all text in mobile menu is black *
      .nav-menu * {
          color: #000 !important;
      }

      /* Mobile account links images */
      .mobile-account-link img {
          filter: brightness(0) !important;
      }
        .navbar {
            top: 30px!important;
        }

      /* Hide mobile menu close button on large devices */
      @media (min-width: 769px) {
          #closeMenu {
              display: none !important;
          }
      }

      /* Add top spacing to login section */
      .auth-container {
          margin-top: 200px !important;
      }

      /* Responsive spacing for different screen sizes */
      @media (max-width: 768px) {
          .auth-container {
              margin-top: 180px !important;
          }
}

      /* Remove shadow from navigation links on large devices */
      @media (min-width: 769px) {
          .nav-link {
              text-shadow: none !important;
              box-shadow: none !important;
          }

          .nav-link:hover {
              text-shadow: none !important;
              box-shadow: none !important;
          }
        }

        /* Additional currency symbol support */
        .price-currency {
            font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Arial Unicode MS', 'Noto Sans', sans-serif !important;
            font-feature-settings: "tnum";
            -webkit-font-feature-settings: "tnum";
        }

        /* Ensure all price elements use proper font stack */
        .current-price, .original-price, .arrival-price, .featured-price,
        .price-value, .subtotal-amount, .product-pricing span {
            font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Arial Unicode MS', 'Noto Sans', sans-serif !important;
        }

        /* Cart icon styling */
        .cart-icon-container img {
            transition: transform 0.2s ease;
        }

        .cart-icon-container:hover img {
            transform: scale(1.1);
        }

        /* Hide mobile menu close button on large devices */
        @media (min-width: 769px) {
            #closeMenu,
            .meenu-close,
            i#closeMenu.fa-solid.fa-xmark {
                display: none !important;
            }
        }
    </style>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
    <title>Taharah - Timeless & Classic Pakistani Fashion</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.min.css" integrity="sha384-iw3OoTErCYJJB9mCa8LNS2hbsQ7M3C0EpLGCJKypKP/lLCgB9MlH/lX+/Pvw2DNA" crossorigin="anonymous">
    <!-- Fallback font awesome icons if CDN fails -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <!-- Flaticon CSS for additional icons -->
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.6.0/uicons-thin-straight/css/uicons-thin-straight.css'>
    <!-- Additional Flaticon icon sets for shopping cart -->
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-straight/css/uicons-solid-straight.css'>
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-straight/css/uicons-regular-straight.css'>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/first-visit-banner.css?v=1.0.0">
    <link href="https://fonts.cdnfonts.com/css/futura-pt" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css?v=2.0.0">
    <link rel="stylesheet" href="css/responsive.css?v=1.0.4">
    <link rel="stylesheet" href="css/navbar.css?v=1.1.8">
   <!-- <link rel="stylesheet" href="css/mobile-menu.css?v=1.0.0">-->
    <link rel="stylesheet" href="css/cart.css?v=1.0.3">
    <link rel="stylesheet" href="css/testimonials.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/hero-slider.css?v=1.0.0">
    
    <link rel="stylesheet" href="css/about.css?v=1.0.0">
    <link rel="stylesheet" href="css/featured-collection-section.css?v=1.0.0">
    <link rel="stylesheet" href="css/product-loader.css?v=1.0.0">
    <link rel="stylesheet" href="css/customer-reviews.css?v=1.0.0">
    <link rel="stylesheet" href="css/out-of-stock-styles.css?v=1.0.0">
    <link rel="stylesheet" href="css/interactive-product-showcase.css">
    <link rel="stylesheet" href="css/currency-converter.css?v=1.0.0">
    <link rel="stylesheet" href="css/language-selector.css?v=1.0.0">
    <link rel="stylesheet" href="css/collections-grid.css?v=1.0.0">
    <link rel="stylesheet" href="css/brand-philosophy.css?v=1.0.0">
  </head>
    <style>
.featured-collection-header2 {
    text-align: center;
    margin: 40px 0 20px 0;
}
        .featured-collection-header2 .section-title {

    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 400;
        }

@media (max-width: 1024px) and (min-width: 769px) {
.featured-collection-header2 .section-title {
        font-size: 2.2rem;
}
}
    @media (max-width: 768px) {
    .featured-collection-header2 .section-title {
        font-size: 2rem;
    }
}
        @media (max-width: 480px) {
            .featured-collection-header2 .section-title {
        font-size: 1.8rem;
            }
        }

        /* Styles for the updated video product link */
        .video-product-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #333;
            margin-top: 10px;
            transition: color 0.3s ease;
        }

        .video-product-link:hover {
            color: #000;
        }

        .video-product-link-image {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            object-fit: cover;
            border-radius: 4px;
        }

        .video-product-link-text {
            font-weight: 500;
            flex-grow: 1;
        }

        .video-product-link-arrow {
            font-size: 1.2em;
            margin-left: 5px;
            transition: transform 0.3s ease;
        }

        .video-product-link:hover .video-product-link-arrow {
            transform: translateX(5px);
        }
    </style>
  <body style="margin: 0;">
    <!-- Page Loader -->
    <div id="page-loader" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; z-index: 99999;">
        <div class="loader-spinner" style="width: 50px; height: 50px; border: 3px solid #f3f3f3; border-top: 3px solid #333; border-radius: 50%; animation: spin 1s linear infinite;"></div>
    </div>
    <style>
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
    <script>
        window.addEventListener('load', function() {
            const loader = document.getElementById('page-loader');
            if (loader) {
                loader.style.opacity = '0';
                loader.style.transition = 'opacity 0.5s ease';
                setTimeout(() => loader.style.display = 'none', 500);
            }
        });
    </script>

    <!-- Push Notification Permission Banner -->
    <div id="notificationBanner" class="notification-banner">
        <div class="notification-banner-content">
            <div class="notification-banner-text">
                <div style="font-size: 16px; margin-bottom: 8px;">🔔 Stay Updated!</div>
                <p>Enable notifications to get exclusive deals and new collection announcements directly on your device.</p>
            </div>
            <div class="notification-banner-buttons">
                <button id="enableNotifications" class="btn-enable-notifications">Enable Notifications</button>
                <button id="dismissNotifications" class="btn-dismiss-notifications">Not Now</button>
            </div>
        </div>
    </div>

    <style>
        @keyframes slideUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .notification-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10000;
            background: #2c3e50;
            color: white;
            padding: 20px;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
            transform: translateY(100%);
            opacity: 0;
            transition: transform 0.4s ease, opacity 0.4s ease;
        }

        .notification-banner.show {
            animation: slideUp 0.4s ease forwards;
        }

        .notification-banner.hide {
            transform: translateY(100%) !important;
            opacity: 0 !important;
            transition: none !important;
        }

        .notification-banner-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .notification-banner-text {
            flex: 1;
        }

        .notification-banner-text p {
            margin: 0;
            font-size: 14px;
            color: #ecf0f1;
        }

        .notification-banner-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn-enable-notifications,
        .btn-dismiss-notifications {
            padding: 10px 18px;
            border: none;
            border-radius: 3px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-enable-notifications {
            background: #3498db;
            color: white;
        }

        .btn-enable-notifications:hover {
            background: #2980b9;
        }

        .btn-dismiss-notifications {
            background: transparent;
            color: #ecf0f1;
            border: 1px solid #7f8c8d;
        }

        .btn-dismiss-notifications:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: white;
        }

        @media (max-width: 768px) {
            .notification-banner-content {
                flex-direction: column;
                align-items: flex-start;
            }

            .notification-banner {
                padding: 15px;
            }

            .notification-banner-text p {
                font-size: 13px;
            }

            .notification-banner-buttons {
                width: 100%;
            }

            .btn-enable-notifications,
            .btn-dismiss-notifications {
                flex: 1;
                padding: 10px 12px;
            }
        }
    </style>

    <!-- First Visit Modal -->
    <div id="firstVisitModal" class="first-visit-modal">
        <div class="first-visit-modal-content">
            <button class="first-visit-modal-close" onclick="closeFirstVisitModal()">&times;</button>
            <img src="images/IMG-20260206-WA0009.jpg" alt="Welcome to Taharah" class="first-visit-banner-image">
            <div class="first-visit-banner-text">
                <h2>Welcome to Taharah!</h2>
                <p>Experience the elegance of timeless Pakistani fashion. Explore our exquisite collection of stitched lawn and premium suits. Sign up today for exclusive updates.</p>
                <a href="/signup" class="first-visit-cta-button">Sign Up Now</a>
            </div>
        </div>
    </div>

    <!-- Header -->
    <header class="header">
        <!-- Promo Banner -->
        <div class="promo-banner">
            <p class="banner-text"></p>
        </div>


        <!-- New Responsive Navigation -->
        <nav class="navbar">
            <div class="nav-container">
                <!-- Logo -->
                <a href="/index" class="brand">
                    <img src="images/logos/taharah-navbar.png" alt="Taharah" class="brand-logo">
                </a>


                <!-- Mobile Toggle Button - Match RIDHI MEHRA design -->
                <div class="hamburger" id="navToggle"><img src="images/icons/bars-staggered (2).png" alt="Taharah"style="width: 25px; height: 25px;">
                </div>

                <!-- Navigation Icons - Exact match to RIDHI MEHRA design -->
                <div class="nav-icons">
                    <a href="#" class="icon-link search-icon">
                        <img src="images/icons/search.png" alt="Search" style="width: 20px; height: 20px;">
                    </a>
                    <a href="#" class="icon-link wishlist-icon-container wishlist-toggle">
                        <img src="images/icons/heart.png" alt="Wishlist" style="width: 20px; height: 20px;">
                        <div class="wishlist-count">0</div>
                    </a>
                    <a href="#" class="icon-link cart-icon-container cart-toggle" id="cartToggleButton"><img src="images/icons/cart-minus.png" alt="Cart" style="width: 20px; height: 20px;"><div class="cart-count">0</div></a>
                </div>
            </div>
        </nav>

        <!-- Navigation Links - Moved outside nav-container to avoid backdrop-filter containing block -->
        <div class="nav-menu" id="navMenu">
            <!-- Close button for mobile menu in the top right corner -->

            <i id="closeMenu" class="fa-solid fa-xmark meenu-close" onclick="closeMobileMenu()" style="font-size: 24px; margin-left: 90%; color: #333;" ></i>


          <!-- "  <button class="menu-close fa fa-times" ></button>-->

            <ul class="nav-list">
                <li class="nav-item"><a href="/index" class="nav-link" data-translate="home">Home</a></li>
                <li class="nav-item"><a href="/new-arrivals" class="nav-link" data-translate="new_arrivals">New Arrivals</a></li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle"><span data-translate="categories">Collections</span> <i class="fas fa-chevron-down"></i></a>
                    <ul class="dropdown-menu">
                      <!--  <li><a href="/all-collection" data-translate="all_collections">All Collection</a></li>-->
                        <li><a href="/pakistani-pret-wear" data-translate-dynamic>Pakistani Pret Wear</a></li>


                        <li><a href="/ready-to-wear" data-translate="featured">Ready to Wear</a></li>
                        
                        <li><a href="/modest-wear" data-translate-dynamic>Modest Wear</a></li>
                        <li><a href="/party-wear" data-translate-dynamic>Party Wear</a></li>
                        <!--<li class="dropdown-submenu">
                            <a href="#"><span data-translate="earrings">Earrings</span> <i class="fas fa-chevron-right"></i></a>
                            <ul class="dropdown-submenu-list">
                                <li><a href="/gold-earrings" data-translate-dynamic>Gold Earrings</a></li>
                                <li><a href="/silver-earrings" data-translate-dynamic>Silver Earrings</a></li>
                                <li><a href="/meenakari-earrings" data-translate-dynamic>Meenakari Earrings</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a href="#"><span data-translate="bangles">Bangles</span> <i class="fas fa-chevron-right"></i></a>
                            <ul class="dropdown-submenu-list">
                                <li><a href="/gold-bangles" data-translate-dynamic>Gold Bangles</a></li>
                                <li><a href="/silver-bangles" data-translate-dynamic>Silver Bangles</a></li>
                                <li><a href="/meenakari-bangles" data-translate-dynamic>Meenakari Bangles</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a href="#"><span data-translate="rings">Rings</span> <i class="fas fa-chevron-right"></i></a>
                            <ul class="dropdown-submenu-list">
                                <li><a href="/gold-rings" data-translate-dynamic>Gold Rings</a></li>
                                <li><a href="/silver-rings" data-translate-dynamic>Silver Rings</a></li>
                                <li><a href="/meenakari-rings" data-translate-dynamic>Meenakari Rings</a></li>
                            </ul>
                        </li>-->
                    </ul>
                </li>
                <li class="nav-item"><a href="/about-us" class="nav-link" data-translate="about_us">About</a></li>
                <li class="nav-item"><a href="#customer-reviews" class="nav-link" data-translate-dynamic>Testimonials</a></li>
                <!-- <li class="nav-item"><a href="/book-appointment" class="nav-link" data-translate-dynamic>Book Appointment</a></li> -->
                <li class="nav-item"><a href="#" class="nav-link" data-translate-dynamic>Order Track</a></li>
                <li><a href="/contact-us" class="nav-link" data-translate="contact_us">Contact</a></li>
            </ul>

            <!-- Mobile account links in separate div after Contact -->
            <div class="mobile-account-links mobile-special">
                <a href="#" class="mobile-account-link wishlist-toggle">
                    <img src="images/icons/heart.png" alt="Cart" style="width: 18px; height: 18px;"> &nbsp;   <span data-translate="wishlist">Wishlist</span> (<span class="mobile-wishlist-count">0</span>)
                </a>
                <a href="#" class="mobile-account-link cart-toggle">
                    <img src="images/icons/cart-minus.png" alt="Cart" style="width: 18px; height: 18px;"> &nbsp; <span data-translate="cart">Cart</span> (<span class="mobile-cart-count">0</span>)
                </a>
            </div>
        </div>
    </header>

    <!-- Overlay for menu background -->
    <div class="menu-overlay" id="menuOverlay"></div>

    <!-- Search Overlay -->
    <div class="search-overlay" id="searchOverlay">
        <div class="search-container">
            <div class="search-header">
                <div class="search-input-container">
                    <input type="text" class="search-input" id="searchInput" placeholder="Search for Pakistani suits, pret, or modest wear..." data-translate-placeholder="search">
                    <i class="fas fa-search search-input-icon"></i>
                </div>
                <button class="search-close-btn" id="searchCloseBtn">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="search-filters">
                <button class="search-filter-btn active" data-filter="all" data-translate="all">All</button>
                <button class="search-filter-btn" data-filter="ready-to-wear" data-translate="ready_to_wear">Ready to Wear</button>
                <button class="search-filter-btn" data-filter="pret-wear" data-translate="pret_wear">Pret Wear</button>
                <button class="search-filter-btn" data-filter="party-wear" data-translate="party_wear">Party Wear</button>
            </div>

            <div class="search-content">
                <div class="search-results-header">
                    <span class="search-results-count" data-translate-dynamic>0 results found</span>
                    <button class="search-clear-btn" data-translate-dynamic>Clear all</button>
                </div>

                <div class="search-results-grid" id="searchResultsGrid">
                    <!-- Search results will be populated here -->
                </div>

                <div class="search-no-results" id="searchNoResults" style="display: none;">
                    <h3 data-translate="no_products_found">No results found</h3>
                    <p data-translate-dynamic>Try adjusting your search or browse our collections</p>
                </div>
            </div>
        </div>
    </div>



    <!-- Hero Slider Section -->
    <section class="hero-slider">
        <div class="slider-container">
            <div class="slide active">
                <img src="IMG-20260216-WA0041.jpg" alt="Collection 1" class="slide-image">
                <div class="slide-content">
                <!--  <h1 class="slide-title">ELEGANCE</h1>
                    <h2 class="slide-subtitle">Redefined</h2>
                    <p class="slide-description">NEW COLLECTION 2026</p>-->
                    <button class="shop-now-btn">SHOP NOW</button>
                </div>
            </div>
            <div class="slide">
                <img src="IMG-20260216-WA0046.jpg
" alt="Collection 2" class="slide-image">
              <div class="slide-content">
                  <!-- <h1 class="slide-title">TIMELESS</h1>
                    <h2 class="slide-subtitle">Style</h2>
                    <p class="slide-description">TRADITIONAL WEAR</p>-->
                    <button class="shop-now-btn">SHOP NOW</button>
                </div>-->
            </div>
            <div class="slide">
                <img src="IMG-20260216-WA0043.jpg" alt="Collection 3" class="slide-image">
               <div class="slide-content">
                 <!-- <h1 class="slide-title">LUXURY</h1>
                    <h2 class="slide-subtitle">Fabrics</h2>
                    <p class="slide-description">PREMIUM QUALITY</p>-->
                    <button class="shop-now-btn">SHOP NOW</button>
                </div>-->
            </div>
        </div>

        <!-- Slider Navigation -->
        <div class="slider-nav">
            <button class="slider-prev" onclick="changeSlide(-1)">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="slider-next" onclick="changeSlide(1)">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>

        <!-- Slider Dots -->
        <div class="slider-dots">
            <span class="dot active" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    </section>

    <!-- Brand Philosophy Section -->
    <section class="brand-philosophy-section">
        <div class="philosophy-decoration decor-1"></div>
        <div class="philosophy-decoration decor-2"></div>
        <div class="brand-philosophy-container">
           <!-- <span class="philosophy-accent">The Art of Elegance</span>-->
            <h2 class="philosophy-title">Crafting Timeless Narratives Through Every Thread</h2>
            <p class="philosophy-text" style="color: var(--color-text-light);">
                At Taharah, we believe that fashion is more than just attire—it's a celebration of heritage, a whisper of tradition, and a bold statement of modern grace. Each piece is meticulously curated to bring you the finest craftsmanship, blending the soul of the past with the spirit of today.
            </p>
            <div class="philosophy-signature">
                <img src="images/logos/taharah1.png" alt="Brand Logo" style="max-width: 200px; height: auto;">
            </div>
        </div>
    </section>

    <!-- Collections Grid Section -->
    <section class="collections-grid-section">
        <div class="collections-grid">
            <!-- Pakistani pret wear -->
            <a href="/pakistani-pret-wear" class="collection-card">
                <img src="images/IMG-20260208-WA0044.jpg
" alt="Pakistani pret wear">
                <div class="collection-card-overlay">
                    <div class="collection-card-content">
                        <h2>Pakistani<br>pret wear</h2>
                        <p>Effortless, Comfortable, Everyday elegant</p>
                    </div>
                </div>
            </a>

            <!-- Modest -->
            <a href="/modest-wear" class="collection-card">
                <img src="images/IMG-20260212-WA0000.jpg" alt="Modest">
                <div class="collection-card-overlay">
                    <div class="collection-card-content">
                        <h2>Modest</h2>
                        <p>Graceful, Confident, Modern</p>
                    </div>
                </div>
            </a>

            <!-- Ready to wear -->
            <a href="/ready-to-wear" class="collection-card">
                <img src="images/IMG-20260213-WA0007.jpg" alt="Ready to wear">
                <div class="collection-card-overlay">
                    <div class="collection-card-content">
                        <h2>Ready to wear</h2>
                        <p>Quick, Stylish, Premium</p>
                    </div>
                </div>
            </a>

            <!-- Party wear -->
            <a href="/party-wear" class="collection-card">
                <img src="images/IMG-20260212-WA0001.jpg
" alt="Party wear">
                <div class="collection-card-overlay">
                    <div class="collection-card-content">
                        <h2>Party wear</h2>
                        <p>Glam, Festive, Shine</p>
                    </div>
                </div>
            </a>
        </div>
    </section>

    <!-- New Arrivals Section -->
    <div class="new-arrivals-header">
        <h2 class="section-title" data-translate="new_arrivals">New Arrivals</h2>
        <p class="section-subtitle" data-translate="discover_latest">Discover our latest exquisite pakistani suits collections</p>
    </div>
    <section class="new-arrivals">
        <div class="new-arrivals-container">
            <div class="arrivals-hero-container">
                <img src="images/IMG-20260208-WA0060.jpg
" alt="New Arrivals Collection" class="arrivals-hero-image">
                <div class="arrivals-hero-overlay"></div>
                <div class="arrivals-hero-content">
                    <h2 class="arrivals-hero-title" data-translate="new_arrivals">NEW ARRIVALS</h2>
                    <div class="arrivals-hero-divider"></div>
                    <a href="/new-arrivals" class="arrivals-hero-button" data-translate="view_all">VIEW ALL</a>
                </div>
            </div>
        </div>
    </section>

      <!-- New Arrivals Section -->
      <section class="new-arrivals-edit full-width-section" style="margin-bottom: 5px;">
          <div class="product-scroll-container" id="newArrivalsProductContainer">
              <!-- Loader -->
              <div class="product-loader show" id="newArrivalsLoader">
                  <div class="product-loader-spinner"></div>
                  <div class="product-loader-text">Loading new arrivals...</div>
              </div>
              <!-- Products will be loaded here dynamically -->
          </div>
         <!-- <div class="view-all-container">
              <a href="/new-arrivals" class="view-all-btn">VIEW ALL</a>
          </div>-->
          <div class="reviews-cta">
              <a href="/new-arrivals" class="chat-now-btn" data-translate="view_all">VIEW ALL</a>
              </div>
      </section>

    <!-- Product Categories Section --
    <section class="you-may-also-like full-width-section" style="margin-bottom: 20px;">
        <div class="product-scroll-container">
            <div class="product-item" data-product-id="RBC-01" data-product-price="125000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6490.jpg" alt="Royal Bridal Collection">
                        <button class="add-to-wishlist" data-product-id="RBC-01" data-product-name="Royal Bridal Collection" data-product-price="125000" data-product-image="images/6Y4A6490.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Royal Bridal Collection</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="125000">₹1,25,000</span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="product-item" data-product-id="EBS-02" data-product-price="98500" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6534.jpg" alt="Elegant Bridal Set">
                        <button class="add-to-wishlist" data-product-id="EBS-02" data-product-name="Elegant Bridal Set" data-product-price="98500" data-product-image="images/6Y4A6534.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Elegant Bridal Set</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="98500">₹98,500</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="product-item" data-product-id="TBE-03" data-product-price="145000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6225.jpg" alt="Traditional Bridal Ensemble">
                        <button class="add-to-wishlist" data-product-id="TBE-03" data-product-name="Traditional Bridal Ensemble" data-product-price="145000" data-product-image="images/6Y4A6225.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Traditional Bridal Ensemble</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="145000">₹1,45,000</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="product-item" data-product-id="TBE-03" data-product-price="145000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6490.jpg" alt="Traditional Bridal Ensemble">
                        <button class="add-to-wishlist" data-product-id="TBE-03" data-product-name="Traditional Bridal Ensemble" data-product-price="145000" data-product-image="images/6Y4A6490.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Traditional Bridal Ensemble</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="145000">₹1,45,000</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="product-item" data-product-id="CBJ-04" data-product-price="115000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6225.jpg" alt="Classic Bridal Jewelry">
                        <button class="add-to-wishlist" data-product-id="CBJ-04" data-product-name="Classic Bridal Jewelry" data-product-price="115000" data-product-image="images/6Y4A6225.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Classic Bridal Jewelry</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="115000">₹1,15,000</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="view-all-container">
            <a href="#" class="view-all-btn">VIEW ALL</a>
        </div>
    </section>-->


      <!-- Polki Collection Section -->
    <div class="polki-collection-header">
        <h2 class="section-title" data-translate="pret_wear">Pakistani Pret Wear</h2>
        <p class="section-subtitle">Exquisite suit pieces for your special day</p>
    </div>
    <section class="polki-collection">
        <div class="polki-collection-container">
            <div class="arrivals-hero-container">
                <img src="images/IMG-20260208-WA0058.jpg
" alt="saree Collection" class="arrivals-hero-image">
                <div class="arrivals-hero-overlay"></div>
                <div class="arrivals-hero-content">
                    <h2 class="arrivals-hero-title" data-translate="pret_wear">PAKISTANI PRET WEAR</h2>
                    <div class="arrivals-hero-divider"></div>
                    <a href="/pakistani-pret-wear" class="arrivals-hero-button" data-translate="view_all">VIEW ALL</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Polki Edit Section -->
    <section class="polki-edit">
        <div class="polki-edit-container">

            <div class="arrivals-grid" id="jewelryCollectionContainer">
                <!-- Loader -->
                <div class="product-loader show" id="jewelryCollectionLoader" style="grid-column: 1 / -1;">
                    <div class="product-loader-spinner"></div>
                    <div class="product-loader-text">Loading collection...</div>
                </div>
                <!-- Products will be loaded here dynamically -->
            </div>

            <div class="reviews-cta">
                  <a href="/pakistani-pre-wear" class="chat-now-btn" data-translate="view_all">VIEW ALL</a>
                  </div>
        </div>
    </section>

    <!-- Polki Product Categories Section  --
    <section class="polki-products full-width-section" style="margin-bottom: 20px;">
        <div class="product-scroll-container">
            <div class="product-item" data-product-id="PKN-01" data-product-price="245000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/d3268961-a795-4d9c-a4fd-a9a208519453_7a3f17fb-bf85-476a-810b-5991bb3874eb.jpg">
                        <button class="add-to-wishlist" data-product-id="PKN-01" data-product-name="Exquisite Polki Necklace" data-product-price="245000" data-product-image="images/d3268961-a795-4d9c-a4fd-a9a208519453_7a3f17fb-bf85-476a-810b-5991bb3874eb.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Exquisite Polki Necklace</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="245000">₹2,45,000</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="product-item" data-product-id="PKB-02" data-product-price="185000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/490A9757.jpg" alt="Polki Bangles">
                        <button class="add-to-wishlist" data-product-id="PKB-02" data-product-name="Traditional Polki Bangles" data-product-price="185000" data-product-image="images/490A9757.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Traditional Polki Bangles</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="185000">₹1,85,000</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="product-item" data-product-id="PKB-02" data-product-price="185000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/490A9973.jpg" alt="Polki Bangles">
                        <button class="add-to-wishlist" data-product-id="PKB-02" data-product-name="Traditional Polki Bangles" data-product-price="185000" data-product-image="images/490A9973.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Traditional Polki Bangles</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="185000">₹1,85,000</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="product-item" data-product-id="PKE-03" data-product-price="125000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6534.jpg" alt="Polki Earrings">
                        <button class="add-to-wishlist" data-product-id="PKE-03" data-product-name="Royal Polki Earrings" data-product-price="125000" data-product-image="images/6Y4A6534.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Royal Polki Earrings</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="125000">₹1,25,000</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="product-item" data-product-id="PKR-04" data-product-price="95000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/490A9706.jpg" alt="Polki Rings">
                        <button class="add-to-wishlist" data-product-id="PKR-04" data-product-name="Elegant Polki Rings" data-product-price="95000" data-product-image="images/490A9706.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Elegant Polki Rings</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="95000">₹95,000</span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="product-item" data-product-id="PKS-05" data-product-price="315000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6225.jpg" alt="Polki Set">
                        <button class="add-to-wishlist" data-product-id="PKS-05" data-product-name="Complete Polki Set" data-product-price="315000" data-product-image="images/6Y4A6225.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Complete Polki Set</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="315000">₹3,15,000</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="view-all-container">
            <a href="#" class="view-all-btn">VIEW ALL</a>
        </div>
    </section>-->


    <!-- Watch & Buy Section - Dynamic Videos from Firebase -->
    <section class="testimonials-section" id="testimonials" style="margin-top: -10px; padding-top: 10px;">
        <div class="featured-collection-header2">
            <h2 class="section-title" data-translate="watch_and_buy">Watch And Buy</h2>
        </div>
        <div class="testimonials-container">
            <div class="testimonials-scroll" id="dynamic-watch-buy-videos">
                <div id="watch-buy-loading-spinner" style="display: flex; align-items: center; justify-content: center; padding: 40px; width: 100%;">
                    <span style="color: #64748b;">Loading videos...</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Removing the duplicate inline script and keeping the external testimonial-scroller.js logic -->


    <!-- Bridal Collection Section with Video -->
    <section class="bridal-jewelry-section">
        <div class="video-background">
            <video autoplay muted loop playsinline class="background-video">
                <source src="images/videos/hero_video.mp4" type="video/mp4">                Your browser does not support the video tag.
            </video>
            <div class="video-overlay"></div>
        </div>
        <div class="bridal-content">
            <h1 class="bridal-title" data-translate="create_perfect_bridal">Let's Create Your Perfect Stitched Ensemble</h1>
            <p class="bridal-description" data-translate="bridal_description">
                Dreaming of something truly elegant? Discover our exquisite fashion collection. Connect with our designers and create your perfect fashion ensemble.
            </p>
            <button class="chat-now-btn" onclick="openWhatsAppChat()" data-translate="chat_now">CHAT NOW</button>
        </div>
    </section>

    <!-- Interactive Product Showcase Section -->
    <section class="interactive-showcase-section">
        <div class="interactive-showcase-container">
            <div class="polki-collection-header">
                  <h2 class="section-title" data-translate="lumina_bloom">Lumina by Taharah - Bloom</h2>

              </div>
            <div class="showcase-content">
                <div class="showcase-image-container">
                    <img src="images/IMG-20260208-WA0067.jpg" alt="Complete Jewelry Set" class="showcase-main-image">
                    <!-- Clickable product dots -->
                    <div class="product-dot dot-necklace" title="View Necklace"></div>
                <!--    <div class="product-dot dot-earrings" title="View Earrings"></div>
                    <div class="product-dot dot-bangle" title="View Bangle"></div>-->
                </div>
                <div class="showcase-products-wrapper">
                    <div class="showcase-product-list">
                        <!-- Products will be loaded dynamically -->
                    </div>
                    <button class="add-set-to-bag-btn" data-translate="add_set_to_bag">Add Set to Bag</button>
                </div>
            </div>
        </div>
    </section>

    <!-- Product Popup Modal -->
    <div class="product-popup-modal">
        <div class="product-popup-content">
            <button class="popup-close-btn">&times;</button>
            <img src="" alt="Product" class="popup-product-image">
            <div class="popup-product-details">
                <h3 class="popup-product-name"></h3>
                <div class="popup-product-price"></div>
                <p class="popup-product-description"></p>
                <div class="popup-action-buttons">
                    <button class="popup-add-to-cart-btn" data-translate="add_to_cart">Add to Cart</button>
                    <button class="popup-view-details-btn" data-translate="view_details">View Details</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Customer Reviews Section -->
    <section class="customer-reviews-section" id="customer-reviews">
        <div class="reviews-container">
            <div class="reviews-header">
                <h2 class="section-title" data-translate-dynamic>What Our Customers Say</h2>
                <p class="section-subtitle" data-translate-dynamic>Real reviews from our happy customers</p>
            </div>

            <div class="reviews-wrapper">
                <button class="reviews-scroll-arrow reviews-scroll-arrow-left" id="reviewsScrollLeft">
                    <i class="fas fa-chevron-left"></i>
                </button>

                <div class="reviews-scroll-container" id="reviewsScrollContainer">
                    <!-- Review 1 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0054.jpg" alt="Customer Review 1">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"The quality is just amazing! I'm so happy with my purchase from Taharah. Highly recommended! ❤️"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 2 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0055.jpg" alt="Customer Review 2">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"Absolutely love the collection. The fabric and stitching are top-notch. Will buy again! ✨"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 3 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0056.jpg" alt="Customer Review 3">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"Excellent service and beautiful designs. Taharah never disappoints! 🙏"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 4 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0057.jpg" alt="Customer Review 4">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"The colors and patterns are even better in person. Truly elegant Pakistani fashion. 🥰"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 5 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0058.jpg" alt="Customer Review 5">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"Perfect fit and very comfortable. Thank you for such a wonderful experience! 💖"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 6 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0059.jpg" alt="Customer Review 6">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"High-quality materials and professional craftsmanship. Best in the market! 👍"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 7 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0060.jpg" alt="Customer Review 7">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"Fast shipping and great customer support. The suit is gorgeous! 😍"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 8 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0061.jpg" alt="Customer Review 8">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"Everything about Taharah is premium. My friends loved my outfit! ✨"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review 9 -->
                    <div class="review-item">
                        <div class="review-image">
                            <img src="images/reviews/IMG-20260216-WA0062.jpg" alt="Customer Review 9">
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                <p data-translate-dynamic>"Simply stunning. The attention to detail is remarkable. Definitely a regular customer now! 🌸"</p>
                            </div>
                            <div class="review-rating">
                                <div class="stars">
                                    <span>⭐⭐⭐⭐⭐</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="reviews-scroll-arrow reviews-scroll-arrow-right" id="reviewsScrollRight">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>

            <div class="reviews-cta">
                <button class="chat-now-btn" onclick="openWhatsAppChat()" data-translate="share_review">SHARE YOUR REVIEW</button>
            </div>
        </div>

        <!-- Image Modal -->
        <div class="image-modal" id="imageModal">
            <span class="image-modal-close" id="imageModalClose">&times;</span>
            <div class="image-modal-content">
                <img id="modalImage" src="" alt="Full Size Review Image">
            </div>
        </div>
    </section>


    <!-- Featured Collection Section -->
        <div class="polki-collection-header">
            <h2 class="section-title" data-translate="featured">Ready to Wear</h2>
            <p class="section-subtitle" data-translate-dynamic>Elegant and breathable designs for every occasion</p>
        </div>

        <div class="featured-collection-wrapper">
            <button class="reviews-scroll-arrow reviews-scroll-arrow-left" id="featuredCollectionScrollLeft">
                <i class="fas fa-chevron-left"></i>
            </button>


            <div class="product-scroll-container" id="featuredCollectionProductContainer">
                <!-- Loader -->
                <div class="product-loader show" id="featuredCollectionLoader">
                    <div class="product-loader-spinner"></div>
                    <div class="product-loader-text">Loading Ready to Wear...</div>
                </div>
                <!-- Products will be loaded here dynamically -->
            </div>

          <!--  <button class="scroll-arrow scroll-arrow-right" id="bridalScrollRight">
                <i class="fas fa-chevron-right"></i>
            </button>-->
            <button class="reviews-scroll-arrow reviews-scroll-arrow-right" id="featuredCollectionScrollRight">
                    <i class="fas fa-chevron-right"></i>
            </button>

        </div>

          <div class="reviews-cta">
              <a href="/ready-to-wear" class="chat-now-btn" data-translate="view_all">VIEW ALL</a>
              </div>
    </section>
         <!--   <h2 class="section-title">Earrings</h2>

            <div class="product-scroll-container">
                <div class="product-item sold-out" data-product-id="NBMFE-12">
                    <a href="#" style="text-decoration: none; color: inherit;">
                        <div class="product-image">
                            <img src="images/category/IMG_20250504_145653.jpg" alt="Navy Blue Meenakshi Fusion Golden Earrings">
                            <div class="product-badge">SAVE 33%</div>
                            <div class="sold-out-badge">SOLD OUT</div>
                            <button class="add-to-wishlist" data-product-id="NBMFE-12" data-product-name="Navy Blue Meenakshi Fusion Golden Earrings" data-product-price="21300" data-product-image="images/category/IMG_20250504_145653.jpg"><i class="far fa-heart"></i></button>
                        </div>
                        <div class="product-details">
                            <h3 class="product-name">Navy Blue Meenakshi Fusion Golden Earrings</h3>
                            <div class="product-pricing">
                                <span class="current-price" data-original-price="21300">Rs. 21,300.00</span>
                                <span class="original-price">Rs. 31,949.00</span>
                                <span class="discount-tag">-33%</span>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="product-item" data-product-id="BMFE-09">
                    <a href="#" style="text-decoration: none; color: inherit;">
                        <div class="product-image">
                            <img src="images/category/Screenshot_20250504_130638.jpg" alt="Blue Meenakshi Fusion Earrings">
                            <div class="product-badge">SAVE 33%</div>
                            <button class="add-to-wishlist" data-product-id="BMFE-09" data-product-name="Blue Meenakshi Fusion Earrings" data-product-price="21300" data-product-image="images/category/Screenshot_20250504_130638.jpg"><i class="far fa-heart"></i></button>
                        </div>
                        <div class="product-details">
                            <h3 class="product-name">Blue Meenakshi Fusion Earrings</h3>
                            <div class="product-pricing">
                                <span class="current-price" data-original-price="21300">Rs. 21,300.00</span>
                                <span class="original-price">Rs. 31,949.00</span>
                                <span class="discount-tag">-33%</span>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="product-item" data-product-id="PDRE-10">
                    <a href="#" style="text-decoration: none; color: inherit;">
                        <div class="product-image">
                            <img src="images/category/Screenshot_20250504_130717.jpg" alt="Pearl Drop Earrings">
                            <div class="product-badge">SAVE 30%</div>
                            <button class="add-to-wishlist" data-product-id="PDRE-10" data-product-name="Pearl Drop Earrings" data-product-price="19980" data-product-image="images/category/Screenshot_20250504_130717.jpg"><i class="far fa-heart"></i></button>
                        </div>
                        <div class="product-details">
                            <h3 class="product-name">Pearl Drop Earrings</h3>
                            <div class="product-pricing">
                                <span class="current-price" data-original-price="19980">Rs. 19,980.00</span>
                                <span class="original-price">Rs. 28,400.00</span>
                                <span class="discount-tag">-30%</span>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="product-item" data-product-id="GSSE-11">
                    <a href="#" style="text-decoration: none; color: inherit;">
                        <div class="product-image">
                            <img src="images/category/Screenshot_20250504_130805.jpg" alt="Gemstone Stud Earrings">
                            <div class="product-badge">SAVE 25%</div>
                            <button class="add-to-wishlist" data-product-id="GSSE-11" data-product-name="Gemstone Stud Earrings" data-product-price="17750" data-product-image="images/category/Screenshot_20250504_130805.jpg"><i class="far fa-heart"></i></button>
                        </div>
                        <div class="product-details">
                            <h3 class="product-name">Gemstone Stud Earrings</h3>
                            <div class="product-pricing">
                                <span class="current-price" data-original-price="17750">Rs. 17,750.00</span>
                                <span class="original-price">Rs. 23,999.00</span>
                                <span class="discount-tag">-25%</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="view-all-container">
                <a href="#" class="view-all-btn">VIEW ALL</a>
            </div>
        </div>-->
    </section>

    <!-- Polki Collection Section --
    <div class="new-arrivals-header">
        <h2 class="section-title">Polki Collection</h2>
        <p class="section-subtitle">Discover our exquisite fashion collection</p>
    </div>
    <section class="new-arrivals">
        <div class="new-arrivals-container">
            <div class="arrivals-hero-container">
                <img src="images/Screenshot_20250520_095145.jpg" alt="Polki Collection" class="arrivals-hero-image">
                <div class="arrivals-hero-overlay"></div>
                <div class="arrivals-hero-content">
                    <h2 class="arrivals-hero-title">POLKI COLLECTION</h2>
                    <div class="arrivals-hero-divider"></div>
                    <a href="#" class="arrivals-hero-button">VIEW ALL</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Polki Product Categories Section --
    <section class="you-may-also-like full-width-section" style="margin-bottom: 20px;">
        <div class="product-scroll-container">
            <div class="product-item" data-product-id="PNC-01" data-product-price="245000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/d3268961-a795-4d9c-a4fd-a9a208519453_7a3f17fb-bf85-476a-810b-5991bb3874eb.jpg" alt="Polki Necklace Collection">
                        <button class="add-to-wishlist" data-product-id="PNC-01" data-product-name="Polki Necklace Collection" data-product-price="245000" data-product-image="images/d3268961-a795-4d9c-a4fd-a9a208519453_7a3f17fb-bf85-476a-810b-5991bb3874eb.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Polki Necklace Collection</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="245000">₹2,45,000</span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="product-item" data-product-id="PBG-02" data-product-price="185000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/490A9744.jpg" alt="Polki Bangles Set">
                        <button class="add-to-wishlist" data-product-id="PBG-02" data-product-name="Polki Bangles Set" data-product-price="185000" data-product-image="images/490A9744.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Polki Bangles Set</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="185000">₹1,85,000</span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="product-item" data-product-id="PER-03" data-product-price="95000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/Frame_1000005344.png" alt="Polki Earrings">
                        <button class="add-to-wishlist" data-product-id="PER-03" data-product-name="Polki Earrings" data-product-price="95000" data-product-image="images/Frame_1000005344.png"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Polki Earrings</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="95000">₹95,000</span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="product-item" data-product-id="PRG-04" data-product-price="75000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/490A0064.jpg" alt="Polki Rings">
                        <button class="add-to-wishlist" data-product-id="PRG-04" data-product-name="Polki Rings" data-product-price="75000" data-product-image="images/490A0064.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Polki Rings</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="75000">₹75,000</span>
                        </div>
                    </div>
                </a>
            </div>

            <div class="product-item" data-product-id="PCS-05" data-product-price="325000" style="background: none;">
                <a href="#" style="text-decoration: none; color: inherit;">
                    <div class="product-image">
                        <img src="images/6Y4A6225.jpg" alt="Polki Choker Set">
                        <button class="add-to-wishlist" data-product-id="PCS-05" data-product-name="Polki Choker Set" data-product-price="325000" data-product-image="images/6Y4A6225.jpg"><i class="far fa-heart"></i></button>
                    </div>
                    <div class="product-details" style="text-align: center;">
                        <h3 class="product-name">Polki Choker Set</h3>
                        <div class="product-pricing">
                            <span class="current-price" data-original-price="325000">₹3,25,000</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="view-all-container">
            <a href="#" class="view-all-btn">VIEW ALL</a>
        </div>
    </section>-->


    <!-- Customer Testimonials Section --
    <section class="customer-testimonials-section" id="customer-testimonials">
        <h2 class="customer-testimonials-title">Testimonials</h2>
        <div class="customer-testimonials-container">
            <div class="customer-testimonials-scroll">
                <!-- Video 1 (Left) --
                <div class="customer-testimonial-item">
                    <div class="video-container">
                        <div class="play-button-overlay">
                            <div class="customer-play-button">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 5.14v14l11-7-11-7z" fill="#ffffff"/>
                                </svg>
                            </div>
                        </div>
                        <video class="testimonial-video">
                            <source src="1024X768(3).mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>

                <!-- Video 2 (Center) --
                <div class="customer-testimonial-item">
                    <div class="video-container">
                        <div class="play-button-overlay">
                            <div class="customer-play-button">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 5.14v14l11-7-11-7z" fill="#ffffff"/>
                                </svg>
                            </div>
                        </div>
                        <video class="testimonial-video">
                            <source src="images/videos/1024X768.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>

                <!-- Video 3 (Right) --
                <div class="customer-testimonial-item">
                    <div class="video-container">
                        <div class="play-button-overlay">
                            <div class="customer-play-button">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 5.14v14l11-7-11-7z" fill="#ffffff"/>
                                </svg>
                            </div>
                        </div>
                        <video class="testimonial-video">
                            <source src="1024X768(2).mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </section>-->

    <!-- Minimalist Collapsible Footer -->
    <footer class="footer-minimalist">
        <div class="container">
            <!-- Info Section -->
            <div class="footer-section">
                <button class="footer-toggle" data-section="info-content">
                    <span class="footer-title" data-translate="info">Info</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="footer-content" id="info-content">
                    <ul>
                        <li><a href="/about-us" data-translate="about_us">About Us</a></li>
                        <li><a href="terms-conditions#shipping-and-delivery" data-translate-dynamic>Shipping Policy</a></li>
                        <li><a href="terms-conditions#returns-and-refunds" data-translate-dynamic>Returns & Exchanges</a></li>
                        <li><a href="/terms-conditions" data-translate-dynamic>Terms and Conditions</a></li>
                        <li><a href="/privacy-policy" data-translate-dynamic>Privacy Policy</a></li>
                    </ul>
                </div>
            </div>

            <!-- Categories Section -->
            <div class="footer-section">
                <button class="footer-toggle" data-section="categories-content">
                    <span class="footer-title" data-translate="categories">Categories</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="footer-content" id="categories-content">
                    <ul>
                        <li class="category-with-sub">
                            <div class="category-item-header">
                                <a href="/pakistani-pret-wear" data-translate="Pakistani Pret Wear">Pakistani Pret Wear</a>
                               <!-- <i class="fas fa-plus category-toggle-icon"></i>-->
                            </div>
                          <!--  <ul class="subcategory-list">
                                <li><a href="/gold-necklace" data-translate-dynamic>Gold Necklace</a></li>
                                <li><a href="/silver-necklace" data-translate-dynamic>Silver Necklace</a></li>
                                <li><a href="/meenakari-necklace" data-translate-dynamic>Meenakari Necklace</a></li>
                            </ul>-->
                        </li>
                        <li class="category-with-sub">
                            <div class="category-item-header">
                                <a href="/ready-to-wear" data-translate="Ready to Wear">Ready to Wear</a>
                              <!--  <i class="fas fa-plus category-toggle-icon"></i>-->
                            </div>
                          <!--  <ul class="subcategory-list">
                                <li><a href="/gold-earrings" data-translate-dynamic>Gold Earrings</a></li>
                                <li><a href="/silver-earrings" data-translate-dynamic>Silver Earrings</a></li>
                                <li><a href="/meenakari-earrings" data-translate-dynamic>Meenakari Earrings</a></li>
                            </ul>-->
                        </li>
                        <li class="category-with-sub">
                            <div class="category-item-header">
                                <a href="/modest-wear" data-translate-dynamic>Modest Wear</a>
                              <!--  <i class="fas fa-plus category-toggle-icon"></i>-->
                            </div>
                          <!--  <ul class="subcategory-list">
                                <li><a href="/gold-bangles" data-translate-dynamic>Gold Bangles</a></li>
                                <li><a href="/silver-bangles" data-translate-dynamic>Silver Bangles</a></li>
                                <li><a href="/meenakari-bangles" data-translate-dynamic>Meenakari Bangles</a></li>
                            </ul>-->
                        </li>
                                    <li class="category-with-sub">
                                        <div class="category-item-header">
                                            <a href="/party-wear" data-translate-dynamic>Party wear</a>
                                          <!--  <i class="fas fa-plus category-toggle-icon"></i>-->
                                        </div>
                                      <!--  <ul class="subcategory-list">
                                            <li><a href="/gold-bangles" data-translate-dynamic>Gold Bangles</a></li>
                                            <li><a href="/silver-bangles" data-translate-dynamic>Silver Bangles</a></li>
                                            <li><a href="/meenakari-bangles" data-translate-dynamic>Meenakari Bangles</a></li>
                                        </ul>-->
                                    </li>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Collection Section -->
            <div class="footer-section">
                <button class="footer-toggle" data-section="collection-content">
                    <span class="footer-title" data-translate-dynamic>Collection</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="footer-content" id="collection-content">
                    <ul>
                        <!--<li><a href="/all-collection" data-translate="all_collections">All Collection</a></li>
                        <li><a href="/featured-collection" data-translate="featured">Ready to Wear</a></li>-->
                        <li><a href="/new-arrivals" data-translate="new_arrivals">New Arrivals</a></li>
                        <li><a href="/pakistani-pret-wear">Pakistani Pret Wear</a></li>
                        <li><a href="/ready-to-wear">Ready to Wear</a></li>
                        <li><a href="/party-wear">Party Wear</a></li>
                        <li><a href="/modest-wear">Modest Wear</a></li>
                    </ul>
                </div>
            </div>

            <!-- Exclusive Benefits Section -->
            <div class="footer-section">
                <button class="footer-toggle" data-section="benefits-content">
                    <span class="footer-title" data-translate-dynamic>Exclusive benefits</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="footer-content" id="benefits-content">
                    <ul>
                        <li><a href="#" data-translate-dynamic>Personal Styling</a></li>
                    </ul>
                </div>
            </div>

            <!-- Social Media Icons Section -->
            <div class="footer-social-section">
                <h3 class="social-section-title" data-translate="follow_social">Follow us on social media</h3>
                <div class="social-icons-container">
                    <a href="https://www.instagram.com/taharahofficial_?igsh=MTdpdTRvdTBiMDh1dQ==" target="_blank" class="social-icon-link">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.facebook.com" target="_blank" class="social-icon-link">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    
                </div>
            </div>

            <!-- Download Our App Section -->
            <!-- <div class="footer-app-section">
                <h3 class="app-section-title" data-translate="download_app">Download Our App</h3>
                <div class="app-buttons-container">
                    <a href="#" class="app-store-button">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" alt="Download on App Store">
                    </a>
                    <a href="#" class="google-play-button">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Get it on Google Play">
                    </a>
                </div>-->
            </div>

            <div class="footer-bottom">
            <div class="container">
                <div class="footer-info">
                    <div class="copyright">
                        <p data-translate-dynamic>&copy; <span id="currentYear"></span> Taharah. All rights reserved. | Developed by <a href="https://..netlify.app/" target="_blank" style="color: #9c7c38; text-decoration: none; font-weight: 500;">Savan Naik</a></p>
                    <script>
                        document.getElementById("currentYear").textContent = new Date().getFullYear();
                    </script>
                    </div>

                    <div class="footer-links">
                        <a href="/terms-conditions" data-translate-dynamic>Terms and Conditions</a>
                        <a href="/privacy-policy" data-translate-dynamic>Privacy Policy</a>
                    </div>

                    <div class="payment-methods">
                        <span><i class="fab fa-cc-amex"></i></span>
                        <span><i class="fab fa-cc-discover"></i></span>
                        <span><i class="fab fa-google-pay"></i></span>
                        <span><i class="fab fa-cc-mastercard"></i></span>
                        <span><i class="fab fa-cc-paypal"></i></span>
                        <span class="union-pay">UP</span>
                        <span><i class="fab fa-cc-visa"></i></span>
                        <span class="phonepe-icon"><img src="https://download.logo.wine/logo/PhonePe/PhonePe-Logo.wine.png" alt="PhonePe" style="height: 30px; width: auto; vertical-align: middle;"></span>
                        <span class="paytm-icon"><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Paytm_Logo_%28standalone%29.svg" alt="Paytm" style="height: 18px; width: auto; vertical-align: middle;"></span>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </footer>

    <!-- WhatsApp Button -->
      <a href="https://wa.me/918589920686?text=Hi! I would like to know more about your collection. Can you help me?" class="whatsapp-btn">
          <i class="fab fa-whatsapp"></i>
      </a>

    <!-- Bottom Navigation Bar -->
    <nav class="bottom-nav">
        <a href="/index" class="bottom-nav-item active">
            <i class="fi fi-rs-home"></i>
            <span data-translate="home">Home</span>
        </a>
        <a href="/pakistani-pret-wear" class="bottom-nav-item">
            <i class="fi fi-rs-shop"></i>
            <span data-translate="shop">Shop</span>
        </a>
        <a href="/login" class="bottom-nav-item">
            <i class="fi fi-rs-user"></i>
            <span data-translate="account">Account</span>
        </a>
        <div class="bottom-nav-item currency-selector-wrapper">
            <span id="selected-currency-flag" class="currency-flag-display">🇮🇳</span>
            <span id="selected-currency-code" class="currency-code-display">INR</span>
            <select id="currency-selector" class="currency-select" onchange="CurrencyConverter.changeCurrency(this.value)">
                <option value="INR">INR</option>
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
                <option value="GBP">GBP</option>
                <option value="AED">AED</option>
                <option value="CAD">CAD</option>
                <option value="AUD">AUD</option>
            </select>
        </div>
        <div class="bottom-nav-item language-selector-wrapper">
            <span id="selected-language-flag" class="language-flag-display">🇬🇧</span>
            <span id="selected-language-code" class="language-code-display">EN</span>
            <select id="language-selector" class="language-select" onchange="LanguageTranslator.changeLanguage(this.value)">
                <option value="en">EN</option>
                <option value="hi">HI</option>
                <option value="es">ES</option>
                <option value="fr">FR</option>
                <option value="ar">AR</option>
                <option value="de">DE</option>
            </select>
        </div>
        <a href="#" class="bottom-nav-item" id="bottomNavCart">
            <i class="fi fi-rs-shopping-bag"></i>
            <span data-translate="bag">Bag</span>
        </a>
    </nav>

    <script>
      // Network status monitoring
      let isOnline = navigator.onLine;
      window.addEventListener('online', () => {
        console.log('Network connection restored');
        isOnline = true;
        document.dispatchEvent(new CustomEvent('network-status-changed', { detail: { online: true } }));
      });
      window.addEventListener('offline', () => {
        console.log('Network connection lost');
        isOnline = false;
        document.dispatchEvent(new CustomEvent('network-status-changed', { detail: { online: false } }));
      });
    </script>

    <!-- Navigation scripts -->
    <script src="js/navigation.js?v=1.0.4"></script>
    <script src="js/auto-slider.js?v=1.0.1"></script>
    <script src="js/banner-rotator.js"></script>

    <!-- Global Error Handler - Place this before any other scripts -->
    <script src="js/error-handler.js"></script>

    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-storage-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js"></script>

    <!-- Initialize Firebase -->
    <script>
      // Firebase configuration - UPDATED to studio-7642357109-d9026 project
      const firebaseConfig = {
        apiKey: "AIzaSyCQ9gafSnJBwuXvIpnOGn4Kwo8YqMkKY0M",
        authDomain: "studio-7642357109-d9026.firebaseapp.com",
        projectId: "studio-7642357109-d9026",
        storageBucket: "studio-7642357109-d9026.firebasestorage.app",
        messagingSenderId: "1076239216683",
        appId: "1:1076239216683:web:a298fa70bb136183217a6e",
        measurementId: "G-ZYZ750JHMB"
      };

      // Initialize Firebase directly (like in login)
      if (!firebase.apps.length) {
        firebase.initializeApp(firebaseConfig);
      }

      // Configure Firestore settings for better offline handling
      firebase.firestore().settings({
        cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED,
        ignoreUndefinedProperties: true
      });

      // Enable offline persistence
      firebase.firestore().enablePersistence({ synchronizeTabs: true })
        .catch(err => {
          if (err.code == 'failed-precondition') {
            console.log('Multiple tabs open, persistence can only be enabled in one tab at a time.');
          } else if (err.code == 'unimplemented') {
            console.log('The current browser does not support all of the features required to enable persistence');
          }
        });

      // Enable session persistence
      firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
        .catch(error => {
          console.error("Auth persistence error:", error);
        });
      
      // Make Firestore globally available as db for Watch & Buy product links
      window.db = firebase.firestore();
      console.log('✓ Firestore initialized and available globally as window.db');
    </script>

    <!-- Analytics Tracking -->
    <script>
        // Wait for Firebase to be fully initialized before loading analytics
        function loadAnalyticsScript() {
            if (typeof firebase !== 'undefined' && firebase.apps.length > 0) {
                console.log('🔥 Firebase ready, loading analytics script...');
                const script = document.createElement('script');
                script.src = 'js/nazakat-analytics.js?v=1.0.1';
                script.onload = function() {
                    console.log('📊 Analytics script loaded successfully');
                };
                script.onerror = function() {
                    console.error('❌ Failed to load analytics script');
                };
                document.head.appendChild(script);
            } else {
                console.log('⏳ Firebase not ready, retrying in 500ms...');
                setTimeout(loadAnalyticsScript, 500);
            }
        }

        // Start loading analytics after a brief delay to ensure Firebase init
        setTimeout(loadAnalyticsScript, 1000);
    </script>

    <!-- Firebase Auth Global Module -->

    <!-- Firebase Auth Module -->
    <script src="js/firebase/firebase-auth.js"></script>

    <!-- Cart System Scripts -->
    <script src="js/cart-local-storage.js?v=1.0.0"></script>
    <script src="js/firebase/firebase-cart-manager.js?v=1.0.0"></script>
    <script src="js/cart-manager.js?v=1.0.1"></script>

    <!-- Wishlist Scripts -->
    <script src="js/wishlist-local-storage.js?v=1.0.0"></script>
    <script src="js/firebase/firebase-wishlist-manager.js?v=1.0.0"></script>
    <script src="js/wishlist-manager.js?v=1.0.0"></script>
    
    <!-- Initialize Price Cache for Hardcoded Products (CRITICAL FIX) -->
    <script>
        // Populate PRODUCT_PRICES_CACHE with all hardcoded button prices IMMEDIATELY
        // This happens before any currency conversion or DOM manipulation
        if (window.PRODUCT_PRICES_CACHE) {
            const hardcodedPrices = {
                'RBC-01': 125000,
                'EBS-02': 98500,
                'TBE-03': 145000,
                'CBJ-04': 115000,
                'PKN-01': 245000,
                'PKB-02': 185000,
                'PKE-03': 125000,
                'PKR-04': 95000,
                'PKS-05': 315000,
                'NBMFE-12': 21300,
                'BMFE-09': 21300,
                'PDRE-10': 19980,
                'GSSE-11': 17750,
                'PNC-01': 245000,
                'PBG-02': 185000,
                'PER-03': 95000,
                'PRG-04': 75000,
                'PCS-05': 325000,
                'CHRM-07': 15550,
                'GLBR-11': 38500,
                'SLAT-12': 42000
            };
            
            Object.entries(hardcodedPrices).forEach(([productId, price]) => {
                window.PRODUCT_PRICES_CACHE.set(productId, price);
                console.log('🎯 Cached hardcoded price for', productId, ':', price, 'INR');
            });
            console.log('✅ All', Object.keys(hardcodedPrices).length, 'hardcoded product prices cached');
        }
    </script>
    
    <script src="js/main.js"></script>

    <!-- Currency Converter (Load FIRST before products render) -->
    <script src="js/currency-converter.js?v=3.0.0"></script>

    <!-- Featured Collection Scroll Arrows -->
    <script src="js/featured-collection-scroll.js?v=1.0.0"></script>

    <!-- Featured Collection Products Loader -->
    <script src="js/cache-invalidator.js"></script>
    <script src="js/featured-collection-products-loader.js?v=1.0.0"></script>
    <script src="js/new-arrivals-products-loader.js?v=1.0.0"></script>
        <!-- Saree Collection Products Loader -->
    <script src="js/saree-collection-products-loader.js?v=1.0.0"></script>

    <!-- Logout Confirmation Script -->
    <script src="js/logout-confirmation.js"></script>

    <!-- Firebase Authentication Check -->
    <script>
      // Wait for FirebaseAuth to be available and handle authentication
      function handleAuthentication() {
        const FirebaseAuth = window.FirebaseAuth;

        if (!FirebaseAuth) {
          console.warn('FirebaseAuth module not yet available, retrying...');
          setTimeout(handleAuthentication, 100);
          return;
        }

        // Handle user authentication state
        const userIcon = document.getElementById('user-icon');

        if (userIcon) {
          try {
            // First check current Firebase user
            const currentUser = firebase.auth().currentUser;

            if (currentUser) {
              // Firebase user is logged in
              console.log("Firebase user is logged in:", currentUser.uid);
              userIcon.href = "profile";
              userIcon.classList.add('logged-in');
            } else {
              // No current Firebase user, check session
              if (FirebaseAuth.isLoggedIn()) {
                // User is logged in according to session
                console.log("User is logged in from session");
                userIcon.href = "profile";
                userIcon.classList.add('logged-in');
              } else {
                // No session found
                console.log("No user session found");
                userIcon.href = "login";
                userIcon.classList.remove('logged-in');
              }
            }
          } catch (error) {
            console.error('Error checking authentication state:', error);
            userIcon.href = "#";
            userIcon.classList.remove('logged-in');
          }
        }

        // Set up auth state observer for real-time updates
        try {
          FirebaseAuth.observeAuthState((user) => {
            // Get the reference to the user icon again, since this may run at a different time
            const userIcon = document.getElementById('user-icon');

            // Only proceed if userIcon exists
            if (userIcon) {
              if (user) {
                // User is signed in, update icon to go to profile
                console.log("Auth state: User is signed in:", user.uid);

                // Save session data in case it was missing
                FirebaseAuth.saveSession({
                  uid: user.uid,
                  email: user.email,
                  displayName: user.displayName || 'User',
                  photoURL: user.photoURL,
                  loggedIn: true
                });

                userIcon.href = "profile";
                userIcon.classList.add('logged-in');
              } else {
                // User is not signed in, keep login link
                console.log("Auth state: User is signed out");
                FirebaseAuth.clearSession();
                userIcon.href = "login";
                userIcon.classList.remove('logged-in');
              }
            }
          });
        } catch (error) {
          console.error('Error setting up auth state observer:', error);
        }
      }

      // Start authentication handling when DOM is ready
      document.addEventListener('DOMContentLoaded', handleAuthentication);
    </script>
  <style>
      .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }
    </style>
    <!-- Cart Panel -->
    <div id="auricCartPanel" class="cart-panel">
      <div class="cart-panel-header">
        <h3 data-translate="shopping_bag">Your Shopping Bag</h3>
        <button class="close-cart-btn">×</button>
      </div>
      <div class="cart-items">
        <!-- Cart items will be inserted here by JavaScript -->
        <div class="empty-cart-message" data-translate="your_cart_empty">Your cart is empty</div>
      </div>
      <div class="cart-panel-footer">
        <div class="cart-panel-subtotal">
          <span data-translate="subtotal">Subtotal:</span>
          <span class="subtotal-amount">₹0.00</span>
        </div>
        <div class="cart-panel-buttons">
          <button class="view-cart-btn continue-shopping-btn" data-translate="continue_shopping">Continue Shopping</button>
          <a href="/checkout" class="checkout-btn" data-translate="checkout">Checkout</a>
        </div>
      </div>
    </div>

    <!-- Ultra-direct Cart Overlay with ALL inline styles -->
    <div id="auricCartOverlay" class="cart-panel-overlay"></div>


    <!-- Fix for closeCartDirectly error -->
    <script>
      // Define the missing closeCartDirectly function
      window.closeCartDirectly = function() {
        // Call the regular closeCart function
        if (window.closeCart) {
          return window.closeCart();
        }
      };
    </script>

    <!-- Testimonial Script -->
    <script src="js/testimonial-scroller.js"></script>
    <script src="js/hero-slider.js"></script>

    <script src="js/product-scroll-auto.js"></script>

    <!-- About Section Learn More Script -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
          const learnMoreLink = document.getElementById('learnMoreLink');
          const additionalContent = document.querySelector('.additional-content');

          if (learnMoreLink && additionalContent) {
              learnMoreLink.addEventListener('click', function(e) {
                  e.preventDefault();

                  if (additionalContent.style.display === 'none') {
                      additionalContent.style.display = 'block';
                      learnMoreLink.textContent = 'Show Less';
                  } else {
                      additionalContent.style.display = 'none';
                      learnMoreLink.textContent = 'Learn More About Our Story';
                  }
              });
          }
      });
    </script>

    <script>
        // WhatsApp Chat Function
        function openWhatsAppChat() {
            const phoneNumber = "918589920686"; // Updated WhatsApp number with country code
            const message = "Hi! I'm interested. Can you help me?";
            const encodedMessage = encodeURIComponent(message);
            const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
            window.open(whatsappURL, '_blank');
        }

        // Bottom Navigation Cart Handler
        document.addEventListener('DOMContentLoaded', function() {
            const bottomNavCart = document.getElementById('bottomNavCart');
            if (bottomNavCart) {
                bottomNavCart.addEventListener('click', function(e) {
                    e.preventDefault();
                    // Open cart panel (assuming the cart panel functionality exists)
                    if (typeof openCart === 'function') {
                        openCart();
                    } else {
                        // Fallback to cart page
                        window.location.href = 'checkout';
                    }
                });
            }
        });
    </script>
    <!-- Customer Reviews Scroll Script -->
    <script src="js/customer-reviews-scroll.js"></script>

    <!-- Footer Toggle Script -->
    <script src="js/footer-toggle.js"></script>

    <!-- WhatsApp Tooltip Auto-Show -->
    <script src="js/whatsapp-tooltip.js"></script>

    <!-- Out of Stock Handler -->
    <script src="js/out-of-stock-handler.js?v=1.0.0"></script>
    <script src="js/banner-rotator.js"></script>
    <!-- Search functionality - load in correct order -->
    <script src="js/search-manager.js"></script>
    <script src="js/search-ui.js"></script>

    <!-- Initialize search after all scripts are loaded -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Ensure search functionality is working
            setTimeout(() => {
                if (typeof SearchManager !== 'undefined') {
                    console.log('SearchManager available');
                }
                if (typeof SearchUI !== 'undefined') {
                    console.log('SearchUI available');
                }

                // Manual search icon setup as backup
                const searchIcon = document.querySelector('.search-icon');
                if (searchIcon && !searchIcon.hasAttribute('data-search-attached')) {
                    searchIcon.addEventListener('click', function(e) {
                        e.preventDefault();
                        console.log('Manual search icon click handler triggered');
                        if (typeof SearchUI !== 'undefined' && SearchUI.openSearch) {
                            SearchUI.openSearch();
                        }
                    });
                    searchIcon.setAttribute('data-search-attached', 'true');
                    console.log('Manual search icon handler attached');
                }
            }, 500);
        });
    </script>
    <!-- Interactive Product Showcase -->
    <script src="js/interactive-showcase.js?v=2.0.5"></script>

    <!-- Language Translator -->
    <script src="js/language-translator.js?v=1.0.0"></script>

    <!-- First Visit Banner Modal -->
    <script src="js/first-visit-banner.js?v=1.0.0"></script>

    <!-- Notification Manager (uses existing Firebase 9.6.10 initialization) -->
    <script src="js/firebase/notification-manager.js"></script>

    <!-- Notification Banner Initialization -->
    <script>
        // Initialize notification system when DOM is ready
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                // Check if user already has notification permission
                const hasPermission = Notification.permission === 'granted';
                const hasDismissed = localStorage.getItem('notification-banner-dismissed');

                // Show banner after 5 seconds if notifications are not enabled and user hasn't dismissed
                if (!hasPermission && !hasDismissed) {
                    setTimeout(() => {
                        const banner = document.getElementById('notificationBanner');
                        banner.classList.add('show');
                    }, 5000);
                }

                // Enable Notifications button
                document.getElementById('enableNotifications').addEventListener('click', async () => {
                    try {
                        console.log('🔔 User clicked Enable Notifications button');
                        
                        // Initialize notification manager
                        const initialized = await notificationManager.init();
                        
                        if (initialized === false) {
                            console.error('❌ Notification manager initialization failed');
                            alert('Unable to enable notifications.\n\nPossible reasons:\n- Browser doesn\'t support notifications\n- Service Workers not available\n- VAPID key not configured\n\nPlease check browser settings and try again.');
                            return;
                        }

                        console.log('✅ Notification manager initialized successfully');

                        // Request permission and get token
                        const token = await notificationManager.requestPermissionAndGetToken();
                        
                        // Hide banner after browser permission dialog is resolved
                        const banner = document.getElementById('notificationBanner');
                        banner.classList.add('hide');
                        localStorage.setItem('notification-banner-dismissed', 'true');
                        
                        if (token) {
                            console.log('📍 Token received, saving to Firestore...');
                            
                            // Save token to Firestore
                            await notificationManager.saveToken(token);
                            
                            console.log('✅ Token saved successfully');
                            
                            // Setup listener for foreground messages
                            notificationManager.setupMessageListener((notification) => {
                                console.log('Foreground notification received:', notification);
                            });
                        }
                    } catch (error) {
                        console.error('❌ Error enabling notifications:', error);
                    }
                });

                // Dismiss button
                document.getElementById('dismissNotifications').addEventListener('click', () => {
                    const banner = document.getElementById('notificationBanner');
                    banner.classList.add('hide');
                    localStorage.setItem('notification-banner-dismissed', 'true');
                });

            } catch (error) {
                console.error('Error initializing notification banner:', error);
            }
        });
    </script>
    <!-- Firebase Messaging for Push Notifications -->
    <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js"></script>
    <!-- Notification Registration Manager -->
    <script src="js/notification-registration.js"></script>
  </body>
</html>