/*
 * Корзина и оформление заказа.
 *
 * Разметка: page-cart.php, page-checkout.php (child), список позиций рисует
 * assets/js/cart-page.js. Счётчик в шапке — .header-cart, оживляется cart.js.
 *
 * Палитра взята с сайта: акцент #c7b388, тёмный #1a1a1a, подложки #f2efec /
 * #e9e7e2. Шрифт наследуется от темы (Montserrat), радиусы 10px — как у кнопок
 * (см. button-radius.css).
 *
 * Адаптив:
 *   ≥900px  — строка-таблица: фото, описание, цена, количество, сумма
 *   ≤899    — карточка: фото слева, всё остальное в колонку справа
 */

/* ── Счётчик в шапке ─────────────────────────────────────────────────── */

/*
 * Число стоит рядом с иконкой, а не поверх неё (образец от заказчика 16.08).
 * Так оно читается на любом фоне и не спорит с самой иконкой: раньше кружок
 * висел на её углу и на светлых страницах сливался с картинкой корзины.
 *
 * В разметке темы span с числом идёт ПЕРЕД <img>, менять её нельзя —
 * шапка родительская. Порядок задаёт flex: order у картинки меньше.
 */
/*
 * Селекторы утяжелены намеренно. В родительской теме, в custom-css.css,
 * счётчик описан как `.header-cart a span { position: absolute; ... }` —
 * это специфичнее одного класса, и лёгкие правила проигрывали молча:
 * плашка продолжала лежать поверх иконки песочным кружком.
 */
/*
 * display: flex, а не inline-flex. У строчной ссылки под иконкой остаётся
 * место под базовую линию, из-за него блок корзины выше самой ссылки,
 * а родитель центрирует именно блок — иконка уезжала на 2px вверх
 * относительно соседних иконок связи (замерено по снимку шапки).
 */
body .header-cart {
    display: flex;
    align-items: center;
}

