@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.products_container{
    width: 100%; max-width: 1400px;
    display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
    margin:0; padding: 20px 0; gap:4%;
}

.aside_products_container{
    flex:1 1 22%;
}

.aside_products_container > h4{
    margin: 0; color:var(--menubackground); font-weight: 500;
    padding:10px 0; border-bottom: 1px var(--menubackground) solid;
    transition: all .2s linear;
}

.aside_products_container > nav{width: 100%;}
.aside_products_container > nav > ul{ 
    width: 100%; display: flex; flex-direction: column;
    padding: 0; margin: 0; list-style: none;
}

.aside_products_container > nav > ul > li{
    border-bottom: 1px var(--menubackground) dashed;
    width: 100%;
    transition: all .2s linear;
}

.aside_products_container > nav > ul > li > a{
    font-size:14pt; color:var(--menubackground); position: relative;
    transition: all .2s linear;
    width: 100%; display: inline-block;
    padding:10px 15px;
}

.aside_products_container > nav > ul > li > a > .menu_arrow{
    width:27px; height:27px; 
    border-radius: 50%; border:1px var(--menubackground) solid;
    position: absolute; top:50%; left: calc(100% - 42px ); 
    transform: translateY(-50%);
    display: inline-flex; justify-content: center; align-items: center;
    font-family: 'Poppins',sans-serif;
    font-weight: 400; font-style: normal;
}

.aside_products_container > nav > ul > li:hover{background-color: var(--menubackground);}
.aside_products_container > nav > ul > li:hover > a{color:#fff;}
.aside_products_container > nav > ul > li:hover > a > .menu_arrow{border:1px #fff solid; color:#fff;}
.aside_products_container > nav > ul > li.hover{background-color: var(--menubackground);}
.aside_products_container > nav > ul > li.hover > a{color:#fff;}
.aside_products_container > nav > ul > li.hover > a > .menu_arrow{border:1px #fff solid; color:#fff;}

.dist_page{ 
    width: 100px; margin:5px 0 20px; padding:5px 0 ; 
    border-top:1px var(--green) solid;
    font-size:17pt;
}

.main_products_container{
    flex:1 1 78%;
}

.main_products_container > ul{
    width: 100%; display: flex; flex-direction: row;
    justify-content: flex-start; align-items: stretch;
    list-style: none; margin: 0; padding: 0;
    flex-wrap: wrap; gap:30px;
}

.main_products_container > ul > li{
    flex:0 0 calc(100% / 3 - (40px / 3 * 2));
}

.main_products_container > ul > li > a{
    width: 100%; 
    transition: all .3s linear; box-shadow: 0 0 9px #ddd;
    border:5px #fff solid; border-radius: 15px;
    display: block; height: 100%;
}

.main_products_container > ul > li > a > .products_imgsarea{
    width: 100%; display: block; 
    position: relative;
    border-radius: 0px;
}

.main_products_container > ul > li > a > .products_imgsarea::after{
    content:""; position: relative; display: block;
    width: 100%; padding-top: 75%;
    left:0; top:0;

}

.main_products_container > ul > li > a > .products_imgsarea > img{
    width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%); display: block;
    transition: all .2s linear;  border-top-left-radius: 10px; border-top-right-radius: 10px;
}

.main_products_container > ul > li > a > h4{
    text-align: center; margin:10px auto 0; padding:0px 5%;
    font-weight: 400; transition: all .2s linear;     
    position: relative; letter-spacing: 1pt;
    color:var(--black);
}

.main_products_container > ul > li > a > h4::after{
    content: ""; display: block; width: 30%; position: absolute;
    top: calc(100% + 10px); left:50%; transform: translateX(-50%);
    border-bottom: 1px var(--green) solid; height: 1px;
}

.main_products_container > ul > li:hover > a{
    border:5px var(--menubackground) solid;
    box-shadow: 0 0 9px #555;
}

.main_products_container > ul > li:hover > a > .products_imgsarea > img{
    transform:translate(-50%,-50%);
}

.main_products_container > ul > li:hover > a > h4{
    font-weight: 600;
}

.main_products_container > ul > li:hover > a > h4{
    color:var(--menubackground)
}

.main_products_container > ul > li > a > .products_text{
    font-size:13pt;
    width: 100%; text-align: center; 
    padding: 0px 5%; margin:20px 0 20px 0;
    display: -moz-box; display: -webkit-box;
    -webkit-box-orient:vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color:var(--drakCoffee);
}

@media  screen and ( max-width:1279px ) {
    .main_products_container > ul{gap:3%}
    .main_products_container > ul > li{
        flex : 0 0 calc(100% / 3 - (3% / 3 * 2))
    }
    .main_products_container > ul > li > a > h4{font-size:16pt}
    .main_products_container > ul > li > a > .products_text{font-size: 12pt;}
    
}

@media screen and ( max-width:1023px ) {
    .aside_products_container > nav > ul > li > a{
        font-size:12pt;
    }

    .aside_products_container > nav > ul > li > a > .menu_arrow{
        width: 21px; height: 21px;
        left:calc( 100% - 29px );
    }

    .main_products_container > ul > li > a > h4{font-size:14pt}

    /*.aside_products_container > nav > ul > li{padding:10px 8px}*/
    .aside_products_container > nav > ul > li > a{padding:10px 8px}

    
}

@media screen and ( max-width:767px ) {
    .products_container{
        flex-direction: column; gap: 20px;
    }
    .aside_products_container{ 
        flex:100%; border:0px #c00 solid;
        width: 100%; position: relative;
    }

    .aside_products_container > nav{
        overflow: hidden; height: 0;
        position: absolute; top:100%; left:0;
        z-index: 1;
        background-color:#fff;
        transition: height .2s linear;
        display: block;
    }

    
    .aside_products_container > h4{
        background-color: var(--menuhover); color:#fff; text-align: center;
        cursor: pointer;
    }

    .aside_products_container > nav > ul > li > a { font-size:13pt; }
    .aside_products_container > nav > ul > li.hover:hover{background-color: var(--menubackground);}
    .aside_products_container > nav > ul > li.hover{background-color: var(--menubackground);}
    .aside_products_container > nav > ul > li:hover{background-color: var(--menuhover);}

    .main_products_container{
        flex: 100%; width: 100%;
    }

    .main_products_container > ul > li{ margin-bottom: 30px; }
    .main_products_container > ul > li > div{ border-width:3px }
    .main_products_container > ul > li:hover > div{ border-width:3px }

    .main_products_container > ul > li > a > .products_text{
        font-size:11pt;
    }

    


}

@media screen and ( max-width:559px ) {
    .main_products_container > ul > li{
        flex : 0 0 calc(100% / 2 - (3% / 2))
    }
}