<?php
// Base URL detect karo agar pehle se define nahi hai
if (!defined('BASE_URL')) {
  $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
  $host = $_SERVER['HTTP_HOST'];
  $script_name = $_SERVER['SCRIPT_NAME'];
  // Current file ka path detect karo
  $current_file = $_SERVER['PHP_SELF'];
  if (strpos($current_file, '/collections/') !== false || strpos($current_file, '/pages/') !== false || strpos($current_file, '/blog/') !== false) {
    $base_path = dirname(dirname($script_name));
  } else {
    $base_path = dirname($script_name);
  }
  $BASE_URL = rtrim($protocol . '://' . $host . $base_path, '/');
  define('BASE_URL', $BASE_URL);
}
?>
<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">

<head>
  <meta charset="utf-8" />
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
  <meta content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0" name="viewport" />
  <title>Buy Vapes Online | Disposables, E-Liquids &amp; More | Fast Ship USA</title>
  <link href="<?php echo BASE_URL; ?>/css/inline-style-1.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-2.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-3.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/theme.css" media="all" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
    integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Bootstrap Icons for FAQ Section -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

  <script>
    window.debounce = window.debounce || function (fn, wait) {
      let t;
      return function (...args) {
        clearTimeout(t);
        t = setTimeout(() => fn.apply(this, args), wait);
      };
    };

    // Define KEYCODES early to prevent undefined errors
    window.KEYCODES = window.KEYCODES || {
      TAB: 9,
      ESC: 27,
      DOWN: 40,
      RIGHT: 39,
      UP: 38,
      LEFT: 37,
      RETURN: 13
    };

    window.Shopify = window.Shopify || {};
    window.Shopify.designMode = false;
    window.Shopify.loadFeatures = window.Shopify.loadFeatures || function (features, callback) {
      if (callback) {
        setTimeout(() => callback(null), 0);
      }
    };
    window.Shopify.customerPrivacy = window.Shopify.customerPrivacy || {
      setTrackingConsent: function (consent, callback) {
        if (callback) {
          setTimeout(() => callback(), 0);
        }
      }
    };
  </script>

  <meta content="telephone=no" name="format-detection" />
  <link href="<?php echo BASE_URL; ?>/css/bundle.css" media="all" rel="stylesheet" type="text/css" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-4.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-5.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-6.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-12.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-13.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-14.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-15.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-16.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-17.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-18.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-19.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-20.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-21.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-22.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-23.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-24.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-25.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-26.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-27.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-28.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-29.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-30.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-31.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-32.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-33.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-34.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-35.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-36.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-37.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-38.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-39.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-40.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-41.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-42.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-43.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-44.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-45.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-46.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-47.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-48.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-49.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-50.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-51.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-52.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-53.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-54.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-55.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-56.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-57.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-58.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/inline-style-59.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/accelerated-checkout-backwards-compat.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/align.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-blog-item.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-breadcrumb_11a18bae.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-cart_6e806d6d.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-cart.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-facets.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-mobile-navigation_99879c01.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-modal_b342a7df.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-modal.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-pagination.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-popup_0aeac3f0.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-popup.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-product-item.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-sidebar_6c276e61.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-sidebar.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-slider_3dd3c368.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-toggle.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/component-video_eed1325c.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/freegifts-main.min.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/glider.min.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/section-footer_07097302.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/section-footer.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/section-header_a8dd4b05.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/section-main-collection-product-grid.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/section-main-product_4a0f048d.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/section-main-product.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/section-rich-text.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/styles.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/theme_485be686.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/theme-noscript_4b5af8f9.css" rel="stylesheet" />
  <link href="<?php echo BASE_URL; ?>/css/theme-noscript.css" rel="stylesheet" />
  <style>
    @media screen and (min-width: 1024px) {
      .button--cart-handle {
        display: inline-flex !important;
      }
    }
  </style>
</head>

