
/* ======================================================================================================================================================
# Responsive
====================================================================================================================================================== */
	
	
	
	@media only screen and (min-width: 1361px) {
	
		#top .category-horizontal ul.category_list {
			li a {min-height: 375px;}
			li .cat_img {position: absolute !important; top: 50%; right: min(3.5vw, 3rem); transform: translateY(-45%); transition: right 0.5s;}
			li:hover .cat_img {right: 1rem;}
		}
		
	}
	
	
	@media only screen and (max-width: 1360px) {
		
		#top .category-horizontal ul.category_list {
			
			li .cat_img {margin-bottom: min(4.5vh, 60px);}
			
		}
	
	}
	
	
	@media only screen and (min-width: 990px) {
		
		#top .category-horizontal ul.category_list {
			margin: 0 !important; grid-template-columns: repeat(3, 1fr);
			li .cat_img img {height: 185px;}
		}
	
	}
	
	@media only screen and (max-width: 989px) {
		
		.responsive #top .category-horizontal ul.category_list {
			li .cat_img img {height: 120px;}
		}
		
	}
	
		
	@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);
		}
						

			
	}
		

	@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;
			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.5);}
			
			li .cat_description {font-size: 13px;}

		}
		
		
	}
	
	#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 #e5e5e5; border-bottom: solid 1px #e5e5e5; transition: all 0.5s ease;}
		li:nth-child(2) {background: #f5f5f5;}
		li:first-child {border-left: none;}
		li:hover {background: #fafafa;}
		
		li a {display: flex; padding: min(4vh, 3rem) min(3vw, 2.575rem); flex: 1; flex-direction: column;}
		li a:hover {font-weight: 500; color: #1a1a1a;}
		
		li .cat_subname {line-height: 1.4; font-size: 16px; font-weight: 500; color: #e81219; z-index: 5;}
		li .cat_name {
			position: relative; margin-bottom: min(4.5vh, 60px); width: 100%; line-height: 1.3; font-size: clamp(18px, 1vw + 10px, 26px); font-weight: 600; color: #1a1a1a; z-index: 5;
			span {font-weight: 400; color: #6a6a6a;}
		}
	
		li .cat_description {margin-top: auto; line-height: 1.4; font-size: 16px; font-weight: 500; color: rgba(0,0,0,0.5); z-index: 5;}
		
		
		li .cat_img {
			position: relative; display: flex; padding: 0; transition: all 0.5s ease; z-index: 0;
			img {object-fit: contain;}
		}
		li:hover .cat_img {}
		
		li .empty-img {font-size: 12px;}
		
		

		
		
		li button {
			position: relative; margin: min(3vw, 2.575rem) 0 0 0; padding: 0; max-width: 180px; height: 36px; background: transparent;
			font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; text-transform: uppercase; border: none; transition: all 0.5s; overflow: hidden;

			span {
				position: relative; display: inline-block; transform: translateX(0); color: #1a1a1a; transition: transform 0.5s ease, color 0.5s ease, padding 0.5s ease; z-index: 2;

				&:before, &:after {content: ''; position: absolute; top: 50%; width: 74px; height: 1px; background: #1a1a1a; transition: transform 0.5s ease, background 0.5s ease; z-index: 1;}
				&:before {right: 100%; margin-right: 1rem; transform: translateY(-50%) scaleX(0); transform-origin: right center;}
				&:after {left: 100%; margin-left: 1rem; transform: translateY(-50%) scaleX(1); transform-origin: left center;}
			}

			&:hover span {
				padding-right: 1rem; transform: translateX(calc(180px - 100% - 9px)); color: #e81219;
				&:before {transform: translateY(-50%) scaleX(1); background: #e81219;}
				&:after {transform: translateY(-50%) scaleX(0);}
			}
			&:after {content: '\e885'; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: 'entypo-fontello'; font-size: 22px; z-index: 1;}
		}
						

		
		
				
		li span.image-overlay {display: none !important;}
		
	}

