main{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "back-button"
        "orders"
        "bill";
    gap: 2em;
}

@media screen and (min-width: 900px){
    main{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "back-button back-button"
            "orders bill";
    }
}
/* Back Button */
#back-button{
    grid-area: back-button;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: min-content;
    width: max-content;
    gap: 0.3em;
    padding: 0.5em 1em 0.5em 0.5em;
    margin-top: -1em;
    border-radius: 4em;
    text-decoration: none;
    color: var(--text-color);
}

#back-button:hover{
    cursor: pointer;
    background-color: var(--background-grey);
}

#back-button>img{
    width: 1.5em;
    height: 1.5em;
}

/* Cart Card */
.card-container{
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    width: fit-content;
    gap: 1em;
}

#bestellungen{
    grid-area: orders;
    padding: 0;
}

#bestellungen>.section-head{
    padding-left: 1rem;
}

#bestellungen>.section-body{
    align-items: center;
}

.cart-card{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: fit-content;
    align-items: center;
    padding: 1em;
    gap: 1em;
    background-color: var(--background-grey);
    border-radius: 0.75em;
}

.cart-card-body{
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) 3fr;
    grid-template-areas:
        "title title"
        "price price"
        "spinbox remove";
    gap: 0.5em;
}

.cart-card-image{
    width: 128px;
    height: 128px;
}

@media screen and (max-width: 450px){
    .cart-card-image{
        width: 100px;
        height: 100px;
    }
}

.cart-card-heading{
    grid-area: title;
}

.cart-card-price{
    grid-area: price;
}

.custom-spinbox{
    grid-area: spinbox;
}

.cart-card-remove{
    grid-area: remove;
    justify-self: end;
    border-radius: 0.75em;
    line-height: 0;
    padding: 0.5em;
    background-color: #00000000;
    border: none;
    transition: .1s ease-in-out;
}

.cart-card-remove:hover{
    cursor: pointer;
    background-color: #f06d6d50;
}

/* Bill */
#rechnung{
    grid-area: bill;
}

@media screen and (min-width: 900px){
    #rechnung{
        padding-top: 0;
    }
}

.inner-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

table {
    width: 100%;
    max-width: 30em;
    border-collapse: collapse;
}

td {
    padding: 8px;
}

td:nth-child(even) {
    text-align: right;
}

tr:last-child td{
    font-weight: bold;
    border-top: 2px solid var(--primary-color);
}

.free-shipping{
    color: #77c077;
}

#total-price{
    font-size: 1.5em;
    color: var(--secondary-color-light);
}

#buy-button{
    border: none;
    font-size: 1em;
}

#buy-button:disabled{
    background-color: #737373;
    color: var(--text-color);
    transition: .3s ease-in-out;
}

#buy-button:disabled:hover{
    transform: none;
    box-shadow: none;
    cursor: default;
}