<!DOCTYPE html>
<html>

<head>
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta charset="UTF-8">
	
	<title>Shop - Laptops, Laptop Spare Parts & Accessories in Sri Lanka</title>
	
	<!-- Favicons -->
	<!--<link rel="icon"  th:href="@{/img/logo.ico}"  type="image/x-icon">-->
	<link rel="shortcut icon" href="/icons/fevi.png" type="image/jpeg">
	<link rel="apple-touch-icon" href="/icons/fevi.png">

	<!-- Meta seo -->
    
		
	 	<!-- Google tag (gtag.js) -->
<!--
	    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HTYPCSP0QR"></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag() {dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'G-HTYPCSP0QR');
		</script>
		
-->

		<!-- Google Tag Manager -->
<!--		
	
		<script>(function (w, d, s, l, i) {
				w[l] = w[l] || []; w[l].push({
					'gtm.start':
						new Date().getTime(), event: 'gtm.js'
				}); var f = d.getElementsByTagName(s)[0],
					j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
						'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
			})(window, document, 'script', 'dataLayer', 'GTM-WWB5MQDP');</script>
			
-->
		<!-- End Google Tag Manager -->
		
		

		<!-- Page Title -->
		<title>Shop</title>

		<!-- Primary SEO -->
		<meta name="title" content="Shop">
		<meta name="description" content="Shop laptops, laptop spare parts, computer components and accessories online at EMAX.lk, or visit our store in Ambalangoda for expert laptop repairs.">
		<meta name="keywords" content="EMAX, EMAX.lk, laptop spare parts Sri Lanka, laptop repair Ambalangoda, laptop screens Sri Lanka, laptop chargers, laptop batteries, laptop keyboards, computer accessories Sri Lanka, computer components, buy laptops online Sri Lanka">
		<meta name="author" content="EMAX.lk">

		<!-- Search Engine Crawling -->
		<meta name="robots" content="index, follow">
		<meta name="googlebot" content="index, follow">

		<!-- =====================================================
             CANONICAL URL
             ===================================================== -->
		<link rel="canonical" href="https://www.emax.lk/shop">
		<link rel="manifest" href="/manifest.json">

		<link rel="icon" href="https://www.emax.lk/icons/icon-192x192.png" type="image/png">
		<link rel="apple-touch-icon" href="https://www.emax.lk/icons/icon-192x192.png">

		<!-- =====================================================
             OPEN GRAPH / FACEBOOK / WHATSAPP
             ===================================================== -->

		<meta property="og:type" content="website">
		<meta property="og:site_name" content="EMAX.lk">
		<meta property="og:title" content="Shop">
		<meta property="og:description" content="Shop laptops, laptop spare parts, computer components and accessories online at EMAX.lk, or visit our store in Ambalangoda for expert laptop repairs.">
		<meta property="og:url" content="https://www.emax.lk/shop">
		<meta property="og:image" content="https://www.emax.lk/icons/icon-192x192.png">
		<meta property="og:image:alt" content="EMAX.lk - Laptops, Spare Parts and Accessories in Sri Lanka">


		<!-- =====================================================
             TWITTER / X
             ===================================================== -->

		<meta name="twitter:card" content="summary">
		<meta name="twitter:title" content="Shop">
		<meta name="twitter:description" content="Shop laptops, laptop spare parts, computer components and accessories online at EMAX.lk, or visit our store in Ambalangoda for expert laptop repairs.">
		<meta name="twitter:image" content="https://www.emax.lk/icons/icon-192x192.png">

		<link rel="alternate" href="https://www.emax.lk" hreflang="en">
		<link rel="alternate" href="https://www.emax.lk" hreflang="x-default">

		<!-- =========================================================
         STRUCTURED DATA / JSON-LD
         ========================================================= -->

		<!-- =====================================================
             PRODUCT SCHEMA
             Only generate Product schema when all required
             product information is available.
             ===================================================== -->

		

		<!-- =====================================================
             EMAX STORE SCHEMA
             Used when Product data is unavailable/incomplete.
             This reuses the same SEO variables used by the
             meta tags above.
             ===================================================== -->
		<script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "Store",
                "name":  "EMAX.lk",
                "image": "https:\/\/www.emax.lk\/icons\/icon-192x192.png",  
                "url": "https:\/\/www.emax.lk\/shop",
                "description": "Shop laptops, laptop spare parts, computer components and accessories online at EMAX.lk, or visit our store in Ambalangoda for expert laptop repairs.",
                "address": {
                    "@type": "PostalAddress",
                    "streetAddress":  "92\/12, Kowilawaththe Road", 
                    "addressLocality": "Ambalangoda", 
                    "postalCode": "80300", 
                    "addressCountry": "LK"
                },
                "openingHours": "Mo-Sa 09:00-18:00",
                "telephone": "+94777726120",  
                "brand": {
                    "@type": "Brand",
                    "name": "EMAX.lk"
                }
            }

        </script>
	
    
   <!-- Global CSS -->
    

	<!-- Font Awesome -->
	<link rel="stylesheet" href="/asset/erp/plugins/fontawesome-free/css/all.min.css">
	<!-- Ionicons -->
	<link rel="stylesheet" href="/asset/common/ionicons/css/ionicons.min.css">

	<!-- ========== Google Fonts ========== -->
	<link
		href="/asset/website/css/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap"
		rel="stylesheet">
	<link href="/asset/website/css/css2-1?family=Urbanist:ital,wght@0,100..900;1,100..900&amp;display=swap"
		rel="stylesheet">

	<!-- ========== Huge Icons CSS ========== -->
	<link rel="stylesheet" href="/asset/website/css/vendor/hugeicons/hgi-stroke-rounded.css">

	<!-- ========== Nice Select CSS ========== -->
	<link rel="stylesheet" href="/asset/website/css/vendor/nice-select.css">

	<!-- ========== Slick CSS ========== -->
	<link rel="stylesheet" href="/asset/website/css/vendor/slick.min.css">

	<!-- ========== Animate CSS ========== -->
	<link rel="stylesheet" href="/asset/website/css/vendor/animate.min.css">

	<!-- ========== Custom CSS ========== -->
	<link rel="stylesheet" href="/asset/website/css/style.css?v=1.0.1">

	<!-- Toastr -->
	<link rel="stylesheet" href="/asset/erp/plugins/toastr/toastr.min.css">

	<style>
		.product-title {
			text-transform: capitalize;
		    font-size: 14px;
		    width: 100%;
		    text-align: center;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    line-height: 1.28;
		    min-height: 53px;
		    -webkit-line-clamp: 3;
		    -webkit-box-orient: vertical;
		    margin: 10px 0;
		    font-weight: 600;
		    color: #2c2c2c; 
		}
		
		.product-title-left {
			text-transform: capitalize;
		    font-size: 14px;
		    width: 100%;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    line-height: 1.28;
		    min-height: 53px;
		    -webkit-line-clamp: 3;
		    -webkit-box-orient: vertical;
		    margin: 10px 0;
		    font-weight: 600;
		    color: #2c2c2c; 
		}
		.searchText{
			color: #878787;
    		font-size: 14px;
		}
	</style>



	<!-- Page Specific CSS -->
    

	
    
    

	
	
</head>

                              
<body>

	 	<!-- Google Tag Manager (noscript) -->
<!-- 
	<noscript>
		<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WWB5MQDP"
			height="0" width="0" style="display: none; visibility: hidden"></iframe>
	</noscript> 
