/* Start:/local/templates/main_v3/assets/css/redesign-cart.css?178841179835615*/
/* ==========================================================================
   ХозЗаказ — редизайн корзины и оформления заказа.
   Источник макета: /hozzakaz-redesign/cart.html + assets/ui.css (раздел 14).

   ВАЖНО про изоляцию.
   ui.css из прототипа переопределяет body, *, .row, .container, .btn, .badge,
   .check, .field, .summary, .qty, .tabs, .select — все эти классы уже заняты
   темой Wolmart (template_2.css 342 КБ + template_styles.css 392 КБ, последний
   Битрикс подключает автоматически). Поэтому здесь:
     1. все собственные классы имеют префикс hz-;
     2. всё живёт внутри .hz-checkout-page, токены объявлены на нём, а не в :root;
     3. классы-хуки, которые слушает main.js (.quantity, .input-group, .btn-close,
        .custom-control-input, .nav-tabs, .nav-link, .tab-content и т.д.), сохранены
        в разметке и здесь же перебиты — иначе на них ложатся стили темы.

   Файл подключается только на /cart/ и /cart/order/ через SetAdditionalCSS.
   ========================================================================== */

.hz-checkout-page {
    --hz-brand: #22B24B;
    --hz-brand-600: #1E9F42;
    --hz-brand-700: #178235;
    --hz-brand-050: #EAF8EF;
    --hz-brand-100: #D3F0DD;

    --hz-accent: #FF6B00;
    --hz-accent-050: #FFF2E8;
    --hz-hot: #E8262D;

    --hz-ink: #12181F;
    --hz-ink-2: #3D4753;
    --hz-muted: #7A8694;
    --hz-line: #E6EAF0;
    --hz-line-2: #F1F4F8;

    --hz-ok: #17A34A;
    --hz-warn: #F0A400;

    --hz-r-sm: 6px;
    --hz-r: 10px;
    --hz-r-lg: 16px;
    --hz-r-pill: 999px;

    --hz-sh-1: 0 1px 2px rgba(18, 24, 31, .06), 0 1px 3px rgba(18, 24, 31, .04);
    --hz-sh-2: 0 4px 12px rgba(18, 24, 31, .08);

    color: var(--hz-ink);
    font-size: 14px;
    line-height: 1.45;
}

.hz-checkout-page *,
.hz-checkout-page *::before,
.hz-checkout-page *::after {
    box-sizing: border-box;
}

.hz-checkout-page a {
    color: inherit;
    text-decoration: none;
}

.hz-checkout-page img {
    max-width: 100%;
}

/* Тема задаёт .checkout-form h3 { font-size: 2.2rem; font-weight: 400 } — перебиваем. */
.hz-checkout-page h1,
.hz-checkout-page h2,
.hz-checkout-page h3,
.hz-checkout-page h4,
.hz-checkout-page .checkout-form h3 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hz-ink);
}

.hz-checkout-page h1 { font-size: 28px; }
.hz-checkout-page h2 { font-size: 24px; }
.hz-checkout-page h3,
.hz-checkout-page .checkout-form h3 { font-size: 18px; }

.hz-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.hz-icon--16 { width: 16px; height: 16px; }

.hz-muted { color: var(--hz-muted); }
.hz-hint { font-size: 12px; color: var(--hz-muted); }

.hz-checkout-page .mb-16 { margin-bottom: 16px; }