body .header-cart a {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Иконка — белый SVG в теме (assets/img/shopping-cart.svg), заменил песочный
 * PNG 64x64 из uploads: тот выбивался из ряда белых иконок связи и цветом,
 * и размером. Белый цвет задан в самом файле, перекрашивать фильтром больше
 * не нужно. Размер 22px — по соседям (telegram 21, whatsapp 19).
 *
 * Имя файла обязано содержать «shopping-cart»: по нему сниппет мобильного
 * оформления находит ссылку корзины (см. header.php).
 */
body .header-cart a img {
    order: 1;
    width: 22px;
    height: 22px;
    display: block;
}

/*
 * Оформление взято с мобильной версии (образец от заказчика 18.08): светлая
 * плашка-таблетка с тёмной цифрой. Так счётчик читается на тёмной шапке
 * как отдельный элемент, а не как приглушённая подложка.
 * Цвета те же, что у .lw-cart-count в сниппете мобильного оформления, —
 * десктоп и телефон выглядят одинаково.
 */
.header-cart a span.header-cart__badge {
    position: static;
    order: 2;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f4f2ee;
    color: #141414;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: background .18s, color .18s;
}

/*
 * Есть товары — плашка становится чисто белой. Разница с пустой корзиной
 * едва заметная, и это намеренно: в образце оба состояния выглядят
 * одинаково, а песочный акцент здесь пробовали — в шапке он спорит
 * с логотипом того же цвета.
 */
.header-cart a span.header-cart__badge.is-filled {
    background: #ffffff;
    color: #141414;
}

/*
 * На узких экранах строка шапки набита под завязку: логотип, четыре иконки
 * связи, корзина, бургер. Плашка здесь компактнее, чтобы ничего не уезжало
 * за край (проверено на 430px).
 *
 * На телефонах эти правила чаще всего не работают вовсе: там шапку
 * пересобирает сниппет мобильного оформления из WPCode — он рисует свою
 * иконку корзины и свою плашку .lw-cart-count, а родной счётчик темы
 * прячет. Наш cart.js это учитывает и пишет число в его плашку.
 * Промежутки в .header-socials и .header-row намеренно не трогаем:
 * там раскладка сниппета, и спорить с ней себе дороже.
 */
@media (max-width: 767px) {
    body .header-cart a {
        gap: 5px;
    }

    .header-cart a span.header-cart__badge {
        min-width: 20px;
        padding: 1px 6px;
        font-size: 11px;
    }
}

/* ── Каркас страницы ─────────────────────────────────────────────────── */

/*
 * Цвет текста и отступ сверху задаём явно — без этого страницы корзины
 * нечитаемы. В родительской теме `body { color: #ffffff }` и
 * `.section-title { color: #ffffff }`: макет рассчитан на тёмные секции
 * поверх фото, а у нас светлый фон #f2f2f2 — белым по светлому.
 * Шапка `position: fixed` высотой ~60px, поэтому верхний отступ 130px —
 * ровно как у `.hero` в родителе, это принятая в теме мера под шапку.
 * Правило накрывает и выдвижную панель: её фон белый, а имена товаров
 * и итог наследовали тот же белый.
 */
.lw-cart-page,
.cart-drawer__panel {
    color: #1a1a1a;
}

.lw-cart-page {
    padding: 130px 0 80px;
}

.lw-cart-page .section-title,
.lw-cart-page h1,
.lw-cart-page h2 {
    color: #1a1a1a;
}

.lw-cart-page__title {
    margin-bottom: 8px;
    font-size: 34px;
    line-height: 42px;
}

/*
 * Крошки: цвет и выравнивание берёт модификатор breadcrumbs-black родительской
 * темы, здесь только отступ и акцент на текущей странице — она последняя
 * в цепочке и не кликается, поэтому темнее остальных.
 */
.lw-cart-page .breadcrumbs {
    margin-bottom: 16px;
}

.lw-cart-page .breadcrumbs__item:last-child .breadcrumbs__link {
    color: #55514a;
    cursor: default;
}

.lw-cart-page__count {
    margin-bottom: 28px;
    color: #7a7a7a;
    font-size: 15px;
}

.lw-cart-page__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1100px) {
    .lw-cart-page__layout {
        grid-template-columns: 1fr;
    }
}

/* ── Позиция ─────────────────────────────────────────────────────────── */

.cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr 120px 128px 130px 32px;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #e9e7e2;
}

.cart-item__media {
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 10px;
    background: #f2efec;
}

.cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-item__name {
    display: block;
    margin-bottom: 6px;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

a.cart-item__name:hover {
    color: #9c7f49;
}

.cart-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: #7a7a7a;
    font-size: 13px;
}

/* Цена за штуку в мобильной раскладке — в десктопной есть отдельная колонка */
.cart-item__price-mobile {
    display: none;
    margin-top: 6px;
    color: #7a7a7a;
    font-size: 13px;
}

.cart-item__price,
.cart-item__sum {
    font-size: 15px;
    white-space: nowrap;
}

.cart-item__sum {
    font-weight: 700;
}

/* ── Количество ──────────────────────────────────────────────────────── */

