* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	1margin: 0;
	1padding: 0;
	1box-sizing: border-box;
	font-family: Arial, sans-serif;
	
}

body {
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Offset body padding to account for fixed headers (40px + 50px = 90px) */				
	1background-color: #f4f7f6;
	1display: flex;
	1justify-content: center;
	1align-items: center;
	1min-height: 100vh;
	
}
			
.content{
	max-width:1440px;
	margin:0 auto;
	width:100%;
	padding :0 15px;
}


body {
	1background-color: #f4f4f4;

}

	
	* {
	  box-sizing: border-box;
	  margin: 0;
	  padding: 0;
	}


	html, body {
	  height: 100%;
	}

	body {
	  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	  color: #333;
	  background-color: #f8f9fa;
	  line-height: 1.6;

	  
	  display: flex;
	  flex-direction: column;
	  min-height: 100vh;
	}

	a {
	  text-decoration: none;
	  color: inherit;
	}	
	.site-header {
		background-color: #ffffff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		position: sticky;
		top: 0;
		z-index: 1000;
		width: 100%;
	}

	.header-container {
		1max-width: 1200px;
		max-width: 1440px;
		margin: 0 auto;
		padding: 0.75rem 1.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	
	.header-left {
	  display: flex;
	  align-items: center;
	  gap: 0.5rem;
	}

	.logo {
	  font-size: 1.5rem;
	  color: #007bff;
	  display: flex;
	  align-items: center;
	}

	.site-name {
	  font-size: 1.5rem;
	  font-weight: 700;
	  color: #222;
	}

	
	.header-right {
	  display: flex;
	  align-items: center;
	  gap: 1rem;
	}

	.cart-btn {
	  display: flex;
	  align-items: center;
	  gap: 0.4rem;
	  position: relative;
	  font-weight: 500;
	  padding: 0.5rem;
	  color: #444;
	}

	.cart-badge {
	  background-color: #dc3545;
	  color: #fff;
	  font-size: 0.75rem;
	  font-weight: bold;
	  padding: 2px 6px;
	  border-radius: 50%;
	}

	
	.btn {
	  padding: 0.5rem 1rem;
	  border-radius: 6px;
	  font-weight: 600;
	  font-size: 0.9rem;
	  transition: all 0.2s ease-in-out;
	  text-align: center;
	}

	.btn-secondary {
	  color: #007bff;
	  border: 1px solid #007bff;
	  background-color: transparent;
	}

	.btn-secondary:hover {
	  background-color: #f0f7ff;
	}

	.btn-primary {
	  background-color: #007bff;
	  color: #ffffff;
	  border: 1px solid #007bff;
	}

	.btn-primary:hover {
	  background-color: #0056b3;
	}

	
	.mobile-dots-btn {
	  display: none;
	  background: none;
	  border: none;
	  font-size: 1.5rem;
	  color: #444;
	  cursor: pointer;
	  padding: 0.25rem 0.5rem;
	}
	
	

	
	@media (max-width: 330px) {
	
		.header-left {
		  gap: 0.2rem;
		}
		.logo {
		  font-size: 1.1rem;				  
		}
		.site-name {
		  font-size: 1.1rem;				 
		}
		.header-container {				  
		  padding: 0.75rem 1.0rem;				 
		}
		.header-right {
		  gap: 0.5rem;
		}				
	}
	
	@media (max-width: 768px) {
	
		.mobile-dots-btn {
			display: block;
		}

		.header-container {
			flex-wrap: wrap;
		}

	  	
	  	.header-right {
			display: flex;
			flex-direction: column;
			width: 100%;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
			opacity: 0;
			gap: 0.75rem;
	  	}

	  	
	  	.header-right.active {
			max-height: 300px;
			opacity: 1;
			padding-top: 1rem;
			padding-bottom: 0.5rem;
			border-top: 1px solid #eee;
			margin-top: 0.5rem;
	  	}

	  	.header-right .nav-item {
			width: 100%;
			justify-content: center;
	 	}

	  	.cart-btn {
			justify-content: center;
	  	}

	  	
	  	.footer-container {
			flex-direction: column;
			text-align: center;
	  	}
	}	.breadcrumb-btn {
	  background: none;
	  border: none;
	  font-size: 1.25rem;
	  color: #555;
	  cursor: pointer;
	  padding: 0.25rem 0.5rem;
	  border-radius: 4px;
	  transition: background 0.2s;
	}

	.breadcrumb-btn:hover {
	  background-color: #f0f0f0;
	}
		/* ================================
		   3. PAGE CONTENT (MAIN)
		   ================================ */
		main {
			padding: 2rem 1.5rem;				
			flex: 1; 
		}			
		.main-container {
			max-width: 1440px;
			margin: 0 auto;
		}	
		
	#btn-close-leftpanel{
		1padding:20px;
	}
	@media (max-width: 768px) { 
		.lp{
			display:none;
		}
	}
	
	.leftpanel-hide{
		display:none;
	}	
		
	
	@media (min-width: 768px) { 
		.leftpanel-onrender{
			display:block;
		}
		
		#leftpanel{
			position:static;				
			width:300px;
			
		}
		#btn-close-leftpanel{
			display:none;
		}
	}
	@media (max-width: 768px) {
	
		
		#leftpanel-content{
			padding:0 10px;
			position:fixed;top:0;
			1bottom:0;
			left:0;
			width:90%;
			max-width:400px;
			background-color:white;
			z-index:1100;				
			height: 100vh;			
			overflow-y: auto;
			overflow-x: hidden;	
			overscroll-behavior: contain; 
		}
		#btn-close-leftpanel{
			/*
			padding: 5px 10px;
			1position: absolute;
			right: -31px;
			top: 10px;
			z-index: 10000;
			background-color: white;
			border: 0;
			*/
			border:1px solid grey; 
			border-radius:5px;
			padding-left:15px; 
			padding-right:15px;
			1padd1:2px 10px 2px 10px;
			background-color:#eee;
			flex: 0 0 auto;
			cursor:pointer;			
		}
		

		
		#leftpanel-bg{
			position:fixed;top:0;
			1height:100vh;
			bottom:0;
			left:0;right:0;				
			background-color:grey;
			z-index:1000;
			overflow-y: hidden;
			overflow-x: hidden;	
			overscroll-behavior: contain; 
		
		}
		
	}	.filter-panel{
		paddi1ng:0 10px;			
	}						
			.filter-field{
				/* #b2bbc26e;*/
				/*background-color:#dae0e66e;
				border-radius:5px;
				padding:10px;
				margin-bottom:15px;
				border-bottom:3px solid grey;
				border-right:3px solid grey;
				border-left:1px solid grey;
				border-top:1px solid grey;*/
				padding-bottom:3rem;
			}
			.filter-field .label{
				font-weight:600;
				font-size:1.2rem;
				/*background-color:#007bff;*/
				background-color:#68aaf1;
				color:white;
				padding:5px 10px;
				margin:5px 0 10px 0;
			}
			.left-panel-content{
				background-color:white;
				padding:20px;
				border-right:1px solid lightgrey;
				font-size:1.2rem;
			}
			ul.parent-node{
				padding-left:0px;
			}
			ul.parent-node li{
				list-style:none;
			}
			ul.node{
				padding-left:15px;
			}
			ul.node li{
				list-style:none;
			}
			li.selected-item a{
				color:black;
				font-weight:bold;
			}
			ul.child-nodes{
				padding-left:15px;
			}
				.radiobtn{
		padding:10px 0;
		/*background-color:#a1cefe;*/
		1border:1px solid lightgrey;
		border-radius:15px;/*#747474  68aaf1*/
	}
	.radiobtn-option{
		display:inline-block;
		1width:32%;
		text-align:center;
		cursor: pointer;
		border:1px solid lightgrey;
		border-radius:15px;
		padding:10px 0px;
	}			
	.selected-radiobtnoption{
		background-color:#007bff;/*white*/
		color:white;
		font-weight:500;
	}
		
		#btn-apply-filter{
			color:#777;padding:5px 25px;font-size:1.5rem;background-color: #002f34;color:white;
			}
		
			.applied-filters{
				padding:0 5px ;
			}
			.applied-filter{								
				border: 1px solid #002f34;
				border-radius:5px;
				padding-left:6px;

				display:inline-block;
				color:#444;
				font-size:12px;
				background-color:white;
				color:black;
			}
			.applied-filter a{
				display:inline-block;
				padding:2px 5px;
				background-color: #227ebb;
				color:white;
			}
		

		
			.products{
				display:flex; 
				flex-wrap: wrap;
				gap: 1%;
				container-type: inline-size;
				background-color:white;
			}
	
			.product-wrapper{				
				flex: 0 0 100%;
				1padding:5px;
				1background-color:lightgreen;
				padding:10px;
				min-width:0;
			}
			.product{
				1background-color1:lightblue;
				padding:10px;
				box-shadow: 0 2px 5px rgba(0,0,0,0.2);				
		
			}
			@container (min-width: 550px) and (max-width:749px) {
				.product-wrapper{
					flex: 0 0 49.5%;
					min-width:0;
			
				}
			}
			
			@container (min-width: 750px) and (max-width:1030px) {
				.product-wrapper{
					flex: 0 0 32.66%;	
					min-width:0;
				}
			}
			/*1119px*/
			@container (min-width: 1030px) and (max-width:1330px) {
				.product-wrapper{
					flex: 0 0 24.25%;
					min-width:0;
				}
			}
			
			@container (min-width: 1330px) {				
				.product-wrapper{
					flex: 0 0 19.2%;			
				}
			}
			
			
			.store-state {
				text-align: center;
				font-weight: bold;
				padding: 5px 10px;		 
				box-shadow: 0 2px 5px rgba(0,0,0,0.2);						
				border: 1px solid #bbf7d0;
				font-size:0.8rem;
				display:inline-block;
			}
			
			.badge {
			  position: absolute;			  		 			  		 
			  color: white;
			  text-align: center;
			  font-weight: bold;
			  padding: 5px 0;		 
			  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
			  z-index: 2;
			
			}
			.right-badge {		
				width: 150px;	
				top: 20px;	
				right: -35px;  			 
				transform: rotate(+45deg);		
				background-color: #ff0000; 
			}
			.left-badge {	
				width: 150px;	
				top: 30px;	
				left: -35px;  			 
				transform: rotate(-45deg);
				
				color:black;
			}
			.out-of-stock{
				background-color: pink;
				color:red; 
			}
			.in-stock{
				background-color: #00ff00;
				color:black;
			
			}

			.bottom-badge{
				width:80px;	
				bottom: 10px;	
				right:0px;
				background: #dcfce7;
				color: var(--success);
				border: 1px solid #bbf7d0;
			}
			
			.two-line-collapse {
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  -webkit-box-orient: vertical;  
				  overflow: hidden;
				}
			
				a.btn:hover{
					text-decoration:none;
					color:white;
				}
			
				.product{1background-color:#eee;}

				.prod-name{
					font-size:0.8rem;
					display: -webkit-box;
				  -webkit-line-clamp: 2;
				  -webkit-box-orient: vertical;  
				  overflow: hidden;
				  min-height:46px;
				}
				.prod-offer-price{
					font-size:1.2rem;
				}
				.prod-img{}
				/*--*/			
					.product{
					/*	height:270px;
						border:1px solid lightgrey;
						font-size:1.1rem;*/
					}
					.product:hover{
						 box-shadow: 0 2px 5px rgba(0,0,0,0.2);					
					}
					
					.cover-img{
						height:150px;
						display: flex;align-items: center;
						height1: 200px;
						justify-content: center;
						background-color:white;
						height:100%;max-width:100%;
					}
					.detail{
						text-align:left;
						height:100px;
						background-color1: #f0f0f0;
						padding:5px;
						border-top:1px solid lightgrey;
					}
					.price{
						font-weight:bold;
						color:	#f57224;
						font-size:1.4rem;
					}
					a.product-link , a.product-link:hover{
						text-decoration:none;
						color:#555;
						1background-color:yellow;
					}
					
					
					.store-open {
						background: #dcfce7;
						color: var(--success);
						border: 1px solid #bbf7d0;
					}
					.store-closed { 
						background: #fee2e2; 
						color: var(--danger); 
						border: 1px solid #fecaca; 
					}
		
					.state-badge {
						padding: 6px 14px;
						border-radius: 50px;
						font-size: 0.75rem;
						font-weight: 700;
						display: inline;
					}

					.name{
						font-size:1.0rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2; /* Number of lines to show */
						-webkit-box-orient: vertical;
						height:50px;
					}
					.delivery-loc{
						display:inline-block;
						padding:0px 10px;
						1border:1px solid grey;
						margin:0px 5px 5px 0;
						1border-radius:5px;
					}
		:root {
			--star-size: 15px;
			--star-color: silver;
			--star-background: #fc0;
		}

		.Stars {
			--percent: calc(var(--rating) / 5 * 100%);

			display: inline-block;
			font-size: var(--star-size);
			font-family: Times; // make sure ★ appears correctly
			line-height: 1;


			&::before {
				content: '★★★★★';
				letter-spacing: 3px;
				background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}	
			
			.paging{
				padding:10px 0;
			}
			.paging-bullet{
				text-align:center;
				padding:5px 0;
				border:1px solid silver;
				margin-right:10px;
				width:35px;
				display:inline-block;
			}

			.paging-selected-bullet{
				text-align:center;
				padding:5px 0;
				background-color:#ddd;
				border:1px solid silver;
				margin-right:10px;
				width:35px;
				display:inline-block;
			}

		/* Shared Wrapper Style */
.scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  1width: 300px; /* Adjust wrapper width as needed */
  1border: 1px solid #ccc;
  padding: 8px;
  1margin-bottom: 16px;
  font-family: sans-serif;
}

/* Shared Content Style */
.scroll-content {
  white-space: nowrap;      /* Keeps text strictly on one line */
  overflow-x: auto;         /* Enables horizontal scrolling */
  scrollbar-width: none;    /* Firefox: hides scrollbar */
  -ms-overflow-style: none; /* IE/Edge: hides scrollbar */
  scroll-behavior: smooth;  /* Smooth scrolling effect */
}

/* Chrome, Safari, Opera: hides scrollbar */
.scroll-content::-webkit-scrollbar {
  display: none;
}

/* Shared Arrow Styles */
.scroll-arrow {
  display: none;             /* Hidden by default */
  font-size: 12px;
  color: #555;
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
}

.scroll-arrow:hover {
  color: #000;
}

/* Dynamic Arrow Visibility */
.scroll-wrapper.show-left .left-arrow {
  display: inline-block;
}

.scroll-wrapper.show-right .right-arrow {
  display: inline-block;
}

	/* ================================
	   4. FOOTER STYLES
	   ================================ */
	.site-footer {
	  background-color: #222222;
	  color: #cccccc;
	  padding: 1.5rem 0;
	  font-size: 0.9rem;
	}

	.footer-container {
	  max-width: 1440px;
	  margin: 0 auto;
	  padding: 0 1.5rem;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-wrap: wrap;
	  gap: 1rem;
	}

	.footer-links {
	  display: flex;
	  gap: 1.5rem;
	}

	.footer-links a {
	  color: #cccccc;
	  transition: color 0.2s;
	}

	.footer-links a:hover {
	  color: #ffffff;
	}