/* ---------- Кнопки ---------- */
.hz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--hz-r);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.hz-btn--primary { background: var(--hz-brand); color: #fff; }
.hz-btn--primary:hover { background: var(--hz-brand-600); color: #fff; }
.hz-btn--primary:active { background: var(--hz-brand-700); }

/* Кнопки, сделанные ссылкой (вход у гостя), а не button.
   Виноват наш же сброс `.hz-checkout-page a { color: inherit }` в начале файла:
   его вес (0,1,1) выше, чем у `.hz-btn--primary` (0,1,0), поэтому ссылка
   наследовала цвет текста страницы и подпись на зелёной заливке выходила
   тёмной. Тег в селекторе поднимает вес до (0,2,1) — этого хватает, чтобы
   не тянуться к !important. Состояния перечислены явно: тема отдельно красит
   a:hover в свой зелёный (template_2.css). */
.hz-checkout-page a.hz-btn--primary,
.hz-checkout-page a.hz-btn--primary:link,
.hz-checkout-page a.hz-btn--primary:visited,
.hz-checkout-page a.hz-btn--primary:hover,
.hz-checkout-page a.hz-btn--primary:focus,
.hz-checkout-page a.hz-btn--primary:active {
    color: #fff;
}

/* Тот же сброс задевает и остальные кнопки-ссылки. Сейчас у контурной цвет
   совпадает с наследуемым и разницы не видно, но совпадение это случайное:
   стоит поменять цвет текста страницы — и кнопки поедут вслед за ним. */
.hz-checkout-page a.hz-btn--outline { color: var(--hz-ink); }
.hz-checkout-page a.hz-btn--ghost { color: var(--hz-ink-2); }

.hz-btn--outline { background: #fff; color: var(--hz-ink); border-color: var(--hz-line); }
.hz-btn--outline:hover { border-color: var(--hz-brand); color: var(--hz-brand-700); }

.hz-btn--ghost { background: transparent; color: var(--hz-ink-2); }
.hz-btn--ghost:hover { background: var(--hz-line-2); color: var(--hz-ink); }

.hz-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.hz-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 12px; }
.hz-btn--block { width: 100%; }

/* Кнопка, которой пока нельзя пользоваться: «Оформить заказ» до выбора пункта
   выдачи. Приглушена, но читается — рядом лежит строка с причиной, и она должна
   выглядеть как объяснение к кнопке, а не как надпись рядом с пустым местом.
   Наведение и нажатие гасим: кнопка не должна отвечать на курсор так, будто
   сейчас сработает. */
.hz-btn:disabled,
.hz-btn:disabled:hover,
.hz-btn:disabled:active {
    background: var(--hz-line);
    border-color: transparent;
    color: var(--hz-muted);
    cursor: not-allowed;
}

.hz-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--hz-r-sm);
    background: var(--hz-brand-050);
    color: var(--hz-brand-700);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Каркас страницы ---------- */
.hz-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.hz-checkout__main { min-width: 0; }

.hz-panel {
    position: relative;
    background: #fff;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-r-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.hz-panel > h3 { margin-bottom: 16px; }

.hz-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.hz-panel__head h3 { margin: 0; }
.hz-panel__head-spacer { margin-left: auto; }

.hz-subhead {
    font-size: 14px;
    font-weight: 700;
    margin: 18px 0 10px;
}

/* ---------- Строка товара ---------- */
.hz-line {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hz-line-2);
    align-items: center;
}

.hz-line:last-child { border-bottom: 0; padding-bottom: 0; }

.hz-line__media {
    width: 88px;
    height: 88px;
    background: var(--hz-line-2);
    border-radius: var(--hz-r);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #C3CCD8;
}

.hz-line__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* тема вешает .checkout-form img { border-radius } — не мешает, но фиксируем */
    border-radius: 0;
}

.hz-line__body { min-width: 0; }

.hz-line__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hz-ink);
}

.hz-line__title:hover { color: var(--hz-brand-700); }

.hz-line__meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--hz-muted);
}

.hz-line__warn {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hz-warn);
}

.hz-line__stock {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hz-ok);
}

.hz-line__stock--low { color: var(--hz-warn); }

.hz-line__ctl {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.hz-line__price {
    text-align: right;
    min-width: 130px;
}

.hz-line__price b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Счётчик количества ----------
   .input-group и .quantity — хуки changeQInput() в main.js, поэтому классы темы
   остаются в разметке и перебиваются здесь. Тема задаёт им height/padding/фон. */
.hz-checkout-page .hz-qty.input-group {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: none;
    height: 36px;
    max-height: none;
    min-height: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-r);
    overflow: hidden;
    position: relative;
}

.hz-checkout-page .hz-qty__btn {
    width: 32px;
    height: 100%;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--hz-ink-2);
    font-size: 16px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.hz-checkout-page .hz-qty__btn:hover { background: var(--hz-line-2); color: var(--hz-brand); }
.hz-checkout-page .hz-qty__btn:disabled { color: #C3CCD8; cursor: default; background: #fff; }

.hz-checkout-page .hz-qty__input.quantity {
    width: 44px;
    max-width: none;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--hz-ink);
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.hz-checkout-page .hz-qty__input.quantity::-webkit-outer-spin-button,
.hz-checkout-page .hz-qty__input.quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Удаление товара. .btn-close — хук deleteItemFromBasket(). */
.hz-checkout-page .hz-line__del.btn-close {
    position: static;
    width: auto;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--hz-r);
    background: transparent;
    box-shadow: none;
    color: var(--hz-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.hz-checkout-page .hz-line__del.btn-close:hover { background: var(--hz-line-2); color: var(--hz-hot); }

/* ---------- Поля ---------- */
.hz-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hz-field label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--hz-muted);
}