-->

	<!-- End Google Tag Manager (noscript) -->
	
	
	<!-- Preloader Start -->
    <div id="preloader" class="preloader">
      <div class="pxl-loader-spinner">
        <div class="pxl-loader-bounce1"></div>
        <div class="pxl-loader-bounce2"></div>
        <div class="pxl-loader-bounce3"></div>
      </div>
    </div>
 	<!-- Preloader End -->

 	<button class="scroll-to-top btn btn-primary size-12 rounded-[50px] z-50 inline-flex items-center justify-center fixed md:right-8 md:bottom-8 right-[15px] bottom-[85px] transition-all duration-400 ease-in-out hide">
      <i class="hgi hgi-stroke hgi-arrow-up-01 leading-6 text-2xl"></i>
    </button>

    <!-- Overlay Start -->
    <div data-overlay-for="" class="modal-overlay hidden w-full h-screen fixed top-0 left-0 bg-[#161C247A] z-16"></div>
	
	<div class="fixed top-0 left-0 w-[350px] bg-white h-full z-91 px-4 py-6 flex flex-col justify-between gap-y-6 overflow-y-auto shadow-dark-z-24 transition-all duration-250 ease-[cubic-bezier(0.645,0.045,0.355,1)] data-[state=open]:translate-x-0 data-[state=open]:opacity-100 data-[state=open]:visible data-[state=close]:-translate-x-[200px] data-[state=close]:opacity-0 data-[state=close]:invisible"
		id="sidebar" data-state="close">
		<div>
			<div class="relative pb-6">
				<img src="/icons/logo-print.png"  alt="Logo" class="w-[100px]">
				<button
					class="size-7 inline-flex items-center justify-center absolute top-0 right-0 rounded-full bg-[rgba(145,158,171,0.08)]"
					id="side-bar-menu-close">
					<i class="hgi hgi-stroke hgi-multiplication-sign text-xl leading-5"></i>
				</button>
			</div>

			<div class="flex flex-col gap-y-6">
				<nav class="mobile-menu">
					<ul>
						<li>
							<a class="active" href="/">Home</a>
						</li>
						<li><a href="/shop">Shop</a></li>
						<li><a href="/laptops">Laptops</a></li>
						<li><a href="/accessories">Accessories</a></li>
						<li><a href="/components">Components</a></li>
						<li><a href="/mobile-accessories">Mobile Accessories</a></li>
						<li><a href="/brand">Brands</a></li>
						<li><a href="/happy-customer">Happy Customers</a></li>
					 	<li>
							<a href="/about-us">About Us</a>
						</li>
					</ul>
				</nav>
				<div class="border border-gray-500/24 p-5 rounded-2xl">
					<div class="flex flex-col gap-y-3">
						
							<a href="/signin" class="flex items-center gap-x-2">
								<span class="inline-flex items-center justify-center bg-warning size-8 rounded-full"><i
										class="hgi hgi-stroke hgi-lock-sync-01 text-base text-light-primary-text"></i>
								</span>
								Sign In
							</a>
							<a href="/register" class="flex items-center gap-x-2">
								<span class="inline-flex items-center justify-center bg-warning size-8 rounded-full"><i
										class="hgi hgi-stroke hgi-id text-base text-light-primary-text"></i>
								</span>
								Create Account
							</a>
						
						
						<a href="tel:+94777726120" class="flex items-center gap-x-2">
							<span class="inline-flex items-center justify-center bg-warning size-8 rounded-full">
								<i class="hgi hgi-stroke hgi-call text-base text-light-primary-text"></i>
							</span>
							<span>+94 777 726 120</span>
						</a>
					</div>
				</div>
				<div>
					<h4 class="mb-3">Follow us</h4>
					<ul class="flex items-center gap-x-4">
						<li>
							<a href="https://www.emax.lk" class="inline-flex items-center justify-center gap-x-2"><span
									class="size-8 bg-primary-dark inline-flex items-center justify-center rounded-full"><i
										class="hgi hgi-stroke hgi-facebook-01 text-base text-white"></i></span></a>
						</li>
						<li>
							<a href="https://www.emax.lk" class="inline-flex items-center justify-center gap-x-2">
								<span
									class="size-8 bg-primary-dark inline-flex items-center justify-center rounded-full">
									<i class="hgi hgi-stroke hgi-linkedin-01 text-base text-white"></i> </span></a>
						</li>
						<li>
							<a href="https://www.emax.lk" class="inline-flex items-center justify-center gap-x-2"><span
									class="size-8 bg-primary-dark inline-flex items-center justify-center rounded-full">
									<i class="hgi hgi-stroke hgi-instagram text-base text-white"></i> </span></a>
						</li>
						<li>
							<a href="https://www.emax.lk"
								class="inline-flex items-center justify-center gap-x-2 hover:translate-y-3"><span
									class="size-8 bg-primary-dark inline-flex items-center justify-center rounded-full">
									<i class="hgi hgi-stroke hgi-twitter text-base text-white"></i> </span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

 	<div id="cart-sidebar" data-state="close"
		class="cart-sidebar flex fixed xl:top-[30px] xl:right-[22px] right-0 top-0 xl:h-[calc(100vh-52px)] h-full z-99 max-w-[600px] w-full bg-white xl:rounded-2xl rounded-none transition-all duration-250 ease-[cubic-bezier(0.645,0.045,0.355,1)] data-[state=open]:translate-x-0 data-[state=open]:opacity-100 data-[state=open]:visible data-[state=close]:translate-x-[200px] data-[state=close]:opacity-0 data-[state=close]:invisible">
		<div class="cart-products xl:max-w-[600px] w-full h-full flex flex-col justify-between">

			<div class="cart-products-header pt-6 px-6 pb-4 border-b border-gray-300 flex flex-col gap-y-1 relative">
				<h5>Cart Products</h5>
				<p><span id="cart-sidebar-count-label">0 Item in Cart</span></p>
				<button type="button" id="cart-sidebar-close-btn"
					class="close-sidebar-btn absolute top-6 right-6 cursor-pointer inline-flex items-center justify-center size-9 rounded-full bg-[rgba(145,158,171,0.08)]">
					<i class="hgi hgi-stroke hgi-multiplication-sign text-xl leading-5 text-light-primary-text"></i>
				</button>
			</div>

			<div id="cart-sidebar-content" class="cart-products-content p-6 flex flex-col gap-y-4 overflow-y-auto h-[calc(100%-250px)]">

				<!-- Empty state, toggled by renderCartSidebar() -->
				<div id="cart-sidebar-empty" class="flex flex-col items-center justify-center h-full gap-y-3" style="display:none">
					<i class="hgi hgi-stroke hgi-shopping-cart-02 text-5xl text-light-disabled-text"></i>
					<p class="text-light-secondary-text">Your cart is empty</p>
					<a class="btn btn-primary py-2.5 px-6 rounded-[80px]" href="/shop">Start Shopping</a>
				</div>

				<!-- Items injected here by renderCartSidebar() -->
				<div id="cart-sidebar-items"></div>

			</div>

			<div class="cart-products-footer p-6 border-t border-gray-300 flex flex-col gap-y-4">
				<div class="cart-subtotal flex items-center justify-between">
					<h5>Subtotal</h5>
					<h5 id="cart-sidebar-subtotal">$0.00</h5>
				</div>
				<div class="cart-buttons flex items-center gap-x-4">
					<a class="btn btn-default outline btn-large rounded-[80px] flex-1 shadow-none" href="/cart">
						View Cart
					</a>
					<a class="btn btn-primary btn-large rounded-[80px] flex-1" href="/checkout">
						Proceed to Checkout
					</a>
				</div>
			</div>
		</div>
	</div>
 	
	<!-- Header -->
	<header>
	<!-- header-middle Start -->
	<div class="py-4 border border-gray-300 xl:border-0 hidden xl:block header-middle"
     style="background-color: rgb(0 109 171);">
     	<div class="container">
			<!-- For Desktop Screen Start -->
			<div class="xl:flex items-center hidden">
				<div>
					<a href="/">
						<img src="/icons/logo.png" alt="Logo" style="height: 54px;border-radius: 0.5rem;">
					</a>
				</div>
				<div class="flex items-center w-full justify-end gap-x-[54px]">
					
					
					<div class="relative search-input-container w-full 2xl:max-w-[800px] xl:max-w-[600px]">
					    <div class="input-group px-6 pt-3 pb-3 rounded-[100px] bg-white">
					        <div class="input-group-addon" data-align="inline-end">
					            <i class="hgi hgi-stroke hgi-search-01 text-gray-700 text-xl"></i>
					        </div>
					        <input type="text" class="peer form-control header-search-input placeholder-transparent focus:placeholder-transparent" placeholder="Search for the Items" id="desktop-search">
					        <label for="desktop-search" class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-transparent peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1">
					            Search for the Items
					        </label>
					    </div>
					    <div data-state="close" class="search-result-container p-4 absolute w-full top-[calc(100%+10px)] left-0 border border-gray-300 shadow-light-z-12 bg-white rounded-3xl z-9 transform data-[state=close]:translate-y-4 data-[state=close]:opacity-0 data-[state=close]:invisible transition-all duration-300 ease-[cubic-bezier(0.645,0.045,0.355,1)] data-[state=open]:translate-y-0 data-[state=open]:opacity-100 data-[state=open]:visible">
					        <div class="flex justify-between items-center mb-4">
					            <p class="font-semibold text-black">
					                Recent Search
					            </p>
					        </div>
					        <div class="recommended-search-list-wrapper">
					            <div class="recommended-search-list flex flex-col gap-y-2 divide-y divide-gray-300">
					            </div>
					        </div>
					    </div>
					</div>
					
					

					<div class="flex items-center gap-x-6 shrink-0">
						<ul class="flex items-center gap-x-6">
							<!-- Logged in -->
							
							
							<!-- Logged out -->
							<li class="flex items-center gap-x-4 cursor-pointer relative group">
								<p class="flex items-center">
									<span class="inline-flex items-center justify-center bg-warning w-12 h-12 rounded-full">
										<i class="hgi hgi-stroke hgi-lock-sync-01 text-2xl text-black"></i>
									</span>
								</p>
								<p class="flex flex-col text-light-secondary-text text-sm leading-[22px]">
									Account
									<span class="text-base leading-6 text-light-primary-text">log in</span>
								</p>
								<span><i class="hgi hgi-stroke hgi-arrow-down-01 text-2xl text-light-primary-text"></i></span>
								<ul class="absolute right-0 top-full py-2 z-10 w-[250px] max-w-[250px] bg-white rounded-lg shadow-dark-z-24 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-4 group-hover:translate-y-0">
									<li class="px-4 group/item">
										<a href="/signin"
											class="flex items-center py-2 gap-x-2 relative text-black group-hover/item:text-warning">
											<span class="w-8 h-8 bg-[#F0F0F0] group-hover/item:bg-[#FF9800] inline-flex items-center justify-center rounded-full">
												<i class="hgi hgi-stroke hgi-lock-sync-01 text-base text-black group-hover/item:text-warning"></i>
											</span>
											Login
										</a>
									</li>
									<li class="px-4 group/item">
										<a href="/register"
											class="flex items-center py-2 gap-x-2 relative text-black group-hover/item:text-warning">
											<span class="w-8 h-8 bg-[#F0F0F0] group-hover/item:bg-[#FF9800] inline-flex items-center justify-center rounded-full">
												<i class="hgi hgi-stroke hgi-id text-base text-black group-hover/item:text-warning"></i>
											</span>
											Register
										</a>
									</li>
								</ul>
							</li>
							
							
							
							
							
							<li class="flex items-center">
								<button class="flex items-center gap-x-4 cursor-pointer cart-sidebar-btn">
									<span
										class="inline-flex items-center justify-center bg-warning w-12 h-12 rounded-full"><i
											class="hgi hgi-stroke hgi-shopping-cart-02 text-2xl text-black"></i>
									</span>
									<span
										class="flex flex-col items-start text-sm leading-[22px] text-light-secondary-text">
										Cart
										<span id="header-cart-count"
											class="text-base leading-6 text-light-primary-text">0- Items</span>
									</span>
								</button>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- FOr Desktop Screen End -->
		</div>
	</div>
	<!-- header-middle End -->

	<!-- Mobile Menu Start -->
	<div class="border border-gray-300 xl:border-0 sticky-header">
		<div class="pb-4 pt-3 block xl:hidden">
			<div class="container">
				<div class="flex justify-between items-center">
					<div>
						<button class="btn btn-default outline shadow-none size-12 rounded-[50px]"
							id="sidebar-menu-btn">
							<svg width="24" height="24" viewbox="0 0 24 24" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<path d="M20 12L10 12" stroke="#212529" stroke-width="1.5" stroke-linecap="round"
									stroke-linejoin="round"></path>
								<path d="M20 5L4 5" stroke="#212529" stroke-width="1.5" stroke-linecap="round"
									stroke-linejoin="round"></path>
								<path d="M20 19L4 19" stroke="#212529" stroke-width="1.5" stroke-linecap="round"
									stroke-linejoin="round"></path>
							</svg>
						</button>
					</div>
					<div>
						<a href="/">
							<img src="/icons/logo-print.png" alt="Logo" style="height: 54px;">
						</a>
					</div>
					<div class="xl:hidden flex items-center gap-x-4">
						<button class="btn bg-warning-light size-12 rounded-[50px] cart-sidebar-btn">
							<i
								class="hgi hgi-stroke hgi-shopping-cart-01 text-light-primary-text text-2xl leading-6"></i>
						</button>
					</div>
				</div>
			</div>
		</div>

		<div class="pb-4 block xl:hidden">
			<div class="container">
				<div>
					<div class="relative search-input-container">
						<div class="input-group w-full px-4 py-3 rounded-[100px]">
							<div class="input-group-addon inline-flex justify-center items-center"
								data-align="inline-end">
								<span class="inline-flex justify-center items-center">
									<i class="hgi hgi-stroke hgi-search-01 text-2xl leading-6 text-gray-500"></i>
								</span>
							</div>
							<input type="text" id="mobile-search"
								class="peer form-control header-search-input placeholder-transparent focus:placeholder-transparent"
								placeholder="Search for the Items">
							<label for="mobile-search"
								class="absolute left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1">
								Search for the Items
							</label>
						</div>
						<div data-state="close"
							class="search-result-container p-4 absolute w-full top-[calc(100%+10px)] left-0 border border-gray-300 shadow-light-z-12 bg-white rounded-3xl z-9 transform data-[state=close]:translate-y-4 data-[state=close]:opacity-0 data-[state=close]:invisible transition-all duration-300 ease-[cubic-bezier(0.645,0.045,0.355,1)] data-[state=open]:translate-y-0 data-[state=open]:opacity-100 data-[state=open]:visible">
							<div class="flex justify-between items-center mb-4">
								<p class="font-semibold text-black">
									Recent Search
								</p>
							</div>
							<div class="recommended-search-list-wrapper">
								<div class="recommended-search-list flex flex-col gap-y-2 divide-y divide-gray-300">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Mobile Menu End -->

	<!-- header-bottom End -->
	<div class="border border-gray-300 hidden xl:flex header-bottom sticky-header border-r-0 border-l-0">
		<div class="container">
			<div class="hidden relative items-center justify-between xl:flex">
				<div class="relative">
					<button class="btn btn-warning text-black btn-large rounded-lg" id="dropdownButton" data-state="close">
						<span class="inline-flex items-center">
							<i class="hgi hgi-stroke hgi-grid-view text-base text-black"></i>
						</span>
						Explore All Categories
						<span class="inline-flex items-center" id="dropdownIcon"><i
								class="hgi hgi-stroke hgi-arrow-down-01 text-xl text-black"></i>
						</span>
					</button>
					<div>
						<ul id="dropdownMenu"
							class="bg-white hide shadow-dark-z-24 rounded-b-2xl px-4 py-4 z-40 transform origin-top transition-all duration-300 ease-in-out absolute left-0 top-full w-full divide-y divide-[rgba(145,158,171,0.24)]">
							<!-- LAPTOPS -->
							<li class="py-[9px] group">
								<a href="/laptops"
									class="flex items-center gap-x-3 text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-laptop text-[22px] text-light-primary-text"></i>
									</span>
									<span>Laptops</span>
								</a>
							</li>
							<!-- ACCESSORIES -->
							<li class="py-[9px] group">
								<a href="/accessories"
									class="flex items-center gap-x-3 text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-headphones text-[22px] text-light-primary-text"></i>
									</span>
									<span>Accessories</span>
								</a>
							</li>

							<!-- COMPONENTS -->
							<li class="py-[9px] group">
								<a href="/components"
									class="flex items-center gap-x-3 text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-cpu text-[22px] text-light-primary-text"></i>
									</span>
									<span>Components</span>
								</a>
							</li>

							<!-- MOBILE ACCESSORIES -->
							<li class="py-[9px] group">
								<a href="/mobile-accessories"
									class="flex items-center gap-x-3 text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-smart-phone-01 text-[22px] text-light-primary-text"></i>
									</span>
									<span>Mobile Accessories</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				
				
				<nav class="main-menu">
					    <ul>
					
					        <!-- Home -->
					        <li>
					            <a class="active flex items-center gap-x-2"
					               href="/">
					                <i class="hgi hgi-stroke hgi-rounded hgi-home-07 text-xl leading-5"></i>
					                <span>Home</span>
					            </a>
					        </li>
					
					        <!-- Shop -->
					        <li>
					            <a class="flex items-center gap-x-2"
					               href="/shop">
					                <i class="hgi hgi-stroke hgi-shopping-bag-03 text-xl leading-5"></i>
					                <span>Shop</span>
					            </a>
					        </li>
					
					        <!-- Laptops -->
					        <li>
					            <a class="flex items-center gap-x-2"
					               href="/laptops">
					                <i class="hgi hgi-stroke hgi-rounded hgi-laptop text-xl leading-5"></i>
					                <span>Laptops</span>
					            </a>
					        </li>
					
					        <!-- Accessories -->
					        <li>
					            <a class="flex items-center gap-x-2"
					               href="/accessories">
					                <i class="hgi hgi-stroke hgi-headphones text-xl leading-5"></i>
					                <span>Accessories</span>
					            </a>
					        </li>
					
					        <!-- Components -->
					        <li>
					            <a class="flex items-center gap-x-2"
					               href="/components">
					                <i class="hgi hgi-stroke hgi-cpu text-xl leading-5"></i>
					                <span>Components</span>
					            </a>
					        </li>
					
					        <!-- Mobile Accessories -->
					        <li>
					            <a class="flex items-center gap-x-2"
					               href="/mobile-accessories">
					                <i class="hgi hgi-stroke hgi-rounded hgi-smart-phone-01 text-xl leading-5"></i>
					                <span>Mobile Accessories</span>
					            </a>
					        </li>
					

					        <!-- Contact -->
					        <li>
					            <a class="flex items-center gap-x-2"
					               href="/about-us">
					                <i class="hgi hgi-stroke hgi-rounded hgi-covid-info text-xl leading-5"></i>
					                <span>About Us</span>
					            </a>
					        </li>
					
					    </ul>
					</nav>
					
					
					
				<div>
					<a href="tel:+94777726120"  class="xl:flex lg:items-center gap-x-4 hidden">
						<span
							class="size-12 inline-flex items-center justify-center rounded-full transition-colors duration-300 bg-[rgba(145,158,171,0.08)]">
							<i class="hgi hgi-stroke hgi-customer-support text-2xl text-light-primary-text"></i>
						</span>
						<span class="flex flex-col text-sm leading-[22px]">
							<span  class="text-base leading-6 text-light-primary-text">+94 777 726 120</span>
						</span>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- header-bottom End -->
