<!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 - Action Figures, Anime Figures, Cars & Bikes 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 -->
    

	<!DOCTYPE html>
	<html>

	

		<!-- Primary SEO -->
		<meta name="title"
			content="ToyCity.lk | Action Figures, Anime Figures, Cars &amp; Bikes in Sri Lanka">

		<meta name="description"
			content="Discover action figures, anime figures, toy cars, bikes and more at ToyCity.lk. Shop your favourite toys and collectibles online in Sri Lanka.">

		<meta name="keywords"
			content="ToyCity, ToyCity.lk, toys Sri Lanka, buy toys online Sri Lanka, action figures Sri Lanka, anime figures Sri Lanka, anime toys, collectible figures, toy cars Sri Lanka, toy bikes Sri Lanka">

		<meta name="author" content="ToyCity.lk">

		<meta name="robots" content="index, follow">
		<meta name="googlebot" content="index, follow">

		<!-- Canonical URL -->
		<link rel="canonical" href="https://www.toycity.lk">

		<!-- PWA -->
		<link rel="manifest" href="/manifest.json">

		<!-- Favicon -->
		<link rel="icon" href="https://www.toycity.lk/icons/icon-192x192.png" type="image/png">

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

		<!-- Open Graph -->
		<meta property="og:type" content="website">
		<meta property="og:site_name" content="ToyCity.lk">

		<meta property="og:title" content="ToyCity.lk | Toys &amp; Collectibles in Sri Lanka">

		<meta property="og:description"
			content="Shop action figures, anime figures, toy cars, bikes and more online at ToyCity.lk.">

		<meta property="og:url" content="https://www.toycity.lk">

		<meta property="og:image" content="https://www.toycity.lk/icons/icon-192x192.png">

		<meta property="og:image:alt" content="ToyCity.lk - Toys and Collectibles in Sri Lanka">

		<!-- Twitter / X -->
		<meta name="twitter:card" content="summary">

		<meta name="twitter:title" content="ToyCity.lk | Toys &amp; Collectibles in Sri Lanka">

		<meta name="twitter:description"
			content="Shop action figures, anime figures, toy cars, bikes and more online at ToyCity.lk.">

		<meta name="twitter:image" content="https://www.toycity.lk/icons/icon-192x192.png">

		<!-- Language -->
		<link rel="alternate" href="https://www.toycity.lk" hreflang="en">

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

	

	</html>

    
   <!-- 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>
	
	<!-- 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 -->

    <!-- 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="/components">Components</a></li>
						<li><a href="/accessories">Accessories</a></li>
						<li><a href="/ssd">SSD</a></li>
						<li><a href="/memory" >RAM</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="#" class="flex items-center gap-x-2 login-page-btn">
							<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>
							log in / Sign Up
						</a>
						<a href="tel:+94755440550" 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 75 544 0550</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.facebook.com/memoryking/" 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.facebook.com/memoryking/" 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.facebook.com/memoryking/" 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.facebook.com/memoryking/"
								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-top start -->
	<div class="bg-black-100 header-top">
		<div class="container">
			<div class="flex items-center xl:justify-between justify-center">
				<div class="xl:flex items-center gap-x-6 hidden">
					<p class="flex items-center gap-x-2 text-white text-sm leading-[22px]">
						<span><i class="hgi hgi-stroke hgi-customer-support text-xl text-white"></i>
						</span>
						Need Support ?
						<span>Call Us</span>

						<a href="tel:+94755440550"
							class="bg-warning py-px px-2 text-xs leading-4.5 rounded-[60px] text-gray-800">+94 75 544 0550</a>
					</p>
				</div>

				<div class="text-center py-3.5">
					<p class="flex items-center gap-x-[7px] text-white text-sm leading-[22px] font-dm-sans">
					    <span class="inline-flex items-center">
					        <i class="hgi hgi-stroke hgi-flash-01 text-white text-xl"></i>
					    </span>
					    Hurry Up!
					    <span class="bg-warning py-px px-2 text-xs leading-4.5 rounded-[60px] text-gray-800">
					        Limited Stock
					    </span>
					    Available
					</p>
				</div>

				<div class="hidden xl:flex">
					<ul class="flex items-center text-white">
						<li>
							<a class='text-sm leading-[22px] text-white pr-[19px] mr-[19px] py-3.5 relative after:absolute after:h-7.5 after:w-px after:bg-primary-light after:right-0 after:top-1/2 after:-translate-y-1/2'
								href="/about-us">About us</a>
						</li>
						<li>
							<a href="/brand"
								class="text-sm leading-[22px] text-white pr-[19px] mr-[19px] py-3.5 relative after:absolute after:h-7.5 after:w-px after:bg-primary-light after:right-0 after:top-1/2 after:-translate-y-1/2">
								Brand</a>
						</li>
						<li>
							<a href="/discounted-products"
								class="text-sm leading-[22px] text-white pr-[19px] mr-[19px] py-3.5 relative after:absolute after:h-7.5 after:w-px after:bg-primary-light after:right-0 after:top-1/2 after:-translate-y-1/2">
								Special Offer</a>
						</li>

						


						<li>
							<a href="/signin" class="text-sm leading-[22px] text-white py-3.5">Login</a>
						</li>


						<!--	<li >
							<a th:href="@{/wishlist}" class="text-sm leading-[22px] text-white py-3.5">My Wishlist</a>
						</li>-->
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- header-top End -->


	<!-- Mobile Menu Start -->
	<div class="bg-black-100 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="#fff" stroke-width="1.5" stroke-linecap="round"
									stroke-linejoin="round"></path>
								<path d="M20 5L4 5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"
									stroke-linejoin="round"></path>
								<path d="M20 19L4 19" stroke="#fff" 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   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="bg-black-100   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">
					<a href="/" class="rounded-lg" id="dropdownButton">
						<img src="/icons/logo.png" alt="Logo" style="height: 54px;">
					</a>
				</div>

				<nav class="main-menu">
					<ul>
						<!-- Home -->
						<li>
							<a class="text-white 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="text-white 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="text-white  flex items-center gap-x-2" href="/gaming-laptops">
								<i class="hgi hgi-stroke hgi-rounded hgi-laptop text-xl leading-5"></i>
								<span>Laptops</span>
							</a>
						</li>

						<!-- Components -->
						<li class="has-sub-item">
							<a class="text-white flex items-center gap-x-2" href="/components">
								<i class="hgi hgi-stroke hgi-magic-wand-01 text-xl leading-5"></i>
								<span>Components</span>
							</a>
							<div class="mega-menu">
								<div class="p-10">
									<div class="grid grid-cols-3 gap-x-4 divide-x divide-[rgba(145,158,171,0.24)]">
										<div class="flex flex-col gap-y-1.5 pr-4">
											<h5 class="text-sm leading-[22px] uppercase font-semibold">
												Processor &amp; Storage
											</h5>
											<ul class="flex flex-col gap-y-2">
												<li><a href="/processor">Processor</a></li>
												<li><a href="/hdd">HDD</a></li>
												<li><a href="/ssd">SSD</a></li>
												<li><a href="/cooling">Cooling</a></li>
											</ul>
										</div>
										<div class="flex flex-col gap-y-1.5 pr-4">
											<h5 class="text-sm leading-[22px] uppercase font-semibold">
												Motherboard &amp; Power
											</h5>
											<ul class="flex flex-col gap-y-2">
												<li><a href="/motherboard">Motherboard</a></li>
												<li><a href="/power-supply">Power Supply</a></li>
												<li><a href="/memory">Memory</a></li>
												<li><a href="/computer-case">Computer Case</a></li>
											</ul>
										</div>
										<div class="flex flex-col gap-y-1.5">
											<h5 class="text-sm leading-[22px] uppercase font-semibold">
												Display &amp; Optical
											</h5>
											<ul class="flex flex-col gap-y-2">
												<li><a href="/monitors">Monitors</a></li>
												<li><a href="/odd">ODD</a></li>
												<li><a href="/vga-cards">VGA Cards</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</li>

						<!-- Chairs -->
						<li>
							<a class="text-white flex items-center gap-x-2" href="/gaming-chairs">
								<i class="hgi hgi-stroke hgi-rounded hgi-sofa-01 text-xl leading-5"></i>
								<span>Chairs</span>
							</a>
						</li>

						<!-- Accessories -->
						<li class="has-sub-item">
							<a class="text-white flex items-center gap-x-2" href="/accessories">
								<i class="hgi hgi-stroke hgi-headphones text-xl leading-5"></i>
								<span>Accessories</span>
							</a>
							<div class="mega-menu">
								<div class="p-10">
									<div class="grid grid-cols-3 gap-x-4 divide-x divide-[rgba(145,158,171,0.24)]">
										<div class="flex flex-col gap-y-1.5 pr-4">
											<h5 class="text-sm leading-[22px] uppercase font-semibold">
												Input Devices
											</h5>
											<ul class="flex flex-col gap-y-2">
												<li><a href="/gaming-keyboard">Gaming Keyboard</a></li>
												<li><a href="/gaming-mouse">Gaming Mouse</a></li>
												<li><a href="/gaming-headset">Gaming Headset</a></li>
												<li><a href="/gaming-controller">Gaming Controller</a></li>
											</ul>
										</div>
										<div class="flex flex-col gap-y-1.5 pr-4">
											<h5 class="text-sm leading-[22px] uppercase font-semibold">
												Add-ons
											</h5>
											<ul class="flex flex-col gap-y-2">
												<li><a href="/mouse-mat">Mouse Mat</a></li>
												<li><a href="/bundle">Bundle</a></li>
												<li><a href="/speakers">Speakers</a></li>
												<li><a href="/cables">Cables</a></li>
											</ul>
										</div>
										<div class="flex flex-col gap-y-1.5">
											<h5 class="text-sm leading-[22px] uppercase font-semibold">
												Cooling &amp; Care
											</h5>
											<ul class="flex flex-col gap-y-2">
												<li><a href="/lightning">Lightning</a></li>
												<li><a href="/thermal-paste">Thermal Paste</a></li>
												<li><a href="/fan">Fan</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</li>

						<!-- Custom Build PC -->
						<li>
							<a class="text-white flex items-center gap-x-2" href="/custom-build-pc">
								<i class="hgi hgi-stroke hgi-computer text-xl leading-5"></i>
								<span>Custom Build PC</span>
							</a>
						</li>


					</ul>
				</nav>



				<div>
					<div class="flex items-center gap-x-6 shrink-0">
						<ul class="flex items-center gap-x-6">


							<li class="flex items-center">
								<button class="register-page-btn  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-search-02  text-xl leading-5 text-white"></i>
									</span>

								</button>
							</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-bag-02 text-xl leading-5 text-white"></i>
									</span>
									<span
										class="flex flex-col items-start text-sm leading-[22px] text-white">
										Cart
										<span id="header-cart-count"
											class="text-base leading-6 text-white">0- Items</span>
									</span>
								</button>
							</li>



						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- header-bottom End -->
	
	
	
	
