@import url('../mediterranean.css');


@media screen and (max-width: 300px) {
    .cart-amounts .cart-amount:nth-child(1) {
        display: none;
    }

    .cart-amounts .cart-amount:nth-child(2) {
        display: none;
    }

    .cart-amounts .cart-amount:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 428px) {
    .cart-amounts .cart-amount:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .vertical-section {
        padding-bottom: 75px;
    }

    .sidebar-section {
        display: none;
    }

    footer#footer {
        display: none;
    }

    .short-cart {
        display: flex;
    }

    .verbose-cart {
        display: none;
    }

    .empty-cart {
        height: unset;
        padding: 15px 0;
        margin: 0;
        justify-content: center;
        align-items: center;
    }

    .short-cart {
        flex-direction: row;
    }

    .order-total {
        width: 100%;
    }

    .loaded-cart {
        margin: 0 25px;
        width: 100%;
    }

    .short-cart {
        position: fixed;
        bottom: 0;
        background-color: var(--light-brand-color);
        width: calc(100%);
        margin: 0;
        left: -15px;
        color: var(--light-brand-contrast-color);
        padding: 10px 0 10px 15px;
    }

    .cart-amounts {
        display: flex;
        flex-direction: row;
        width: calc(70% - 30px);
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }

    .cart-amount {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .cart-net {
        font-weight: bold;
    }

    .cart-action {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 30%;
    }

    .short-cart .cart-action button {
        border: solid 1px var(--white);
        color: var(--white);
    }
}

@media screen and (max-width: 1024px) {
    .content-page {
        width: calc(100% - 50px);
        padding: 0 25px;
    }

    .short-cart .loaded-cart {
        flex-direction: row;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .vertical-section {
        flex-direction: column;
        width: 60%;
    }

    .vertical-section-title {
        width: 100%;
    }

    .sidebar-section {
        width: 40%;
    }

    .vertical-section-body {
        width: 100%;
    }
}