:root{
	--category-gap:20px;
}

.categoryList{flex-wrap:wrap;gap:40px var(--category-gap);}
.categoryList .categoryList__el{position:relative;width:calc(100% / 4 - var(--category-gap));padding:5px;border:2px solid transparent;border-radius:var(--border-radius-min);overflow:hidden;transition:all .4s;}
.categoryList .categoryList__el:hover{background:#f9f9f9;}
/* .categoryList .categoryList__el:after{content:'';position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;background-size:cover;filter:invert(1);background-color:rgb(242,234,221,0.05);opacity:0;transition:all .4s;} */
.categoryList .categoryList__el .categoryList__img{height:420px;display:flex;justify-content:center;overflow:hidden;}
.categoryList .categoryList__el img{height:100%;width:auto;max-width:unset;transition:all .4s;}
.categoryList .categoryList__el .categoryList__content{padding:0 5px;}
.categoryList[data-column="6"] .categoryList__el{width:calc(100% / 6 - var(--category-gap));}
.categoryList[data-column="5"] .categoryList__el{width:calc(100% / 5 - var(--category-gap));}
.categoryList[data-column="3"] .categoryList__el{width:calc(100% / 3 - var(--category-gap));}
.categoryList[data-column="2"] .categoryList__el{width:calc(100% / 2 - var(--category-gap));}
.categoryList__image{max-width:100%;}
.categoryList__title{font-size:1.2rem;font-weight:400;font-family:var(--font-title);text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:55px;overflow:hidden;}
.categoryList__short_text{color:#717171;font-weight:400;}
.categoryList__price{font-size:1.6rem;font-weight:500;font-family:var(--font-title);color:var(--main-color);}
.categoryList__price .discountPerc{display:inline-flex;font-size:.8rem;color:#fff;background:#dd0000;padding:4px 10px;border-radius:var(--border-radius-btn);}
.categoryList__price .tr{text-decoration:line-through;color:#999;font-weight:300;font-size:1.3rem;}

.categoryList__variations span{display:inline-flex;padding:6px 14px;border-radius:6px;background:#efefef;font-weight:500;cursor:pointer;}
.categoryList .categoryList__el:hover{border:2px solid var(--border);transition:all .4s;}
.categoryList .categoryList__el:hover img{transform:scale(0.95);transition:all .4s;}
.categoryList .categoryList__el:hover:after{opacity:0.5;transition:all .4s;}

.categoryList__badge{position:absolute;top:20px;right:20px;font-size:1rem;text-transform:uppercase;padding:6px 14px;z-index:+10;border-radius:var(--border-radius);}
.categoryList__badge.green{background:var(--green);color:#fff;}

.filter{width:100%;padding:0 1%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:calc(var(--main-margin) / 2);transform:translateY(0px);transition:all .4s;}
.filter select{width:fit-content;max-width:15vw;border-radius:var(--border-radius-btn);padding:10px 18px;margin:0;font-size:0.95rem;font-family:var(--font-title);border:2px solid var(--second-color);}
.filter select.subcategory_select{max-width:12vw;}
.filter.fixed{position:fixed;top:25px;left:0;z-index:5;transform:translateY(25px);transition:all .4s;}
.filter::-webkit-scrollbar{display:none;}

.gocheckout{background:var(--main-color);color:#fff;width:100%;transition:all .4s;}
.gocheckout:hover{background:var(--main-hover);transition:all .4s;}
.iva_label{font-size:0.9rem;}

.shimmer{position:relative;width:100%;min-height:20px;overflow:hidden;background:#d5d5d5;}
.shimmer{display:inline-block;width:120px;}
.shimmer::before{content:"";position:absolute;background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%);height:100%;width:100%;z-index:1;animation:shimmer 1s infinite;}

@keyframes shimmer {
	0% {
		transform:translateX(-100%);
	}
	100% {
		transform:translateX(100%);
	}
}

@media screen and (max-width:900px){
	:root{
		--category-gap:10px;
	}
	
	div.filter{flex-wrap:nowrap;overflow-x:scroll;justify-content:flex-start;gap:8px;}
	div.filter select{max-width:220px;font-size:0.8rem;padding:10px 12px;}
	div.filter.fixed{top:0;margin-top:0;}
	div.filter select.subcategory_select{max-width:120px;}
	
	.categoryList{gap:20px var(--category-gap)!important;}
	.categoryList .categoryList__el{width:calc(100% / 2 - var(--category-gap));padding:0;border:0;}
	.categoryList .categoryList__el .categoryList__img{height:200px;}
	.categoryList__title{font-size:1rem;}
	.categoryList__price{font-size:1.3rem;}
	
	.categoryList__short_text{font-size:0.85rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
	.categoryList__variations span{font-size:0.85rem;padding:4px 8px;}
}