.cart-item__qty {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cart-qty__btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e6e2da;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cart-qty__btn:hover {
    border-color: #c7b388;
    background: #f2efec;
}

.cart-qty__input {
    width: 48px;
    height: 32px;
    border: 1px solid #e6e2da;
    border-radius: 8px;
    text-align: center;
    font-size: 15px;
    font-family: inherit;
    -moz-appearance: textfield;
}

.cart-qty__input::-webkit-outer-spin-button,
.cart-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item__remove {
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: #b5b0a6;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.cart-item__remove:hover {
    color: #1a1a1a;
}

/* ── Итог ────────────────────────────────────────────────────────────── */

.cart-total {
    position: sticky;
    top: 24px;
    padding: 24px;
    border-radius: 10px;
    background: #f2efec;
}

.cart-total__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.cart-total__row b {
    font-size: 22px;
}

/* Первая строка блока — его заголовок («Ваш заказ»), а не позиция списка. */
.cart-total__row:first-child span {
    font-size: 17px;
    font-weight: 700;
}

.cart-total__note {
    margin: 14px 0 20px;
    color: #7a7a7a;
    font-size: 13px;
    line-height: 1.5;
}

.cart-total .button-orange {
    display: block;
    width: 100%;
    text-align: center;
}

.cart-total__clear {
    display: block;
    width: 100%;
    margin-top: 12px;
    border: 0;
    background: none;
    color: #7a7a7a;
    font-size: 13px;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Пустая корзина ──────────────────────────────────────────────────── */

.cart-empty {
    padding: 56px 0 72px;
    text-align: center;
}

.cart-empty__text {
    margin-bottom: 24px;
    color: #7a7a7a;
    font-size: 16px;
}

/* ── Оформление ──────────────────────────────────────────────────────── */

.checkout-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.checkout-form__field--wide {
    grid-column: 1 / -1;
}

/*
 * Список типов пришлось расширить: поля доставки (27.08) добавили number и
 * select, а они под старый перечень не попадали — «Этаж» выводилсясистемным
 * полем без рамки, «Грузовой лифт» системным выпадающим списком.
 */
.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form input[type="email"],
.checkout-form input[type="number"],
.checkout-form select,
.checkout-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #e6e2da;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    font-family: inherit;
}

/*
 * Своя стрелка вместо системной: у native select она разная в каждой ОС и
 * рядом с остальными полями выглядит чужеродно.
 */
.checkout-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a85' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    color: #1f1c17;
    cursor: pointer;
}

/* Пока не выбрано — цвет как у подсказок в остальных полях. */
.checkout-form select:invalid,
.checkout-form select option[value=""] {
    color: #9a968c;
}

.checkout-form textarea {
    min-height: 104px;
    resize: vertical;
}

.checkout-form input:focus,
.checkout-form textarea:focus {
    border-color: #c7b388;
    outline: none;
}

.checkout-policy {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #7a7a7a;
    font-size: 13px;
    line-height: 1.5;
}

.checkout-summary {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.checkout-summary li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e9e7e2;
    font-size: 14px;
    line-height: 1.4;
}

/* Превью товара — тот же первый кадр фактуры, что и в списке корзины.
   Пустой квадрат подложки на месте отсутствующей картинки: без него
   строки без превью съезжают влево и список выглядит рваным. */
.checkout-summary__media {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 8px;
    background: #eae6e0;
}

.checkout-summary__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Текст и сумма — в две строки: колонка узкая, в один ряд цена вида
   «41 724 руб.» ломалась бы на три строки лесенкой. */
.checkout-summary__info {
    flex: 1 1 auto;
    min-width: 0;
}

.checkout-summary__name {
    display: block;
    /* Названия длинные, а колонка на телефоне узкая: длинное слово должно
       переноситься, а не уезжать за край. */
    overflow-wrap: anywhere;
}

.checkout-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
}

.checkout-summary__qty {
    color: #7a7a7a;
    font-size: 13px;
}

.checkout-summary__row b {
    flex: 0 0 auto;
    white-space: nowrap;
}

.checkout-summary em {
    color: #7a7a7a;
    font-style: normal;
}

