<!DOCTYPE html>
<html>

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

	<!-- Meta seo -->
    
		
	 	<!-- 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="Sri Lanka&#39;s premier destination for luxury bedding. Shop 100% pure cotton sheets, high-thread-count Egyptian cotton collections and premium bedroom essentials, delivered to your doorstep.">
		<meta name="keywords" content="ClassyCotton, ClassyCotton.lk, luxury bedding Sri Lanka, cotton bed sheets Sri Lanka, Egyptian cotton sheets Sri Lanka, pure cotton bed sheets, high thread count sheets, duvet covers Sri Lanka, pillowcases Sri Lanka, buy bed sheets online Sri Lanka">
		<meta name="author" content="ClassyCotton.lk">

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

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

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

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

		<meta property="og:type" content="website">
		<meta property="og:site_name" content="ClassyCotton.lk">
		<meta property="og:title" content="Shop">
		<meta property="og:description" content="Sri Lanka&#39;s premier destination for luxury bedding. Shop 100% pure cotton sheets, high-thread-count Egyptian cotton collections and premium bedroom essentials, delivered to your doorstep.">
		<meta property="og:url" content="https://www.classycotton.lk/shop">
		<meta property="og:image" content="https://www.classycotton.lk/icons/icon-192x192.png">
		<meta property="og:image:alt" content="ClassyCotton.lk - Luxury Cotton Bedding in Sri Lanka">


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

		<meta name="twitter:card" content="summary">
		<meta name="twitter:title" content="Shop">
		<meta name="twitter:description" content="Sri Lanka&#39;s premier destination for luxury bedding. Shop 100% pure cotton sheets, high-thread-count Egyptian cotton collections and premium bedroom essentials, delivered to your doorstep.">
		<meta name="twitter:image" content="https://www.classycotton.lk/icons/icon-192x192.png">

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

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

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

		

		<!-- =====================================================
             CLASSYCOTTON 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":  "ClassyCotton.lk",
                "image": "https:\/\/www.classycotton.lk\/icons\/icon-192x192.png",  
                "url": "https:\/\/www.classycotton.lk\/shop",
                "description": "Sri Lanka's premier destination for luxury bedding. Shop 100% pure cotton sheets, high-thread-count Egyptian cotton collections and premium bedroom essentials, delivered to your doorstep.",
                "address": {
                    "@type": "PostalAddress",
                    "streetAddress":  "Pannipitiya, Sri Lanka, 10230", 
                    "addressLocality": "Pannipitiya", 
                    "postalCode": "10230", 
                    "addressCountry": "LK"
                },
                "openingHours": "Mo-Sat 08:30-17:30",
                "telephone": "+94772721449",  
                "brand": {
                    "@type": "Brand",
                    "name": "ClassyCotton.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">

	<!-- ========== Product card (mobile layout) CSS ========== -->
	<link rel="stylesheet" href="/asset/website/css/product-card.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="/bed-linen">Bed Linen</a>
							<ul class="pl-4">
								<li><a href="/cotton-bed-sheets">Cotton Bed Sheets</a></li>
								<li><a href="/egyptian-cotton-bed-sheets">Egyptian Cotton Bed Sheets</a></li>
							</ul>
						</li>
						<li>
							<a href="/bedding">Bedding</a>
							<ul class="pl-4">
								<li><a href="/pillows">Pillows</a></li>
								<li><a href="/duvets">Duvets</a></li>
							</ul>
						</li>
						<li><a href="/brand">Brands</a></li>
						<li><a href="/happy-customer">Happy Customers</a></li>
					 	<li>
							<a href="/about-us">About Us</a>
						</li>
					</ul>
				</nav>
				<div class="border border-gray-500/24 p-5 rounded-2xl">
					<div class="flex flex-col gap-y-3">
						
							<a href="/signin" class="flex items-center gap-x-2">
								<span class="inline-flex items-center justify-center bg-warning size-8 rounded-full"><i
										class="hgi hgi-stroke hgi-lock-sync-01 text-base text-light-primary-text"></i>
								</span>
								Sign In
							</a>
							<a href="/register" class="flex items-center gap-x-2">
								<span class="inline-flex items-center justify-center bg-warning size-8 rounded-full"><i
										class="hgi hgi-stroke hgi-id text-base text-light-primary-text"></i>
								</span>
								Create Account
							</a>
						
						
						<a href="tel:+94772721449" 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 77 272 1449</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/wasp.forclassypeople/" 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/wasp.forclassypeople/" 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/wasp.forclassypeople/" 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/wasp.forclassypeople/"
								class="inline-flex items-center justify-center gap-x-2 hover:translate-y-3"><span
									class="size-8 bg-primary-dark inline-flex items-center justify-center rounded-full">
									<i class="hgi hgi-stroke hgi-twitter text-base text-white"></i> </span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

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

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

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

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

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

			</div>

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

					<div class="flex items-center gap-x-6 shrink-0">
						<ul class="flex items-center gap-x-6">
							<li class="flex items-center gap-x-4 cursor-pointer relative group">
								<p class="flex items-center">
									<span
										class="inline-flex items-center justify-center bg-light-beige w-12 h-12 rounded-full">
										<i class="hgi hgi-stroke hgi-lock-sync-01 text-2xl text-brown"></i>
									</span>
								</p>
								<p class="flex flex-col text-brown text-sm leading-[22px]">
									Account
									<span class="text-base leading-6  text-dark">log in</span>
								</p>
								<span><i
										class="hgi hgi-stroke hgi-arrow-down-01 text-2xl text-brown" style="font-size: 18px;color: #9D9185;"></i></span>

								<ul
									class="absolute right-0 top-full py-2 z-10 w-[250px] max-w-[250px] bg-white rounded-lg shadow-dark-z-24 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-4 group-hover:translate-y-0">


									<li class="px-4 group/item">
										<a href="#"
											class="login-page-btn flex items-center py-2 gap-x-2 relative text-black group-hover/item:text-warning">
											<span
												class="w-8 h-8 bg-[#F0F0F0] group-hover/item:bg-[#FF9800] inline-flex items-center justify-center rounded-full">
												<i
													class="hgi hgi-stroke hgi-lock-sync-01 text-base text-black group-hover/item:text-warning"></i>
											</span>
											Login
										</a>
									</li>
									<li class="px-4 group/item">
										<a href="#"
											class="register-page-btn flex items-center py-2 gap-x-2 relative text-black group-hover/item:text-warning">
											<span
												class="w-8 h-8 bg-[#F0F0F0] group-hover/item:bg-[#FF9800] inline-flex items-center justify-center rounded-full">
												<i
													class="hgi hgi-stroke hgi-id text-base text-black group-hover/item:text-warning"></i>
											</span>
											Register
										</a>
									</li>


								</ul>
							</li>
							<li class="flex items-center">
								<button class="flex items-center gap-x-4 cursor-pointer cart-sidebar-btn">
									<span
										class="inline-flex items-center justify-center bg-light-beige w-12 h-12 rounded-full"><i
											class="hgi hgi-stroke hgi-shopping-cart-02 text-2xl text-brown"></i>
									</span>
									<span
										class="flex flex-col items-start text-sm leading-[22px]  text-brown">
										Cart
										<span id="header-cart-count"
											class="text-base leading-6 text-dark">0- Items</span>
									</span>
								</button>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- FOr Desktop Screen End -->
		</div>
	</div>
	<!-- header-middle End -->

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

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

									<div class="flex items-center gap-x-4 py-2 first:pt-0 last:pb-0">
										<div class="size-10 flex-none rounded-lg bg-[#F4F3F5]">
											<img src="assets/images/vitamin-c.png" alt="recommended-search-1">
										</div>
										<p
											class="text-base font-semibold text-light-primary-text hover:text-primary transition-colors duration-300">
											<a href="#">Immunity booster</a>
										</p>
									</div>
									<div class="flex items-center gap-x-4 py-2 first:pt-0 last:pb-0">
										<div class="size-10 flex-none rounded-lg bg-[#F4F3F5]">
											<img src="assets/images/hand-sanitizer-1.png" alt="recommended-search-1">
										</div>
										<p
											class="text-base font-semibold text-light-primary-text hover:text-primary transition-colors duration-300">
											<a href="#">Hand Sanitizer 500ml</a>
										</p>
									</div>


								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Mobile Menu End -->

	<!-- header-bottom End -->
	<div class="border border-cc-border hidden xl:flex header-bottom sticky-header border-r-0 border-l-0 border-t-0">
		<div class="container">
			<div class="hidden relative items-center justify-between xl:flex">
				<div class="relative">
					<button class="btn btn-taupe-dark text-white btn-large rounded-lg" id="dropdownButton" data-state="close">
						<span class="inline-flex items-center">
							<i class="hgi hgi-stroke hgi-grid-view text-base text-white"></i>
						</span>
						Explore All Categories
						<span class="inline-flex items-center" id="dropdownIcon"><i
								class="hgi hgi-stroke hgi-arrow-down-01 text-xl text-white"></i>
						</span>
					</button>
					<div>
						<ul id="dropdownMenu"
							class="bg-white hide shadow-dark-z-24 rounded-b-2xl px-4 py-4 z-40 transform origin-top transition-all duration-300 ease-in-out absolute left-0 top-full w-full divide-y divide-[rgba(145,158,171,0.24)]">
							<!-- BED LINEN -->
							<li class="py-[9px] group">
								<a href="/bed-linen"
									class="flex items-center gap-x-3 font-semibold text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-lg text-brown"></i>
									</span>
									<span>Bed Linen</span>
								</a>
								
								<a href="/cotton-bed-sheets"
									class="flex items-center gap-x-3 font-semibold text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-lg text-brown"></i>
									</span>
									<span>Cotton Bed Sheets</span>
								</a>
								
								
								<a href="/egyptian-cotton-bed-sheets"
									class="flex items-center gap-x-3 font-semibold text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-lg text-brown"></i>
									</span>
									<span>Egyptian Cotton Bed Sheets</span>
								</a>
							</li>
							<!-- BEDDING -->
							<li class="py-[9px] group">
								<a href="/bedding"
									class="flex items-center gap-x-3 font-semibold text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-lg text-brown"></i>
									</span>
									<span>Bedding</span>
								</a>
								
								<a href="/pillows"
									class="flex items-center gap-x-3 font-semibold text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-lg text-brown"></i>
									</span>
									<span>Pillows</span>
								</a>
								
								<a href="/duvets"
									class="flex items-center gap-x-3 font-semibold text-light-primary-text group-hover:text-primary">
									<span
										class="w-9 h-9 bg-primary-lighter inline-flex items-center justify-center rounded-full">
										<i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-lg text-brown"></i>
									</span>
									<span>Duvets</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				
				
				<nav class="main-menu">
					    <ul>
					
					        <!-- Home -->
					        <li>
					            <a class="active flex items-center gap-x-2"
					               href="/">
					                <i class="hgi hgi-stroke hgi-rounded hgi-home-07 text-xl leading-5"></i>
					                <span>Home</span>
					            </a>
					        </li>
					
					        <!-- Shop -->
					        <li>
					            <a class="flex items-center gap-x-2"
					               href="/shop">
					                <i class="hgi hgi-stroke hgi-shopping-bag-03 text-xl leading-5"></i>
					                <span>Shop</span>
					            </a>
					        </li>
					
					        <!-- Bed Linen -->
					        <li class="has-sub-item">
					            <a class="flex items-center gap-x-2"
					               href="/bed-linen">
					                <i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-xl leading-5"></i>
					                <span>Bed Linen</span>
					            </a>
					            <ul>
					                <li><a href="/cotton-bed-sheets">Cotton Bed Sheets</a></li>
					                <li><a href="/egyptian-cotton-bed-sheets">Egyptian Cotton Bed Sheets</a></li>
					            </ul>
					        </li>

					        <!-- Bedding -->
					        <li class="has-sub-item">
					            <a class="flex items-center gap-x-2"
					               href="/bedding">
					                <i class="hgi hgi-stroke hgi-rounded hgi-bed-double text-xl leading-5"></i>
					                <span>Bedding</span>
					            </a>
					            <ul>
					                <li><a href="/pillows">Pillows</a></li>
					                <li><a href="/duvets">Duvets</a></li>
					            </ul>
					        </li>

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

	<div>

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

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

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

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

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

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

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

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




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

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

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

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

            <li>

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

                    <input type="radio"
                           name="subCategoryId"
                           value="1"
                           onchange="window.location.href=&#39;/bed-linen&#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">Bed Linen</span>

                </label>

            </li>

            <li>

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

                    <input type="radio"
                           name="subCategoryId"
                           value="4"
                           onchange="window.location.href=&#39;/bedding&#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">Bedding</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="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>
												</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">
										
									</div>
								</div>

								<!-- Sorting dropdown. Submits the same GET form so ProductListRequest.sort is populated. -->
								
							</div>

							

							<div class="text-center py-12">
								<p class="text-light-secondary-text">No products match your filters.</p>
							</div>

							<!-- Pagination -->
							<!-- PAGINATION -->
							



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

			</div>
		</section>

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


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

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

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

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

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

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

        .whatsapp-tooltip {
            display: none;
        }
    }
