@layer base {
    :root {
        --color-black: #292D32;
        --color-dark-grey: #919396;
        --color-grey: #B9B9B9;
        --color-light-grey: #E2E2E2;
        --color-very-light-grey: #FAFAFA;
        --color-red: #D12F13;
        --color-reg-light: #FDF5F3;
        --color-logo-blue: #01305D;
        --color-blue: #6CC9F2;
        --color-blue-light: #EDF6FC;
        --color-green: #00A339;
        --color-green-light: #F2FAF5;
        --color-white: #FFFFFF;

        --color-text-regular: var(--color-black);
        --color-hover-background: #f2f5f8;

        --color-list-dt: var(--color-text-regular);
        --color-list-dl: var(--color-text-regular);
        --color-list-spacing: var(--color-text-regular);

        --page-padding-x: 72px;

        /* шапка всёрстана криво, пришлось сделать пока так: */
        --page-margin-top: 0;
    }

    .h1 {
        font-size: 32px;
        font-weight: 500;
        line-height: 35px;
        color: var(--color-text-regular);
    }

    .h2 {
        font-size: 24px;
        font-weight: 500;
        line-height: 26px;
        color: var(--color-text-regular);
    }

    .b1 {
        font-size: 18px;
        font-weight: 500;
        line-height: 20px;
        color: var(--color-text-regular);
    }

    .b2 {
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        color: var(--color-text-regular);
    }

    .b3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        color: var(--color-text-regular);
    }

    .b4 {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        color: var(--color-text-regular);
    }

    .t1 {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        color: var(--color-text-regular);
    }

    .t2 {
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        color: var(--color-text-regular);
    }

    .t3 {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        color: var(--color-text-regular);
    }

    .t4 {
        font-size: 14px;
        font-weight: 300;
        line-height: 18px;
        color: var(--color-text-regular);
    }

    .s1 {
        font-size: 12px;
        font-weight: 600;
        line-height: 15px;
        color: var(--color-text-regular);
    }

    .s2 {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        color: var(--color-text-regular);
    }

    .dotted {
        text-decoration: underline dotted var(--color-dark-grey);
        text-underline-offset: 0.25em;
        text-decoration-thickness: 1px;
    }

    .button-big-fill {
        display: flex;
        gap: 12px;
        padding: 14px 24px;
        height: 44px;
        border: 1px solid var(--color-black);
        background-color: var(--color-black);
        color: var(--color-white);
        align-items: center;
        justify-content: center;

        /** .t3 */
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;

        svg {
            display: block;
        }
    }

    .button-big-stroke {
        display: flex;
        gap: 12px;
        padding: 14px 24px;
        height: 44px;
        border: 1px solid var(--color-black);
        background-color: var(--color-white);
        color: var(--color-black);
        align-items: center;
        /** .t3 */
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;

        svg {
            display: block;
        }
    }

    .header-cart {
        position: relative;

        svg {
            position: relative;
        }
    }

    .header-cart__counter {
        position: absolute;
        right: 8px;
        top: 4px;
        padding: 4px;
        border-radius: 50%;
        background-color: var(--color-red);
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
    }

    .key-value-list {
        display: grid;
        grid-template-columns: 1fr auto;

        dt {
            display: flex;
            margin: 0;
            color: var(--color-list-dt);

            &:after {
                content: " ";
                border-top: 1px dashed var(--color-list-spacing);
                margin: 12px 4px 0 4px;
                flex-grow: 1;
            }
        }

        dl {
            margin: 0;
            color: var(--color-list-dl);
        }
    }

    @media screen and (width < 1400px) {
        :root {
            --page-padding-x: 33px;
        }
    }

    @media screen and (width < 1024px) {
        :root {
            --page-padding-x: 24px;
        }
    }

    @media screen and (width < 768px) {
        :root {
            --page-padding-x: 14px;
            --page-margin-top: 32px;
        }
        .no-xs {
            display: none;
        }
    }
}