/* Блок про доставку: считает менеджер, оплачивается перевозчику напрямую */
.checkout-note {
    margin-top: 20px;
    padding: 16px 18px;
    border-left: 3px solid #c7b388;
    background: #f2efec;
    color: #55514a;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Кнопки покупки на карточке товара ───────────────────────────────── */

.cart-right__button.is-added {
    background: #9c7f49;
    pointer-events: none;
}

/*
 * «Быстрый заказ» — вторичное действие рядом с «В корзину».
 *
 * Родительский .button-white задаёт белый текст (style.css:332) — он рассчитан
 * на тёмную подложку, а здесь кнопка стоит на белом фоне карточки и читается
 * как пустое место. Перекрашиваем в обводку акцентным цветом: видно, но не
 * спорит с основной кнопкой.
 */
.cart-right__bottom .cart-right__button.button-white {
    border: 1px solid #c7b388;
    background: transparent;
    color: #1a1a1a;
}

.cart-right__bottom .cart-right__button.button-white:hover {
    background: #f2efec;
    color: #1a1a1a;
}

/* ── Мобильная раскладка ─────────────────────────────────────────────── */

@media (max-width: 899px) {
    .cart-item {
        grid-template-columns: 76px 1fr 32px;
        grid-template-areas:
            "media info remove"
            "media qty  sum";
        gap: 6px 14px;
    }

    .cart-item__media { grid-area: media; width: 76px; height: 76px; }
    .cart-item__info   { grid-area: info; }
    .cart-item__qty    { grid-area: qty; }
    .cart-item__sum    { grid-area: sum; text-align: right; }
    .cart-item__remove { grid-area: remove; align-self: start; }
    .cart-item__price  { display: none; }
    .cart-item__price-mobile { display: block; }
}

@media (max-width: 599px) {
    .checkout-form {
        grid-template-columns: 1fr;
    }

    .lw-cart-page {
        padding: 24px 0 56px;
    }
}

/* ── Выезжающая панель корзины ───────────────────────────────────────── */
/*
 * Открывается при добавлении товара и по клику на иконку в шапке.
 * Разметку генерирует assets/js/cart-drawer.js.
 *
 * На десктопе — панель справа на 420px, на телефоне разворачивается почти
 * на весь экран (оставляем 40px сверху, чтобы было видно: под ней сайт).
 */

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cart-drawer.is-open .cart-drawer__overlay {
    opacity: 1;
}

.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: -8px 0 32px rgba(26, 26, 26, 0.16);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.cart-drawer.is-open .cart-drawer__panel {
    transform: translateX(0);
}

/* Блокировка прокрутки страницы под открытой панелью */
body.cart-drawer-lock {
    overflow: hidden;
}

.cart-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9e7e2;
}

.cart-drawer__title {
    font-size: 20px;
    font-weight: 700;
}

.cart-drawer__close {
    width: 36px;
    height: 36px;
    border: 0;
    background: none;
    color: #7a7a7a;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.cart-drawer__close:hover {
    color: #1a1a1a;
}

.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px;
}

.cart-drawer__item {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr 24px;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f2efec;
}

.cart-drawer__media {
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 8px;
    background: #f2efec;
}

.cart-drawer__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-drawer__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.cart-drawer__meta {
    display: block;
    margin-top: 3px;
    color: #7a7a7a;
    font-size: 12px;
}

.cart-drawer__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 12px;
}