</style>
  
	
	
	
	
    <!-- ========== Subscribe Section Start ========== -->
    <section class="px-4 md:px-0 max-w-[932px] mx-auto text-center lg:pb-6 pb-[70px] lg:rounded-[164px] -mb-[100px] relative z-10 bg-white xl:before:absolute xl:before:bottom-0 xl:before:left-[-23px] xl:before:h-[100px] xl:before:w-[145px] xl:before:bg-[url('../images/footer-left-shape.png')] xl:before:bg-no-repeat xl:before:z-11 xl:after:absolute xl:after:bottom-0 xl:after:right-[-23px] xl:after:h-[100px] xl:after:w-[145px] xl:after:bg-[url('../images/footer-right-shape.png')] xl:after:bg-no-repeat xl:after:z-11">
      <h3 class="mb-4 wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        Subscribe to our newsletter
      </h3>
      <p class="mb-6 text-dark-secondary-text wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        Stay updated! Subscribe to our mailing list for news, updates, and
        exclusive offers.
      </p>
      <div class="input-group medium w-full md:max-w-[420px] mx-auto pl-4 py-1.5 pr-2.5 rounded-[100px] wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        <div class="input-group-addon inline-flex items-center" data-align="inline-start">
          <i class="hgi hgi-stroke hgi-mail-02 text-2xl"></i>
        </div>
        <input type="text" class="peer form-control placeholder-transparent focus:placeholder-transparent" placeholder="Enter your email" name="email" id="email">
        <label class="absolute left-12 peer-focus:left-[14px] top-1/2 -translate-y-1/2 text-xs leading-[18px] transition-all peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:text-[16px] peer-placeholder-shown:top-1/2 peer-focus:text-[12px] peer-focus:top-0 peer-[:not(:placeholder-shown)]:text-[12px] peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:left-[14px] bg-white peer-focus:px-1 peer-[:not(:placeholder-shown)]:px-1" for="email">Enter your email</label>
        <div class="input-group-addon" data-align="inline-end">
          <button class="btn btn-primary btn-medium rounded-3xl">
            Subscribe
          </button>
        </div>
      </div>
    </section>
    <!-- ========== Subscribe Section End ========== -->
    
 
 <!-- ========== Footer Section Start ========== -->
    <footer class="md:pb-15 pb-[100px] bg-primary-darker pt-40 xl:rounded-tr-[22px] xl:rounded-tl-[22px]">
      <div class="container">
        <!-- ========== Footer Top Section Start ========== -->
        <div class="pb-9 grid grid-cols-12 gap-6">
          <div class="md:col-span-12 col-span-12 xl:col-span-4 flex flex-col gap-y-6">
            <div>
              <a href="/">
                <img src="/icons/logo.png"  style="height: 54px;" alt="ClassyCotton logo">
              </a>
            </div>
            <p class="text-primary-lighter text-base">
              ClassyCotton.lk is Sri Lanka's premier destination for luxury bedding, bringing you 100% pure cotton sheets, authentic high-thread-count Egyptian cotton collections, and premium bedroom essentials, delivered directly 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/wasp.forclassypeople/" 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/classy_cotton_by_wasp/" 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/@classycotton7" 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/classycottonshop/" target="_blank"><i class="hgi hgi-stroke hgi-youtube text-2xl text-white"></i>
              </a>
            </div>
          </div>
          <div class="md:col-span-6 col-span-12 xl:col-span-2">
            <h5 class="text-primary-lighter pb-6 border-b border-[rgba(145,158,171,0.24)]">
              Quick Links
            </h5>
            <ul class="flex flex-col gap-y-1.5 pt-4">
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/shop" class="text-primary-lighter font-semibold hover:underline">Shop</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/about-us" class="text-primary-lighter font-semibold hover:underline">About Us</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/brand" class="text-primary-lighter font-semibold hover:underline">Brands</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/happy-customer" class="text-primary-lighter font-semibold hover:underline">Happy Customers</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/signin" class="text-primary-lighter font-semibold hover:underline">Sign In</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/register" class="text-primary-lighter font-semibold hover:underline">Register</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/terms-and-conditions" class="text-primary-lighter font-semibold hover:underline">Terms &amp; Conditions</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/privacy-policy" class="text-primary-lighter font-semibold hover:underline">Privacy Policy</a>
              </li>
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/return-and-refund-policy" class="text-primary-lighter font-semibold hover:underline">Return &amp; Refund Policy</a>
              </li>
            </ul>
          </div>
          <div class="md:col-span-6 col-span-12 xl:col-span-2">
            <h5 class="text-primary-lighter pb-6 border-b border-[rgba(145,158,171,0.24)]">
              Categories
            </h5>
            <ul class="flex flex-col gap-y-1.5 pt-4">
              <li class="py-1.5 flex items-center gap-x-2">
                <span class="inline-flex items-center"><i class="hgi hgi-stroke hgi-arrow-right-01 text-xl text-primary-lighter"></i>
                </span>
                <a href="/action-figure" class="text-primary-lighter font-semibold hover:underline">Action Figures</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="/anime-figure" class="text-primary-lighter font-semibold hover:underline">Anime Figures</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="/car" class="text-primary-lighter font-semibold hover:underline">Cars</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="/bike" class="text-primary-lighter font-semibold hover:underline">Bikes</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">Pannipitiya, Sri Lanka, 10230</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:+94772721449">Call Us: +94 77 272 1449</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@classycotton.lk">info@classycotton.lk</a>
              </li>
            </ul>
            <div>
              <!--<img src="assets/images/payment-methods.png" alt="payment-methods">-->
            </div>
          </div>
        </div>
        <!-- ========== Footer Top Section End ========== -->

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

	
	 <!-- Global JS -->
    

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