/* Departments Bar */
.meals{

    /* Dimenssions */
    margin: 3% 0;

    /* Text */
    text-align: center;

}
/* Departments Bar Links */
.meals a{ 

    /* Background */
    background-color: rgb(235, 216, 189);
    
    /* Dimenssions */
    margin: 0 1%;
    padding: 1% 3%;

    /* Text */
    font-size: 1.5rem;

}

/* ============================================================================================================================================================= */
/* Page Content */
.products{

    /* Display */
    display: flex;
    flex-wrap: wrap;

}

/* Departments */
#main_meals,
#pastries,
#drinks{

    /* Dimentions */
    margin-bottom: -7.5%;

}

/* Every meal card */
.snack{
    
    /* Display */
    display: inline-block;

    /* Background */
    background-color: rgb(245, 225, 205);
    box-shadow: 2px 2px 10px rgb(240, 240, 220);

    /* Dimenssions */
    width: 27%;
    height: 70%;
    padding: 2% 2% 4%;
    margin: 1%;

    /* Border */
    border-radius: 5%;

}
.snack:hover{

    /*Transform*/
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);

    /*Transition*/
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
}

/* Product photo */
.product{

    /* Dimenssions */
    width: 100%;
    height: 70%;
    margin-bottom: 10%;

    /* Border */
    border-radius: 5%;

}

/* Product description */
.description{

    /* Dimenssions */
    width: 100%;
    height: 40%;
    

    /* Text */
    text-align: center;

}

/* Product info */
.nname{

    /* Display */
    display: grid;
    grid-template-areas: "h2 . . . . button";
    
}
.nname h2{
    grid-area: h2;
}
.nname button{
    grid-area: button;
}

/* Product Department */
.nname button{

    /* Background */
    background-color: bisque;

    /* Dimenssions */
    width: 7rem;
    height: 3rem;

    /* Text */
    font-size: medium;
    color: black;

    /* Border */
    border-radius: 50%;

}

/* Product buying */
.buy{

    /* Display */
    display: grid;
    grid-template-areas: "b . . . . buton";

}
.buy b{
    grid-area: b;
}
.buy img{

    /* Dimenssions */
    width: 25%;
    height: 80%;
    vertical-align: middle;

}
.buy button{

    /* Background */
    background-color: var(--backgroundColor2);

    /* Text */
    color: white;

}

.cart{
        
    /* Dimenssions */
    width: 10rem;
    height: 3rem;
    padding-left: 1%;

    /* Text */
    font-size: large;

    /* Cursor */
    cursor: pointer;

    /* Grid */
    grid-area: buton;

    /* Transition */
    transition: 1.5s;
    background-color: black;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -ms-transition: 1.5s;
    -o-transition: 1.5s;

}
.cart img{

    /* Dimenssions */
    height: 20px;
    width: 25px;
    
}

.cart:active{

    /* Teansform */
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    
}