/* ======================================================================================================================================================
# Responsive
====================================================================================================================================================== */
	
	
	@media only screen and (min-width: 1361px) {
		
		#top .category-horizontal ul.category_list {grid-template-columns: repeat(6, 1fr);}
		
	}
	
	
	@media only screen and (min-width: 990px) and (max-width: 1360px) {
		
		#top .category-horizontal ul.category_list {grid-template-columns: repeat(3, 1fr);}
		
		.responsive #top .category-horizontal ul li .cat_img {margin-bottom: 1.275rem; width: 100px; height: 100px;}
		.responsive #top .category-horizontal ul li .cat_img img {height: 100px;}
		
	}
	
	
	@media only screen and (min-width: 990px) {
		
		#top .category-horizontal ul.category_list {margin: 0 !important; gap: 1rem;}
	
	}
	
	
		
	@media only screen and (min-width: 480px) and (max-width: 989px) {
				
		.responsive #top .category-horizontal ul.category_list {margin: 0 0 15px 0 !important; grid-template-columns: repeat(3, 1fr); gap: 1rem;}
		.responsive #top .category-horizontal ul li .cat_name {font-size: 14px;}
			
				
		.responsive #top .category-horizontal ul li .cat_img {margin-bottom: 1rem; width: 90px; height: 90px;}
		.responsive #top .category-horizontal ul li .cat_img img {height: 90px;}
			
	}
		

	@media only screen and (max-width: 768px) {
		
		
		.responsive #top .category-horizontal {margin-bottom: 0 !important;}
		.responsive #top .category-horizontal ul.category_list {
			display: flex !important; margin: 0; padding-bottom: 1rem; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #1a1a1a #f1f1f1;
			
			li.cat_item {padding: 0; min-width: calc(100% / 2.5);}
			
			li .cat_img {margin-bottom: 0.5rem; width: 70px; height: 70px;}
			li .cat_name {font-size: 12px ;}
			li button {padding: 0.575rem 1rem; height: auto; line-height: 1; font-size: 12px;}
			
		}
		
		


		

		
	}
	
	
	#top .category-horizontal ul li span.image-overlay {display: none; visibility: hidden;}
	
	
/* ======================================================================================================================================================
# Home Products Small Category
====================================================================================================================================================== */
	

	
		
		
    /* Horizontal slider styling */
	#top .category-horizontal-slider-container {position: relative;}
	
	#top .category-horizontal ul.category_list {
		
		display: grid; margin: 0 0 15px 0; padding: 2vh 0 0 0; width: 100%;
		
		li {display: flex; margin: 0; padding: 0; background: #f7f7f7; border-radius: 1.275rem; transition: all 0.3s ease;}
		li:hover {background: #fff; box-shadow: 0 0 25px 0 rgba(0,0,0,0.1);}
		
		li a {display: flex; padding: min(3.5vw, 1.5rem); flex: 1; flex-direction: column; align-items: center; text-align: center; overflow: visible !important;}
		li a:hover {font-weight: 500; color: #1a1a1a;}
		
		li .cat_img {position: relative; display: flex; margin-bottom: 1.575rem; padding: 0; width: 120px; height: 120px; align-items: center; justify-content: center; transition: all 0.3s ease;}
		li:hover .cat_img {scale: 1.1;}
		li .cat_img img {object-fit: contain; height: 120px;}
		
		li .empty-img {font-size: 12px;}
		
		li .cat_name {position: relative; margin-bottom: 1rem; width: 100%; line-height: 1.3; font-size: 16px; font-weight: 600; color: #3a3a3a;}
		li .cat_name:before {content: ''; position: absolute; top: -0.5rem; left: 50%; margin-left: -7px; width: 14px; height: 2px; background: #004cff;}
		li .cat_name span {font-weight: 400; color: #6a6a6a;}

		li button {
			min-width: auto; background: #fff; font-family: inherit; font-size: clamp(12px, 1.1vw, 14px); font-weight: 500; color: #272727; cursor: pointer; 
			border: none; box-shadow: inset 0px 0px 0px 1px #e1e1e1; border-radius: 50px; transition: all 0.3s ease;
		}
		li:hover button {background: #004cff; color: #fff; box-shadow: none;}
		li button:hover {background: #272727; color: #fff; box-shadow: none;}
		
		
		li span.image-overlay {display: none !important;}
		
		
	}