.home-woo-wrap{
display:flex;
gap:30px;
}

.home-woo-cats{
width:280px;
}

.home-woo-cats ul{
list-style:none;
padding:0;
margin:0;
}

.home-woo-cats li{
padding: 10px 5px 10px 15px;
cursor:pointer;

font-size: 16px;
color: var(--e-global-color-text);
background-color: #DFDFDF;
margin-bottom: 10px;
border-radius: 8px;
margin-right: 10px;
}

.home-woo-cats li.active{
font-weight:bold;
color: var(--e-global-color-secondary);
background-color: var(--e-global-color-primary);
}

.cat-children-wrap{
display:none;
}

.child-cats{
list-style:none;
margin:0;
padding-left:15px;
}

.cat-child{
padding:8px 15px;
font-size:14px;
background:#f3f3f3;
margin: 0px 10px 0px 0px !important;
padding: 10px !important;
}

.cat-row{
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}

.cat-row .toggle-icon {
    padding: 0 10px;
    font-size: 25px;
    line-height: 25px;
	margin-top: -5px;
}

.home-woo-products{
flex:1;
}

.home-woo-products ul.products{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
list-style:none;
padding:0;
}

.home-woo-products li.product{
border:1px solid #eee;
padding:10px;
border-radius:8px;
background:#fff;
}

.home-woo-products li.product h3{
    margin-top:15px;
    font-size: 18px
}

.home-woo-products img{
width:100%;
height:auto;
}

.woo-loadmore{
margin-top:20px;
padding:10px 20px;
cursor:pointer;
}

/* skeleton loading */

.home-woo-skeleton{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.skeleton-item{
background:#fff;
border-radius:10px;
padding:10px;
}

.skeleton-img{
width:100%;
height:180px;
background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
background-size:200% 100%;
animation:skeleton 1.2s infinite;
border-radius:8px;
}

.skeleton-title{
height:14px;
margin-top:10px;
background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
background-size:200% 100%;
animation:skeleton 1.2s infinite;
}

.skeleton-price{
height:12px;
width:60%;
margin-top:8px;
background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
background-size:200% 100%;
animation:skeleton 1.2s infinite;
}

@keyframes skeleton{
0%{background-position:-200px 0}
100%{background-position:200px 0}
}


/* ===============================
RESPONSIVE
=============================== */

/* tablet */
@media (max-width:1024px){

.home-woo-wrap{
flex-direction:column;
}

.home-woo-cats{
width:100%;
}

.home-woo-products ul.products{
grid-template-columns:repeat(2,1fr);
}

.home-woo-skeleton{
grid-template-columns:repeat(2,1fr);
}

}


/* mobile */
@media (max-width:600px){

.home-woo-cats ul{
display:flex;
overflow-x:auto;
border-bottom:1px solid #eee;
}

.home-woo-cats li{
border-bottom:none;
border-right:1px solid #eee;
white-space:nowrap;
}

.home-woo-products ul.products{
grid-template-columns:1fr;
}

.home-woo-skeleton{
grid-template-columns:1fr;
}

}