<!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 -  Sri Lanka's Computer Parts & Accessories Wholesale Supplier</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 -->
    

    <!-- Primary SEO -->
    <meta name="title"
          content="MemoryKing.lk | Sri Lanka&#39;s Computer Parts &amp; Accessories Wholesale Supplier">

    <meta name="description"
          content="MemoryKing.lk is one of Sri Lanka&#39;s leading wholesale suppliers of computer parts and accessories. Find RAM, SSDs, hard drives, graphics cards, motherboards, power supplies, computer accessories and more at competitive wholesale prices.">

    <meta name="keywords"
          content="MemoryKing.lk, MemoryKing, computer parts Sri Lanka, computer accessories Sri Lanka, computer parts wholesale Sri Lanka, computer accessories wholesale Sri Lanka, computer hardware wholesale, RAM Sri Lanka, SSD Sri Lanka, hard disk Sri Lanka, graphics cards Sri Lanka, motherboards Sri Lanka, power supplies Sri Lanka, PC accessories Sri Lanka, computer hardware supplier Sri Lanka">

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

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

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

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

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

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

    <!-- Open Graph -->
    <meta property="og:type" content="website">

    <meta property="og:site_name"
          content="MemoryKing.lk">

    <meta property="og:title"
          content="MemoryKing.lk | Computer Parts &amp; Accessories Wholesale in Sri Lanka">

    <meta property="og:description"
          content="Buy computer parts and accessories at competitive wholesale prices from MemoryKing.lk, a leading computer hardware wholesale supplier in Sri Lanka.">

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

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

    <meta property="og:image:alt"
          content="MemoryKing.lk - Computer Parts & Accessories Wholesale Supplier in Sri Lanka">

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

    <meta name="twitter:title"
          content="MemoryKing.lk | Computer Parts &amp; Accessories Wholesale">

    <meta name="twitter:description"
          content="Sri Lanka&#39;s computer parts and accessories wholesale supplier. Shop RAM, SSDs, hard drives, graphics cards, motherboards and more at competitive prices.">

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

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

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


    
   <!-- 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 755 440 550</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 755 440 550</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-[170px] overflow-y-auto pr-2.5">
									        <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 -->
												

									</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>
															<a type="button" href="/product/cmos-battery"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/sata-data-40cm"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/sata-data-50cm"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/thermal-paste-2ml"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/data-cable---rc-138a"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/data-cable---rc-138m"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/data-cable---rc-160m"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/data-cable---rc-138i"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/1-5m-usb-cable"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/data-cable---rc-134a"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/data-cable---rc-134i"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/data-cable---rc-160a"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/mouse-pad---x3"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/thermal-paste-10ml"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/dvi-to-vga-cable"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/1-5m-printer-cable"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/office-mouse-lemeide-301"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/heatz---data-cable-usb-to-type-c---sc502"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/3m-hdmi-cable"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
								<div class="2xl:col-span-3 xl:col-span-4 md:col-span-6 col-span-12">
									<div class="border border-gray-300 rounded-2xl product-card-1 p-4 group h-full flex flex-col">

										<div class="product-image-container relative">
													
													<div class="product-image h-[290px] rounded-xl bg-[#FFFFFF] mb-4 overflow-hidden">
														<a href="/product/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>
															<a type="button" href="/product/dp-to-hdmi"
																 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>
															</a>
														</div>
												</div>
									</div>
								</div>
							</div>

							

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

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

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

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

                

            </li>


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

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

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

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

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

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

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

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

            </li>
            <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>


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

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

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

                </a>

            </li>

        </ul>

    </div>

</div>









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

			</div>
		</section>

	</div>
	
	<!-- Footer -->
	
	
 <!-- ========== 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 755 440 550</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>
