.checkout {
    font-size: 14px;
    width: 90%;
    padding: 0;
    margin: 0rem auto;
    border-radius: 5px;
}

    .checkout > div.checkout-title {
        text-align: center;
        margin: 1rem 0;
    }

        .checkout > div.checkout-title h1 {
            color: #402E32;
            border-bottom: 4px solid #D4AF37;
            display: inline-block;
            padding-bottom: 0.5rem;
            font-size: 24px;
        }

    .checkout > div.checkout-content {
        display: flex;
        flex-direction: row;
    }

    .checkout .items {
        width: 70%;
        padding: 0 0.5rem;
        margin: 0 0.5rem;
        font-size: 14px;
    }

        .checkout .items .item {
            border-bottom: 1px solid #FFF8F0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            font-size: 14px;
        }

            .checkout .items .item > div {
                align-self: center;
                padding: 0.5rem 0;
            }

            .checkout .items .item .item-action > button {
                border: 1px solid #BB871E;
                color: #BB871E;
                padding: 5px 10px;
                font-size: 14px;
                border-radius: 4px;
                cursor: pointer;
                transition: background 0.3s;
                width: 100%;
                max-width: 160px;
                margin: 0 auto;
                display: block;
                text-decoration: none;
            }

            .checkout .items .item > div:last-child {
                width: 100%;
                font-size: 12px;
                display: flex;
                justify-content: flex-start;
                gap: 10px;
            }

                .checkout .items .item > div:last-child > div.has-discount {
                    text-decoration: line-through;
                    color: #808080;
                }

    .checkout .payment {
        width: 30%;
        padding: 0 0.5rem;
        margin: 0 0.5rem;
    }

        .checkout .payment .payment-gift {
            border: 2px solid #A9864E;
            border-radius: 5px;
            margin: 0.5rem;
            color: #402E32;
        }

            .checkout .payment .payment-gift > div {
                display: flex;
                justify-content: center;
                padding: 0.5rem;
            }

                .checkout .payment .payment-gift > div:last-child {
                    display: flex;
                }

                    .checkout .payment .payment-gift > div:last-child > div:first-child {
                        width: 100%;
                    }

                        .checkout .payment .payment-gift > div:last-child > div:first-child > input {
                            font: inherit;
                            padding: 0.5rem;
                            border: 1px solid #A9864E;
                            border-radius: 0 5px 5px 0;
                            width: 100%;
                        }

                    .checkout .payment .payment-gift > div:last-child > div:last-child > button {
                        font: inherit;
                        padding: 0.5rem;
                        border: 1px solid #A9864E;
                        border-radius: 5px 0px 0px 5px;
                        text-decoration: none;
                        display: inline-block;
                        text-align: center;
                        color: #A9864E;
                        background-color: #fff;
                        cursor: pointer;
                    }

        .checkout .payment .payment-price {
            font-size: 18px;
            text-align: center;
            border: 2px solid #A9864E;
            border-radius: 5px;
            margin: 0.5rem;
            padding: 0.5rem;
            color: #402E32;
        }

            .checkout .payment .payment-price > div {
                display: flex;
                justify-content: space-evenly;
            }

                .checkout .payment .payment-price > div:last-child > div.has-discount {
                    text-decoration: line-through;
                }

                .checkout .payment .payment-price > div:last-child > span {
                    font-size: 12px;
                    align-self: center
                }

        .checkout .payment .payment-address {
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            margin: 0.5rem;
            color: #402E32;
        }

            .checkout .payment .payment-address label {
                color: #402E32;
            }

            .checkout .payment .payment-address textarea {
                border: 2px solid #A9864E;
                border-radius: 5px;
                font: inherit;
                padding: 0.5rem;
            }

                .checkout .payment .payment-address textarea:active,
                .checkout .payment .payment-address textarea:focus,
                .checkout .payment .payment-address textarea:target {
                    border: 2px solid #A9864E;
                }

        .checkout .payment .payment-actions {
            padding: 0.5rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 0.5rem 0;
        }

            .checkout .payment .payment-actions > button {
                background-color: #BB871E;
                color: white;
                border: none;
                padding: 5px 10px;
                font-size: 14px;
                border-radius: 4px;
                cursor: pointer;
                transition: background 0.3s;
                display: block;
                text-decoration: none;
                width: 10vw;
                display: block;
            }

            .checkout .payment .payment-actions > a {
                font: inherit;
                padding: 0.3rem;
                border: 1px solid #BB871E;
                color: #BB871E;
                border-radius: 5px;
                text-decoration: none;
                display: block;
                text-align: center;
                background-color: #fff;
                cursor: pointer;
                width: 10vw;
            }

@media only screen and (min-width: 768px) {
}

@media only screen and (max-width: 768px) {
    .checkout > div.checkout-content {
        display: flex;
        flex-direction: column;
    }

    .checkout .items {
        width: 100%;
        font-size: 14px;
        padding: 0 0.5rem;
        margin: 0;
    }

    .checkout .payment {
        width: 100%;
        padding: 0 0.5rem;
        margin: 0;
    }

        .checkout .payment .payment-address {
            margin: 0.5rem 0;
        }

        .checkout .payment .payment-gift {
            margin: 0.5rem 0;
        }

        .checkout .payment .payment-price {
            margin: 0.5rem 0;
        }

        .checkout .payment .payment-actions {
            width: 100%;
            display: flex;
            gap: 10vw;
            justify-content: space-between;
            margin: 0.5rem 0;
            padding: 0;
        }

            .checkout .payment .payment-actions > button {
                width: 50%;
                display: block;
            }

            .checkout .payment .payment-actions > a {
                width: 50%;
                display: block;
            }
}