.purchase-delivery {
    display: grid;
    grid-template-columns: 1fr min-content max-content min-content;
    gap: 15px;
    align-items: center;
    white-space: nowrap;

    .city {
        display: flex;
        gap: 10px;
    }

    .question-icon {
        display: inline-block;
        width: 1.3em;
        height: 1.3em;
        background: url("/images/svg/question.svg") center no-repeat;
        background-size: contain;
    }

    .delete-delivery {
        opacity: 0.6;
        width: 1.3em;
        height: 1.3em;
        background: url("/images/svg/chest.svg") center no-repeat;
        background-size: contain;
        transform: rotate(45deg);
        border: 2px solid black;
        border-radius: 1.5em;
        cursor: pointer;
    }
}

.number-input {
    outline: none;
}

.delivery-method__body {
    margin-left: 1em;
}

.delivery-variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
    .delivery-variant {
        .description {
            margin-left: 1em;
            padding: .3em .5em;
            font-style: italic;
            background-color: rgba(150, 150, 150, .2);
            font-size: .9em;
        }
    }
}

.product_sum_price {
    white-space: nowrap;
}

.order-products {
    .purchases {
        margin-top: 45px;
    }

    .purchases-list {
        grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr;

        .image {
            img {
                width: 100%;
                object-fit: contain;
            }
        }

        .deliveries {
            display: flex;
            flex-direction: column;
            .purchase-delivery {
                .city {
                    .question-icon {
                        cursor: help;
                    }
                }
            }
        }

        .product-not-found {
            grid-column: span 7;
            padding: 25px;
        }
    }
}

.main-section.category-404 {
    container-type: inline-size;
    @container (width < 900px) {
        .content {
            .left .buttons {
                display: flex;
                gap: 5px;
                flex-wrap: wrap;
            }
            .right {
                display: none !important;
            }
        }
    }
}