     1→   401→   401→          <p class="text-gray-400 text-xs mt-1">35+ items</p>
     2→   402→   402→        </a>
     3→   403→   403→      </div>
     4→   404→   404→    </div>
     5→   405→   405→  </section>
     6→   406→   406→
     7→   407→   407→  <!-- ================================================================
     8→   408→   408→       5. PROMOTIONAL BANNERS
     9→   409→   409→       Highlighted sales banners with CTAs
    10→   410→   410→       ================================================================ -->
    11→   411→   411→  <section class="py-8 lg:py-12 bg-gray-50">
    12→   412→   412→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
    13→   413→   413→      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6 fade-up">
    14→   414→   414→        <!-- Promo Banner 1: Winter Sale -->
    15→   415→   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">
    16→   416→   416→          <div class="relative z-10">
    17→   417→   417→            <span class="inline-block bg-white text-brand text-xs font-bold px-3 py-1 rounded-full mb-3">Winter Collection</span>
    18→   418→   418→            <h3 class="text-2xl lg:text-3xl font-heading font-bold text-white mb-2">50% OFF</h3>
    19→   419→   419→            <p class="text-white/80 text-sm mb-4">Warm up your wardrobe with premium winter essentials</p>
    20→   420→   420→            <span class="inline-flex items-center gap-2 text-white font-semibold text-sm group-hover:gap-3 transition-all">
    21→   421→   421→              Shop Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
    22→   422→   422→            </span>
    23→   423→   423→          </div>
    24→   424→   424→          <div class="absolute right-4 bottom-4 text-6xl opacity-20 group-hover:opacity-30 transition">🧥</div>
    25→   425→   425→        </a>
    26→   426→   426→        <!-- Promo Banner 2: Drop Shoulder -->
    27→   427→   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">
    28→   428→   428→          <div class="relative z-10">
    29→   429→   429→            <span class="inline-block bg-brand text-white text-xs font-bold px-3 py-1 rounded-full mb-3">New Arrivals</span>
    30→   430→   430→            <h3 class="text-2xl lg:text-3xl font-heading font-bold text-white mb-2">Drop Shoulder</h3>
    31→   431→   431→            <p class="text-gray-300 text-sm mb-4">Trendy oversized fits for everyday style</p>
    32→   432→   432→            <span class="inline-flex items-center gap-2 text-white font-semibold text-sm group-hover:gap-3 transition-all">
    33→   433→   433→              Explore <i data-lucide="arrow-right" class="w-4 h-4"></i>
    34→   434→   434→            </span>
    35→   435→   435→          </div>
    36→   436→   436→          <div class="absolute right-4 bottom-4 text-6xl opacity-20 group-hover:opacity-30 transition">👕</div>
    37→   437→   437→        </a>
    38→   438→   438→      </div>
    39→   439→   439→    </div>
    40→   440→   440→  </section>
    41→   441→   441→
    42→   442→   442→  <!-- ================================================================
    43→   443→   443→       6. PRODUCT GRID SECTION
    44→   444→   444→       New Arrivals with filter sidebar and product cards
    45→   445→   445→       ================================================================ -->
    46→   446→   446→  <section id="products" class="py-12 lg:py-16 bg-white">
    47→   447→   447→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
    48→   448→   448→      <!-- Section Title -->
    49→   449→   449→      <div class="text-center mb-8 lg:mb-10 fade-up">
    50→   450→   450→        <h2 class="text-2xl lg:text-3xl font-heading font-bold text-gray-900">New Arrivals</h2>
    51→   451→   451→        <p class="text-gray-500 mt-2 text-sm">Fresh styles, just for you</p>
    52→   452→   452→      </div>
    53→   453→   453→
    54→   454→   454→      <!-- Filter Bar with Category Pills -->
    55→   455→   455→      <div class="flex items-center justify-between mb-6 gap-4 flex-wrap">
    56→   456→   456→        <div class="flex items-center gap-3 overflow-x-auto no-scrollbar pb-2" id="category-pills">
    57→   457→   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>
    58→   458→   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>
    59→   459→   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>
    60→   460→   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>
    61→   461→   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>
    62→   462→   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>
    63→   463→   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>
    64→   464→   464→        </div>
    65→   465→   465→        <!-- Filter Toggle (mobile) and Sort (desktop) -->
    66→   466→   466→        <div class="flex items-center gap-3">
    67→   467→   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">
    68→   468→   468→            <i data-lucide="sliders-horizontal" class="w-4 h-4"></i> Filters
    69→   469→   469→          </button>
    70→   470→   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">
    71→   471→   471→            <option>Sort by: Featured</option>
    72→   472→   472→            <option>Price: Low to High</option>
    73→   473→   473→            <option>Price: High to Low</option>
    74→   474→   474→            <option>Newest First</option>
    75→   475→   475→            <option>Best Selling</option>
    76→   476→   476→          </select>
    77→   477→   477→        </div>
    78→   478→   478→      </div>
    79→   479→   479→
    80→   480→   480→      <!-- Product Grid Layout with Sidebar -->
    81→   481→   481→      <div class="flex gap-6">
    82→   482→   482→
    83→   483→   483→        <!-- ── Desktop Sidebar Filters ────────────────────────────── -->
    84→   484→   484→        <aside class="hidden lg:block w-64 flex-shrink-0">
    85→   485→   485→          <div class="bg-gray-50 rounded-2xl p-5 space-y-6 sticky top-32">
    86→   486→   486→            <h4 class="font-semibold text-gray-900 flex items-center gap-2">
    87→   487→   487→              <i data-lucide="filter" class="w-4 h-4 text-brand"></i> Filters
    88→   488→   488→            </h4>
    89→   489→   489→
    90→   490→   490→            <!-- Price Range Filter -->
    91→   491→   491→            <div>
    92→   492→   492→              <h5 class="text-sm font-medium text-gray-700 mb-3">Price Range</h5>
    93→   493→   493→              <div class="flex justify-between text-xs text-gray-500 mb-2">
    94→   494→   494→                <span id="price-min-label">৳450</span>
    95→   495→   495→                <span id="price-max-label">৳3,000</span>
    96→   496→   496→              </div>
    97→   497→   497→              <input type="range" id="price-range" min="450" max="3000" value="1500" class="w-full cursor-pointer" />
    98→   498→   498→              <div class="flex gap-2 mt-3">
    99→   499→   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" />
   100→   500→   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" />
   101→   501→   501→              </div>
   102→   502→   502→            </div>
   103→   503→   503→
   104→   504→   504→            <!-- Color Filter -->
   105→   505→   505→            <div>
   106→   506→   506→              <h5 class="text-sm font-medium text-gray-700 mb-3">Color</h5>
   107→   507→   507→              <div class="flex flex-wrap gap-2">
   108→   508→   508→                <button class="w-8 h-8 rounded-full bg-gray-900 border-2 border-transparent hover:border-brand transition" title="Black"></button>
   109→   509→   509→                <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 hover:border-brand transition" title="White"></button>
   110→   510→   510→                <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-brand transition" title="Blue"></button>
   111→   511→   511→                <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-transparent hover:border-brand transition" title="Gray"></button>
   112→   512→   512→                <button class="w-8 h-8 rounded-full bg-green-700 border-2 border-transparent hover:border-brand transition" title="Green"></button>
   113→   513→   513→                <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-brand transition" title="Red"></button>
   114→   514→   514→                <button class="w-8 h-8 rounded-full bg-amber-100 border-2 border-transparent hover:border-brand transition" title="Cream"></button>
   115→   515→   515→                <button class="w-8 h-8 rounded-full bg-purple-900 border-2 border-transparent hover:border-brand transition" title="Maroon"></button>
   116→   516→   516→              </div>
   117→   517→   517→            </div>
   118→   518→   518→
   119→   519→   519→            <!-- Size Filter -->
   120→   520→   520→            <div>
   121→   521→   521→              <h5 class="text-sm font-medium text-gray-700 mb-3">Size</h5>
   122→   522→   522→              <div class="grid grid-cols-3 gap-2">
   123→   523→   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>
   124→   524→   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>
   125→   525→   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>
   126→   526→   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>
   127→   527→   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>
   128→   528→   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>
   129→   529→   529→              </div>
   130→   530→   530→            </div>
   131→   531→   531→
   132→   532→   532→            <!-- Apply Filters Button -->
   133→   533→   533→            <button class="w-full py-2.5 bg-brand hover:bg-brand-dark text-white font-medium text-sm rounded-xl transition">
   134→   534→   534→              Apply Filters
   135→   535→   535→            </button>
   136→   536→   536→          </div>
   137→   537→   537→        </aside>
   138→   538→   538→
   139→   539→   539→        <!-- ── Mobile Filter Drawer ────────────────────────────────── -->
   140→   540→   540→        <div id="mobile-filter-overlay" class="lg:hidden fixed inset-0 bg-black/50 z-50 hidden"></div>
   141→   541→   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">
   142→   542→   542→          <div class="flex items-center justify-between p-4 border-b border-gray-100">
   143→   543→   543→            <span class="font-semibold text-gray-900">Filters</span>
   144→   544→   544→            <button id="close-filter-drawer" class="p-1 text-gray-500 hover:text-gray-800">
   145→   545→   545→              <i data-lucide="x" class="w-6 h-6"></i>
   146→   546→   546→            </button>
   147→   547→   547→          </div>
   148→   548→   548→          <div class="p-4 overflow-y-auto max-h-[calc(100vh-60px)] space-y-6">
   149→   549→   549→            <!-- Price -->
   150→   550→   550→            <div>
   151→   551→   551→              <h5 class="text-sm font-medium text-gray-700 mb-3">Price Range</h5>
   152→   552→   552→              <div class="flex justify-between text-xs text-gray-500 mb-2">
   153→   553→   553→                <span>৳450</span><span>৳3,000</span>
   154→   554→   554→              </div>
   155→   555→   555→              <input type="range" min="450" max="3000" value="1500" class="w-full cursor-pointer" />
   156→   556→   556→            </div>
   157→   557→   557→            <!-- Color -->
   158→   558→   558→            <div>
   159→   559→   559→              <h5 class="text-sm font-medium text-gray-700 mb-3">Color</h5>
   160→   560→   560→              <div class="flex flex-wrap gap-2">
   161→   561→   561→                <button class="w-8 h-8 rounded-full bg-gray-900 border-2 border-transparent hover:border-brand transition"></button>
   162→   562→   562→                <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 hover:border-brand transition"></button>
   163→   563→   563→                <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-brand transition"></button>
   164→   564→   564→                <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-transparent hover:border-brand transition"></button>
   165→   565→   565→                <button class="w-8 h-8 rounded-full bg-green-700 border-2 border-transparent hover:border-brand transition"></button>
   166→   566→   566→                <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-brand transition"></button>
   167→   567→   567→              </div>
   168→   568→   568→            </div>
   169→   569→   569→            <!-- Size -->
   170→   570→   570→            <div>
   171→   571→   571→              <h5 class="text-sm font-medium text-gray-700 mb-3">Size</h5>
   172→   572→   572→              <div class="grid grid-cols-3 gap-2">
   173→   573→   573→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">S</button>
   174→   574→   574→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">M</button>
   175→   575→   575→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">L</button>
   176→   576→   576→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">XL</button>
   177→   577→   577→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">2XL</button>
   178→   578→   578→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">3XL</button>
   179→   579→   579→              </div>
   180→   580→   580→            </div>
   181→   581→   581→            <button class="w-full py-2.5 bg-brand text-white font-medium text-sm rounded-xl">Apply Filters</button>
   182→   582→   582→          </div>
   183→   583→   583→        </div>
   184→   584→   584→
   185→   585→   585→        <!-- ── Product Cards Grid ─────────────────────────────────── -->
   186→   586→   586→        <div class="flex-1">
   187→   587→   587→          <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5" id="product-grid">
   188→   588→   588→            <!-- Product cards will be rendered by JavaScript -->
   189→   589→   589→          </div>
   190→   590→   590→
   191→   591→   591→          <!-- Load More Button -->
   192→   592→   592→          <div class="text-center mt-10 fade-up">
   193→   593→   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">
   194→   594→   594→              Load More Products
   195→   595→   595→            </button>
   196→   596→   596→          </div>
   197→   597→   597→        </div>
   198→   598→   598→      </div>
   199→   599→   599→    </div>
   200→   600→   600→  </section>
   201→   601→   601→
   202→   602→   602→  <!-- ================================================================
   203→   603→   603→       7. TRUST / FEATURES BAR
   204→   604→   604→       Free delivery, returns, payment, support icons
   205→   605→   605→       ================================================================ -->
   206→   606→   606→  <section class="py-10 lg:py-14 bg-gray-50">
   207→   607→   607→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   208→   608→   608→      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 fade-up">
   209→   609→   609→        <div class="text-center p-4">
   210→   610→   610→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   211→   611→   611→            <i data-lucide="truck" class="w-6 h-6 text-brand"></i>
   212→   612→   612→          </div>
   213→   613→   613→          <h4 class="font-semibold text-gray-800 text-sm">Free Delivery</h4>
   214→   614→   614→          <p class="text-gray-500 text-xs mt-1">On orders above ৳1,500</p>
   215→   615→   615→        </div>
   216→   616→   616→        <div class="text-center p-4">
   217→   617→   617→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   218→   618→   618→            <i data-lucide="refresh-cw" class="w-6 h-6 text-brand"></i>
   219→   619→   619→          </div>
   220→   620→   620→          <h4 class="font-semibold text-gray-800 text-sm">Easy Returns</h4>
   221→   621→   621→          <p class="text-gray-500 text-xs mt-1">7-day return policy</p>
   222→   622→   622→        </div>
   223→   623→   623→        <div class="text-center p-4">
   224→   624→   624→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   225→   625→   625→            <i data-lucide="shield-check" class="w-6 h-6 text-brand"></i>
   226→   626→   626→          </div>
   227→   627→   627→          <h4 class="font-semibold text-gray-800 text-sm">Secure Payment</h4>
   228→   628→   628→          <p class="text-gray-500 text-xs mt-1">COD & bKash available</p>
   229→   629→   629→        </div>
   230→   630→   630→        <div class="text-center p-4">
   231→   631→   631→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   232→   632→   632→            <i data-lucide="headphones" class="w-6 h-6 text-brand"></i>
   233→   633→   633→          </div>
   234→   634→   634→          <h4 class="font-semibold text-gray-800 text-sm">24/7 Support</h4>
   235→   635→   635→          <p class="text-gray-500 text-xs mt-1">WhatsApp & phone</p>
   236→   636→   636→        </div>
   237→   637→   637→      </div>
   238→   638→   638→    </div>
   239→   639→   639→  </section>
   240→   640→   640→
   241→   641→   641→  <!-- ================================================================
   242→   642→   642→       8. FOOTER
   243→   643→   643→       Brand info, links, social media, policies
   244→   644→   644→       ================================================================ -->
   245→   645→   645→  <footer class="bg-gray-900 text-gray-300 pt-12 lg:pt-16 pb-24 lg:pb-8">
   246→   646→   646→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   247→   647→   647→      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
   248→   648→   648→
   249→   649→   649→        <!-- Brand Column -->
   250→   650→   650→        <div>
   251→   651→   651→          <h3 class="text-xl font-heading font-bold text-white mb-4">
   252→   652→   652→            <span class="text-brand">X</span>evon
   253→   653→   653→          </h3>
   254→   654→   654→          <p class="text-gray-400 text-sm leading-relaxed mb-4">
   255→   655→   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.
   256→   656→   656→          </p>
   257→   657→   657→          <div class="flex gap-3">
   258→   658→   658→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="Facebook">
   259→   659→   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>
   260→   660→   660→            </a>
   261→   661→   661→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="Instagram">
   262→   662→   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>
   263→   663→   663→            </a>
   264→   664→   664→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="YouTube">
   265→   665→   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>
   266→   666→   666→            </a>
   267→   667→   667→          </div>
   268→   668→   668→        </div>
   269→   669→   669→
   270→   670→   670→        <!-- Quick Links -->
   271→   671→   671→        <div>
   272→   672→   672→          <h4 class="text-white font-semibold mb-4">Quick Links</h4>
   273→   673→   673→          <ul class="space-y-2.5 text-sm">
   274→   674→   674→            <li><a href="#" class="hover:text-brand transition">Home</a></li>
   275→   675→   675→            <li><a href="#" class="hover:text-brand transition">Shop</a></li>
   276→   676→   676→            <li><a href="#" class="hover:text-brand transition">New Arrivals</a></li>
   277→   677→   677→            <li><a href="#" class="hover:text-brand transition">Best Sellers</a></li>
   278→   678→   678→            <li><a href="#" class="hover:text-brand transition">Sale</a></li>
   279→   679→   679→            <li><a href="#" class="hover:text-brand transition">Contact Us</a></li>
   280→   680→   680→          </ul>
   281→   681→   681→        </div>
   282→   682→   682→
   283→   683→   683→        <!-- Customer Service / Policies -->
   284→   684→   684→        <div>
   285→   685→   685→          <h4 class="text-white font-semibold mb-4">Customer Service</h4>
   286→   686→   686→          <ul class="space-y-2.5 text-sm">
   287→   687→   687→            <li><a href="#" class="hover:text-brand transition">Privacy Policy</a></li>
   288→   688→   688→            <li><a href="#" class="hover:text-brand transition">Terms & Conditions</a></li>
   289→   689→   689→            <li><a href="#" class="hover:text-brand transition">Return & Refund Policy</a></li>
   290→   690→   690→            <li><a href="#" class="hover:text-brand transition">Delivery Information</a></li>
   291→   691→   691→            <li><a href="#" class="hover:text-brand transition">Track Order</a></li>
   292→   692→   692→          </ul>
   293→   693→   693→        </div>
   294→   694→   694→
   295→   695→   695→        <!-- Contact Info -->
   296→   696→   696→        <div>
   297→   697→   697→          <h4 class="text-white font-semibold mb-4">Contact Us</h4>
   298→   698→   698→          <ul class="space-y-3 text-sm">
   299→   699→   699→            <li class="flex items-start gap-2">
   300→   700→   700→              <i data-lucide="map-pin" class="w-4 h-4 text-brand mt-0.5 flex-shrink-0"></i>
   301→   701→   701→              <span>Gulshan-2, Dhaka 1212,<br/>Bangladesh</span>
   302→   702→   702→            </li>
   303→   703→   703→            <li class="flex items-center gap-2">
   304→   704→   704→              <i data-lucide="phone" class="w-4 h-4 text-brand flex-shrink-0"></i>
   305→   705→   705→              <a href="tel:+8801234567890" class="hover:text-brand transition">+880 1234-567890</a>
   306→   706→   706→            </li>
   307→   707→   707→            <li class="flex items-center gap-2">
   308→   708→   708→              <i data-lucide="mail" class="w-4 h-4 text-brand flex-shrink-0"></i>
   309→   709→   709→              <a href="mailto:hello@xevon.com.bd" class="hover:text-brand transition">hello@xevon.com.bd</a>
   310→   710→   710→            </li>
   311→   711→   711→          </ul>
   312→   712→   712→        </div>
   313→   713→   713→      </div>
   314→   714→   714→
   315→   715→   715→      <!-- Copyright -->
   316→   716→   716→      <div class="border-t border-gray-800 mt-10 pt-6 text-center text-xs text-gray-500">
   317→   717→   717→        <p>&copy; 2025 Xevon. All rights reserved. Designed with love in Bangladesh.</p>
   318→   718→   718→      </div>
   319→   719→   719→    </div>
   320→   720→   720→  </footer>
   321→   721→   721→
   322→   722→   722→  <!-- ================================================================
   323→   723→   723→       9. SIDE DRAWER CART
   324→   724→   724→       Slide-in panel from right with cart items and checkout
   325→   725→   725→       ================================================================ -->
   326→   726→   726→  <div id="cart-overlay" class="fixed inset-0 bg-black/50 z-50 hidden opacity-0"></div>
   327→   727→   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">
   328→   728→   728→    <!-- Drawer Header -->
   329→   729→   729→    <div class="flex items-center justify-between p-4 border-b border-gray-100">
   330→   730→   730→      <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
   331→   731→   731→        <i data-lucide="shopping-bag" class="w-5 h-5 text-brand"></i>
   332→   732→   732→        Shopping Cart <span id="cart-drawer-count" class="text-sm text-gray-400">(0)</span>
   333→   733→   733→      </h3>
   334→   734→   734→      <button id="close-cart-drawer" class="p-1 text-gray-500 hover:text-gray-800 transition">
   335→   735→   735→        <i data-lucide="x" class="w-6 h-6"></i>
   336→   736→   736→      </button>
   337→   737→   737→    </div>
   338→   738→   738→    <!-- Cart Items Container -->
   339→   739→   739→    <div id="cart-items-container" class="flex-1 overflow-y-auto p-4">
   340→   740→   740→      <!-- Empty State -->
   341→   741→   741→      <div id="cart-empty-state" class="flex flex-col items-center justify-center h-full text-gray-400">
   342→   742→   742→        <i data-lucide="shopping-bag" class="w-16 h-16 mb-4 opacity-30"></i>
   343→   743→   743→        <p class="text-lg font-medium mb-2">Your cart is empty</p>
   344→   744→   744→        <p class="text-sm">Add some items to get started!</p>
   345→   745→   745→      </div>
   346→   746→   746→      <!-- Cart Items List (hidden by default) -->
   347→   747→   747→      <div id="cart-items-list" class="space-y-4 hidden"></div>
   348→   748→   748→    </div>
   349→   749→   749→    <!-- Cart Footer with Subtotal and Checkout -->
   350→   750→   750→    <div id="cart-footer" class="hidden border-t border-gray-100 p-4 bg-gray-50">
   351→   751→   751→      <div class="space-y-2 mb-4">
   352→   752→   752→        <div class="flex justify-between text-sm">
   353→   753→   753→          <span class="text-gray-500">Subtotal</span>
   354→   754→   754→          <span id="cart-subtotal" class="font-medium">৳0</span>
   355→   755→   755→        </div>
   356→   756→   756→        <div class="flex justify-between text-sm">
   357→   757→   757→          <span class="text-gray-500">Delivery</span>
   358→   758→   758→          <span class="text-green-600 font-medium">Free</span>
   359→   759→   759→        </div>
   360→   760→   760→        <div class="border-t border-gray-200 pt-2 flex justify-between">
   361→   761→   761→          <span class="font-semibold">Total</span>
   362→   762→   762→          <span id="cart-total" class="font-bold text-brand text-lg">৳0</span>
   363→   763→   763→        </div>
   364→   764→   764→      </div>
   365→   765→   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]">
   366→   766→   766→        Proceed to Checkout
   367→   767→   767→      </button>
   368→   768→   768→      <button id="continue-shopping-btn" class="w-full py-2.5 mt-2 text-sm text-gray-600 hover:text-brand transition">
   369→   769→   769→        Continue Shopping
   370→   770→   770→      </button>
   371→   771→   771→    </div>
   372→   772→   772→  </div>
   373→   773→   773→
   374→   774→   774→  <!-- ================================================================
   375→   775→   775→       10. MOBILE BOTTOM NAVIGATION BAR
   376→   776→   776→       Fixed bottom bar: Home | Shop | Cart | Wishlist
   377→   777→   777→       ================================================================ -->
   378→   778→   778→  <nav id="mobile-nav" class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40">
   379→   779→   779→    <div class="grid grid-cols-4 h-16">
   380→   780→   780→      <a href="#" class="flex flex-col items-center justify-center gap-0.5 text-brand">
   381→   781→   781→        <i data-lucide="home" class="w-5 h-5"></i>
   382→   782→   782→        <span class="text-[10px] font-medium">Home</span>
   383→   783→   783→      </a>
   384→   784→   784→      <a href="#products" class="flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   385→   785→   785→        <i data-lucide="grid-3x3" class="w-5 h-5"></i>
   386→   786→   786→        <span class="text-[10px] font-medium">Shop</span>
   387→   787→   787→      </a>
   388→   788→   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">
   389→   789→   789→        <i data-lucide="shopping-bag" class="w-5 h-5"></i>
   390→   790→   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>
   391→   791→   791→        <span class="text-[10px] font-medium">Cart</span>
   392→   792→   792→      </button>
   393→   793→   793→      <a href="#" class="relative flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   394→   794→   794→        <i data-lucide="heart" class="w-5 h-5"></i>
   395→   795→   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>
   396→   796→   796→        <span class="text-[10px] font-medium">Wishlist</span>
   397→   797→   797→      </a>
   398→   798→   798→    </div>
   399→   799→   799→  </nav>
   400→   800→   800→
   401→
   402→[showing lines 401-800 of 1187; use offset=801 with limit to continue reading]