body {
    main {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        width: 100%;
        max-width: 1200px;
        margin-top: 2rem;
        padding: 0 16px 0 16px;

        > h1 {
            font-size: 24px !important;
            padding: 16px 0;
        }

        .container {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            row-gap: 32px;

            .bag-vazia {
                width: 100%;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                row-gap: 16px;

                img {
                    width: 100px;
                    aspect-ratio: 1 /1;
                    opacity: 0.5;
                }
            }

            .container-cards {
                position: relative;
                overflow: hidden;

                > header {
                    margin: 2rem 0;
                    
                    h2 {
                        font-size: 1.5rem !important;
                    }
                }

                > section {
                    display: flex;
                    column-gap: 16px;
                    width: 100%;
                    padding: 16px 4px;
                    overflow-x: scroll;
                    scroll-behavior: smooth;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }
            }
        }

        .produtos {
            display: flex;
            flex-direction: column;
            height: 100%;
            max-height: calc(100vh - 140px - 216px - 48px);
            row-gap: 32px;
            box-shadow: 0px 0 20px rgba(0, 0, 0, .1);
            border-radius: 1rem;
            padding: 1.5rem 1.25rem;
            overflow-y: auto;

            .produto {
                width: 100%;
                height: 108px;
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                padding-bottom: 8px;
                border-bottom: 1px solid var(--light-grey);

                .imagem {
                    flex:0 0 100px;
                    height: 100px;
                    aspect-ratio: 1 /1;
                    border-bottom-left-radius: 1rem;
                    border-top-right-radius: 1rem;
                    border-top-left-radius: 1rem;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }
            }

            .detalhes {
                width: calc(100% - 100px - 8px);
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                h3 {
                    color: var(--dark-gray);
                    text-wrap: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 16px;
                    padding: 16px 0;
                }
            }

            .actions {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                row-gap: 8px;
                color: var(--dark-gray);

                form {
                    display: flex;
                    width: 75px;
                    align-items: center;
                    justify-content: space-between;
                    border: 1px solid var(--dark-red);
                    border-radius: 1rem;
                    padding: 2px;

                    input[type="number"] {
                        width: 100%;
                        text-align: center;
                        display: inline-block;
                        outline: none;
                        border: none;

                        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }
                    }

                    button {
                        flex: 0 0 20px;
                        border-radius: 2px;
                        text-align: center;
                        border: none;
                        background-color: transparent;
                        font-size: 16px;
                        cursor: pointer;
                        background-color: var(--light-grey);
                        opacity: .6;
                        transition: all .2s;

                        &:active {
                            opacity: 1;
                        }
                    }
                }

                .valor-produto {
                    display: flex;
                    align-items: center;
                    column-gap: .5rem;

                    .multiplo {
                        font-size: .875rem;
                        color: var(--gray);
                    }
                }
            }
        }

        .values {
            display: flex;
            flex-direction: column;
            row-gap: 16px;
            height: fit-content;
            color: var(--dark-gray);
            box-shadow: 0px 0 20px rgba(0, 0, 0, .1);
            border-radius: 1rem;
            padding: 1.5rem 1.25rem;

            .cupom {
                width: 100%;
            }

            article {
                display: flex;
                justify-content: space-between;

                &:nth-of-type(1) {
                    span {
                        font-weight: 500;
                        color: var(--grey);
                    }
                }

                &:nth-of-type(2) {
                    span {
                        font-weight: 500;
                        color: var(--green);
                    }
                }

                &:nth-of-type(3) {
                    span {
                        font-weight: 500;
                        color: var(--dark-grey);
                    }
                }
            }

            .actions {
                display: flex;
                flex-direction: column;
                row-gap: 1rem;
                flex: 1;
                column-gap: 16px;
                margin-top: 1rem;
            }
        }
    }
} 

@media (min-width: 576px) {

    body {
         main {
            margin-top: 7rem;

            .values {
                .actions {
                    flex-direction: row;
                }
            }
        }
    }
}

@media (min-width: 768px) {

    body {
         main {
            width: 100%;
            display: flex;
            flex-direction: row;
            column-gap: 16px;
            padding-top: 32px;

            .container {
                .container-cards {
                    padding: 0 .25rem 0 .25rem;
                }
            }

            .produtos {
                width: 100%;
                max-height: calc(100vh - 140px - 48px);
            }

            .values {
                display: flex;
                flex: 0 0 300px;
                row-gap: 16px;
            }
        }
    }
}

@media (min-width: 991px) {
    body {
         main {
            .produtos {
                width: 100%;
                max-height: calc(100vh - 140px - 48px);

                .actions {
                    form {
                        border-radius: .25rem;
                    }
                }
            }

            .values {
                .actions {
                    flex-direction: row;
                }
            }
        }
    }
}