.hz-field label .hz-req { color: var(--hz-hot); }

.hz-checkout-page .hz-field input,
.hz-checkout-page .hz-field textarea {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-r);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--hz-ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.hz-checkout-page .hz-field textarea {
    height: auto;
    min-height: 92px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.45;
}

.hz-checkout-page .hz-field input:focus,
.hz-checkout-page .hz-field textarea:focus {
    border-color: var(--hz-brand);
    box-shadow: 0 0 0 3px var(--hz-brand-050);
}

.hz-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ---------- Табы «физлицо / юрлицо» ----------
   Структура .tab > ul.nav.nav-tabs > li > a.nav-link.func обязательна:
   её слушает Hozzakaz.setTab(), которая и дёргает data-func. */
.hz-checkout-page .hz-tabs.tab { margin-bottom: 18px; }

.hz-checkout-page .hz-tabs .nav-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--hz-line-2);
    border: 0;
    border-radius: var(--hz-r);
}

.hz-checkout-page .hz-tabs .nav-item { margin: 0; }

.hz-checkout-page .hz-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--hz-muted);
    letter-spacing: 0;
    text-transform: none;
}

.hz-checkout-page .hz-tabs .nav-link.active {
    background: #fff;
    color: var(--hz-ink);
    box-shadow: var(--hz-sh-1);
}

/* ---------- Карточки-радио (доставка, оплата) ---------- */
.hz-optioncards {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.hz-checkout-page .hz-optioncard {
    position: relative;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 1.5px solid var(--hz-line);
    border-radius: var(--hz-r);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.hz-checkout-page .hz-optioncard:hover { border-color: var(--hz-brand-100); }

.hz-checkout-page .hz-optioncard.is-selected,
.hz-checkout-page .hz-optioncard.check {
    border-color: var(--hz-brand);
    background: var(--hz-brand-050);
}

.hz-checkout-page .hz-optioncard__link,
.hz-checkout-page .hz-optioncard__label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 14px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

/* Кастомный кружок радио вместо псевдоэлементов темы. */
.hz-checkout-page .hz-optioncard .hz-radio {
    position: static;
    left: auto;
    top: auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: none;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--hz-line);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.hz-checkout-page .hz-optioncard .hz-radio:checked { border: 5px solid var(--hz-brand); }

/* body — span внутри label/a, поэтому display задаём явно */
.hz-optioncard__body { display: block; min-width: 0; }

.hz-checkout-page .hz-optioncard b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--hz-ink);
}

.hz-optioncard__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--hz-muted);
}

.hz-optioncard__price {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hz-brand-700);
}