</header>

	<div>

		<div class="container py-12">
			<div class="breadcrumb">
				<ul>
					<li>
						<a href="/">
							<span class="inline-flex items-center justify-center">
								<i class="hgi hgi-stroke hgi-home-01 text-2xl leading-6"></i></span>Home</a>
					</li>
					<li class="text-light-disabled-text">•</li>
					<li><span class="text-sm leading-[22px]">Products</span></li>
				</ul>
			</div>
		</div>

		<section class="pb-[90px]">
			<div class="container">

				<form id="filter-form" action="/shop" method="get">

					<!-- keep page reset to 0 whenever a filter changes; pagination links override this -->
					<input type="hidden" name="page" id="page-input" value="0">
					<input type="hidden" name="size" value="20">
					<input type="hidden" name="status"
						value="ACTIVE">

					<div class="grid grid-cols-12 lg:gap-x-6 gap-y-6">

						<!-- ============ SIDEBAR FILTERS ============ -->
						<div class="xl:col-span-3 lg:col-span-4 col-span-12 row-start-2 lg:row-start-auto">
							<div class="sidebar sticky top-20">
								<div class="border border-gray-300 rounded-2xl">

									<div class="px-6 py-4 bg-gray-200 rounded-t-2xl sidebar-title">
										<div class="flex items-center justify-between">
											<h5 class="text-light-primary-text">Filters</h5>
											<a href="/shop"
												class="text-primary text-base leading-[26px] font-semibold hover:underline">Clear
												All</a>
										</div>
									</div>

									<div class="px-6 py-6">




										<!-- Category tree -->
								<div class="widget-category py-8 border-b border-gray-300">

    <div class="flex items-center justify-between mb-4">
        <h6>Category</h6>
    </div>

    <div class="max-h-[170px] overflow-y-auto pr-2.5">

        <ul class="flex flex-col gap-y-3">

            <li>

                <label class="group flex items-center gap-x-3 w-full cursor-pointer">

                    <input type="radio"
                           name="subCategoryId"
                           value="6"
                           onchange="window.location.href=&#39;/accessories&#39;"
                           class="w-4 h-4 accent-primary cursor-pointer">

                    <span class="text-sm text-light-secondary-text
                                 group-hover:text-primary
                                 transition-colors duration-300 ease-in-out">Computer Accessories</span>

                </label>

            </li>

            <li>

                <label class="group flex items-center gap-x-3 w-full cursor-pointer">

                    <input type="radio"
                           name="subCategoryId"
                           value="7"
                           onchange="window.location.href=&#39;/components&#39;"
                           class="w-4 h-4 accent-primary cursor-pointer">

                    <span class="text-sm text-light-secondary-text
                                 group-hover:text-primary
                                 transition-colors duration-300 ease-in-out">Components</span>

                </label>

            </li>

            <li>

                <label class="group flex items-center gap-x-3 w-full cursor-pointer">

                    <input type="radio"
                           name="subCategoryId"
                           value="8"
                           onchange="window.location.href=&#39;/customize&#39;"
                           class="w-4 h-4 accent-primary cursor-pointer">

                    <span class="text-sm text-light-secondary-text
                                 group-hover:text-primary
                                 transition-colors duration-300 ease-in-out">Customize</span>

                </label>

            </li>

            <li>

                <label class="group flex items-center gap-x-3 w-full cursor-pointer">

                    <input type="radio"
                           name="subCategoryId"
                           value="9"
                           onchange="window.location.href=&#39;/laptops&#39;"
                           class="w-4 h-4 accent-primary cursor-pointer">

                    <span class="text-sm text-light-secondary-text
                                 group-hover:text-primary
                                 transition-colors duration-300 ease-in-out">Laptops</span>

                </label>

            </li>

            <li>

                <label class="group flex items-center gap-x-3 w-full cursor-pointer">

                    <input type="radio"
                           name="subCategoryId"
                           value="10"
                           onchange="window.location.href=&#39;/chairs&#39;"
                           class="w-4 h-4 accent-primary cursor-pointer">

                    <span class="text-sm text-light-secondary-text
                                 group-hover:text-primary
                                 transition-colors duration-300 ease-in-out">Chairs</span>

                </label>

            </li>

            <li>

                <label class="group flex items-center gap-x-3 w-full cursor-pointer">

                    <input type="radio"
                           name="subCategoryId"
                           value="11"
                           onchange="window.location.href=&#39;/mobile-accessories&#39;"
                           class="w-4 h-4 accent-primary cursor-pointer">

                    <span class="text-sm text-light-secondary-text
                                 group-hover:text-primary
                                 transition-colors duration-300 ease-in-out">Mobile Accessories</span>

                </label>

            </li>

            <li>

                <label class="group flex items-center gap-x-3 w-full cursor-pointer">

                    <input type="radio"
                           name="subCategoryId"
                           value="64"
                           onchange="window.location.href=&#39;/repair-services&#39;"
                           class="w-4 h-4 accent-primary cursor-pointer">

                    <span class="text-sm text-light-secondary-text
                                 group-hover:text-primary
                                 transition-colors duration-300 ease-in-out">Repair Services</span>

                </label>

            </li>

        </ul>

    </div>

