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

			
	}
		

	@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-top: 1rem; padding-bottom: 1rem;
			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% / 1.375);}
			
			li .cat_img {margin-bottom: 0.5rem;}
			li .cat_name {font-size: 20px ;}
			li .cat_description {font-size: 13px;}
			li button {min-width: 46px; width: 46px; height: 46px;}

			
		}
		
		
	}
	
	#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: 0; width: 100%;
		
		li {display: flex; margin: 0; padding: 0; background: #fff; border-left: solid 1px #f7f7f7; transition: all 0.3s ease;}
		li:first-child {border: none;}
		li:hover {background: #ffc701; border-color: #ffc701}
		
		li a {display: flex; padding: min(4vh, 3rem) min(3.5vw, 3rem); flex: 1; flex-direction: column; gap: min(4.5vh, 60px);}
		li a:hover {font-weight: 500; color: #1a1a1a;}
		
		li .cat_img {
			position: relative; display: flex; padding: 0; width: 60px; height: 60px; opacity: 0.35; transition: all 0.3s ease;
			img {object-fit: contain;}
		}
		li:hover .cat_img {opacity: 1;}

		
		li .empty-img {font-size: 12px;}
		
		li .cat_name {
			position: relative; width: 100%; line-height: 1.3; font-size: 26px; font-weight: 600; color: #1a1a1a;
			span {font-weight: 400; color: #6a6a6a;}
		}
	
		li .cat_description {line-height: 1.4; font-size: 14px; font-weight: 500; color: rgba(0,0,0,0.35); text-align: justify;}

		li button {
			display: flex; margin: 0; padding: 0; min-width: 56px; width: 56px; height: 56px; background: #fff; font-size: 0; color: #1a1a1a; cursor: pointer; justify-content: center; align-items: center;
			border: none; box-shadow: inset 0px 0px 0px 2px #e1e1e1; border-radius: 50px; transition: all 0.3s ease;
			&:after {font-family: 'entypo-fontello'; content: '\e816'; font-size: 24px;}
			&:hover {background: #1a1a1a; color: #fff; box-shadow: none;}
		}
		li:hover button {box-shadow: none;}
		
		
		li span.image-overlay {display: none !important;}
		
		
	}
	

	

	