<body class="no-touchevents template-index template-index">
  <script src="<?php echo BASE_URL; ?>/js/inline-script-32.js" type="text/javascript"></script>
  <a class="visually-hidden skip-to-content" data-js-inert="" href="#main" tabindex="0">Skip to content</a>
  <div aria-live="polite" class="visually-hidden" id="screen-reader-info"></div>
  <link href="<?php echo BASE_URL; ?>/css/section-header.css" media="all" rel="stylesheet" type="text/css" />
  <link href="<?php echo BASE_URL; ?>/css/header-new.css" rel="stylesheet" type="text/css" />

  <!-- Top Banner Bar -->
  <div class="header-top-banner">
    <div class="header-top-banner-container">
      <div class="header-top-banner-content">
        <i class="fas fa-store"></i>
        <span>Welcome to our store</span>
      </div>
    </div>
  </div>

  <!-- New Modern Header -->
  <header class="header-new" id="main-header">

    <!-- Main Header Container -->
    <div class="header-main-container">
      <!-- Logo -->
      <div class="header-logo">
        <a href="<?php echo BASE_URL; ?>/">
          <img src="<?php echo BASE_URL; ?>/assets/image/logo.png" alt="Logo"
            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
        </a>
      </div>

      <!-- Fetch Navigation Tree -->
      <?php
      $nav_tree = get_collection_tree($pdo);
      
      // Helper to find nodes (already defined in functions.php, but ensuring access)
      $shop_node = find_collection_by_slug($nav_tree, 'shop');
      $disposables_node = find_collection_by_slug($nav_tree, 'disposable-vapes');
      $juice_node = find_collection_by_slug($nav_tree, 'vape-juice');
      ?>

      <!-- Navigation Menu (Desktop) -->
      <nav class="header-nav">
        <ul class="header-nav-menu">
          <!-- SHOP -->
          <li class="has-submenu" id="menu-item-shop">
            <a href="#">
              <span>SHOP</span>
              <i class="menu-icon fas fa-chevron-down"></i>
            </a>
            <div class="header-dropdown">
              <ul>
                <li><a href="<?php echo BASE_URL; ?>/collections/new-arrivals">New Arrivals</a></li>
                <li><a href="<?php echo BASE_URL; ?>/collections/best-sellers">🔥 Best Sellers</a></li>
                <li><a href="<?php echo BASE_URL; ?>/collections/under-10">Vapes Under $10</a></li>
              </ul>
            </div>
          </li>

          <!-- DISPOSABLES -->
          <li class="has-submenu" id="menu-item-disposables">
            <a href="<?php echo BASE_URL; ?>/collections/disposable-vapes">
              <span>DISPOSABLES</span>
              <i class="menu-icon fas fa-chevron-down"></i>
            </a>
            <div class="header-mega-menu">
              <div class="mega-menu-content">
                <?php 
                if ($disposables_node && !empty($disposables_node['children'])) {
                    foreach ($disposables_node['children'] as $section) {
                        // "Brand", "Puffs Count", "Nicotine Level" are the sections
                         if (!empty($section['children'])) {
                ?>
                <div class="mega-menu-column">
                  <h4><?php echo htmlspecialchars($section['name']); ?></h4>
                  <ul>
                    <?php foreach ($section['children'] as $child): 
                        // Simplified URL: Just use the slug directly as per user request (e.g., collections/adjust-vapes)
                        $link = $child['slug'];
                    ?>
                    <li><a href="<?php echo BASE_URL; ?>/collections/<?php echo $link; ?>"><?php echo htmlspecialchars($child['name']); ?></a></li>
                    <?php endforeach; ?>
                  </ul>
                </div>
                <?php 
                        }
                    }
                } 
                ?>

                <!-- Promotion -->
                <div class="mega-menu-promotion">
                  <img src="<?php echo BASE_URL; ?>/assets/image/ryl-classic-35k.webp" alt="RYL Classic 35K">
                  <div class="mega-menu-promotion-content">
                    <h3>RYL CLASSIC 35K</h3>
                    <p>First Ever Luxury Vape</p>
                    <a href="#">Discover Now!</a>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <!-- VAPE JUICES -->
          <li class="has-submenu" id="menu-item-vape-juices">
            <a href="<?php echo BASE_URL; ?>/collections/vape-juice">
              <span>VAPE JUICES</span>
              <i class="menu-icon fas fa-chevron-down"></i>
            </a>
            <div class="header-mega-menu">
              <div class="mega-menu-content">
                <?php 
                if ($juice_node && !empty($juice_node['children'])) {
                    foreach ($juice_node['children'] as $section) {
                         if (!empty($section['children'])) {
                ?>
                <div class="mega-menu-column">
                  <h4><?php echo htmlspecialchars($section['name']); ?></h4>
                  <ul>
                     <?php foreach ($section['children'] as $child): 
                        // Hybrid Logic:
                        // If slug has "/" (e.g. raz-brand/eliquid), use it as is.
                        // Else (e.g. freebase), prepend 'vape-juice/'.
                        if (strpos($child['slug'], '/') !== false) {
                            $link = $child['slug'];
                        } else {
                            $link = 'vape-juice/' . $child['slug'];
                        }
                     ?>
                    <li><a href="<?php echo BASE_URL; ?>/collections/<?php echo $link; ?>"><?php echo htmlspecialchars($child['name']); ?></a></li>
                    <?php endforeach; ?>
                  </ul>
                </div>
                <?php 
                        }
                    }
                } 
                ?>

                <!-- Promotion -->
                <div class="mega-menu-promotion">
                  <img src="<?php echo BASE_URL; ?>/assets/image/pulseliq-eliquid.webp" alt="Geek Bar PulseLiq Eliquid">
                  <div class="mega-menu-promotion-content">
                    <h3>Geek Bar PulseLiq Eliquid</h3>
                    <p>From classic to innovative</p>
                    <a href="#">Find your favorite</a>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <!-- NICOTINE POUCHES -->
          <li id="menu-item-nicotine-pouches">
            <a href="<?php echo BASE_URL; ?>/collections/nicotine-pouches">
              <span>NICOTINE POUCHES</span>
            </a>
          </li>

          <!-- RESOURCES -->
          <li class="has-submenu" id="menu-item-resources">
            <a href="#">
              <span>Resources</span>
              <i class="menu-icon fas fa-chevron-down"></i>
            </a>
            <div class="header-dropdown">
              <ul>
                <li><a href="<?php echo BASE_URL; ?>/contact.php">Contact Us</a></li>
                <li><a href="<?php echo BASE_URL; ?>/blog.php">Blog</a></li>
                <li><a href="<?php echo BASE_URL; ?>/pages/privacy-policy.php">Privacy Policy</a></li>
                <li><a href="<?php echo BASE_URL; ?>/pages/return-policy.php">Refund Policy</a></li>
                <li><a href="<?php echo BASE_URL; ?>/pages/terms-and-conditions.php">Terms and Conditions</a></li>
                <li><a href="<?php echo BASE_URL; ?>/pages/shipping-policy.php">Shipping Policy</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>

      <!-- Header Actions -->
      <div class="header-actions">
        <!-- Search -->
        <div class="header-search-container">
          <button class="header-search-btn" type="button" aria-label="Search">
            <i class="fas fa-search"></i>
          </button>
          <form class="header-search-form" action="/search" method="get" role="search">
            <input type="search" class="header-search-input" name="q" placeholder="Search for..." autocomplete="off">
          </form>
        </div>

        <!-- Account -->
        <a href="<?php echo BASE_URL; ?>/login.php" class="header-action-btn" aria-label="Account">
          <i class="fa-regular fa-user"></i>
        </a>

        <!-- Cart -->
        <a href="#" class="header-action-btn" id="cart-btn" aria-label="Cart" data-js-sidebar-handle=""
          aria-controls="site-cart-sidebar" aria-expanded="false">
          <i class="fa-brands fa-opencart"></i>
          <span class="cart-count" data-header-cart-count="">5</span>
        </a>

        <!-- Mobile Menu Button -->
        <button class="header-mobile-menu-btn" type="button" aria-label="Toggle Menu">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
    </div>

    <!-- Mobile Menu -->
    <div class="header-mobile-menu">
      <!-- Mobile Search -->
      <div class="header-mobile-search">
        <form class="header-mobile-search-form" action="/search" method="get" role="search">
          <input type="search" class="header-mobile-search-input" name="q" placeholder="Search for..."
            autocomplete="off">
          <button type="submit" class="header-mobile-search-btn">
            <i class="fas fa-search"></i>
          </button>
        </form>
      </div>

      <!-- Mobile Navigation -->
      <ul>
        <!-- SHOP -->
        <li class="has-submenu">
          <a href="#">
            <span>SHOP</span>
            <i class="menu-toggle fas fa-chevron-down"></i>
          </a>
          <div class="header-mobile-submenu">
            <ul>
               <li><a href="<?php echo BASE_URL; ?>/collections/new-arrivals">New Arrivals</a></li>
                <li><a href="<?php echo BASE_URL; ?>/collections/best-sellers">🔥 Best Sellers</a></li>
                <li><a href="<?php echo BASE_URL; ?>/collections/under-10">Vapes Under $10</a></li>
            </ul>
          </div>
        </li>

        <!-- DISPOSABLES -->
        <li class="has-submenu">
          <a href="<?php echo BASE_URL; ?>/collections/disposable-vapes">
            <span>DISPOSABLES</span>
            <i class="menu-toggle fas fa-chevron-down"></i>
          </a>
          <div class="header-mobile-submenu">
             <?php 
                if ($disposables_node && !empty($disposables_node['children'])) {
                    foreach ($disposables_node['children'] as $section) {
                         if (!empty($section['children'])) {
                ?>
            <div class="mobile-submenu-section">
              <h4 class="mobile-submenu-title"><?php echo htmlspecialchars($section['name']); ?></h4>
              <ul>
                 <?php foreach ($section['children'] as $child): 
                    $link = !empty($child['url_path']) ? $child['url_path'] : $child['slug'];
                 ?>
                <li><a href="<?php echo BASE_URL; ?>/collections/<?php echo $link; ?>"><?php echo htmlspecialchars($child['name']); ?></a></li>
                <?php endforeach; ?>
              </ul>
            </div>
             <?php 
                        }
                    }
                } 
                ?>
          </div>
        </li>

        <!-- VAPE JUICES -->
        <li class="has-submenu">
          <a href="<?php echo BASE_URL; ?>/collections/vape-juice">
            <span>VAPE JUICES</span>
            <i class="menu-toggle fas fa-chevron-down"></i>
          </a>
          <div class="header-mobile-submenu">
            <?php 
                if ($juice_node && !empty($juice_node['children'])) {
                    foreach ($juice_node['children'] as $section) {
                         if (!empty($section['children'])) {
                ?>
            <div class="mobile-submenu-section">
              <h4 class="mobile-submenu-title"><?php echo htmlspecialchars($section['name']); ?></h4>
              <ul>
                 <?php foreach ($section['children'] as $child): 
                    $link = !empty($child['url_path']) ? $child['url_path'] : $child['slug'];
                 ?>
                <li><a href="<?php echo BASE_URL; ?>/collections/<?php echo $link; ?>"><?php echo htmlspecialchars($child['name']); ?></a></li>
                <?php endforeach; ?>
              </ul>
            </div>
             <?php 
                        }
                    }
                } 
                ?>
          </div>
        </li>

        <!-- NICOTINE POUCHES -->
        <li>
          <a href="<?php echo BASE_URL; ?>/collections/nicotine-pouches">
            <span>NICOTINE POUCHES</span>
          </a>
        </li>

        <!-- RESOURCES -->
        <li class="has-submenu">
          <a href="#">
            <span>Resources</span>
            <i class="menu-toggle fas fa-chevron-down"></i>
          </a>
          <div class="header-mobile-submenu">
            <ul>
              <li><a href="#">Contact Us</a></li>
              <li><a href="<?php echo BASE_URL; ?>/blog.php">Blog</a></li>
              <li><a href="<?php echo BASE_URL; ?>/pages/privacy-policy.php">Privacy Policy</a></li>
              <li><a href="<?php echo BASE_URL; ?>/pages/return-policy.php">Refund Policy</a></li>
              <li><a href="<?php echo BASE_URL; ?>/pages/terms-and-conditions.php">Terms and Conditions</a></li>
              <li><a href="<?php echo BASE_URL; ?>/pages/shipping-policy.php">Shipping Policy</a></li>
            </ul>
          </div>
        </li>

        <!-- Account (Mobile) -->
        <li>
          <a href="<?php echo BASE_URL; ?>/login.php">
            <span>Account</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Overlay -->
    <div class="header-overlay"></div>
  </header>

  <!-- END sections: header-group -->
  <link href="<?php echo BASE_URL; ?>/css/component-slider.css" media="all" rel="stylesheet" type="text/css" />
  <link href="<?php echo BASE_URL; ?>/css/component-video.css" media="all" rel="stylesheet" type="text/css" />
  <script src="<?php echo BASE_URL; ?>/js/header-new.js"></script>
  <!-- header-mobile-fix.js disabled - functionality moved to header-new.js -->
  <!-- <script src="<?php echo BASE_URL; ?>/js/header-mobile-fix.js"></script> -->
  <script src="<?php echo BASE_URL; ?>/js/section-header.js"></script>
  <script>
    // Ensure sidebar functionality works after DOM is ready
    (function () {
      function initSidebarHandlers() {
        // Re-initialize sidebar handlers after custom elements are registered
        document.querySelectorAll("[data-js-sidebar-handle]").forEach(function (elm) {
          if (elm.hasAttribute("aria-controls")) {
            var elmSidebar = document.getElementById(elm.getAttribute("aria-controls"));
            if (elmSidebar) {
              // Remove existing listeners to avoid duplicates
              var newElm = elm.cloneNode(true);
              elm.parentNode.replaceChild(newElm, elm);

              // Add click handler
              newElm.addEventListener("click", function (e) {
                e.preventDefault();
                newElm.setAttribute("aria-expanded", "true");
                if (elmSidebar.show) {
                  elmSidebar.show();
                } else if (elmSidebar.classList) {
                  elmSidebar.style.display = "grid";
                  elmSidebar.classList.add("sidebar--opened");
                  document.body.classList.add("sidebar-opened");
                  if (elmSidebar.classList.contains("sidebar--left")) {
                    document.body.classList.add("sidebar-opened--left");
                  } else if (elmSidebar.classList.contains("sidebar--right")) {
                    document.body.classList.add("sidebar-opened--right");
                  }
                }
              });
            }
          }
        });

        // Fix: Ensure close buttons work
        document.querySelectorAll("sidebar-drawer [data-js-close]").forEach(function (closeBtn) {
          var sidebar = closeBtn.closest("sidebar-drawer");
          if (sidebar) {
            // Remove existing listeners to avoid duplicates
            var newCloseBtn = closeBtn.cloneNode(true);
            closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);

            // Add click handler for close button
            newCloseBtn.addEventListener("click", function (e) {
              e.preventDefault();
              e.stopPropagation();

              if (sidebar.hide) {
                sidebar.hide();
              } else if (sidebar.classList) {
                sidebar.classList.remove("sidebar--opened");
                sidebar.style.display = "none";
                document.body.classList.remove("sidebar-opened");
                document.body.classList.remove("sidebar-opened--left");
                document.body.classList.remove("sidebar-opened--right");

                // Update aria attributes
                var triggerBtn = document.querySelector('[aria-controls="' + sidebar.id + '"]');
                if (triggerBtn) {
                  triggerBtn.setAttribute("aria-expanded", "false");
                }
              }
            });
          }
        });
      }

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () {
          setTimeout(initSidebarHandlers, 100);
        });
      } else {
        setTimeout(initSidebarHandlers, 100);
      }
    })();
  </script>