</div>
















										<!-- Price range -->
										<div class="widget-price-range py-8 border-b border-gray-300">
											<div class="flex items-center justify-between mb-4">
												<h6>Price Range</h6>
												<button type="button" id="price-reset"
													class="text-base leading-[26px] hover:underline hover:text-primary transition-colors duration-300 ease-in-out">Reset</button>
											</div>
											<div class="price-range-values flex items-center justify-between gap-x-2">
												<div
													class="input-group medium max-w-[47%] w-full rounded-[80px] py-2 px-3.5">
													<div class="input-group-addon inline-flex items-center justify-center leading-6"
														data-align="inline-start">$</div>
													<input type="number" step="0.01" min="0" name="minPrice"
														id="minPrice"
														value=""
														class="form-control" placeholder="Min">
												</div>
												<span class="text-sm leading-[22px] text-light-disabled-text">To</span>
												<div
													class="input-group medium max-w-[47%] w-full rounded-[80px] py-2 px-3.5">
													<div class="input-group-addon inline-flex items-center justify-center leading-6"
														data-align="inline-start">$</div>
													<input type="number" step="0.01" min="0" name="maxPrice"
														id="maxPrice"
														value=""
														class="form-control" placeholder="Max">
												</div>
											</div>
											<button type="submit"
												class="btn btn-primary rounded-full font-semibold text-sm leading-6 px-6 py-2 mt-4 w-full">
												Apply Price
											</button>
										</div>

										<!-- Brand (single-select, matches request.brandId) -->
										<div class="widget-brand py-8 border-b border-gray-300">
											<div class="flex items-center justify-between mb-4">
												<h6>Brand</h6>
											</div>
											<div class="max-h-[170px] overflow-y-auto pr-2.5">
												<ul class="flex flex-col gap-y-2">
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="44"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ACER</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="12"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ADATA</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="14"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">AITC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="34"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ANTEC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="38"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ANTGAMER</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="40"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">AOC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="56"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">APPLE</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="50"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ARCTIC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="17"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ASUS</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="30"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">AULA</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="71"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">BIAZE</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="60"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">BOE</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="49"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">COOLER MASTER</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="8"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">CORSAIR</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="29"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">CRUCIAL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="9"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">DARKFLASH</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="42"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">DELL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="67"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ESET</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="2"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">FANTECH</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="57"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">FUJITSU</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="35"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">FURRY</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="15"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">GEIL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="18"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">GIGABYTE</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="52"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">GSKILL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="63"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HANDBOSS</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="31"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HEATZ</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="46"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HIKSEMI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="39"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HKC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="64"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HOTMAI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="43"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HP</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="68"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">IBM</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="22"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">INTEL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="51"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">JUNGLE LEOPHARD</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="61"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">KASPERSKY</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="24"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">KINGSTON</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="13"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">KISONLI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="33"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">KOORUI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="62"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">LB LINK</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="45"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">LENOVO</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="10"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">LEXAR</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="5"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">LOGITECH</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="3"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">MEETION</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="66"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">MEMORY GHOST</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="6"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">MSI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="37"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ONIKUMA</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="59"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">OSCOO</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="1"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">Other</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="41"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">PHILIPS</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="28"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">PNY</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="20"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">POWER TRAIN</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="7"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">RAIDMAX</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="16"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">REDRAGON</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="19"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">REMAX</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="21"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">RUIX</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="23"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">RYZEN</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="47"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SAMSUNG</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="32"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SANDISK</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="26"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SEAGATE</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="72"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SHARP</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="55"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SINGER</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="48"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SOEYI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="58"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SONY</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="69"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SUNJOY</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="70"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TCZ</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="11"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TEAM</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="53"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">Thermaltake</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="54"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TOSHIBA</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="36"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TP LINK</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="25"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TRANSCEND</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="65"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TUCCI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="27"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">WD</span>
														</label>
													</li>
												</ul>
											</div>
										</div>

										<!-- Dynamic Category Attributes -->
										

									</div>
								</div>
							</div>
						</div>

						<!-- ============ RESULTS ============ -->
						<div class="xl:col-span-9 lg:col-span-8 col-span-12 row-start-1 lg:row-start-auto">

							<!-- Results count + sorting -->
							<div class="flex items-center justify-between pb-12 flex-wrap gap-y-4">


								<div class="flex items-center gap-x-4 shrink-0 justify-start">
									<!-- vendor-filter-button -->
									<div class="flex items-center gap-x-4">
										<a
											class="w-10 h-10 rounded-full inline-flex items-center justify-center btn-primary cursor-pointer">
											<span class="inline-flex items-center justify-center"><i
													class="hgi hgi-stroke hgi-more-01 text-2xl leading-6 text-white"></i></span>
										</a>
									</div>
									<div class="lg:flex hidden">
										<p class="text-light-secondary-text">
											Showing
											<span>1</span>-<span>20</span>
											of <span>77</span>
											results
										</p>
									</div>
								</div>

								<!-- Sorting dropdown. Submits the same GET form so ProductListRequest.sort is populated. -->
								<div class="relative min-w-[190px]">
									<select id="sort" name="sort"
										onchange="document.getElementById('page-input').value=0; document.getElementById('filter-form').submit()"
										class="form-control rounded-[80px] py-2 px-4 w-full border border-gray-300 text-sm leading-6 text-light-primary-text focus:outline-none">
										<option value="POPULARITY">
											Popularity
										</option>
										<option value="PRICE_ASC" selected="selected">
											Low to High Price
										</option>
										<option value="PRICE_DESC">
											High to Low Price
										</option>
										<option value="AZ">
											A-Z Order
										</option>
										<option value="ZA">
											Z-A Order
										</option>
									</select>
								</div>
							</div>

							<div class="grid grid-cols-12 gap-6 pb-12">
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/hinges-repair-replacement-emax0605"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="HINGES REPAIR / REPLACEMENT"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="599">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="599">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/hinges-repair-replacement-emax0605">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/hinges-repair-replacement-emax0605">HINGES REPAIR / REPLACEMENT</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 500.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/hinges-repair-replacement-emax0605"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="599">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/l18-gaming-mouse-pad-emax0616"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="L18 GAMING MOUSE PAD"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="610">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="610">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/l18-gaming-mouse-pad-emax0616">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/l18-gaming-mouse-pad-emax0616">L18 GAMING MOUSE PAD</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 500.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/l18-gaming-mouse-pad-emax0616"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="610">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/windows-installation-service-laptop-service-charger-emax0604"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="WINDOWS INSTALLATION / SERVICE LAPTOP / SERVICE CHARGER"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="598">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="598">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/windows-installation-service-laptop-service-charger-emax0604">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/windows-installation-service-laptop-service-charger-emax0604">WINDOWS INSTALLATION / SERVICE LAPTOP / SERVICE CHARGER</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 500.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/windows-installation-service-laptop-service-charger-emax0604"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="598">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/wm115-sunjoy-wireless-mouse-emax0615"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="WM115 SUNJOY WIRELESS MOUSE"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="609">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="609">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/wm115-sunjoy-wireless-mouse-emax0615">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/wm115-sunjoy-wireless-mouse-emax0615">WM115 SUNJOY WIRELESS MOUSE</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 1,100.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/wm115-sunjoy-wireless-mouse-emax0615"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="609">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/biaze-cat6-patch-cable-5m-wx8-06m-emax0652"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="BIAZE CAT6 PATCH CABLE 5M WX8 (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="645">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="645">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/biaze-cat6-patch-cable-5m-wx8-06m-emax0652">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/biaze-cat6-patch-cable-5m-wx8-06m-emax0652">BIAZE CAT6 PATCH CABLE 5M WX8 (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 1,220.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/biaze-cat6-patch-cable-5m-wx8-06m-emax0652"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="645">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/biaze-aux-3-5mm-to-2rca-cable-1-5m-06m-emax0656"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="BIAZE AUX 3.5mm to 2RCA CABLE. 1.5M (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="649">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="649">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/biaze-aux-3-5mm-to-2rca-cable-1-5m-06m-emax0656">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/biaze-aux-3-5mm-to-2rca-cable-1-5m-06m-emax0656">BIAZE AUX 3.5mm to 2RCA CABLE. 1.5M (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 1,600.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/biaze-aux-3-5mm-to-2rca-cable-1-5m-06m-emax0656"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="649">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/biaze-usb-3-0-to-type-c-data-cable-1m-zh369-06m-emax0657"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="BIAZE USB 3.0 TO TYPE C DATA CABLE 1M ZH369 (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="650">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="650">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/biaze-usb-3-0-to-type-c-data-cable-1m-zh369-06m-emax0657">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/biaze-usb-3-0-to-type-c-data-cable-1m-zh369-06m-emax0657">BIAZE USB 3.0 TO TYPE C DATA CABLE 1M ZH369 (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 1,750.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/biaze-usb-3-0-to-type-c-data-cable-1m-zh369-06m-emax0657"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="650">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/biaze-hdmi-to-vga-connecter-with-audio-port-zh52-06m-emax0649"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="BIAZE HDMI TO VGA CONNECTER WITH AUDIO PORT ZH52 (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="642">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="642">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/biaze-hdmi-to-vga-connecter-with-audio-port-zh52-06m-emax0649">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/biaze-hdmi-to-vga-connecter-with-audio-port-zh52-06m-emax0649">BIAZE HDMI TO VGA CONNECTER WITH AUDIO PORT ZH52 (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 2,250.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/biaze-hdmi-to-vga-connecter-with-audio-port-zh52-06m-emax0649"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="642">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/memoryghost-oshd1-hdd-enclosure-3-0-2-5-emax0607"
													class="group flex items-center justify-center w-full h-full ">
													<img src="http://www.emaxtech.lk/prefer_one_data/product_images/601/emax0607-1.jpg" alt="MEMORYGHOST OSHD1 HDD ENCLOSURE 3.0 2.5&quot;"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="601">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="601">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/memoryghost-oshd1-hdd-enclosure-3-0-2-5-emax0607">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/memoryghost-oshd1-hdd-enclosure-3-0-2-5-emax0607">MEMORYGHOST OSHD1 HDD ENCLOSURE 3.0 2.5&quot;</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 2,400.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/memoryghost-oshd1-hdd-enclosure-3-0-2-5-emax0607"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="601">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/biaze-usb-3-0-hub-4port-hub68-06m-emax0653"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="BIAZE USB 3.0 HUB 4PORT HUB68 (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="646">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="646">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/biaze-usb-3-0-hub-4port-hub68-06m-emax0653">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/biaze-usb-3-0-hub-4port-hub68-06m-emax0653">BIAZE USB 3.0 HUB 4PORT HUB68 (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 2,450.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/biaze-usb-3-0-hub-4port-hub68-06m-emax0653"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="646">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/hp-dell-lenovo-tcz-bp15-back-pack-laptop-bag-emax0669"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="HP | DELL | LENOVO TCZ-BP15 BACK PACK LAPTOP BAG"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="662">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="662">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/hp-dell-lenovo-tcz-bp15-back-pack-laptop-bag-emax0669">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/hp-dell-lenovo-tcz-bp15-back-pack-laptop-bag-emax0669">HP | DELL | LENOVO TCZ-BP15 BACK PACK LAPTOP BAG</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 2,700.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/hp-dell-lenovo-tcz-bp15-back-pack-laptop-bag-emax0669"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="662">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/lenovo-20v-3-25a-65w-7-9-5-5mm-round-tip-yellow-notebook-adapter-06m-emax0594"
													class="group flex items-center justify-center w-full h-full ">
													<img src="http://www.emaxtech.lk/prefer_one_data/product_images/588/emax0594-1.jpg" alt="LENOVO 20V, 3.25A, 65W 7.9*5.5MM ROUND TIP [YELLOW] NOTEBOOK ADAPTER (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="588">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="588">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/lenovo-20v-3-25a-65w-7-9-5-5mm-round-tip-yellow-notebook-adapter-06m-emax0594">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/lenovo-20v-3-25a-65w-7-9-5-5mm-round-tip-yellow-notebook-adapter-06m-emax0594">LENOVO 20V, 3.25A, 65W 7.9*5.5MM ROUND TIP [YELLOW] NOTEBOOK ADAPTER (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 2,800.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/lenovo-20v-3-25a-65w-7-9-5-5mm-round-tip-yellow-notebook-adapter-06m-emax0594"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="588">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/asus-19v-3-42a-4-0-1-35mm-notebook-adapter-06m-emax0580"
													class="group flex items-center justify-center w-full h-full ">
													<img src="http://www.emaxtech.lk/prefer_one_data/product_images/575/emax0580-1.jpg" alt="ASUS 19V, 3.42A, 4.0*1.35MM NOTEBOOK ADAPTER (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="575">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="575">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/asus-19v-3-42a-4-0-1-35mm-notebook-adapter-06m-emax0580">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/asus-19v-3-42a-4-0-1-35mm-notebook-adapter-06m-emax0580">ASUS 19V, 3.42A, 4.0*1.35MM NOTEBOOK ADAPTER (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 2,900.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/asus-19v-3-42a-4-0-1-35mm-notebook-adapter-06m-emax0580"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="575">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/type-c-to-hdmi-converter-resolution-4k-gd06-06m-emax0651"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="TYPE C TO HDMI CONVERTER Resolution: 4K GD06 (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="644">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="644">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/type-c-to-hdmi-converter-resolution-4k-gd06-06m-emax0651">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/type-c-to-hdmi-converter-resolution-4k-gd06-06m-emax0651">TYPE C TO HDMI CONVERTER Resolution: 4K GD06 (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 3,100.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/type-c-to-hdmi-converter-resolution-4k-gd06-06m-emax0651"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="644">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/hp-15-6-side-laptop-bag-emax0668"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="HP 15.6&quot; SIDE LAPTOP BAG"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="661">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="661">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/hp-15-6-side-laptop-bag-emax0668">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/hp-15-6-side-laptop-bag-emax0668">HP 15.6&quot; SIDE LAPTOP BAG</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 3,300.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/hp-15-6-side-laptop-bag-emax0668"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="661">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/acer-swift-5-sf514-52-sf514-52t-59hy-n17w3-sf514-51-sf515-51-sf314-57g-notebook-keyboard-06m-emax0598"
													class="group flex items-center justify-center w-full h-full ">
													<img src="http://www.emaxtech.lk/prefer_one_data/product_images/592/emax0598-1.jpg" alt="ACER SWIFT 5 SF514-52 SF514-52T-59HY N17W3 SF514-51 SF515-51 SF314-57G NOTEBOOK KEYBOARD (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="592">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="592">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/acer-swift-5-sf514-52-sf514-52t-59hy-n17w3-sf514-51-sf515-51-sf314-57g-notebook-keyboard-06m-emax0598">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/acer-swift-5-sf514-52-sf514-52t-59hy-n17w3-sf514-51-sf515-51-sf314-57g-notebook-keyboard-06m-emax0598">ACER SWIFT 5 SF514-52 SF514-52T-59HY N17W3 SF514-51 SF515-51 SF314-57G NOTEBOOK KEYBOARD (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 3,300.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/acer-swift-5-sf514-52-sf514-52t-59hy-n17w3-sf514-51-sf515-51-sf314-57g-notebook-keyboard-06m-emax0598"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="592">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/dell-15-6-side-laptop-bag-emax0667"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="DELL 15.6&quot; SIDE LAPTOP BAG"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="660">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="660">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/dell-15-6-side-laptop-bag-emax0667">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/dell-15-6-side-laptop-bag-emax0667">DELL 15.6&quot; SIDE LAPTOP BAG</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 3,300.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/dell-15-6-side-laptop-bag-emax0667"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="660">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/biaze-hdmi-3m-cable-8k-60fps-hx37-06m-emax0655"
													class="group flex items-center justify-center w-full h-full ">
													<img src="" alt="BIAZE HDMI 3M CABLE 8K/60FPS HX37 (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="648">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="648">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/biaze-hdmi-3m-cable-8k-60fps-hx37-06m-emax0655">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/biaze-hdmi-3m-cable-8k-60fps-hx37-06m-emax0655">BIAZE HDMI 3M CABLE 8K/60FPS HX37 (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 3,500.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/biaze-hdmi-3m-cable-8k-60fps-hx37-06m-emax0655"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="648">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/hp-450-g3-450-g4-455-g3-455-g4-470-g3-470-g4-notebook-keyboard-06m-emx0066"
													class="group flex items-center justify-center w-full h-full ">
													<img src="http://www.emaxtech.lk/prefer_one_data/product_images/66/emx0066-1.jpg" alt="HP 450 G3, 450 G4, 455 G3, 455 G4, 470 G3, 470 G4 NOTEBOOK KEYBOARD (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="66">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="66">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/hp-450-g3-450-g4-455-g3-455-g4-470-g3-470-g4-notebook-keyboard-06m-emx0066">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/hp-450-g3-450-g4-455-g3-455-g4-470-g3-470-g4-notebook-keyboard-06m-emx0066">HP 450 G3, 450 G4, 455 G3, 455 G4, 470 G3, 470 G4 NOTEBOOK KEYBOARD (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 3,500.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/hp-450-g3-450-g4-455-g3-455-g4-470-g3-470-g4-notebook-keyboard-06m-emx0066"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="66">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div
										class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">

											<div
												class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
												<a href="/product/dell-latitude-e7440-e7240-e7420-notebook-keyboard-06m-emx0052"
													class="group flex items-center justify-center w-full h-full ">
													<img src="http://www.emaxtech.lk/prefer_one_data/product_images/52/emx0052-1.jpg" alt="DELL LATITUDE E7440 E7240 E7420 NOTEBOOK KEYBOARD (06M)"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

											<div
												class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3">
												<ul class="flex items-center gap-x-px">
													<li>
														<button aria-label="Add to Wishlist"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="wishlist()" data-id="52">
															<i
																class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
														</button>
													</li>
													<li>
														<button aria-label="Compare"
															class="product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															onclick="compare()" data-id="52">
															<i
																class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
														</button>
													</li>
													<li>
														<a aria-label="Quick view"
															class="quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
															href="/product/dell-latitude-e7440-e7240-e7420-notebook-keyboard-06m-emx0052">
															<i
																class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
														</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/dell-latitude-e7440-e7240-e7420-notebook-keyboard-06m-emx0052">DELL LATITUDE E7440 E7240 E7420 NOTEBOOK KEYBOARD (06M)</a>
											</h5>

											<div class="price-section flex items-center gap-x-3 mb-2">
												<span
													class="current-price text-base font-semibold text-light-primary-text">Rs 3,900.00</span>
												
											</div>

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/dell-latitude-e7440-e7240-e7420-notebook-keyboard-06m-emx0052"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="52">
													<i
														class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>

							

							<!-- Pagination -->
							<!-- PAGINATION -->
							<div class="grid grid-cols-12">

								<div class="col-span-12">

									<ul class="flex items-center justify-center gap-x-1.5 blog-pagination">

										<!-- PREVIOUS -->
										<li class="blog-pagination-item">

											

										</li>


										<!-- PAGE NUMBERS -->
										<li class="blog-pagination-item">

											<a href="/shop?categoryId=&amp;subCategoryId=&amp;brandId=&amp;attributeValueIds=&amp;search=&amp;minPrice=&amp;maxPrice=&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&amp;page=0" class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] active">1</a>

										</li>
										<li class="blog-pagination-item">

											<a href="/shop?categoryId=&amp;subCategoryId=&amp;brandId=&amp;attributeValueIds=&amp;search=&amp;minPrice=&amp;maxPrice=&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&amp;page=1" class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">2</a>

										</li>
										<li class="blog-pagination-item">

											<a href="/shop?categoryId=&amp;subCategoryId=&amp;brandId=&amp;attributeValueIds=&amp;search=&amp;minPrice=&amp;maxPrice=&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&amp;page=2" class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">3</a>

										</li>
										<li class="blog-pagination-item">

											<a href="/shop?categoryId=&amp;subCategoryId=&amp;brandId=&amp;attributeValueIds=&amp;search=&amp;minPrice=&amp;maxPrice=&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&amp;page=3" class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">4</a>

										</li>


										<!-- NEXT -->
										<li class="blog-pagination-item">

											<a href="/shop?categoryId=&amp;subCategoryId=&amp;brandId=&amp;attributeValueIds=&amp;search=&amp;minPrice=&amp;maxPrice=&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&amp;page=1" class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] bg-white border border-gray-300">

												<i
													class="hgi hgi-stroke hgi-arrow-right-01 text-[20px] leading-5 text-light-primary-text"></i>

											</a>

										</li>

									</ul>

								</div>

							</div>



						</div>
					</div>
				</form>

			</div>
		</section>

	</div>
	
	<!-- Footer -->
	
	
	<!-- WhatsApp Floating Button -->
<a
 href="https://wa.me/+94777726120?text=Hello%2C%20I%20need%20some%20information."
 class="whatsapp-float"
 target="_blank"
 rel="noopener noreferrer"
 aria-label="Chat with us on WhatsApp">
<i class="fab fa-whatsapp"></i>
<span class="whatsapp-tooltip">Chat with us</span>
</a>


<style>
    .whatsapp-float {
        position: fixed;
        width: 58px;
        height: 58px;
        right: 26px;
        bottom: 100px;
        background-color: #25D366;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 32px;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        transition: all 0.3s ease;
    }

    .whatsapp-float:hover {
        background-color: #20b957;
        color: #fff;
        transform: scale(1.08);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }

    .whatsapp-tooltip {
        position: absolute;
        right: 70px;
        top: 50%;
        transform: translateY(-50%);
        background: #222;
        color: #fff;
        padding: 7px 12px;
        border-radius: 5px;
        font-size: 13px;
        font-family: Arial, sans-serif;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
    }

    .whatsapp-tooltip::after {
        content: "";
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 5px 0 5px 6px;
        border-style: solid;
        border-color: transparent transparent transparent #222;
    }

    .whatsapp-float:hover .whatsapp-tooltip {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile */
    @media (max-width: 576px) {
        .whatsapp-float {
            width: 52px;
            height: 52px;
            right: 15px;
            bottom: 140px;
            font-size: 28px;
        }

        .whatsapp-tooltip {
            display: none;
        }
    }
</style>
  
	
	
	
	
    <!-- ========== Subscribe Section Start ========== -->
    <section class="px-4 md:px-0 max-w-[932px] mx-auto text-center lg:pb-6 pb-[70px] lg:rounded-[164px] -mb-[100px] relative z-10 bg-white xl:before:absolute xl:before:bottom-0 xl:before:left-[-23px] xl:before:h-[100px] xl:before:w-[145px] xl:before:bg-[url('../images/footer-left-shape.png')] xl:before:bg-no-repeat xl:before:z-11 xl:after:absolute xl:after:bottom-0 xl:after:right-[-23px] xl:after:h-[100px] xl:after:w-[145px] xl:after:bg-[url('../images/footer-right-shape.png')] xl:after:bg-no-repeat xl:after:z-11">
      <h3 class="mb-4 wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        Subscribe to our newsletter
      </h3>
      <p class="mb-6 text-dark-secondary-text wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        Stay updated! Subscribe to our mailing list for news, updates, and
        exclusive offers.
      </p>
      <div class="input-group medium w-full md:max-w-[420px] mx-auto pl-4 py-1.5 pr-2.5 rounded-[100px] wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        <div class="input-group-addon inline-flex items-center" data-align="inline-start">
          <i class="hgi hgi-stroke hgi-mail-02 text-2xl"></i>
        </div>
        <input type="text" class="peer form-control placeholder-transparent focus:placeholder-transparent" placeholder="Enter your email" name="email" id="email">
        <label class="absolute left-12 peer-focus:left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:left-[14px] bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1" for="email">Enter your email</label>
        <div class="input-group-addon" data-align="inline-end">
          <button class="btn btn-primary btn-medium rounded-3xl">
            Subscribe
          </button>
        </div>
      </div>
    </section>
    <!-- ========== Subscribe Section End ========== -->
    
 
 <!-- ========== Footer Section Start ========== -->
    <footer class="md:pb-15 pb-[100px] bg-primary-darker pt-40 xl:rounded-tr-[22px] xl:rounded-tl-[22px]">
      <div class="container">
        <!-- ========== Footer Top Section Start ========== -->
        <div class="pb-9 grid grid-cols-12 gap-6">
          <div class="md:col-span-12 col-span-12 xl:col-span-4 flex flex-col gap-y-6">
            <div>
              <a href="/">
                <img src="/icons/logo.png"  style="height: 54px;" alt="EMAX logo">
              </a>
            </div>
            <p class="text-primary-lighter text-base">
              EMAX is your trusted computer store in Ambalangoda, bringing you laptops, laptop spare parts, computer components and accessories, with expert laptop repairs and island-wide delivery.
            </p>
            <div class="flex flex-wrap gap-x-4 gap-y-4">
              <a class="inline-flex items-center justify-center size-10 rounded-full bg-[rgba(145,158,171,0.16)]" href="https://www.emax.lk" target="_blank">
                <i class="hgi hgi-stroke hgi-facebook-01 text-2xl text-white"></i>
              </a>
              <a class="inline-flex items-center justify-center size-10 rounded-full bg-[rgba(145,158,171,0.16)]" href="https://www.emax.lk" target="_blank"><i class="hgi hgi-stroke hgi-instagram text-2xl text-white"></i>
              </a>
              <a class="inline-flex items-center justify-center size-10 rounded-full bg-[rgba(145,158,171,0.16)]" href="https://www.emax.lk" target="_blank"><i class="hgi hgi-stroke hgi-tiktok text-2xl text-white"></i>
              </a>
              <a class="inline-flex items-center justify-center size-10 rounded-full bg-[rgba(145,158,171,0.16)]" href="https://www.emax.lk" target="_blank"><i class="hgi hgi-stroke hgi-youtube text-2xl text-white"></i>
              </a>
            </div>
          </div>
          <div class="md:col-span-6 col-span-12 xl:col-span-2">
            <h5 class="text-primary-lighter pb-6 border-b border-[rgba(145,158,171,0.24)]">
              Quick Links
            </h5>
            <ul class="flex flex-col gap-y-1.5 pt-4">
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/shop" class="text-primary-lighter font-semibold hover:underline">Shop</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/about-us" class="text-primary-lighter font-semibold hover:underline">About Us</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/brand" class="text-primary-lighter font-semibold hover:underline">Brands</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/happy-customer" class="text-primary-lighter font-semibold hover:underline">Happy Customers</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/signin" class="text-primary-lighter font-semibold hover:underline">Sign In</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/register" class="text-primary-lighter font-semibold hover:underline">Register</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/terms-and-conditions" class="text-primary-lighter font-semibold hover:underline">Terms &amp; Conditions</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/privacy-policy" class="text-primary-lighter font-semibold hover:underline">Privacy Policy</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/return-and-refund-policy" class="text-primary-lighter font-semibold hover:underline">Return &amp; Delivery Policy</a>
              </li>
            </ul>
          </div>
          <div class="md:col-span-6 col-span-12 xl:col-span-2">
            <h5 class="text-primary-lighter pb-6 border-b border-[rgba(145,158,171,0.24)]">
              Categories
            </h5>
            <ul class="flex flex-col gap-y-1.5 pt-4">
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/laptops" class="text-primary-lighter font-semibold hover:underline">Laptops</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/accessories" class="text-primary-lighter font-semibold hover:underline">Accessories</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/components" class="text-primary-lighter font-semibold hover:underline">Components</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/mobile-accessories" class="text-primary-lighter font-semibold hover:underline">Mobile Accessories</a>
              </li>
            </ul>
          </div>
          <div class="md:col-span-6 col-span-12 xl:col-span-4">
            <h5 class="text-primary-lighter pb-6 border-b border-[rgba(145,158,171,0.24)]">
              Contact Information
            </h5>
            <ul class="flex flex-col gap-y-1.5 py-4">
              <li class="flex items-center gap-x-3">
                <span class="size-10 inline-flex items-center justify-center rounded-full bg-[rgba(145,158,171,0.16)]"><i class="hgi hgi-stroke hgi-maps-global-01 text-2xl text-primary-lighter"></i>
                </span>
                <p class="text-primary-lighter font-semibold">No: 92/12, Kowilawaththe Road, Ambalangoda</p>
              </li>
              <li class="flex items-center gap-x-3">
                <span class="size-10 inline-flex items-center justify-center rounded-full bg-[rgba(145,158,171,0.16)]"><i class="hgi hgi-stroke hgi-call text-2xl text-primary-lighter"></i>
                </span>
                <a class="text-primary-lighter font-semibold" href="tel:+94777726120">Call Us: +94 777 726 120</a>
              </li>
              <li class="flex items-center gap-x-3">
                <span class="size-10 inline-flex items-center justify-center rounded-full bg-[rgba(145,158,171,0.16)]"><i class="hgi hgi-stroke hgi-mail-02 text-2xl text-primary-lighter"></i>
                </span>
                <a class="text-primary-lighter font-semibold" href="mailto:info@emax.lk">info@emax.lk</a>
              </li>
            </ul>
            <div>
              <!--<img src="assets/images/payment-methods.png" alt="payment-methods">-->
            </div>
          </div>
        </div>
        <!-- ========== Footer Top Section End ========== -->

        <!-- ========== Footer Bottom Section Start ========== -->
        <div class="text-center text-white bg-[url('../images/bottom-border.png')] pt-[22px] bg-center pb-px bg-no-repeat">
         <i class="hgi hgi-stroke hgi-rounded hgi-copyright"></i> <script>document.write(new Date().getFullYear());</script> emax.lk - All Rights Reserved. powered by Prefersoft Solutions
        </div>
        <!-- ========== Footer Bottom Section End ========== -->
      </div>
    </footer>
    
    
    
	  <!-- Footer Bottom Nav Start -->
    <div class="w-full z-80 bg-white border-t border-gray-300 block md:hidden fixed bottom-0 left-0 pb-3">
      <div class="container">
        <ul class="flex items-center justify-between footer-bottom-nav -mt-px">
          <li class="group">
            <a class='footer-bottom-nav-btn flex items-center flex-col gap-y-1 border-t-2 border-transparent text-sm leading-[22px] text-light-primary-text px-[9px] pt-2.5 pb-1' href="/"><span class="inline-flex items-center justify-center">
                <i class="hgi hgi-stroke hgi-home-01 text-2xl leading-6 text-light-primary-text"></i></span>Home</a>
          </li>
          <li class="group">
            <a class='footer-bottom-nav-btn flex items-center flex-col gap-y-1 border-t-2 border-transparent text-sm leading-[22px] text-light-primary-text px-[9px] pt-2.5 pb-1' href="/shop"><span class="inline-flex items-center justify-center">
                <i class="hgi hgi-stroke hgi-shopping-bag-01 text-2xl leading-6 text-light-primary-text"></i></span>Shop</a>
          </li>
          <li class="group">
            <a class='footer-bottom-nav-btn flex items-center flex-col gap-y-1 border-t-2 border-transparent text-sm leading-[22px] text-light-primary-text px-[9px] pt-2.5 pb-1' href="/about-us"><span class="inline-flex items-center justify-center">
                <i class="hgi hgi-stroke hgi-information-circle text-2xl leading-6 text-light-primary-text"></i></span>About Us</a>
          </li>
          <li class="group">
            <a class='footer-bottom-nav-btn flex items-center flex-col gap-y-1 border-t-2 border-transparent text-sm leading-[22px] text-light-primary-text px-[9px] pt-2.5 pb-1' href="/signin"><span class="inline-flex items-center justify-center">
                <i class="hgi hgi-stroke hgi-user-circle text-2xl leading-6 text-light-primary-text"></i></span>Sign In</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Footer Bottom Nav End -->
    
    

	
	 <!-- Global JS -->
    

	<script src="/asset/website/js/vendor/jquery-3.7.1.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/slick.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/jquery.countdown.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/jquery.nice-select.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/nouislider.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/jquery.counterup-2.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/jquery.magnific-popup.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/nouislider.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/vendor/wow.min.js?v=1.0.0"></script>
	<script src="/asset/website/js/main.js?v=1.0.0"></script>
	
 	<script src="/asset/erp/plugins/toastr/toastr.min.js"></script>
	<!-- HTTP helper -->
	<script type="text/javascript" src="/asset/common/js/http-client.js" ></script>
	<!-- Date and time formatter with javascript -->
	<script type="text/javascript" src="/asset/common/js/date-formatter.js" ></script>
	<!-- Price and amount formatter with javascript -->
	<script type="text/javascript" src="/asset/common/js/amount-formatter.js" ></script>
	
	<script src="/asset/website/js/product/cart-rendering.js?v1.0.0"></script>
	<script src="/asset/website/js/product/search.js?v1.0.0"></script>

	<script>
		const contextPath = "\/";
		const jwtToken = null;
		
		(function() {
			loadCart();
		})();
	</script>


    <!-- Page Specific JS -->
    
		<script>
			document.getElementById('search').addEventListener('keydown', function (e) {
				if (e.key === 'Enter') {
					e.preventDefault();
					document.getElementById('page-input').value = 0;
					document.getElementById('filter-form').submit();
				}
			});
			document.getElementById('price-reset').addEventListener('click', function () {
				document.getElementById('minPrice').value = '';
				document.getElementById('maxPrice').value = '';
				document.getElementById('page-input').value = 0;
				document.getElementById('filter-form').submit();
			});
		</script>
	

</body>

</html>