/* Пустая подпись-хук: её кликает inline-скрипт шаблона и слушает chooseDelivery(). */
.hz-checkout-page .hz-optioncard .hz-optioncard__hit {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hz-checkout-page .hz-optioncard .hz-optioncard__hit::before,
.hz-checkout-page .hz-optioncard .hz-optioncard__hit::after { content: none; }

/* Содержимое вкладок доставки */
.hz-checkout-page .hz-delivery-tabs { margin-top: 14px; }

.hz-checkout-page .hz-delivery-tabs .tab-content {
    display: block;
    padding: 0;
    border: 0;
    background: none;
}

.hz-checkout-page .hz-delivery-tabs .tab-content.hidden-tab { display: none; }

.hz-delivery-info {
    padding: 14px;
    border-radius: var(--hz-r);
    background: var(--hz-line-2);
    font-size: 13px;
    color: var(--hz-ink-2);
    margin-top: 15px;
}

.hz-delivery-info b { color: var(--hz-ink); }
.hz-delivery-info--warn { background: var(--hz-accent-050); color: #A34500; }
.hz-delivery-info--warn b { color: inherit; }

/* Подсказка «что делать» под текстом ошибки. Отдельной строкой и мельче:
   сначала покупатель читает, что случилось, потом — как из этого выйти. */
.hz-delivery-info__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .85;
}

.hz-delivery-info__hint a { color: inherit; text-decoration: underline; }

/* Ошибки оформления заказа — над кнопкой «Оформить заказ». Красный, а не
   оранжевый, как у предупреждений о доставке: там заказ всё равно оформится,
   здесь — нет. */
.hz-order-error {
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid #F0B4A8;
    border-radius: var(--hz-r);
    background: #FDF1EE;
    font-size: 13px;
    line-height: 1.5;
    color: #9E2B12;
}

/* ---------- Тестовый режим ----------
   Плашка над корзиной и её короткий двойник в сводке над кнопкой «Оформить
   заказ». Оранжевая, как предупреждения о доставке, а не красная: ничего не
   сломалось — просто заказ никто не повезёт, и знать об этом покупатель должен
   до того, как заполнит форму. Обе включаются одним флагом HZ_SITE_TEST_MODE
   (local/php_interface/constants.php). */
.hz-testmode {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #F3C99B;
    border-radius: var(--hz-r-lg);
    background: var(--hz-accent-050);
    font-size: 13px;
    line-height: 1.5;
    color: #A34500;
}

.hz-testmode__ico { margin-top: 1px; width: 22px; height: 22px; }
.hz-testmode__body b { display: block; margin-bottom: 2px; font-size: 15px; }
.hz-testmode__body a { color: inherit; text-decoration: underline; white-space: nowrap; }

/* В сводке места меньше, и читают её мельком — оставляем только суть. */
.hz-testmode--compact { margin: 0 0 12px; padding: 12px 14px; font-size: 12px; }
.hz-testmode--compact .hz-testmode__body b { font-size: 13px; }

/* Причина, по которой «Оформить заказ» неактивна. Не ошибка — покупатель ничего
   не сломал, ему осталось выбрать пункт выдачи, — поэтому спокойный серый, а не
   красный блок ошибки выше. */
.hz-order-hint {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--hz-muted);
    text-wrap: pretty;
}

.hz-order-error__text { margin: 0 0 6px; font-weight: 600; }
.hz-order-error__text:last-child { margin-bottom: 0; }
.hz-order-error__call { margin: 8px 0 0; font-size: 12px; opacity: .9; }
.hz-order-error__call a { color: inherit; text-decoration: underline; white-space: nowrap; }

.hz-store-card {
    padding: 14px;
    border-radius: var(--hz-r);
    background: var(--hz-brand-050);
    font-size: 13px;
    margin-bottom: 15px;
    color: var(--hz-ink-2);
}

.hz-store-card b { display: block; font-size: 14px; color: var(--hz-ink); }
.hz-store-card span { display: block; margin-top: 2px; }

/* ---------- Терминалы Деловых линий ----------
   Список вместо карты: у ДЛ терминал в городе обычно один, и грузить ради
   единственной булавки стороннее API карт незачем. Внешне держимся тех же
   правил, что .hz-optioncard у способов получения, — те же рамка, скругление и
   зелёная подсветка выбранного, — но своим классом: карточки способов лежат в
   grid и завязаны на .custom-radio-delivery со своим скриптом вкладок. */
.hz-terminals { margin-top: 15px; }

.hz-terminals__lead {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--hz-ink-2);
}

.hz-terminal {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1.5px solid var(--hz-line);
    border-radius: var(--hz-r);
    background: #fff;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.hz-terminal:last-child { margin-bottom: 0; }
.hz-terminal:hover { border-color: var(--hz-brand-100); }

.hz-terminal.is-selected {
    border-color: var(--hz-brand);
    background: var(--hz-brand-050);
}

/* Радиокнопка рисуется своя: тема даёт input[type=radio] абсолютное
   позиционирование и нулевую непрозрачность, и без сброса кружок не виден. */
.hz-terminal .hz-radio {
    position: static;
    left: auto;
    top: auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: none;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--hz-line);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.hz-terminal .hz-radio:checked { border: 5px solid var(--hz-brand); }

.hz-terminal__body { display: block; min-width: 0; }

.hz-terminal__body b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hz-ink);
}

.hz-terminal__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--hz-muted);
}

/* ---------- Итог ---------- */
.hz-checkout-page .hz-summary {
    background: #fff;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-r-lg);
    padding: 20px;
    position: sticky;
    top: 100px;
}

.hz-checkout-page .hz-summary__title { margin-bottom: 12px; }

.hz-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
}

.hz-summary__row > span:first-child { color: var(--hz-muted); }
.hz-summary__row > span:last-child { text-align: right; }

