/* ============================================
   10. PAGE: STORE
   ============================================ */

/* Store------------- */
.shop{
    display:flex;
}
.allItems{
    display:flex;
    flex-grow:2;
    flex-wrap:wrap;
    margin-right: 15rem;
    width:90vw;
    max-width:120ch;
    justify-content:center;

}

.allItems .item > div {
    width: 100%;
    margin: 0;
}

.allItems .item{
    display:flex;
    flex-direction:column;
    border: 2px solid var(--logoBlue);
    border-radius:.5rem;
    margin:1rem;
    width:35ch;
    box-shadow: var(--boxShadow);
    justify-content: space-between;
    
}
.item h3{
    text-align:center;
    margin:1rem auto;
}
.item img{
    display:block;
    /* max-height:50%; */
    width:80%;
    object-fit: cover;
    margin:1rem auto;
}
.itemFooter{
    width:80%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:auto;
} 

.cartContainer{
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 10;
    max-width: 25rem;
    display: block;
}

.cartHolder{
    position: relative;
    padding:.5rem;
    min-height:5rem;
    z-index: 10;
    max-width: 25rem;
    color:white;
    border-radius:2rem ;
    overflow:hidden;
    background-color:var(--logoBlue);
    border:2px solid var(--logoBlue); 
    transition:.2s;

}
.empty{
    padding:1rem .5rem;
}
.cart{
    width:90vw;
    max-width:30ch;
    display: block;
}

.cart .cartHead{
    background-color:var(--logoBlue);
    color:white;
    border:4px solid white;
    box-sizing:border-box;

    padding:.5rem;
    border-radius:2rem;
    cursor:pointer;

}
.cartArrow{
    transition:.4s;
    position:absolute;
    top:1.2rem;
    right:1.2rem;
    font-size:1.7rem;
    display: block;
}
.cart .cartItem{
    display:flex;
    background-color:white;
    color:black;
    justify-content:stretch;
    align-items:baseline;
    border:2px solid rgb(235,235,235);
    border-radius:.5rem;
    padding:.5rem;
    margin:.6rem 0;
}
.cartItem input{
    padding:.5rem;
    width:10ch;
    min-width:80px;
    margin:.5rem;
    font-size:1rem;
    text-align:center;
}
.requestOrderButton{
    display:block;
    margin: 1rem auto;
    padding: .5rem 1rem;
    border-radius:2rem;
    background-color:white;
    color:var(--logoBlue);
    border:none;
    transition:.2s;
    cursor:pointer;
    font-size:18px;
    font-weight:700;
    
}
.requestOrderButton:hover{
    background-color:lightGray;
}
.remove{
    border-radius:50%;
    font-size:20px;
    height:fit-content;
    cursor:pointer;
}

.commingSoon{

    background-color:var(--logoBlue);
    color:white;
    padding:3rem;
    
}
.item h1{
    text-align: center;
}

/* ------------------ */