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

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

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

		<!-- Primary SEO -->
		<meta name="title" content="Shop">
		<meta name="description" content="Motherboard">
		<meta name="keywords" content="Motherboard">
		<meta name="author" content="Redking.lk">

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

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

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

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

		<meta property="og:type" content="website">
		<meta property="og:site_name" content="Redking.lk">
		<meta property="og:title" content="Shop">
		<meta property="og:description" content="Motherboard">
		<meta property="og:url" content="https://www.redking.lk/shop">
		<meta property="og:image" content="https://www.redking.lk/icons/icon-192x192.png">
		<meta property="og:image:alt" content="Motherboard">


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

		<meta name="twitter:card" content="summary">
		<meta name="twitter:title" content="Shop">
		<meta name="twitter:description" content="Motherboard">
		<meta name="twitter:image" content="https://www.redking.lk/icons/icon-192x192.png">

		<link rel="alternate" href="Redking.lk" hreflang="en">
		<link rel="alternate" href="Redking.lk" hreflang="x-default">

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

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

		

		<!-- =====================================================
             TOYCITY STORE SCHEMA
             Used when Product data is unavailable/incomplete.
             This reuses the same SEO variables used by the
             meta tags above.
             ===================================================== -->
		<script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "Store",
                "name":  "Redking.lk",
                "image": "https:\/\/www.redking.lk\/icons\/icon-192x192.png",  
                "url": "https:\/\/www.redking.lk\/shop",
                "description": "Motherboard",
                "address": {
                    "@type": "PostalAddress",
                    "streetAddress":  "253 Old Galle Rd", 
                    "addressLocality": "Panadura", 
                    "postalCode": "12500", 
                    "addressCountry": "LK"
                },
                "openingHours": "Mo-Sat 08:30-17:30",
                "telephone": "+94755440550",  
                "brand": {
                    "@type": "Brand",
                    "name": "Redking.lk"
                }
            }

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

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

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

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

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

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

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

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

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

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



	<!-- Page Specific CSS -->
    

	
    
    

	
	
</head>

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

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

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

			<div class="flex flex-col gap-y-6">
				<nav class="mobile-menu">
					<ul>
						<li>
							<a class="active" href="/">Home</a>
						</li>
						<li><a href="/shop">Shop</a></li>
						<li><a href="/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/redking/" 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/redking/" 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/redking/" 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/redking/"
								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: 75px;">
						</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: 75px;">
					</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>
											</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>

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

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

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

                </label>

            </li>

            <li>

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

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

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

                </label>

            </li>

            <li>

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

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

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

                </label>

            </li>

            <li>

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

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

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

                </label>

            </li>

            <li>

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

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

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

                </label>

            </li>

            <li>

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

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

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

                </label>

            </li>

        </ul>

    </div>

</div>
















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

										<!-- Brand (single-select, matches request.brandId) -->
										<div class="widget-brand py-8 border-b border-gray-300">
											<div class="flex items-center justify-between mb-4">
												<h6>Brand</h6>
											</div>
											<div class="max-h-[170px] overflow-y-auto pr-2.5">
												<ul class="flex flex-col gap-y-2">
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="44"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ACER</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="12"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ADATA</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="14"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">AITC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="34"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ANTEC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="38"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ANTGAMER</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="40"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">AOC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="50"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ARCTIC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="17"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ASUS</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="30"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">AULA</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="49"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">COOLER MASTER</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="8"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">CORSAIR</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="29"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">CRUCIAL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="9"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">DARKFLASH</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="42"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">DELL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="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="35"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">FURRY</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="15"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">GEIL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="18"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">GIGABYTE</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="52"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">GSKILL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="31"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HEATZ</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="46"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HIKSEMI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="39"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">HKC</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="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="22"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">INTEL</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="51"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">JUNGLE LEOPHARD</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="24"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">KINGSTON</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="13"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">KISONLI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="33"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">KOORUI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="45"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">LENOVO</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="10"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">LEXAR</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="5"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">LOGITECH</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="3"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">MEETION</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="6"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">MSI</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="37"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">ONIKUMA</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="1"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">Other</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="41"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">PHILIPS</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="28"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">PNY</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="20"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">POWER TRAIN</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="7"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">RAIDMAX</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="16"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">REDRAGON</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="19"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">REMAX</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="21"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">RUIX</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="23"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">RYZEN</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="47"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SAMSUNG</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="32"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SANDISK</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="26"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">SEAGATE</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="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="11"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TEAM</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="53"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">Thermaltake</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="36"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TP LINK</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="25"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">TRANSCEND</span>
														</label>
													</li>
													<li>
														<label
															class="group flex items-center gap-x-2 w-full cursor-pointer">
															<input type="radio" name="brandId" value="27"
																onchange="document.getElementById('filter-form').submit()"
																class="w-4 h-4 accent-primary">
															<span
																class="text-light-primary-text group-hover:text-primary transition-colors duration-300 ease-in-out">WD</span>
														</label>
													</li>
												</ul>
											</div>
										</div>

										<!-- Dynamic Category Attributes -->
										

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

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

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


								<div class="flex items-center gap-x-4 shrink-0 justify-start">
									<!-- vendor-filter-button -->
									<div class="flex items-center gap-x-4">
										<a
											class="w-10 h-10 rounded-full inline-flex items-center justify-center btn-primary cursor-pointer">
											<span class="inline-flex items-center justify-center"><i
													class="hgi hgi-stroke hgi-more-01 text-2xl leading-6 text-white"></i></span>
										</a>
									</div>
									<div class="lg:flex hidden">
										<p class="text-light-secondary-text">
											Showing
											<span>1</span>-<span>20</span>
											of <span>931</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/acer-omw9100-mouse"
													class="group flex items-center justify-center w-full h-full ">
													<img src="https://www.memoryking.lk/prefer_one_data/product_images/5188/7363_6893_7746968947product.jpg" alt="ACER - OMW9100 MOUSE"
														class="max-w-full max-h-full object-contain transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-rotate-3 product-img">
												</a>
											</div>


											

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

										<div class="product-content">
											<h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
												<a class="product-title" href="/product/acer-omw9100-mouse">ACER - OMW9100 MOUSE</a>
											</h5>

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

											<div class="btn-section flex items-center justify-between">
												<button
													class="size-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300"
													data-id="${product.productId}" onclick="wishlist()">
													<i
														class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>
												</button>
												<a type="button" href="/product/acer-omw9100-mouse"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="5188">
													<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/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-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/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-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-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-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/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/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/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/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-type-c-to-type-c---sc508"
													class="group flex items-center justify-center w-full h-full ">
													<img src="https://www.memoryking.lk/../prefer_one_data/product-images/2/5260/250-4542276807product.jpg" alt="HEATZ - DATA CABLE Type C To Type C - SC508"
														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="5234">
															<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="5234">
															<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-type-c-to-type-c---sc508">
															<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-type-c-to-type-c---sc508">HEATZ - DATA CABLE Type C To Type C - SC508</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-type-c-to-type-c---sc508"
													class="size-11 flex items-center justify-center rounded-full btn btn-primary" data-id="5234">
													<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>

							

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

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


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

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

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

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

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

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

        .whatsapp-tooltip {
            display: none;
        }
    }
</style>
	
 <!-- ========== 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: 75px;" alt="Redking logo">
              </a>
            </div>
            <p class="text-primary-lighter text-base">
              Redking.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/redking/" 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/redking/" 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/redking" 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/redking/" 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@redking.lk">info@redking.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> redking.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>