/* Причина, по которой доставка не посчиталась. Занимает место цены, поэтому
   мельче и в две-три строки: «Для доставки нужен вес товара, а у позиции
   «...» он не указан» в одну строку сводки не влезает и без переноса
   растянула бы всю колонку. */
.hz-summary__delivery-reason {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--hz-muted);
    text-wrap: pretty;
}

.hz-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--hz-line);
}

.hz-summary__total b { font-size: 24px; font-weight: 800; }

/* Порог бесплатной доставки. Обёртка пустая ровно тогда, когда правило не
   действует, — и тогда не должна занимать ни пикселя: :empty вместо отступов на
   самом блоке. Сам блок из разметки не убирается намеренно, см. комментарий в
   cart.items.html. */
.hz-summary__freeship:not(:empty) { margin: 4px 0 2px; }

.hz-freeship {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    border-radius: var(--hz-r);
    background: var(--hz-accent-050);
    font-size: 13px;
    line-height: 1.35;
    color: var(--hz-ink);
}

.hz-freeship b { font-weight: 700; white-space: nowrap; }

.hz-freeship__text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

/* Полоска «сколько уже набрано». Ширину ставит шаблон инлайном по
   FREE_SHIPPING.PROGRESS: считает её сервер, а не браузер, — процент зависит от
   порога, а порог живёт в настройках. */
.hz-freeship__bar {
    display: block;
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}

.hz-freeship__bar > i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--hz-accent);
    transition: width .25s ease;
}

/* Порог взят. Зелёный тут не украшение, а разница по смыслу: оранжевый блок
   выше — это «доплатите», а этот — «уже бесплатно», и путать их нельзя. */
.hz-freeship--done {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: var(--hz-brand-050);
    color: var(--hz-brand-700);
    font-weight: 600;
}

.hz-freeship--done .hz-icon { width: 16px; height: 16px; stroke-width: 2.2; }

/* Сводка на время пересчёта. Класс вешает main.js, когда уходит запрос за новой
   ценой доставки; снимается сам вместе с перерисовкой формы. Приглушаем только
   суммы, которые меняются, — заголовки и «Товары» остаются читаемыми. */
.hz-summary--busy .hz-summary__delivery,
.hz-summary--busy .hz-summary__total b {
    opacity: .35;
    transition: opacity .15s ease;
}

/* Пересчёт после смены количества. Здесь приглушена ОДНА строка — доставка.
   Сумма товаров и «К оплате» пересчитаны прямо в браузере по цене за штуку и
   уже верны, ждёт ответа перевозчика только цена доставки. Раньше на это время
   гасли все суммы разом, хотя две из трёх были известны сразу. */
.hz-summary--recalc .hz-summary__delivery {
    opacity: .35;
    transition: opacity .15s ease;
}

/* Оплата частями (Яндекс Сплит). Бейдж внутрь .hz-split__badge монтирует SDK
   Яндекса, разметки у него здесь нет — см. Hozzakaz.mountSplitBadge в main.js.

   Отступы и рамка висят на внутреннем блоке, а не на обёртке .js-split:
   обёртка рисуется всегда, в том числе пустой (иначе patchOrderForm увидит
   разное число узлов и перерисует форму целиком, выбросив карту ПВЗ), и отступ
   на ней раздвигал бы сводку там, где блока нет. */
.hz-split {
    margin: 12px 0 16px;
    padding: 12px;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-r);
    background: #fff;
}

/* Отступ появляется только вместе с бейджем: пока SDK не смонтировал его —
   а он не смонтирует, если сумма вне лимита Сплита покупателя, — узел пуст, и
   подпись не должна висеть с зазором от пустого места. */
.hz-split__badge:not(:empty) { margin-bottom: 8px; }

.hz-split__note {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--hz-muted);
}

/* Переключатель «другие сроки». Ссылка, а не кнопка на вид: рядом уже стоят
   «Оформить заказ» и «Вернуться к покупкам», и третья кнопка в столбик увела бы
   взгляд от главной. Разметка при этом именно <button> — по клавиатуре это
   действие, а не переход. */