<div data-state="close" class="register-page-sidebar fixed xl:top-[60px]  md:left-[30px] md:right-[30px]  z-99   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-y-0 data-[state=open]:opacity-100 data-[state=open]:visible data-[state=close]:-translate-y-4 data-[state=close]:opacity-0 data-[state=close]:invisible">
      <div class="register-page-sidebar-header px-6 pt-6 pb-4 border-b border-gray-300 relative">
        <h5>Search</h5>
        <button data-close-sidebar=".login-page-sidebar" class="close-sidebar-btn absolute top-1/2 right-6 -translate-y-1/2 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 class="register-page-sidebar-content p-10 flex flex-col gap-y-10 overflow-y-auto min-h-[520px] max-h-[calc(100%-70px)]">
         	<div class="relative search-input-container w-full">
			    <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>
    </div>
    
    
    
</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-[240px] overflow-y-auto pr-2.5" style="max-height: 240px;">
									        <ul class="flex flex-col gap-y-3">
									
									            <li>
									
									                <!-- Optional Parent Category Title -->
									                <div class="font-semibold text-sm text-light-primary-text mb-2">Computer Accessories</div>
									
									                <!-- Subcategories -->
									                <ul class="flex flex-col gap-y-2 pl-3">
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="12"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=12&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Gaming Keyboard</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="13"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=13&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Gaming Mouse</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="14"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=14&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Gaming Headset</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="15"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=15&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Mouse Mat</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="16"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=16&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Bundle</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="17"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=17&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Speakers</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="18"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=18&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Cables</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="19"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=19&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Lightning</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="20"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=20&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Thermal Paste</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="21"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=21&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Fan</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="22"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=22&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Gaming Controller</span>
									
									                        </label>
									
									                    </li>
									
									                </ul>
									
									            </li>
									
									            <li>
									
									                <!-- Optional Parent Category Title -->
									                <div class="font-semibold text-sm text-light-primary-text mb-2">Components</div>
									
									                <!-- Subcategories -->
									                <ul class="flex flex-col gap-y-2 pl-3">
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="23"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=23&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Processor</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="24"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=24&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Graphic Cards</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="25"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=25&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Cooling</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="26"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=26&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">SSD Hard Disk</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="27"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=27&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Motherboard</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="28"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=28&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Power Supply</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="29"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=29&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Memory</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="30"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=30&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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 Case</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="31"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=31&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">ODD</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="32"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=32&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Input &amp; Output Devices</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="33"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=33&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Monitors</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="34"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=34&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Desktop Hard Disk</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="35"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=35&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Laptop Hard Disk</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="48"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=48&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">USB Flash Drive</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="49"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=49&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Laptop Screen</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="50"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=50&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Laptop Cooler</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="51"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=51&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Laptop Charger</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="52"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=52&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Laptop Stand</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="53"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=53&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Router</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="54"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=54&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">DVD Writer</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="55"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=55&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Mic</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="56"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=56&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Laptop Bag</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="57"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=57&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Graphic Card Holder</span>
									
									                        </label>
									
									                    </li>
									
									                </ul>
									
									            </li>
									
									            <li>
									
									                <!-- Optional Parent Category Title -->
									                <div class="font-semibold text-sm text-light-primary-text mb-2">Customize</div>
									
									                <!-- Subcategories -->
									                <ul class="flex flex-col gap-y-2 pl-3">
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="36"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=36&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Custom Built PC</span>
									
									                        </label>
									
									                    </li>
									
									                </ul>
									
									            </li>
									
									            <li>
									
									                <!-- Optional Parent Category Title -->
									                <div class="font-semibold text-sm text-light-primary-text mb-2">Laptops</div>
									
									                <!-- Subcategories -->
									                <ul class="flex flex-col gap-y-2 pl-3">
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="37"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=37&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Gaming Laptops</span>
									
									                        </label>
									
									                    </li>
									
									                </ul>
									
									            </li>
									
									            <li>
									
									                <!-- Optional Parent Category Title -->
									                <div class="font-semibold text-sm text-light-primary-text mb-2">Chairs</div>
									
									                <!-- Subcategories -->
									                <ul class="flex flex-col gap-y-2 pl-3">
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="38"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=38&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Gaming Chairs</span>
									
									                        </label>
									
									                    </li>
									
									                </ul>
									
									            </li>
									
									            <li>
									
									                <!-- Optional Parent Category Title -->
									                <div class="font-semibold text-sm text-light-primary-text mb-2">Mobile Accessories</div>
									
									                <!-- Subcategories -->
									                <ul class="flex flex-col gap-y-2 pl-3">
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="39"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=39&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Data Cable</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="40"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=40&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Bluetooth Headset</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="41"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=41&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Earbuds</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="42"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=42&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Charger</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="43"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=43&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Wireless Charger</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="44"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=44&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Car Charger</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="45"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=45&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Micro SD</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="46"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=46&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Smart Watch</span>
									
									                        </label>
									
									                    </li>
									
									                    <li>
									
									                        <label class="group flex items-center gap-x-3 w-full cursor-pointer">
									
									                            <input type="radio"
									                                   name="subCategoryId"
									                                   value="47"
									
									                                   onchange="window.location.href=&#39;/shop?subCategoryId=47&amp;status=ACTIVE&amp;size=20&amp;sort=PRICE_ASC&#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">Hands Free</span>
									
									                        </label>
									
									                    </li>
									
									                </ul>
									
									            </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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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>
													<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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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>
												</ul>
											</div>
										</div>

									<!-- Dynamic category attributes (only meaningful once a subcategory is picked) -->
										

									</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>1440</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/cmos-battery"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/2/5245/250-3291488992product.jpg"
																alt="CMOS Battery"
																 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="5219">
																	<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="5219">
																	<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/cmos-battery">
																	<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/cmos-battery">CMOS Battery</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="5219">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/sata-data-40cm"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/387/250-2018272931product.jpg"
																alt="SATA DATA 40CM"
																 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="363">
																	<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="363">
																	<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/sata-data-40cm">
																	<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/sata-data-40cm">SATA DATA 40CM</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 120.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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="363">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/sata-data-50cm"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/682/250-7128450756product.jpg"
																alt="SATA DATA 50CM"
																 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="658">
																	<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="658">
																	<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/sata-data-50cm">
																	<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/sata-data-50cm">SATA DATA 50CM</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 150.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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="658">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/thermal-paste-2ml"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/1789/250-2871422453product.jpg"
																alt="Thermal Paste 2ML"
																 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="1765">
																	<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="1765">
																	<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/thermal-paste-2ml">
																	<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/thermal-paste-2ml">Thermal Paste 2ML</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 200.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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="1765">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/data-cable---rc-138a"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/2054/250-7456591330product.jpg"
																alt="DATA CABLE - RC 138a"
																 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="2030">
																	<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="2030">
																	<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/data-cable---rc-138a">
																	<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/data-cable---rc-138a">DATA CABLE - RC 138a</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="2030">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/data-cable---rc-138m"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/2061/250-1486535422product.jpg"
																alt="DATA CABLE - RC 138m"
																 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="2037">
																	<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="2037">
																	<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/data-cable---rc-138m">
																	<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/data-cable---rc-138m">DATA CABLE - RC 138m</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="2037">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/data-cable---rc-160m"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/2075/250-5747783366product.jpg"
																alt="DATA CABLE - RC 160m"
																 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="2051">
																	<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="2051">
																	<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/data-cable---rc-160m">
																	<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/data-cable---rc-160m">DATA CABLE - RC 160m</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="2051">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/data-cable---rc-138i"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/3692/250-6808611869product.jpg"
																alt="DATA CABLE - RC 138i"
																 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="3666">
																	<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="3666">
																	<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/data-cable---rc-138i">
																	<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/data-cable---rc-138i">DATA CABLE - RC 138i</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="3666">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/1-5m-usb-cable"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/401/250-4382229929product.jpg"
																alt="1.5M USB CABLE"
																 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="377">
																	<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="377">
																	<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/1-5m-usb-cable">
																	<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/1-5m-usb-cable">1.5M USB CABLE</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="377">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/data-cable---rc-134a"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/2059/250-5964306637product.jpg"
																alt="DATA CABLE - RC 134a"
																 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="2035">
																	<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="2035">
																	<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/data-cable---rc-134a">
																	<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/data-cable---rc-134a">DATA CABLE - RC 134a</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="2035">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/data-cable---rc-134i"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/2060/250-8074525060product.jpg"
																alt="DATA CABLE - RC 134i"
																 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="2036">
																	<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="2036">
																	<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/data-cable---rc-134i">
																	<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/data-cable---rc-134i">DATA CABLE - RC 134i</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="2036">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/data-cable---rc-160a"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/2076/250-4706618945product.jpg"
																alt="DATA CABLE - RC 160a"
																 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="2052">
																	<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="2052">
																	<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/data-cable---rc-160a">
																	<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/data-cable---rc-160a">DATA CABLE - RC 160a</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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="2052">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/mouse-pad---x3"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/2544/250-6898469695product.jpg"
																alt="MOUSE PAD - X3"
																 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="2519">
																	<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="2519">
																	<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/mouse-pad---x3">
																	<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/mouse-pad---x3">MOUSE PAD - X3</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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="2519">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/thermal-paste-10ml"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/2/3986/250-8254550953product.jpg"
																alt="Thermal Paste 10ML"
																 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="3960">
																	<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="3960">
																	<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/thermal-paste-10ml">
																	<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/thermal-paste-10ml">Thermal Paste 10ML</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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="3960">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/dvi-to-vga-cable"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/679/250-9591498099product.jpg"
																alt="DVI To VGA Cable"
																 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="655">
																	<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="655">
																	<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/dvi-to-vga-cable">
																	<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/dvi-to-vga-cable">DVI To VGA Cable</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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="655">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/1-5m-printer-cable"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/2/5760/250-9442066278product.jpg"
																alt="1.5M PRINTER CABLE"
																 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="5734">
																	<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="5734">
																	<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/1-5m-printer-cable">
																	<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/1-5m-printer-cable">1.5M PRINTER CABLE</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="5734">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/office-mouse-lemeide-301"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/2/5112/250-9492577801product.jpg"
																alt="OFFICE MOUSE LEMEIDE 301"
																 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="5086">
																	<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="5086">
																	<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/office-mouse-lemeide-301">
																	<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/office-mouse-lemeide-301">OFFICE MOUSE LEMEIDE 301</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 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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="5086">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/heatz---data-cable-usb-to-type-c---sc502"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/2/5257/250-7825829000product.jpg"
																alt="HEATZ - DATA CABLE USB To TYPE C - SC502"
																 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="5231">
																	<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="5231">
																	<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/heatz---data-cable-usb-to-type-c---sc502">
																	<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/heatz---data-cable-usb-to-type-c---sc502">HEATZ - DATA CABLE USB To TYPE C - SC502</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 650.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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="5231">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/3m-hdmi-cable"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/101/250-8494462169product.jpg"
																alt="3M HDMI Cable"
																 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="77">
																	<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="77">
																	<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/3m-hdmi-cable">
																	<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/3m-hdmi-cable">3M HDMI Cable</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 650.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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="77">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</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/dp-to-hdmi"
														 	 class="group flex items-center justify-center w-full h-full ">
															<img src="https://www.memoryking.lk/../prefer_one_data/product-images/1/4792/250-1392940446product.jpg"
																alt="DP to HDMI"
																 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="4766">
																	<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="4766">
																	<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/dp-to-hdmi">
																	<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/dp-to-hdmi">DP to HDMI</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 650.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>
															<button type="button" onclick="addToCart()"
																 class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="4766">
																<i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
															</button>
														</div>
												</div>
									</div>
								</div>
							</div>

							

							<!-- 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">
										<li class="blog-pagination-item">
											
										</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=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>
										
									
										<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=4"
											   class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">5</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=5"
											   class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">6</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=6"
											   class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">7</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=7"
											   class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">8</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=8"
											   class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">9</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=9"
											   class="inline-flex items-center justify-center md:size-10 size-9 rounded-[50px] text-light-primary-text bg-white border border-gray-300">10</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] 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 -->
	
	
 <!-- ========== Footer Section Start ========== -->
    <footer class="md:pb-15 bg-black-100 pb-10  pt-10 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="MemoryKing logo">
              </a>
            </div>
            <p class="text-primary-lighter text-base">
              MemoryKing.lk is Sri Lanka's No. 1 wholesale computer accessories company, offering the lowest prices in Sri Lanka on laptops, components, chairs, accessories and custom-built PCs, delivered right to your doorstep.
            </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.facebook.com/memoryking/" 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.instagram.com/memoryking/" 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.tiktok.com/memoryking" 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://de.pinterest.com/memoryking/" 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="/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>
            </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="/gaming-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="/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="/gaming-chairs" class="text-primary-lighter font-semibold hover:underline">Chairs</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="/custom-build-pc" class="text-primary-lighter font-semibold hover:underline">Custom Build PC</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">253 Old Galle Rd, Panadura 12500</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:+94755440550">Call Us: +94 75 544 0550</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@memoryking.lk">info@memoryking.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  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> memoryking.lk - No. 1 Wholesale Computer Accessories in Sri Lanka - 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>
