@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Rubik:wght@300;400;500;600;700;800;900&display=swap');
:root{
    --clr-main:#4b33a8;
    --clr-white: #ececec;
    --clr-gray: rgb(219, 216, 216);
    --clr-red: #961818;
}
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}


h1, h2, h3, h4, h5, h6, p, a, input, textarea, ul{
    margin:0;
    padding: 0;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
}

.wrapper{
    display:grid;
    grid-template-columns: 1fr 4fr;
    background-color: var(--clr-main);
}
aside{
    padding:2rem;
    padding-right: 0;
    color: var(--clr-white);
    position:sticky;
    top:0;
    height:100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menu{
    display:flex;
    flex-direction: column;
    gap:1rem;
}
.logo{
    font-weight: 400;
    font-size: 1.5rem;
}
.menu-btn{
    background-color: transparent;
    border: 0;
    color:var(--clr-white);
    font-size: 1rem;
    cursor: pointer;
    display:flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    padding: 1rem;
    font-size: .84rem;   
     width: 100%;
}
.menu-btn.active{
    background-color: var(--clr-white);
    color:var(--clr-main);

    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    position: relative;
}
.menu-btn.active::before{
    content: '';
    position: absolute;
    width:1rem;
    height:2rem;
    bottom: 100%;
    right:0;
    border-bottom-right-radius: 1rem;
    box-shadow: 0 1rem 0 var(--clr-white);
    background-color: transparent;

}
.menu-btn.active::after{
    content: '';
    position: absolute;
    width:1rem;
    height:2rem;
    top: 100%;
    right:0;
    border-top-right-radius: 1rem;
    box-shadow: 0 -1rem 0 var(--clr-white);
    background-color: transparent;

}
.bi-hand-index-thumb, .bi-hand-index-thumb-fill{
    transform: rotate(90deg);
}
.cart-btn{
    margin-top: 2rem;;
}
.number{
    background-color: var(--clr-white);
    color: var(--clr-main);
    padding:0 .25rem;
   border-radius: .25rem;


}
.cart-btn.active .number{
    background-color: var(--clr-main);
    color: var(--clr-white);
}
img{
    width: 16rem;
    height: 18rem;
}
.product-img{
   
   max-width: 100%;
   gap:1.2rem;
   border-radius: 5px;;
}
.text-footer{
    font-size: .85rem;
    color:rgb(152, 107, 236);
}
main{
    background-color: var(--clr-white);
    margin: 1rem;
    margin-left: 0;
    border-radius: 2rem;
    padding: 3rem;
}
.main-title{
    color:var(--clr-main);
    margin-bottom: 2rem;
}
.products-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; 
    
    gap: 1rem;
  
}
.product-img{
    max-width: 100%;
    border-radius: 1rem;

}
.product-details{
    background-color: var(--clr-main);
    color: var(--clr-white);
    padding:.5rem;
    border-radius: 1rem;
    margin-top: -2rem;
    position:relative;
    display: flex;
    flex-direction: column;
    gap:.25rem;
    width:15rem;
}
.product-title{
font-size: 1rem;
}
.product-add{
    border:0;
    background-color: var(--clr-white);
    color:var(--clr-main);
    padding: .25rem;
    text-transform: uppercase;
    border-radius: 1rem;
    cursor: pointer;
    border:2px solid var(--clr-white);
    transition: background-color .2s, color .2s;
}
.product-add:hover{
    background-color: var(--clr-main);
    color:var(--clr-white);
}

/* empty cart */
.product-container{
     display:flex;
    flex-direction: column;
    gap: 1.5rem;
}

.empty-cart, .thanks-msg{
 color:var(--clr-main);

}
.cart-products{
    display:flex;
    flex-direction: column;
    gap:1rem;
 
}
.product-cart{
display:flex;
align-items: center;
background-color: var(--clr-gray);
color:var(--clr-main);
justify-content: space-around;
padding: .5rem;
padding-right: 1.5rem;
border-radius: 1rem;

}
.cart-product-img{
    width:4rem;
    border-radius: 1rem;
    height: auto;
}
.product-cart small{
    font-size: .75rem;
}
.cart-delete{
    border:0;
    background-color: transparent;
    color:var(--clr-red);
    cursor: pointer;
}

.cart-actions{
    display: flex;
    justify-content: space-between;
}
.empty-shopping-cart{
    border:0;
    background-color: var(--clr-gray);
    padding: 1rem;
    border-radius: 1rem;
    color:var(--clr-main);
    text-transform: uppercase;
    cursor: pointer;
}
.cart-buy-now{
    border:0;
    background-color: var(--clr-main);
    padding: 1rem;
    border-top-right-radius:1rem;
    border-bottom-right-radius: 1rem;
    color:var(--clr-white);
    text-transform: uppercase;
    cursor: pointer;
}
.action-left{
    display:flex;
}
.cart-action-total{
    display: flex;
    background-color: var(--clr-gray);
    padding: 1rem;
    color:var(--clr-main);
    text-transform: uppercase;
    border-top-left-radius:1rem;
    border-bottom-left-radius: 1rem;
    gap:1rem;

}
.disable{
    display:none;
}