.hz-split__more {
    display: inline-block;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--hz-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.hz-split__more:hover { color: var(--hz-ink); }

/* Попап с виджетом выбора срока.

   Виджет приезжает в iframe и меряет себя сам — Яндекс считает его размеры
   внутри и наружу отдаёт готовую высоту. Поэтому здесь только рамка вокруг:
   ширину задаём с запасом (виджет в среднем размере просит около 520 px), а
   высоту не трогаем вовсе. Всё, что уже пробовали ужать снаружи, кончалось
   обрезанным графиком платежей. */
.hz-split-popup {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px;
    border-radius: var(--hz-r-lg);
    background: #fff;
}

.hz-split-popup__body { min-height: 200px; }

.hz-split-popup__body iframe { max-width: 100%; }

@media (max-width: 600px) {
    .hz-split-popup { padding: 14px; }
}

/* Пересчёт. Бейдж гасим вместе со строкой доставки, а не вместе с суммами:
   сумму товаров браузер пересчитывает сам, а число в бейдже считает Яндекс по
   старому запросу — до ответа оно относится к прежнему итогу. Показывать
   «по N ₽» от прошлой корзины как окончательное нельзя. */
.hz-summary--busy .hz-split,
.hz-summary--recalc .hz-split {
    opacity: .35;
    transition: opacity .15s ease;
}

.hz-checkout-page .hz-summary .place-order { margin: 0 0 8px; }
.hz-checkout-page .hz-summary > .hz-btn--outline { margin-bottom: 4px; }

/* «Войти и оформить» у гостя стоит на месте .place-order, но обёртки не имеет —
   отступ до «Вернуться к покупкам» нужен тот же, иначе кнопки слипаются. */
.hz-checkout-page .hz-summary > .hz-btn--primary { margin-bottom: 8px; }

.hz-agree {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--hz-muted);
    line-height: 1.5;
}

.hz-agree a { color: var(--hz-brand-700); }

/* ---------- Прелоадер ---------- */
.hz-checkout-page .preloader-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(255, 255, 255, .7);
    border-radius: var(--hz-r-lg);
}

.hz-checkout-page .preloader-overlay__inner {
    position: sticky;
    top: 40%;
    display: grid;
    place-items: center;
    padding: 20px 0;
}

.hz-checkout-page .preloader-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--hz-brand-100);
    border-top-color: var(--hz-brand);
    border-radius: 50%;
    animation: hz-spin .8s linear infinite;
}

@keyframes hz-spin { to { transform: rotate(360deg); } }

/* Заглушка до первого рендера формы (её затирает app.content с clear:true) */
.hz-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 240px;
    background: #fff;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-r-lg);
    color: var(--hz-muted);
}

/* ---------- Пустая корзина ---------- */
.hz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    background: #fff;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-r-lg);
    text-align: center;
    margin-bottom: 16px;
}

.hz-empty__ico {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--hz-brand-050);
    color: var(--hz-brand);
    display: grid;
    place-items: center;
}

.hz-empty__title { font-size: 24px; font-weight: 700; }
.hz-empty p { margin: 0; color: var(--hz-muted); }

/* ---------- Вход вместо формы оформления ---------- */
/* Стоит на месте панелей «Покупатель / Доставка / Оплата», поэтому оформление
   то же самое, что у .hz-panel, — карточка не должна выглядеть чужеродной. */
.hz-authgate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}

.hz-authgate__ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hz-brand-050);
    color: var(--hz-brand);
    display: grid;
    place-items: center;
}

.hz-authgate__ico .hz-icon { width: 26px; height: 26px; }

.hz-checkout-page .hz-authgate > h3 { margin: 0; font-size: 20px; }

.hz-authgate p {
    margin: 0;
    max-width: 460px;
    color: var(--hz-muted);
}

.hz-authgate__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.hz-authgate__actions .hz-btn { min-width: 190px; }

.hz-authgate__note { font-size: 13px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
    .hz-checkout { grid-template-columns: 1fr; }
    .hz-checkout-page .hz-summary { position: static; }
}

@media (max-width: 720px) {
    .hz-field-grid { grid-template-columns: 1fr; }
    .hz-line { grid-template-columns: 72px minmax(0, 1fr); }
    .hz-line__media { width: 72px; height: 72px; }
    .hz-line__price {
        grid-column: 1 / -1;
        min-width: 0;
        text-align: left;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }
    .hz-panel { padding: 16px; }
    .hz-checkout-page h1 { font-size: 24px; }
}
#cart-items .hz-panel__head h3{
    margin-bottom: 0 !important;
}
/* End */
/* /local/templates/main_v3/assets/css/redesign-cart.css?178841179835615 */