@layer components {

    .cart-page {
        max-width: 1280px;
        margin-inline: auto;
        padding: var(--s-8) var(--gutter) 0;
    }

    .cart-page__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--s-3) var(--s-5);
        padding-bottom: var(--s-5);
        border-bottom: 1px solid var(--c-line-strong);
        font-size: var(--t-sm);
    }

    .cart-page__title {
        font-size: var(--t-2xl);
    }

    .cart-page__count {
        font-family: var(--f-text);
        font-size: var(--t-md);
        color: var(--c-muted);
    }

    .cart-page__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        gap: var(--s-7) clamp(40px, 6vw, 104px);
        align-items: start;
    }

    .cart-page__lines:empty {
        display: none;
    }

    .cart-page__lines .cart-line {
        grid-template-columns: 128px minmax(0, 1fr);
        gap: var(--s-5);
    }

    @media (max-width: 899px) {
        .cart-page {
            padding-top: var(--s-6);
        }

        .cart-page__layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .cart-page__lines .cart-line {
            grid-template-columns: 96px minmax(0, 1fr);
            gap: var(--s-4);
        }
    }

}