@layer pages {
    .service {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    .service > .service-content {
        margin-top: 0;
    }

    .service-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .service-section.service-content {
        gap: 0;
    }

.service-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-4) var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .service-step {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .service-step__head {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-2);
    }

    .service-step__head::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: var(--color-brand);
    }

    .service-step:last-child .service-step__head::after {
        display: none;
    }

    .service-step__title {
        font-weight: var(--weight-semibold);
    }


    .service-preparation {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .service-preparation__card {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        background: var(--color-bg-alt);
        border-radius: var(--radius);

        .icon {
            width: 2rem;
            height: 2rem;
        }
    }

    .service-preparation__title {
        font-weight: var(--weight-semibold);
    }

    .service-reasons {
        display: flex;
        gap: var(--space-3);
    }

    /* --- Цены: таблица на десктопе --- */

    .price-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        text-align: left;
    }

    .price-table th {
        padding: var(--space-3) var(--space-4);
        background: var(--blue-8);
        font-weight: var(--weight-medium);
        white-space: nowrap;
    }

    .price-table thead th:first-child {
        border-start-start-radius: var(--radius);
        border-end-start-radius: var(--radius);
    }

    .price-table thead th:last-child {
        border-start-end-radius: var(--radius);
        border-end-end-radius: var(--radius);
    }

    .price-table td {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--color-border);
        vertical-align: middle;
    }

    .price-table tbody tr:last-child td {
        border-bottom: none;
    }

    .price-table__name {
        font-weight: var(--weight-medium);
    }

    .price-table__price {
        font-weight: var(--weight-semibold);
        white-space: nowrap;
    }

    .price-table th:nth-child(3),
    .price-table td:nth-child(3),
    .price-table th:last-child,
    .price-table td:last-child {
        width: 1%;
        white-space: nowrap;
    }

    .price-table td:last-child .btn {
        display: inline-flex;
        padding: var(--space-2) var(--space-4);
    }

    .price-cards {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .price-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
    }

    .price-card__name {
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
    }

    .price-card__row {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .price-card__price {
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
    }

    @media (max-width: 64rem) {
        .service-steps {
            grid-template-columns: repeat(3, 1fr);
        }

        .service-step:nth-child(3n) .service-step__head::after {
            display: none;
        }

        .service-preparation {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 48rem) {
        .service-steps {
            grid-template-columns: repeat(2, 1fr);
        }

        .service-step:nth-child(3n) .service-step__head::after {
            display: block;
        }

        .service-step:nth-child(2n) .service-step__head::after {
            display: none;
        }

        .service-preparation__card-row {
            flex-direction: row;
        }

        .service-preparation__card {
            padding: var(--space-3);
        }
    }

    @media (max-width: 48rem) {
        .service {
            gap: var(--space-5);
        }

        .service-section {
            gap: var(--space-3);
        }

        .service-reasons {
            flex-direction: column;
            gap: var(--space-1);
        }
    }

    @media (max-width: 38rem) {
        .service-preparation {
            grid-template-columns: 1fr;
        }

        .service-steps {
            grid-template-columns: 1fr;
            gap: var(--space-3);
            row-gap: 0;
        }

        .service-step {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto 1fr;
            column-gap: var(--space-3);
            row-gap: var(--space-1);
        }

        .service-step__head {
            grid-row: 1 / 3;
            flex-direction: column;
            align-self: stretch;
            margin-bottom: 0;
            row-gap: 0;

            .icon-wrapper {
                padding: var(--space-3);

                .icon {
                    width: 2rem;
                    height: 2rem;
                }
            }
        }

        .service-step:nth-child(2n) .service-step__head::after,
        .service-step:nth-child(3n) .service-step__head::after,
        .service-step .service-step__head::after {
            display: block;
            width: 1px;
            height: auto;
            min-height: var(--space-4);
            flex: 1 1 auto;
        }

        .service-step:last-child .service-step__head::after {
            display: none;
        }
    }
}