     1→<!DOCTYPE html>
     2→<html lang="en" class="scroll-smooth">
     3→<head>
     4→  <meta charset="UTF-8" />
     5→  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     6→  <title>Xevon — Premium Fashion for the Modern You</title>
     7→
     8→  <!-- Tailwind CSS v3 via CDN -->
     9→  <script src="https://cdn.tailwindcss.com"></script>
    10→  <script>
    11→    /* Tailwind Config */
    12→    tailwind.config = {
    13→      theme: {
    14→        extend: {
    15→          colors: {
    16→            brand: '#FF6600',
    17→            'brand-dark': '#e65c00',
    18→            'brand-light': '#ff8533',
    19→          },
    20→          fontFamily: {
    21→            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
    22→            heading: ['Playfair Display', 'Georgia', 'serif'],
    23→          },
    24→        },
    25→      },
    26→    };
    27→  </script>
    28→
    29→  <!-- Google Fonts -->
    30→  <link rel="preconnect" href="https://fonts.googleapis.com" />
    31→  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    32→  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" />
    33→
    34→  <!-- Lucide Icons -->
    35→  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    36→
    37→  <style>
    38→    /* Base Resets */
    39→    * { box-sizing: border-box; }
    40→    body { font-family: 'Inter', system-ui, sans-serif; }
    41→    .no-scrollbar::-webkit-scrollbar { display: none; }
    42→    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    43→
    44→    /* Hero Slider Transitions */
    45→    .hero-slide {
    46→      opacity: 0;
    47→      transition: opacity 0.7s ease-in-out;
    48→      position: absolute; inset: 0;
    49→    }
    50→    .hero-slide.active { opacity: 1; }
    51→
    52→    /* Side Drawer */
    53→    #cart-overlay { transition: opacity 0.3s ease; }
    54→    #cart-drawer { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    55→    #cart-drawer.open { transform: translateX(0) !important; }
    56→
    57→    /* Mobile Bottom Nav safe area */
    58→    @supports (padding-bottom: env(safe-area-inset-bottom)) {
    59→      #mobile-nav { padding-bottom: env(safe-area-inset-bottom); }
    60→    }
    61→
    62→    /* Range slider */
    63→    input[type="range"] {
    64→      -webkit-appearance: none; appearance: none;
    65→      height: 4px; background: #e5e7eb; border-radius: 4px; outline: none;
    66→    }
    67→    input[type="range"]::-webkit-slider-thumb {
    68→      -webkit-appearance: none;
    69→      width: 18px; height: 18px; background: #FF6600; border-radius: 50%; cursor: pointer;
    70→    }
    71→
    72→    /* Scroll fade animation */
    73→    .fade-up {
    74→      opacity: 0; transform: translateY(24px);
    75→      transition: opacity 0.6s ease, transform 0.6s ease;
    76→    }
    77→    .fade-up.visible { opacity: 1; transform: translateY(0); }
    78→
    79→    /* Marquee animation */
    80→    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    81→    .animate-marquee { animation: marquee 20s linear infinite; min-width: 200%; }
    82→
    83→    /* Line clamp utility */
    84→    .line-clamp-2 {
    85→      display: -webkit-box;
    86→      -webkit-line-clamp: 2;
    87→      -webkit-box-orient: vertical;
    88→      overflow: hidden;
    89→    }
    90→  </style>
    91→</head>
    92→
    93→<body class="bg-white text-gray-800 antialiased">
    94→
    95→  <!-- ================================================================
    96→       1. TOP ANNOUNCEMENT BAR
    97→       Sticky orange bar with scrolling text and discount code
    98→       ================================================================ -->
    99→  <div id="announcement-bar" class="bg-brand text-white text-center text-sm font-medium py-2 px-4 relative z-50">
   100→    <div class="overflow-hidden whitespace-nowrap">
   101→      <span class="inline-block animate-marquee">
   102→        🔥 Flat 20% Discount on your first order! Use code: <strong class="underline">XEVON10</strong> &nbsp;|&nbsp; Free delivery on orders above ৳1,500 &nbsp;|&nbsp; Cash on Delivery available nationwide! &nbsp;&nbsp;&nbsp;
   103→        🔥 Flat 20% Discount on your first order! Use code: <strong class="underline">XEVON10</strong> &nbsp;|&nbsp; Free delivery on orders above ৳1,500 &nbsp;|&nbsp; Cash on Delivery available nationwide! &nbsp;&nbsp;&nbsp;
   104→      </span>
   105→    </div>
   106→    <!-- Close button -->
   107→    <button onclick="document.getElementById('announcement-bar').classList.add('hidden')"
   108→            class="absolute right-3 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition">
   109→      <i data-lucide="x" class="w-4 h-4"></i>
   110→    </button>
   111→  </div>
   112→
   113→  <!-- ================================================================
   114→       2. HEADER / MAIN NAVIGATION
   115→       Brand logo, search bar, icons, mobile hamburger
   116→       ================================================================ -->
   117→  <header id="main-header" class="sticky top-0 z-40 bg-white shadow-sm transition-shadow duration-300">
   118→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   119→      <div class="flex items-center justify-between h-16 lg:h-[72px]">
   120→
   121→        <!-- Left: Hamburger (mobile) + Logo -->
   122→        <div class="flex items-center gap-3">
   123→          <!-- Mobile Hamburger Button -->
   124→          <button id="hamburger-btn" class="lg:hidden p-2 -ml-2 text-gray-700 hover:text-brand transition">
   125→            <i data-lucide="menu" class="w-6 h-6"></i>
   126→          </button>
   127→          <!-- Brand Logo -->
   128→          <a href="#" class="flex items-center gap-2">
   129→            <span class="text-2xl lg:text-3xl font-heading font-bold tracking-tight text-gray-900">
   130→              <span class="text-brand">X</span>evon
   131→            </span>
   132→          </a>
   133→        </div>
   134→
   135→        <!-- Center: Search Bar (hidden on small mobile) -->
   136→        <div class="hidden sm:flex flex-1 max-w-xl mx-6">
   137→          <div class="relative w-full">
   138→            <input type="text" placeholder="Search for panjabi, shirt, trouser..."
   139→                   class="w-full pl-4 pr-10 py-2.5 bg-gray-100 border border-gray-200 rounded-full text-sm focus:outline-none focus:border-brand focus:ring-1 focus:ring-brand transition" />
   140→            <button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-brand transition">
   141→              <i data-lucide="search" class="w-4 h-4"></i>
   142→            </button>
   143→          </div>
   144→        </div>
   145→
   146→        <!-- Right: Wishlist + Cart + User -->
   147→        <div class="flex items-center gap-1 lg:gap-3">
   148→          <!-- Mobile Search Toggle -->
   149→          <button class="sm:hidden p-2 text-gray-700 hover:text-brand transition">
   150→            <i data-lucide="search" class="w-5 h-5"></i>
   151→          </button>
   152→          <!-- Wishlist -->
   153→          <a href="#" class="relative p-2 text-gray-700 hover:text-brand transition">
   154→            <i data-lucide="heart" class="w-5 h-5"></i>
   155→            <span id="wishlist-count" class="hidden absolute -top-0.5 -right-0.5 w-4 h-4 bg-brand text-white text-[10px] font-bold rounded-full items-center justify-center">0</span>
   156→          </a>
   157→          <!-- Cart (opens drawer) -->
   158→          <button id="cart-btn" class="relative p-2 text-gray-700 hover:text-brand transition">
   159→            <i data-lucide="shopping-bag" class="w-5 h-5"></i>
   160→            <span id="cart-badge" class="hidden absolute -top-0.5 -right-0.5 w-4 h-4 bg-brand text-white text-[10px] font-bold rounded-full items-center justify-center">0</span>
   161→          </button>
   162→          <!-- User Account (desktop only) -->
   163→          <a href="#" class="hidden lg:block p-2 text-gray-700 hover:text-brand transition">
   164→            <i data-lucide="user" class="w-5 h-5"></i>
   165→          </a>
   166→        </div>
   167→      </div>
   168→    </div>
   169→
   170→    <!-- Desktop Navigation Links -->
   171→    <nav class="hidden lg:block border-t border-gray-100 bg-white">
   172→      <div class="max-w-7xl mx-auto px-4 lg:px-8">
   173→        <ul class="flex items-center gap-8 text-sm font-medium text-gray-700">
   174→          <li><a href="#" class="py-3 border-b-2 border-brand text-brand">Home</a></li>
   175→          <li class="relative group">
   176→            <a href="#" class="py-3 border-b-2 border-transparent hover:border-brand hover:text-brand transition flex items-center gap-1">
   177→              Men <i data-lucide="chevron-down" class="w-3 h-3"></i>
   178→            </a>
   179→            <!-- Dropdown Menu -->
   180→            <div class="absolute top-full left-0 w-52 bg-white rounded-b-lg shadow-lg border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
   181→              <a href="#" class="block px-4 py-2.5 text-sm text-gray-600 hover:bg-gray-50 hover:text-brand">Panjabi</a>
   182→              <a href="#" class="block px-4 py-2.5 text-sm text-gray-600 hover:bg-gray-50 hover:text-brand">Shirt</a>
   183→              <a href="#" class="block px-4 py-2.5 text-sm text-gray-600 hover:bg-gray-50 hover:text-brand">T-Shirt</a>
   184→              <a href="#" class="block px-4 py-2.5 text-sm text-gray-600 hover:bg-gray-50 hover:text-brand">Trouser</a>
   185→              <a href="#" class="block px-4 py-2.5 text-sm text-gray-600 hover:bg-gray-50 hover:text-brand">Winter Wear</a>
   186→            </div>
   187→          </li>
   188→          <li><a href="#" class="py-3 border-b-2 border-transparent hover:border-brand hover:text-brand transition">New Arrivals</a></li>
   189→          <li><a href="#" class="py-3 border-b-2 border-transparent hover:border-brand hover:text-brand transition">Best Sellers</a></li>
   190→          <li><a href="#" class="py-3 border-b-2 border-brand text-brand bg-brand/5 px-3 rounded-t-md">🔥 Sale</a></li>
   191→          <li><a href="#" class="py-3 border-b-2 border-transparent hover:border-brand hover:text-brand transition">Contact</a></li>
   192→        </ul>
   193→      </div>
   194→    </nav>
   195→  </header>
   196→
   197→  <!-- ================================================================
   198→       2b. MOBILE SLIDE-OUT MENU
   199→       ================================================================ -->
   200→  <div id="mobile-menu-overlay" class="fixed inset-0 bg-black/50 z-50 hidden transition-opacity"></div>
   201→  <div id="mobile-menu" class="fixed top-0 left-0 h-full w-72 bg-white z-50 shadow-2xl transform -translate-x-full transition-transform duration-300 ease-in-out">
   202→    <!-- Menu Header -->
   203→    <div class="flex items-center justify-between p-4 border-b border-gray-100">
   204→      <span class="text-xl font-heading font-bold text-gray-900"><span class="text-brand">X</span>evon</span>
   205→      <button id="close-mobile-menu" class="p-1 text-gray-500 hover:text-gray-800">
   206→        <i data-lucide="x" class="w-6 h-6"></i>
   207→      </button>
   208→    </div>
   209→    <!-- Mobile Search -->
   210→    <div class="p-4">
   211→      <div class="relative">
   212→        <input type="text" placeholder="Search products..." class="w-full pl-4 pr-10 py-2.5 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-brand focus:ring-1 focus:ring-brand" />
   213→        <i data-lucide="search" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
   214→      </div>
   215→    </div>
   216→    <!-- Navigation Links -->
   217→    <nav class="px-4 pb-6 overflow-y-auto max-h-[calc(100vh-180px)]">
   218→      <a href="#" class="flex items-center justify-between py-3 text-gray-800 font-medium border-b border-gray-100">
   219→        Home <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
   220→      </a>
   221→      <a href="#" class="flex items-center justify-between py-3 text-gray-800 font-medium border-b border-gray-100">
   222→        Men <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
   223→      </a>
   224→      <a href="#" class="flex items-center justify-between py-3 text-gray-800 font-medium border-b border-gray-100">
   225→        New Arrivals <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
   226→      </a>
   227→      <a href="#" class="flex items-center justify-between py-3 text-gray-800 font-medium border-b border-gray-100">
   228→        Best Sellers <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
   229→      </a>
   230→      <a href="#" class="flex items-center justify-between py-3 text-brand font-medium border-b border-gray-100">
   231→        🔥 Sale <span class="text-xs bg-brand/10 text-brand px-2 py-0.5 rounded-full">Hot</span>
   232→      </a>
   233→      <a href="#" class="flex items-center justify-between py-3 text-gray-800 font-medium border-b border-gray-100">
   234→        Contact <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
   235→      </a>
   236→      <div class="mt-6 space-y-3">
   237→        <a href="#" class="flex items-center gap-3 py-2 text-sm text-gray-600 hover:text-brand">
   238→          <i data-lucide="user" class="w-4 h-4"></i> My Account
   239→        </a>
   240→        <a href="#" class="flex items-center gap-3 py-2 text-sm text-gray-600 hover:text-brand">
   241→          <i data-lucide="package" class="w-4 h-4"></i> Track Order
   242→        </a>
   243→        <a href="#" class="flex items-center gap-3 py-2 text-sm text-gray-600 hover:text-brand">
   244→          <i data-lucide="heart" class="w-4 h-4"></i> Wishlist
   245→        </a>
   246→      </div>
   247→    </nav>
   248→  </div>
   249→
   250→  <!-- ================================================================
   251→       3. HERO SLIDER BANNER
   252→       Auto-sliding hero with navigation dots and arrows
   253→       ================================================================ -->
   254→  <section id="hero-slider" class="relative w-full overflow-hidden bg-gray-100" style="height: clamp(280px, 50vw, 560px);">
   255→    <!-- Slide 1: Style Game -->
   256→    <div class="hero-slide active" data-slide="0">
   257→      <div class="w-full h-full bg-gradient-to-r from-gray-900 via-gray-800 to-brand/80 flex items-center">
   258→        <div class="max-w-7xl mx-auto px-4 lg:px-8 w-full flex flex-col lg:flex-row items-center gap-8">
   259→          <div class="flex-1 text-center lg:text-left">
   260→            <span class="inline-block text-brand font-semibold text-sm tracking-wider uppercase mb-3">New Collection 2025</span>
   261→            <h1 class="text-3xl md:text-5xl lg:text-6xl font-heading font-bold text-white leading-tight mb-4">
   262→              Elevate Your<br/><span class="text-brand">Style Game</span>
   263→            </h1>
   264→            <p class="text-gray-300 text-sm md:text-base max-w-md mx-auto lg:mx-0 mb-6">
   265→              Discover premium Panjabi, Shirts, and more. Crafted for the modern Bangladeshi gentleman.
   266→            </p>
   267→            <a href="#products" class="inline-block bg-brand hover:bg-brand-dark text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-brand/30">
   268→              Shop Collection
   269→            </a>
   270→          </div>
   271→          <div class="flex-1 hidden lg:flex justify-center">
   272→            <div class="w-72 h-72 bg-white/10 rounded-full flex items-center justify-center backdrop-blur-sm border border-white/20">
   273→              <span class="text-7xl">👔</span>
   274→            </div>
   275→          </div>
   276→        </div>
   277→      </div>
   278→    </div>
   279→    <!-- Slide 2: Winter Sale -->
   280→    <div class="hero-slide" data-slide="1">
   281→      <div class="w-full h-full bg-gradient-to-r from-brand/90 via-brand-dark to-gray-900 flex items-center">
   282→        <div class="max-w-7xl mx-auto px-4 lg:px-8 w-full flex flex-col lg:flex-row items-center gap-8">
   283→          <div class="flex-1 text-center lg:text-left">
   284→            <span class="inline-block bg-white text-brand font-bold text-xs px-3 py-1 rounded-full mb-3">Limited Time</span>
   285→            <h1 class="text-3xl md:text-5xl lg:text-6xl font-heading font-bold text-white leading-tight mb-4">
   286→              Winter Sale<br/><span class="text-yellow-300">Up to 50% OFF</span>
   287→            </h1>
   288→            <p class="text-white/80 text-sm md:text-base max-w-md mx-auto lg:mx-0 mb-6">
   289→              Cozy jackets, hoodies, and warm panjabis at unbeatable prices. Don't miss out!
   290→            </p>
   291→            <a href="#products" class="inline-block bg-white text-brand hover:bg-gray-100 font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105">
   292→              Shop Winter Sale
   293→            </a>
   294→          </div>
   295→          <div class="flex-1 hidden lg:flex justify-center">
   296→            <div class="w-72 h-72 bg-white/10 rounded-full flex items-center justify-center backdrop-blur-sm border border-white/20">
   297→              <span class="text-7xl">🧥</span>
   298→            </div>
   299→          </div>
   300→        </div>
   301→      </div>
   302→    </div>
   303→    <!-- Slide 3: Drop Shoulder -->
   304→    <div class="hero-slide" data-slide="2">
   305→      <div class="w-full h-full bg-gradient-to-r from-gray-900 via-blue-900 to-gray-900 flex items-center">
   306→        <div class="max-w-7xl mx-auto px-4 lg:px-8 w-full flex flex-col lg:flex-row items-center gap-8">
   307→          <div class="flex-1 text-center lg:text-left">
   308→            <span class="inline-block text-blue-300 font-semibold text-sm tracking-wider uppercase mb-3">Premium Quality</span>
   309→            <h1 class="text-3xl md:text-5xl lg:text-6xl font-heading font-bold text-white leading-tight mb-4">
   310→              Drop Shoulder<br/><span class="text-brand">Collection</span>
   311→            </h1>
   312→            <p class="text-gray-300 text-sm md:text-base max-w-md mx-auto lg:mx-0 mb-6">
   313→              Trendy drop-shoulder t-shirts in premium cotton. Available in multiple colors.
   314→            </p>
   315→            <a href="#products" class="inline-block bg-brand hover:bg-brand-dark text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg shadow-brand/30">
   316→              Explore Now
   317→            </a>
   318→          </div>
   319→          <div class="flex-1 hidden lg:flex justify-center">
   320→            <div class="w-72 h-72 bg-white/10 rounded-full flex items-center justify-center backdrop-blur-sm border border-white/20">
   321→              <span class="text-7xl">👕</span>
   322→            </div>
   323→          </div>
   324→        </div>
   325→      </div>
   326→    </div>
   327→
   328→    <!-- Slider Navigation Arrows -->
   329→    <button id="hero-prev" class="absolute left-3 lg:left-6 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/40 transition">
   330→      <i data-lucide="chevron-left" class="w-5 h-5"></i>
   331→    </button>
   332→    <button id="hero-next" class="absolute right-3 lg:right-6 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/40 transition">
   333→      <i data-lucide="chevron-right" class="w-5 h-5"></i>
   334→    </button>
   335→
   336→    <!-- Slider Dots -->
   337→    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
   338→      <button class="hero-dot w-3 h-3 rounded-full bg-white/50 transition-all duration-300" data-dot="0"></button>
   339→      <button class="hero-dot w-3 h-3 rounded-full bg-white/50 transition-all duration-300" data-dot="1"></button>
   340→      <button class="hero-dot w-3 h-3 rounded-full bg-white/50 transition-all duration-300" data-dot="2"></button>
   341→    </div>
   342→  </section>
   343→
   344→  <!-- ================================================================
   345→       4. POPULAR CATEGORIES GRID
   346→       6 visual category boxes with icons and labels
   347→       ================================================================ -->
   348→  <section class="py-12 lg:py-16 bg-white">
   349→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   350→      <div class="text-center mb-8 lg:mb-10 fade-up">
   351→        <h2 class="text-2xl lg:text-3xl font-heading font-bold text-gray-900">Shop by Category</h2>
   352→        <p class="text-gray-500 mt-2 text-sm">Browse our most popular collections</p>
   353→      </div>
   354→      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 lg:gap-6 fade-up">
   355→        <!-- Panjabi -->
   356→        <a href="#" class="group bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl p-5 lg:p-6 text-center hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-orange-100">
   357→          <div class="w-14 h-14 lg:w-16 lg:h-16 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-brand/20 transition">
   358→            <span class="text-2xl lg:text-3xl">🥻</span>
   359→          </div>
   360→          <h3 class="font-semibold text-gray-800 text-sm lg:text-base">Panjabi</h3>
   361→          <p class="text-gray-400 text-xs mt-1">45+ items</p>
   362→        </a>
   363→        <!-- T-Shirt -->
   364→        <a href="#" class="group bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-5 lg:p-6 text-center hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-blue-100">
   365→          <div class="w-14 h-14 lg:w-16 lg:h-16 bg-blue-500/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-blue-500/20 transition">
   366→            <span class="text-2xl lg:text-3xl">👕</span>
   367→          </div>
   368→          <h3 class="font-semibold text-gray-800 text-sm lg:text-base">T-Shirt</h3>
   369→          <p class="text-gray-400 text-xs mt-1">120+ items</p>
   370→        </a>
   371→        <!-- Drop Shoulder -->
   372→        <a href="#" class="group bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-5 lg:p-6 text-center hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-purple-100">
   373→          <div class="w-14 h-14 lg:w-16 lg:h-16 bg-purple-500/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-purple-500/20 transition">
   374→            <span class="text-2xl lg:text-3xl">🎽</span>
   375→          </div>
   376→          <h3 class="font-semibold text-gray-800 text-sm lg:text-base">Drop Shoulder</h3>
   377→          <p class="text-gray-400 text-xs mt-1">60+ items</p>
   378→        </a>
   379→        <!-- Trouser -->
   380→        <a href="#" class="group bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-5 lg:p-6 text-center hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-green-100">
   381→          <div class="w-14 h-14 lg:w-16 lg:h-16 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-green-500/20 transition">
   382→            <span class="text-2xl lg:text-3xl">👖</span>
   383→          </div>
   384→          <h3 class="font-semibold text-gray-800 text-sm lg:text-base">Trouser</h3>
   385→          <p class="text-gray-400 text-xs mt-1">80+ items</p>
   386→        </a>
   387→        <!-- Shirt -->
   388→        <a href="#" class="group bg-gradient-to-br from-rose-50 to-red-50 rounded-2xl p-5 lg:p-6 text-center hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-rose-100">
   389→          <div class="w-14 h-14 lg:w-16 lg:h-16 bg-rose-500/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-rose-500/20 transition">
   390→            <span class="text-2xl lg:text-3xl">👔</span>
   391→          </div>
   392→          <h3 class="font-semibold text-gray-800 text-sm lg:text-base">Shirt</h3>
   393→          <p class="text-gray-400 text-xs mt-1">95+ items</p>
   394→        </a>
   395→        <!-- Winter Wear -->
   396→        <a href="#" class="group bg-gradient-to-br from-cyan-50 to-sky-50 rounded-2xl p-5 lg:p-6 text-center hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-cyan-100">
   397→          <div class="w-14 h-14 lg:w-16 lg:h-16 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-cyan-500/20 transition">
   398→            <span class="text-2xl lg:text-3xl">🧥</span>
   399→          </div>
   400→          <h3 class="font-semibold text-gray-800 text-sm lg:text-base">Winter Wear</h3>
   401→          <p class="text-gray-400 text-xs mt-1">35+ items</p>
   402→        </a>
   403→      </div>
   404→    </div>
   405→  </section>
   406→
   407→  <!-- ================================================================
   408→       5. PROMOTIONAL BANNERS
   409→       Highlighted sales banners with CTAs
   410→       ================================================================ -->
   411→  <section class="py-8 lg:py-12 bg-gray-50">
   412→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   413→      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6 fade-up">
   414→        <!-- Promo Banner 1: Winter Sale -->
   415→        <a href="#" class="group relative overflow-hidden rounded-2xl bg-gradient-to-r from-brand to-brand-dark p-6 lg:p-10 min-h-[200px] flex items-center">
   416→          <div class="relative z-10">
   417→            <span class="inline-block bg-white text-brand text-xs font-bold px-3 py-1 rounded-full mb-3">Winter Collection</span>
   418→            <h3 class="text-2xl lg:text-3xl font-heading font-bold text-white mb-2">50% OFF</h3>
   419→            <p class="text-white/80 text-sm mb-4">Warm up your wardrobe with premium winter essentials</p>
   420→            <span class="inline-flex items-center gap-2 text-white font-semibold text-sm group-hover:gap-3 transition-all">
   421→              Shop Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
   422→            </span>
   423→          </div>
   424→          <div class="absolute right-4 bottom-4 text-6xl opacity-20 group-hover:opacity-30 transition">🧥</div>
   425→        </a>
   426→        <!-- Promo Banner 2: Drop Shoulder -->
   427→        <a href="#" class="group relative overflow-hidden rounded-2xl bg-gradient-to-r from-gray-900 to-gray-700 p-6 lg:p-10 min-h-[200px] flex items-center">
   428→          <div class="relative z-10">
   429→            <span class="inline-block bg-brand text-white text-xs font-bold px-3 py-1 rounded-full mb-3">New Arrivals</span>
   430→            <h3 class="text-2xl lg:text-3xl font-heading font-bold text-white mb-2">Drop Shoulder</h3>
   431→            <p class="text-gray-300 text-sm mb-4">Trendy oversized fits for everyday style</p>
   432→            <span class="inline-flex items-center gap-2 text-white font-semibold text-sm group-hover:gap-3 transition-all">
   433→              Explore <i data-lucide="arrow-right" class="w-4 h-4"></i>
   434→            </span>
   435→          </div>
   436→          <div class="absolute right-4 bottom-4 text-6xl opacity-20 group-hover:opacity-30 transition">👕</div>
   437→        </a>
   438→      </div>
   439→    </div>
   440→  </section>
   441→
   442→  <!-- ================================================================
   443→       6. PRODUCT GRID SECTION
   444→       New Arrivals with filter sidebar and product cards
   445→       ================================================================ -->
   446→  <section id="products" class="py-12 lg:py-16 bg-white">
   447→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   448→      <!-- Section Title -->
   449→      <div class="text-center mb-8 lg:mb-10 fade-up">
   450→        <h2 class="text-2xl lg:text-3xl font-heading font-bold text-gray-900">New Arrivals</h2>
   451→        <p class="text-gray-500 mt-2 text-sm">Fresh styles, just for you</p>
   452→      </div>
   453→
   454→      <!-- Filter Bar with Category Pills -->
   455→      <div class="flex items-center justify-between mb-6 gap-4 flex-wrap">
   456→        <div class="flex items-center gap-3 overflow-x-auto no-scrollbar pb-2" id="category-pills">
   457→          <button class="category-pill px-4 py-2 bg-brand text-white text-sm font-medium rounded-full whitespace-nowrap" data-cat="All">All</button>
   458→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Panjabi">Panjabi</button>
   459→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="T-Shirt">T-Shirt</button>
   460→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Shirt">Shirt</button>
   461→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Trouser">Trouser</button>
   462→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Drop Shoulder">Drop Shoulder</button>
   463→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Winter Wear">Winter Wear</button>
   464→        </div>
   465→        <!-- Filter Toggle (mobile) and Sort (desktop) -->
   466→        <div class="flex items-center gap-3">
   467→          <button id="filter-toggle-btn" class="lg:hidden flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-700 hover:border-brand hover:text-brand transition">
   468→            <i data-lucide="sliders-horizontal" class="w-4 h-4"></i> Filters
   469→          </button>
   470→          <select class="hidden lg:block px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 focus:outline-none focus:border-brand">
   471→            <option>Sort by: Featured</option>
   472→            <option>Price: Low to High</option>
   473→            <option>Price: High to Low</option>
   474→            <option>Newest First</option>
   475→            <option>Best Selling</option>
   476→          </select>
   477→        </div>
   478→      </div>
   479→
   480→      <!-- Product Grid Layout with Sidebar -->
   481→      <div class="flex gap-6">
   482→
   483→        <!-- ── Desktop Sidebar Filters ────────────────────────────── -->
   484→        <aside class="hidden lg:block w-64 flex-shrink-0">
   485→          <div class="bg-gray-50 rounded-2xl p-5 space-y-6 sticky top-32">
   486→            <h4 class="font-semibold text-gray-900 flex items-center gap-2">
   487→              <i data-lucide="filter" class="w-4 h-4 text-brand"></i> Filters
   488→            </h4>
   489→
   490→            <!-- Price Range Filter -->
   491→            <div>
   492→              <h5 class="text-sm font-medium text-gray-700 mb-3">Price Range</h5>
   493→              <div class="flex justify-between text-xs text-gray-500 mb-2">
   494→                <span id="price-min-label">৳450</span>
   495→                <span id="price-max-label">৳3,000</span>
   496→              </div>
   497→              <input type="range" id="price-range" min="450" max="3000" value="1500" class="w-full cursor-pointer" />
   498→              <div class="flex gap-2 mt-3">
   499→                <input type="number" value="450" class="w-full px-2 py-1.5 text-xs border border-gray-200 rounded-lg text-center focus:outline-none focus:border-brand" />
   500→                <input type="number" value="3000" class="w-full px-2 py-1.5 text-xs border border-gray-200 rounded-lg text-center focus:outline-none focus:border-brand" />
   501→              </div>
   502→            </div>
   503→
   504→            <!-- Color Filter -->
   505→            <div>
   506→              <h5 class="text-sm font-medium text-gray-700 mb-3">Color</h5>
   507→              <div class="flex flex-wrap gap-2">
   508→                <button class="w-8 h-8 rounded-full bg-gray-900 border-2 border-transparent hover:border-brand transition" title="Black"></button>
   509→                <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 hover:border-brand transition" title="White"></button>
   510→                <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-brand transition" title="Blue"></button>
   511→                <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-transparent hover:border-brand transition" title="Gray"></button>
   512→                <button class="w-8 h-8 rounded-full bg-green-700 border-2 border-transparent hover:border-brand transition" title="Green"></button>
   513→                <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-brand transition" title="Red"></button>
   514→                <button class="w-8 h-8 rounded-full bg-amber-100 border-2 border-transparent hover:border-brand transition" title="Cream"></button>
   515→                <button class="w-8 h-8 rounded-full bg-purple-900 border-2 border-transparent hover:border-brand transition" title="Maroon"></button>
   516→              </div>
   517→            </div>
   518→
   519→            <!-- Size Filter -->
   520→            <div>
   521→              <h5 class="text-sm font-medium text-gray-700 mb-3">Size</h5>
   522→              <div class="grid grid-cols-3 gap-2">
   523→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">S</button>
   524→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">M</button>
   525→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">L</button>
   526→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">XL</button>
   527→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">2XL</button>
   528→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">3XL</button>
   529→              </div>
   530→            </div>
   531→
   532→            <!-- Apply Filters Button -->
   533→            <button class="w-full py-2.5 bg-brand hover:bg-brand-dark text-white font-medium text-sm rounded-xl transition">
   534→              Apply Filters
   535→            </button>
   536→          </div>
   537→        </aside>
   538→
   539→        <!-- ── Mobile Filter Drawer ────────────────────────────────── -->
   540→        <div id="mobile-filter-overlay" class="lg:hidden fixed inset-0 bg-black/50 z-50 hidden"></div>
   541→        <div id="mobile-filter-drawer" class="lg:hidden fixed top-0 left-0 h-full w-80 bg-white z-50 shadow-2xl transform -translate-x-full transition-transform duration-300">
   542→          <div class="flex items-center justify-between p-4 border-b border-gray-100">
   543→            <span class="font-semibold text-gray-900">Filters</span>
   544→            <button id="close-filter-drawer" class="p-1 text-gray-500 hover:text-gray-800">
   545→              <i data-lucide="x" class="w-6 h-6"></i>
   546→            </button>
   547→          </div>
   548→          <div class="p-4 overflow-y-auto max-h-[calc(100vh-60px)] space-y-6">
   549→            <!-- Price -->
   550→            <div>
   551→              <h5 class="text-sm font-medium text-gray-700 mb-3">Price Range</h5>
   552→              <div class="flex justify-between text-xs text-gray-500 mb-2">
   553→                <span>৳450</span><span>৳3,000</span>
   554→              </div>
   555→              <input type="range" min="450" max="3000" value="1500" class="w-full cursor-pointer" />
   556→            </div>
   557→            <!-- Color -->
   558→            <div>
   559→              <h5 class="text-sm font-medium text-gray-700 mb-3">Color</h5>
   560→              <div class="flex flex-wrap gap-2">
   561→                <button class="w-8 h-8 rounded-full bg-gray-900 border-2 border-transparent hover:border-brand transition"></button>
   562→                <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 hover:border-brand transition"></button>
   563→                <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-brand transition"></button>
   564→                <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-transparent hover:border-brand transition"></button>
   565→                <button class="w-8 h-8 rounded-full bg-green-700 border-2 border-transparent hover:border-brand transition"></button>
   566→                <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-brand transition"></button>
   567→              </div>
   568→            </div>
   569→            <!-- Size -->
   570→            <div>
   571→              <h5 class="text-sm font-medium text-gray-700 mb-3">Size</h5>
   572→              <div class="grid grid-cols-3 gap-2">
   573→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">S</button>
   574→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">M</button>
   575→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">L</button>
   576→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">XL</button>
   577→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">2XL</button>
   578→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">3XL</button>
   579→              </div>
   580→            </div>
   581→            <button class="w-full py-2.5 bg-brand text-white font-medium text-sm rounded-xl">Apply Filters</button>
   582→          </div>
   583→        </div>
   584→
   585→        <!-- ── Product Cards Grid ─────────────────────────────────── -->
   586→        <div class="flex-1">
   587→          <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5" id="product-grid">
   588→            <!-- Product cards will be rendered by JavaScript -->
   589→          </div>
   590→
   591→          <!-- Load More Button -->
   592→          <div class="text-center mt-10 fade-up">
   593→            <button id="load-more-btn" class="px-10 py-3 border-2 border-brand text-brand font-semibold rounded-full hover:bg-brand hover:text-white transition-all duration-300">
   594→              Load More Products
   595→            </button>
   596→          </div>
   597→        </div>
   598→      </div>
   599→    </div>
   600→  </section>
   601→
   602→  <!-- ================================================================
   603→       7. TRUST / FEATURES BAR
   604→       Free delivery, returns, payment, support icons
   605→       ================================================================ -->
   606→  <section class="py-10 lg:py-14 bg-gray-50">
   607→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   608→      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 fade-up">
   609→        <div class="text-center p-4">
   610→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   611→            <i data-lucide="truck" class="w-6 h-6 text-brand"></i>
   612→          </div>
   613→          <h4 class="font-semibold text-gray-800 text-sm">Free Delivery</h4>
   614→          <p class="text-gray-500 text-xs mt-1">On orders above ৳1,500</p>
   615→        </div>
   616→        <div class="text-center p-4">
   617→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   618→            <i data-lucide="refresh-cw" class="w-6 h-6 text-brand"></i>
   619→          </div>
   620→          <h4 class="font-semibold text-gray-800 text-sm">Easy Returns</h4>
   621→          <p class="text-gray-500 text-xs mt-1">7-day return policy</p>
   622→        </div>
   623→        <div class="text-center p-4">
   624→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   625→            <i data-lucide="shield-check" class="w-6 h-6 text-brand"></i>
   626→          </div>
   627→          <h4 class="font-semibold text-gray-800 text-sm">Secure Payment</h4>
   628→          <p class="text-gray-500 text-xs mt-1">COD & bKash available</p>
   629→        </div>
   630→        <div class="text-center p-4">
   631→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   632→            <i data-lucide="headphones" class="w-6 h-6 text-brand"></i>
   633→          </div>
   634→          <h4 class="font-semibold text-gray-800 text-sm">24/7 Support</h4>
   635→          <p class="text-gray-500 text-xs mt-1">WhatsApp & phone</p>
   636→        </div>
   637→      </div>
   638→    </div>
   639→  </section>
   640→
   641→  <!-- ================================================================
   642→       8. FOOTER
   643→       Brand info, links, social media, policies
   644→       ================================================================ -->
   645→  <footer class="bg-gray-900 text-gray-300 pt-12 lg:pt-16 pb-24 lg:pb-8">
   646→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   647→      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
   648→
   649→        <!-- Brand Column -->
   650→        <div>
   651→          <h3 class="text-xl font-heading font-bold text-white mb-4">
   652→            <span class="text-brand">X</span>evon
   653→          </h3>
   654→          <p class="text-gray-400 text-sm leading-relaxed mb-4">
   655→            Xevon is a premium Bangladeshi fashion brand offering high-quality Panjabi, Shirts, T-Shirts, Trousers, and Winter Wear for the modern gentleman. Style meets comfort.
   656→          </p>
   657→          <div class="flex gap-3">
   658→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="Facebook">
   659→              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
   660→            </a>
   661→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="Instagram">
   662→              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
   663→            </a>
   664→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="YouTube">
   665→              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
   666→            </a>
   667→          </div>
   668→        </div>
   669→
   670→        <!-- Quick Links -->
   671→        <div>
   672→          <h4 class="text-white font-semibold mb-4">Quick Links</h4>
   673→          <ul class="space-y-2.5 text-sm">
   674→            <li><a href="#" class="hover:text-brand transition">Home</a></li>
   675→            <li><a href="#" class="hover:text-brand transition">Shop</a></li>
   676→            <li><a href="#" class="hover:text-brand transition">New Arrivals</a></li>
   677→            <li><a href="#" class="hover:text-brand transition">Best Sellers</a></li>
   678→            <li><a href="#" class="hover:text-brand transition">Sale</a></li>
   679→            <li><a href="#" class="hover:text-brand transition">Contact Us</a></li>
   680→          </ul>
   681→        </div>
   682→
   683→        <!-- Customer Service / Policies -->
   684→        <div>
   685→          <h4 class="text-white font-semibold mb-4">Customer Service</h4>
   686→          <ul class="space-y-2.5 text-sm">
   687→            <li><a href="#" class="hover:text-brand transition">Privacy Policy</a></li>
   688→            <li><a href="#" class="hover:text-brand transition">Terms & Conditions</a></li>
   689→            <li><a href="#" class="hover:text-brand transition">Return & Refund Policy</a></li>
   690→            <li><a href="#" class="hover:text-brand transition">Delivery Information</a></li>
   691→            <li><a href="#" class="hover:text-brand transition">Track Order</a></li>
   692→          </ul>
   693→        </div>
   694→
   695→        <!-- Contact Info -->
   696→        <div>
   697→          <h4 class="text-white font-semibold mb-4">Contact Us</h4>
   698→          <ul class="space-y-3 text-sm">
   699→            <li class="flex items-start gap-2">
   700→              <i data-lucide="map-pin" class="w-4 h-4 text-brand mt-0.5 flex-shrink-0"></i>
   701→              <span>Gulshan-2, Dhaka 1212,<br/>Bangladesh</span>
   702→            </li>
   703→            <li class="flex items-center gap-2">
   704→              <i data-lucide="phone" class="w-4 h-4 text-brand flex-shrink-0"></i>
   705→              <a href="tel:+8801234567890" class="hover:text-brand transition">+880 1234-567890</a>
   706→            </li>
   707→            <li class="flex items-center gap-2">
   708→              <i data-lucide="mail" class="w-4 h-4 text-brand flex-shrink-0"></i>
   709→              <a href="mailto:hello@xevon.com.bd" class="hover:text-brand transition">hello@xevon.com.bd</a>
   710→            </li>
   711→          </ul>
   712→        </div>
   713→      </div>
   714→
   715→      <!-- Copyright -->
   716→      <div class="border-t border-gray-800 mt-10 pt-6 text-center text-xs text-gray-500">
   717→        <p>&copy; 2025 Xevon. All rights reserved. Designed with love in Bangladesh.</p>
   718→      </div>
   719→    </div>
   720→  </footer>
   721→
   722→  <!-- ================================================================
   723→       9. SIDE DRAWER CART
   724→       Slide-in panel from right with cart items and checkout
   725→       ================================================================ -->
   726→  <div id="cart-overlay" class="fixed inset-0 bg-black/50 z-50 hidden opacity-0"></div>
   727→  <div id="cart-drawer" class="fixed top-0 right-0 h-full w-full max-w-md bg-white z-50 shadow-2xl transform translate-x-full flex flex-col">
   728→    <!-- Drawer Header -->
   729→    <div class="flex items-center justify-between p-4 border-b border-gray-100">
   730→      <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
   731→        <i data-lucide="shopping-bag" class="w-5 h-5 text-brand"></i>
   732→        Shopping Cart <span id="cart-drawer-count" class="text-sm text-gray-400">(0)</span>
   733→      </h3>
   734→      <button id="close-cart-drawer" class="p-1 text-gray-500 hover:text-gray-800 transition">
   735→        <i data-lucide="x" class="w-6 h-6"></i>
   736→      </button>
   737→    </div>
   738→    <!-- Cart Items Container -->
   739→    <div id="cart-items-container" class="flex-1 overflow-y-auto p-4">
   740→      <!-- Empty State -->
   741→      <div id="cart-empty-state" class="flex flex-col items-center justify-center h-full text-gray-400">
   742→        <i data-lucide="shopping-bag" class="w-16 h-16 mb-4 opacity-30"></i>
   743→        <p class="text-lg font-medium mb-2">Your cart is empty</p>
   744→        <p class="text-sm">Add some items to get started!</p>
   745→      </div>
   746→      <!-- Cart Items List (hidden by default) -->
   747→      <div id="cart-items-list" class="space-y-4 hidden"></div>
   748→    </div>
   749→    <!-- Cart Footer with Subtotal and Checkout -->
   750→    <div id="cart-footer" class="hidden border-t border-gray-100 p-4 bg-gray-50">
   751→      <div class="space-y-2 mb-4">
   752→        <div class="flex justify-between text-sm">
   753→          <span class="text-gray-500">Subtotal</span>
   754→          <span id="cart-subtotal" class="font-medium">৳0</span>
   755→        </div>
   756→        <div class="flex justify-between text-sm">
   757→          <span class="text-gray-500">Delivery</span>
   758→          <span class="text-green-600 font-medium">Free</span>
   759→        </div>
   760→        <div class="border-t border-gray-200 pt-2 flex justify-between">
   761→          <span class="font-semibold">Total</span>
   762→          <span id="cart-total" class="font-bold text-brand text-lg">৳0</span>
   763→        </div>
   764→      </div>
   765→      <button class="w-full py-3 bg-brand hover:bg-brand-dark text-white font-semibold rounded-xl transition-all duration-300 transform hover:scale-[1.02]">
   766→        Proceed to Checkout
   767→      </button>
   768→      <button id="continue-shopping-btn" class="w-full py-2.5 mt-2 text-sm text-gray-600 hover:text-brand transition">
   769→        Continue Shopping
   770→      </button>
   771→    </div>
   772→  </div>
   773→
   774→  <!-- ================================================================
   775→       10. MOBILE BOTTOM NAVIGATION BAR
   776→       Fixed bottom bar: Home | Shop | Cart | Wishlist
   777→       ================================================================ -->
   778→  <nav id="mobile-nav" class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40">
   779→    <div class="grid grid-cols-4 h-16">
   780→      <a href="#" class="flex flex-col items-center justify-center gap-0.5 text-brand">
   781→        <i data-lucide="home" class="w-5 h-5"></i>
   782→        <span class="text-[10px] font-medium">Home</span>
   783→      </a>
   784→      <a href="#products" class="flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   785→        <i data-lucide="grid-3x3" class="w-5 h-5"></i>
   786→        <span class="text-[10px] font-medium">Shop</span>
   787→      </a>
   788→      <button id="mobile-cart-btn" class="relative flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   789→        <i data-lucide="shopping-bag" class="w-5 h-5"></i>
   790→        <span id="mobile-cart-badge" class="hidden absolute top-1 right-1/4 w-4 h-4 bg-brand text-white text-[9px] font-bold rounded-full items-center justify-center">0</span>
   791→        <span class="text-[10px] font-medium">Cart</span>
   792→      </button>
   793→      <a href="#" class="relative flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   794→        <i data-lucide="heart" class="w-5 h-5"></i>
   795→        <span id="mobile-wishlist-badge" class="hidden absolute top-1 right-1/4 w-4 h-4 bg-brand text-white text-[9px] font-bold rounded-full items-center justify-center">0</span>
   796→        <span class="text-[10px] font-medium">Wishlist</span>
   797→      </a>
   798→    </div>
   799→  </nav>
   800→
   801→  <!-- ================================================================
   802→       11. FLOATING CONTACT WIDGETS
   803→       WhatsApp, Messenger, Phone - stacked at bottom-right
   804→       ================================================================ -->
   805→  <div class="fixed bottom-20 lg:bottom-8 right-4 z-30 flex flex-col-reverse gap-3">
   806→    <!-- WhatsApp -->
   807→    <a href="https://wa.me/8801234567890" target="_blank" rel="noopener noreferrer"
   808→       class="w-14 h-14 bg-green-500 hover:bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110"
   809→       title="Chat on WhatsApp">
   810→      <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
   811→    </a>
   812→    <!-- Messenger -->
   813→    <a href="https://m.me/xevon" target="_blank" rel="noopener noreferrer"
   814→       class="w-14 h-14 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110"
   815→       title="Chat on Messenger">
   816→      <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.145 2 11.243c0 2.907 1.189 5.505 3.136 7.392V22l2.85-1.594c.896.25 1.846.39 2.83.418l.184.006C16.523 22.83 22 18.685 22 13.587 22 8.49 17.523 2 12 2zm1.186 15.09l-2.71-2.922-5.298 2.922 5.831-6.228 2.773 2.922 5.178-2.922-5.774 6.228z"/></svg>
   817→    </a>
   818→    <!-- Phone Call -->
   819→    <a href="tel:+8801234567890"
   820→       class="w-14 h-14 bg-brand hover:bg-brand-dark text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110"
   821→       title="Call Us Now">
   822→      <i data-lucide="phone" class="w-6 h-6"></i>
   823→    </a>
   824→  </div>
   825→
   826→  <!-- ================================================================
   827→       JAVASCRIPT — All interactivity
   828→       ================================================================ -->
   829→  <script>
   830→    /* ── Initialize Lucide Icons ─────────────────────────────────── */
   831→    lucide.createIcons();
   832→
   833→    /* ── Product Data Array ──────────────────────────────────────── */
   834→    const products = [
   835→      { id: 1, name: 'Premium Cotton Panjabi', category: 'Panjabi', price: 1890, originalPrice: 2450, discount: 23, colors: ['Black', 'Navy', 'Cream'], sizes: ['M', 'L', 'XL'], badge: 'New', emoji: '🥻', colorBg: 'bg-amber-50' },
   836→      { id: 2, name: 'Oversized Drop Shoulder Tee', category: 'T-Shirt', price: 650, originalPrice: 850, discount: 24, colors: ['Black', 'White', 'Gray'], sizes: ['M', 'L', 'XL', '2XL'], badge: 'Trending', emoji: '👕', colorBg: 'bg-blue-50' },
   837→      { id: 3, name: 'Slim Fit Formal Shirt', category: 'Shirt', price: 1250, originalPrice: 1600, discount: 22, colors: ['White', 'Blue', 'Pink'], sizes: ['S', 'M', 'L', 'XL'], badge: '', emoji: '👔', colorBg: 'bg-rose-50' },
   838→      { id: 4, name: 'Cotton Chino Trouser', category: 'Trouser', price: 990, originalPrice: 1350, discount: 27, colors: ['Khaki', 'Navy', 'Black'], sizes: ['M', 'L', 'XL'], badge: 'Best Seller', emoji: '👖', colorBg: 'bg-green-50' },
   839→      { id: 5, name: 'Winter Hooded Jacket', category: 'Winter Wear', price: 2800, originalPrice: 4500, discount: 38, colors: ['Black', 'Gray', 'Olive'], sizes: ['L', 'XL', '2XL'], badge: 'Hot', emoji: '🧥', colorBg: 'bg-cyan-50' },
   840→      { id: 6, name: 'Drop Shoulder Polo', category: 'Drop Shoulder', price: 780, originalPrice: 1100, discount: 29, colors: ['Navy', 'Maroon', 'Green'], sizes: ['M', 'L', 'XL'], badge: 'New', emoji: '🎽', colorBg: 'bg-purple-50' },
   841→      { id: 7, name: 'Embroidered Panjabi', category: 'Panjabi', price: 2200, originalPrice: 2900, discount: 24, colors: ['White', 'Cream', 'Light Blue'], sizes: ['M', 'L', 'XL'], badge: 'Premium', emoji: '🥻', colorBg: 'bg-amber-50' },
   842→      { id: 8, name: 'Graphic Print T-Shirt', category: 'T-Shirt', price: 550, originalPrice: 750, discount: 27, colors: ['Black', 'White'], sizes: ['S', 'M', 'L', 'XL', '2XL'], badge: '', emoji: '👕', colorBg: 'bg-indigo-50' },
   843→      { id: 9, name: 'Relaxed Fit Trouser', category: 'Trouser', price: 890, originalPrice: 1200, discount: 26, colors: ['Black', 'Olive', 'Beige'], sizes: ['M', 'L', 'XL', '2XL'], badge: 'New', emoji: '👖', colorBg: 'bg-emerald-50' },
   844→    ];
   845→
   846→    /* ── Application State ───────────────────────────────────────── */
   847→    let cart = [];
   848→    let wishlist = new Set();
   849→
   850→    /* ── Color Name to Tailwind Class Map ─────────────────────────── */
   851→    const colorMap = {
   852→      'Black': 'bg-gray-900', 'White': 'bg-white border border-gray-300',
   853→      'Navy': 'bg-blue-800', 'Cream': 'bg-amber-100', 'Gray': 'bg-gray-400',
   854→      'Pink': 'bg-pink-300', 'Blue': 'bg-blue-500', 'Khaki': 'bg-yellow-600',
   855→      'Olive': 'bg-green-700', 'Maroon': 'bg-purple-900', 'Green': 'bg-green-600',
   856→      'Light Blue': 'bg-sky-200', 'Beige': 'bg-amber-200',
   857→    };
   858→
   859→    /* ── Render Product Cards into the Grid ─────────────────────── */
   860→    function renderProducts() {
   861→      const grid = document.getElementById('product-grid');
   862→      grid.innerHTML = products.map(p => `
   863→        <div class="product-card group bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300" data-id="${p.id}">
   864→          <!-- Product Image Area -->
   865→          <div class="relative aspect-[3/4] overflow-hidden ${p.colorBg}">
   866→            <div class="absolute inset-0 flex items-center justify-center">
   867→              <span class="text-6xl lg:text-7xl group-hover:scale-110 transition-transform duration-500">${p.emoji}</span>
   868→            </div>
   869→            <!-- Discount Tag (top-left) -->
   870→            <span class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2.5 py-1 rounded-full z-10">-${p.discount}%</span>
   871→            <!-- Badge Tag (top-right, if present) -->
   872→            ${p.badge ? `<span class="absolute top-3 right-3 bg-brand text-white text-[10px] font-bold px-2.5 py-1 rounded-full z-10">${p.badge}</span>` : ''}
   873→            <!-- Wishlist Heart Button (bottom-right) -->
   874→            <button onclick="toggleWishlist(${p.id}, this)" class="absolute bottom-3 right-3 w-9 h-9 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-md hover:bg-brand hover:text-white transition-all duration-300 z-10 text-gray-400">
   875→              <svg class="w-4 h-4" fill="${wishlist.has(p.id) ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
   876→                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
   877→              </svg>
   878→            </button>
   879→          </div>
   880→          <!-- Product Info -->
   881→          <div class="p-3 lg:p-4">
   882→            <p class="text-[10px] text-brand font-medium uppercase tracking-wider mb-1">${p.category}</p>
   883→            <h3 class="text-sm font-semibold text-gray-800 line-clamp-2 leading-snug mb-2 group-hover:text-brand transition">${p.name}</h3>
   884→            <!-- Price with strikethrough original -->
   885→            <div class="flex items-center gap-2 mb-3">
   886→              <span class="text-base font-bold text-gray-900">৳${p.price.toLocaleString()}</span>
   887→              <span class="text-sm text-gray-400 line-through">৳${p.originalPrice.toLocaleString()}</span>
   888→            </div>
   889→            <!-- Color Swatches -->
   890→            <div class="flex items-center gap-1.5 mb-3">
   891→              ${p.colors.map(c => `<span class="w-4 h-4 rounded-full ${colorMap[c] || 'bg-gray-300'} border border-gray-200 cursor-pointer hover:scale-125 transition-transform" title="${c}"></span>`).join('')}
   892→            </div>
   893→            <!-- Select Options / Add to Cart -->
   894→            <button onclick="addToCart(${p.id})" class="w-full py-2.5 bg-gray-900 hover:bg-brand text-white text-xs font-semibold rounded-xl transition-all duration-300 transform hover:scale-[1.02] flex items-center justify-center gap-1.5">
   895→              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
   896→                <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/>
   897→              </svg>
   898→              Select Options
   899→            </button>
   900→          </div>
   901→        </div>
   902→      `).join('');
   903→    }
   904→
   905→    /* ── Wishlist Toggle Function ─────────────────────────────────── */
   906→    function toggleWishlist(productId, btnEl) {
   907→      const svg = btnEl.querySelector('svg');
   908→      if (wishlist.has(productId)) {
   909→        wishlist.delete(productId);
   910→        btnEl.classList.remove('text-brand');
   911→        btnEl.classList.add('text-gray-400');
   912→        svg.setAttribute('fill', 'none');
   913→      } else {
   914→        wishlist.add(productId);
   915→        btnEl.classList.add('text-brand');
   916→        btnEl.classList.remove('text-gray-400');
   917→        svg.setAttribute('fill', 'currentColor');
   918→        // Pulse animation feedback
   919→        btnEl.classList.add('scale-125');
   920→        setTimeout(() => btnEl.classList.remove('scale-125'), 200);
   921→      }
   922→      updateWishlistCount();
   923→    }
   924→
   925→    /* ── Update Wishlist Badge Counters ──────────────────────────── */
   926→    function updateWishlistCount() {
   927→      const count = wishlist.size;
   928→      ['wishlist-count', 'mobile-wishlist-badge'].forEach(id => {
   929→        const el = document.getElementById(id);
   930→        if (count > 0) {
   931→          el.textContent = count;
   932→          el.classList.remove('hidden');
   933→          el.classList.add('flex');
   934→        } else {
   935→          el.classList.add('hidden');
   936→          el.classList.remove('flex');
   937→        }
   938→      });
   939→    }
   940→
   941→    /* ── Add to Cart Function ────────────────────────────────────── */
   942→    function addToCart(productId) {
   943→      const product = products.find(p => p.id === productId);
   944→      if (!product) return;
   945→
   946→      const existing = cart.find(item => item.id === productId);
   947→      if (existing) {
   948→        existing.quantity++;
   949→      } else {
   950→        cart.push({ ...product, quantity: 1 });
   951→      }
   952→      updateCartUI();
   953→      openCartDrawer();
   954→
   955→      // Button feedback animation
   956→      const card = document.querySelector(`.product-card[data-id="${productId}"]`);
   957→      if (card) {
   958→        const btn = card.querySelector('button[onclick*="addToCart"]');
   959→        if (btn) {
   960→          const origHTML = btn.innerHTML;
   961→          btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Added!';
   962→          btn.classList.add('bg-green-600');
   963→          setTimeout(() => { btn.innerHTML = origHTML; btn.classList.remove('bg-green-600'); }, 1200);
   964→        }
   965→      }
   966→    }
   967→
   968→    /* ── Remove Item from Cart ────────────────────────────────────── */
   969→    function removeFromCart(productId) {
   970→      cart = cart.filter(item => item.id !== productId);
   971→      updateCartUI();
   972→    }
   973→
   974→    /* ── Update Cart Item Quantity ────────────────────────────────── */
   975→    function updateCartQuantity(productId, delta) {
   976→      const item = cart.find(i => i.id === productId);
   977→      if (!item) return;
   978→      item.quantity += delta;
   979→      if (item.quantity <= 0) { removeFromCart(productId); return; }
   980→      updateCartUI();
   981→    }
   982→
   983→    /* ── Update Cart UI (badges, items, totals) ────────────────── */
   984→    function updateCartUI() {
   985→      const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
   986→      const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
   987→
   988→      // Update all badge counters
   989→      ['cart-badge', 'mobile-cart-badge'].forEach(id => {
   990→        const el = document.getElementById(id);
   991→        if (totalItems > 0) { el.textContent = totalItems; el.classList.remove('hidden'); el.classList.add('flex'); }
   992→        else { el.classList.add('hidden'); el.classList.remove('flex'); }
   993→      });
   994→      document.getElementById('cart-drawer-count').textContent = `(${totalItems})`;
   995→
   996→      const emptyState = document.getElementById('cart-empty-state');
   997→      const itemsList = document.getElementById('cart-items-list');
   998→      const footer = document.getElementById('cart-footer');
   999→
  1000→      if (cart.length === 0) {
  1001→        emptyState.classList.remove('hidden');
  1002→        itemsList.classList.add('hidden');
  1003→        footer.classList.add('hidden');
  1004→      } else {
  1005→        emptyState.classList.add('hidden');
  1006→        itemsList.classList.remove('hidden');
  1007→        footer.classList.remove('hidden');
  1008→
  1009→        itemsList.innerHTML = cart.map(item => `
  1010→          <div class="flex gap-3 p-3 bg-gray-50 rounded-xl">
  1011→            <div class="w-16 h-16 ${item.colorBg} rounded-lg flex items-center justify-center flex-shrink-0">
  1012→              <span class="text-2xl">${item.emoji}</span>
  1013→            </div>
  1014→            <div class="flex-1 min-w-0">
  1015→              <h4 class="text-sm font-semibold text-gray-800 truncate">${item.name}</h4>
  1016→              <p class="text-xs text-gray-400 mt-0.5">${item.category}</p>
  1017→              <div class="flex items-center justify-between mt-2">
  1018→                <div class="flex items-center gap-2">
  1019→                  <button onclick="updateCartQuantity(${item.id}, -1)" class="w-6 h-6 bg-white border border-gray-200 rounded-md flex items-center justify-center text-gray-600 hover:border-brand hover:text-brand transition text-xs font-bold">-</button>
  1020→                  <span class="text-sm font-medium w-4 text-center">${item.quantity}</span>
  1021→                  <button onclick="updateCartQuantity(${item.id}, 1)" class="w-6 h-6 bg-white border border-gray-200 rounded-md flex items-center justify-center text-gray-600 hover:border-brand hover:text-brand transition text-xs font-bold">+</button>
  1022→                </div>
  1023→                <span class="text-sm font-bold text-gray-900">৳${(item.price * item.quantity).toLocaleString()}</span>
  1024→              </div>
  1025→            </div>
  1026→            <button onclick="removeFromCart(${item.id})" class="text-gray-300 hover:text-red-500 transition self-start mt-0.5">
  1027→              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
  1028→            </button>
  1029→          </div>
  1030→        `).join('');
  1031→
  1032→        document.getElementById('cart-subtotal').textContent = `৳${subtotal.toLocaleString()}`;
  1033→        document.getElementById('cart-total').textContent = `৳${subtotal.toLocaleString()}`;
  1034→      }
  1035→    }
  1036→
  1037→    /* ── Cart Drawer Open / Close ─────────────────────────────────── */
  1038→    function openCartDrawer() {
  1039→      document.getElementById('cart-overlay').classList.remove('hidden');
  1040→      setTimeout(() => document.getElementById('cart-overlay').style.opacity = '1', 10);
  1041→      document.getElementById('cart-drawer').classList.add('open');
  1042→      document.body.style.overflow = 'hidden';
  1043→    }
  1044→
  1045→    function closeCartDrawer() {
  1046→      document.getElementById('cart-overlay').style.opacity = '0';
  1047→      setTimeout(() => document.getElementById('cart-overlay').classList.add('hidden'), 300);
  1048→      document.getElementById('cart-drawer').classList.remove('open');
  1049→      document.body.style.overflow = '';
  1050→    }
  1051→
  1052→    document.getElementById('cart-btn').addEventListener('click', openCartDrawer);
  1053→    document.getElementById('mobile-cart-btn').addEventListener('click', openCartDrawer);
  1054→    document.getElementById('close-cart-drawer').addEventListener('click', closeCartDrawer);
  1055→    document.getElementById('cart-overlay').addEventListener('click', closeCartDrawer);
  1056→    document.getElementById('continue-shopping-btn').addEventListener('click', closeCartDrawer);
  1057→
  1058→    /* ── Mobile Slide-Out Menu ────────────────────────────────────── */
  1059→    function openMobileMenu() {
  1060→      document.getElementById('mobile-menu-overlay').classList.remove('hidden');
  1061→      setTimeout(() => { document.getElementById('mobile-menu').style.transform = 'translateX(0)'; }, 10);
  1062→      document.body.style.overflow = 'hidden';
  1063→    }
  1064→
  1065→    function closeMobileMenu() {
  1066→      document.getElementById('mobile-menu').style.transform = 'translateX(-100%)';
  1067→      setTimeout(() => document.getElementById('mobile-menu-overlay').classList.add('hidden'), 300);
  1068→      document.body.style.overflow = '';
  1069→    }
  1070→
  1071→    document.getElementById('hamburger-btn').addEventListener('click', openMobileMenu);
  1072→    document.getElementById('close-mobile-menu').addEventListener('click', closeMobileMenu);
  1073→    document.getElementById('mobile-menu-overlay').addEventListener('click', closeMobileMenu);
  1074→
  1075→    /* ── Mobile Filter Drawer ─────────────────────────────────────── */
  1076→    document.getElementById('filter-toggle-btn').addEventListener('click', () => {
  1077→      document.getElementById('mobile-filter-overlay').classList.remove('hidden');
  1078→      setTimeout(() => { document.getElementById('mobile-filter-drawer').style.transform = 'translateX(0)'; }, 10);
  1079→      document.body.style.overflow = 'hidden';
  1080→    });
  1081→
  1082→    document.getElementById('close-filter-drawer').addEventListener('click', () => {
  1083→      document.getElementById('mobile-filter-drawer').style.transform = 'translateX(-100%)';
  1084→      setTimeout(() => document.getElementById('mobile-filter-overlay').classList.add('hidden'), 300);
  1085→      document.body.style.overflow = '';
  1086→    });
  1087→
  1088→    document.getElementById('mobile-filter-overlay').addEventListener('click', () => {
  1089→      document.getElementById('mobile-filter-drawer').style.transform = 'translateX(-100%)';
  1090→      setTimeout(() => document.getElementById('mobile-filter-overlay').classList.add('hidden'), 300);
  1091→      document.body.style.overflow = '';
  1092→    });
  1093→
  1094→    /* ── Hero Slider Logic ───────────────────────────────────────── */
  1095→    const slides = document.querySelectorAll('.hero-slide');
  1096→    const dots = document.querySelectorAll('.hero-dot');
  1097→    let currentSlide = 0;
  1098→    let slideInterval;
  1099→
  1100→    function goToSlide(index) {
  1101→      slides.forEach(s => s.classList.remove('active'));
  1102→      dots.forEach(d => { d.style.background = 'rgba(255,255,255,0.5)'; d.style.width = '12px'; });
  1103→      slides[index].classList.add('active');
  1104→      dots[index].style.background = '#fff';
  1105→      dots[index].style.width = '28px';
  1106→      dots[index].style.borderRadius = '9999px';
  1107→      currentSlide = index;
  1108→    }
  1109→
  1110→    function nextSlide() { goToSlide((currentSlide + 1) % slides.length); }
  1111→    function prevSlide() { goToSlide((currentSlide - 1 + slides.length) % slides.length); }
  1112→
  1113→    function startAutoSlide() { slideInterval = setInterval(nextSlide, 5000); }
  1114→    function resetAutoSlide() { clearInterval(slideInterval); startAutoSlide(); }
  1115→
  1116→    document.getElementById('hero-next').addEventListener('click', () => { nextSlide(); resetAutoSlide(); });
  1117→    document.getElementById('hero-prev').addEventListener('click', () => { prevSlide(); resetAutoSlide(); });
  1118→    dots.forEach(dot => dot.addEventListener('click', () => { goToSlide(parseInt(dot.dataset.dot)); resetAutoSlide(); }));
  1119→
  1120→    goToSlide(0);
  1121→    startAutoSlide();
  1122→
  1123→    /* ── Price Range Slider Label Update ─────────────────────────── */
  1124→    const priceRange = document.getElementById('price-range');
  1125→    if (priceRange) {
  1126→      priceRange.addEventListener('input', function() {
  1127→        document.getElementById('price-max-label').textContent = `৳${parseInt(this.value).toLocaleString()}`;
  1128→      });
  1129→    }
  1130→
  1131→    /* ── Scroll Fade-Up Animation (Intersection Observer) ─────────── */
  1132→    const observer = new IntersectionObserver((entries) => {
  1133→      entries.forEach(entry => {
  1134→        if (entry.isIntersecting) entry.target.classList.add('visible');
  1135→      });
  1136→    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
  1137→    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
  1138→
  1139→    /* ── Load More Button ─────────────────────────────────────────── */
  1140→    document.getElementById('load-more-btn').addEventListener('click', function() {
  1141→      this.innerHTML = '<svg class="w-5 h-5 animate-spin mx-auto" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
  1142→      setTimeout(() => {
  1143→        this.innerHTML = 'No More Products';
  1144→        this.disabled = true;
  1145→        this.classList.add('opacity-50', 'cursor-not-allowed');
  1146→      }, 1500);
  1147→    });
  1148→
  1149→    /* ── Category Filter Pills (active toggle) ────────────────────── */
  1150→    document.querySelectorAll('.category-pill').forEach(btn => {
  1151→      btn.addEventListener('click', function() {
  1152→        document.querySelectorAll('.category-pill').forEach(b => {
  1153→          b.classList.remove('bg-brand', 'text-white');
  1154→          b.classList.add('bg-gray-100', 'text-gray-700');
  1155→        });
  1156→        this.classList.remove('bg-gray-100', 'text-gray-700');
  1157→        this.classList.add('bg-brand', 'text-white');
  1158→      });
  1159→    });
  1160→
  1161→    /* ── Size Filter Buttons (active toggle in sidebar) ────────────── */
  1162→    document.querySelectorAll('.size-btn').forEach(btn => {
  1163→      btn.addEventListener('click', function() {
  1164→        this.classList.toggle('border-brand');
  1165→        this.classList.toggle('text-brand');
  1166→        this.classList.toggle('bg-brand/5');
  1167→      });
  1168→    });
  1169→
  1170→    /* ── Header Shadow Enhancement on Scroll ──────────────────────── */
  1171→    window.addEventListener('scroll', () => {
  1172→      const header = document.getElementById('main-header');
  1173→      if (window.scrollY > 10) {
  1174→        header.classList.add('shadow-md');
  1175→        header.classList.remove('shadow-sm');
  1176→      } else {
  1177→        header.classList.remove('shadow-md');
  1178→        header.classList.add('shadow-sm');
  1179→      }
  1180→    });
  1181→
  1182→    /* ── Initial Product Render ───────────────────────────────────── */
  1183→    renderProducts();
  1184→  </script>
  1185→</body>
  1186→</html>
  1187→