.cart-qty {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cart-drawer__sum {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.cart-drawer__remove {
    width: 24px;
    height: 24px;
    border: 0;
    background: none;
    color: #c3bdb2;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cart-drawer__remove:hover {
    color: #1a1a1a;
}

.cart-drawer__empty {
    padding: 48px 8px;
    text-align: center;
    color: #7a7a7a;
}

.cart-drawer__empty p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.cart-drawer__foot {
    padding: 20px 24px 24px;
    border-top: 1px solid #e9e7e2;
    background: #fff;
}

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

.cart-drawer__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.cart-drawer__total b {
    font-size: 20px;
}

.cart-drawer__note {
    margin: 0 0 16px;
    color: #7a7a7a;
    font-size: 12px;
    line-height: 1.5;
}

.cart-drawer__checkout {
    display: block;
    text-align: center;
}

.cart-drawer__continue {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 0;
    background: none;
    color: #7a7a7a;
    font-size: 13px;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 599px) {
    .cart-drawer__panel {
        top: 40px;
        width: 100%;
        height: calc(100% - 40px);
        border-radius: 14px 14px 0 0;
        transform: translateY(100%);
    }

    .cart-drawer.is-open .cart-drawer__panel {
        transform: translateY(0);
    }

    .cart-drawer__head,
    .cart-drawer__body,
    .cart-drawer__foot {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── Счётчик на месте кнопки «В корзину» ─────────────────────────────────
   Появляется, когда выбранная фактура уже в корзине. Панель при добавлении
   больше не открывается: она перекрывала карточку, а фактур у товара до
   четырнадцати — покупатель добавляет несколько подряд. Размеры повторяют
   кнопку, рядом с которой стоит счётчик, чтобы ряд кнопок не прыгал. */
.cart-qty--inline {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 260px;
    min-height: 52px;
    padding: 0 10px;
    border: 1px solid #c7b388;
    border-radius: 12px;
    background: #fff;
}

.cart-qty--inline .cart-qty__btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
    flex: none;
}

.cart-qty__value {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

/* Скрытие кнопки атрибутом hidden. У .button-orange своего display нет, но
   правило-страховка стоит здесь явно: стоит кому-то добавить display: flex —
   и hidden молча перестанет работать, а кнопка встанет поверх счётчика. */
.cart-right__button[hidden] {
    display: none;
}

/* ── Оформление: статус отправки и экран «готово» ────────────────────── */

.checkout-status {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.checkout-status.is-error {
    background: #fdf1ef;
    color: #a33a2a;
}

.smart-captcha {
    min-height: 100px;
}

.checkout-done {
    padding: 56px 0 72px;
    text-align: center;
}

.checkout-done p {
    max-width: 520px;
    margin: 0 auto 24px;
    color: #55514a;
    line-height: 1.6;
}

/* ── Скрытие блоков атрибутом hidden ─────────────────────────────────── */

/*
 * Браузерное правило [hidden] { display: none } слабее любого нашего
 * селектора с классом, поэтому блоки с собственным display продолжали
 * показываться. На странице оформления это выглядело так: заказ отправлен,
 * а под сообщением по-прежнему висит форма с заполненными полями,
 * застрявшей кнопкой «Отправляем…» и итогом «0 руб.» (поймано 21.08).
 *
 * Тот же случай уже был с кнопкой «В корзину» — см. .cart-right__button[hidden]
 * ниже. Закрываем разом для всех блоков корзины и оформления.
 */
.lw-cart-page__layout[hidden],
.checkout-done[hidden],
.cart-empty[hidden],
.checkout-status[hidden],
.cart-drawer__foot[hidden] {
    display: none;
}

/* ── Экран «Заказ отправлен» ─────────────────────────────────────────── */

/*
 * Отдельная карточка по центру: после отправки на странице не остаётся
 * ничего, кроме этого сообщения, поэтому оно и есть содержание страницы,
 * а не приписка под формой. Заголовок страницы при показе прячется —
 * иначе получалось два заголовка об одном и том же.
 */
.checkout-done {
    max-width: 560px;
    margin: 8px auto 0;
    padding: 48px 32px 40px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(26, 26, 26, .04), 0 18px 40px -28px rgba(26, 26, 26, .35);
    text-align: center;
}

.lw-cart-page__title[hidden] {
    display: none;
}

/* Галочка: круг с «птичкой», нарисованной границами — без картинки и шрифта */
.checkout-done__mark {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #eef5ef;
    position: relative;
}

.checkout-done__mark::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 15px;
    width: 12px;
    height: 22px;
    border: solid #3f6b4a;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.checkout-done__title {
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    color: #1a1a1a;
}

.checkout-done__text {
    max-width: 420px;
    margin: 0 auto 28px;
    color: #55514a;
    font-size: 15px;
    line-height: 1.6;
}

.checkout-done__link {
    display: inline-block;
}

@media (max-width: 599px) {
    .checkout-done {
        padding: 36px 20px 32px;
    }

    .checkout-done__title {
        font-size: 24px;
    }
}