/* =========================================================
   ZIPTEH — модуль корзины.

   14.09.2026 перекомпонован по макету заказчика:
     • товары идут СТРОКАМИ, а не плиткой: фото · название, артикул
       и бренд · наличие · степпер и сумма · удалить;
     • 15.09: шапка — как на «Избранном» (заголовок без карточки),
       под ней полоса фактов в оформлении показателей «О компании»
       с главной; фото строки 3:2 с точками и увеличением по клику;
     • сайдбар «Итого по заказу» разбивает сумму: товары, скидка,
       доставка, сумма без НДС, НДС, итог к оплате;
     • внизу модуля — полоса «Больше объём — больше выгода!»
       с остатком до спецусловий.

   Строка товара — своя разметка .zt-cart-row: строк в каталоге нет,
   поэтому каталожная карточка (.zt-product-card + cart-product-cards.css)
   в корзине больше не используется. Значения взяты у каталога
   и главной, а не подобраны: рамка карточки 1px #e3e5e5 и радиус 12,
   степпер 1px #dfe3e7 / радиус 8 / высота 42, наличие #23a05a с точкой
   #2eb968, «под заказ» #98a1a9 / #b9c0c6, текст #333a43 / #6b747c /
   #8a939b, жёлтый #ffb800, кнопки — Tektur 15/700 капсом, как «Каталог»
   и «Подобрать запчасть».

   Раскладка строки зависит от ширины СПИСКА, а не окна: список —
   контейнер (container-type: inline-size), строки перестраиваются
   правилами @container:
     < 560   фото слева, рядом описание и наличие, ниже — степпер
             и сумма полосой во всю ширину (телефоны);
     560+    фото | описание | удалить  /  наличие | степпер и сумма;
     820+    всё в одну строку, как в макете; с 1000 — крупнее.
   Где container queries не поддерживаются, остаётся первый вариант —
   он рабочий на любой ширине.

   Сетка модуля — по окну:
     полоса   4 ячейки; до 720 — 2 × 2
     layout   < 1024 — сайдбар под списком, 1024+ — справа и прилипает;
              300 px, с 1280 — 340, с 1600 — 380
     полоса   < 760 — столбиком, 760+ — две строки, 1280+ — одна строка

   ИМЕНА КЛАССОВ выбраны в обход общих правил сайта «по подстроке
   класса» (zt-redesign.css, zt-home-unify.css): «__heading» и
   «__headline» получают Russo One, «button», «__all», «__more»,
   «__tab» — Manrope, «badge», «__tag», «eyebrow» — Manrope,
   «__submit» и «yellow» — жёлтую заливку, «__arrow» — круглую
   форму, «-card» / «__card» — радиус карточки, а `section li`
   ниже 768 px — white-space: normal. Каждое такое совпадение
   молча меняло бы вид модуля.

   И ещё одно общее правило: сброс reset.css задаёт шрифт, кегль 16,
   вес 400, межстрочный 1 и цвет КАЖДОМУ элементу селектором `*`,
   поэтому наследование от контейнера до текста не доходит (О-025).
   Кегль, вес и цвет здесь назначены самим текстовым элементам.
   ========================================================= */

.zt-cart,
.zt-cart *,
.zt-cart *::before,
.zt-cart *::after {
    box-sizing: border-box;
}

/* hidden обязан прятать: у строк сайдбара и полосы display задан явно
   и перебил бы атрибут. */
.zt-cart [hidden] {
    display: none !important;
}

/* Иконки рисуются stroke: currentColor, но сброс `*` красит в #333a43
   и сам <svg>, и каждый <path> — цвет кнопки до иконки не доходил:
   корзина-удаление не серела и не краснела, «%» был тёмным на жёлтом. */
.zt-cart svg,
.zt-cart svg * {
    color: inherit;
}

.zt-cart {
    --ztc-ink: #333a43;
    --ztc-body: #6b747c;
    --ztc-muted: #8a939b;
    --ztc-line: #e3e5e5;
    --ztc-panel-line: #dfe3e8;
    --ztc-divider: #eef0f2;
    --ztc-yellow: var(--zt-products-yellow, #ffb800);
    --ztc-yellow-hover: #e8a600;
    --ztc-on-yellow: #1a1a1a;
    --ztc-green: #23a05a;
    --ztc-green-dot: #2eb968;
    --ztc-order: #98a1a9;
    --ztc-order-dot: #b9c0c6;
    --ztc-red: #e0483a;
    --ztc-radius: 8px;
    --ztc-radius-lg: 12px;
    --ztc-shadow: 0 8px 24px rgba(37, 49, 66, .055);

    width: 100%;
    margin: 0 0 26px;
    /* Как у модуля «Избранного» (.ztf { padding-top: 4px }): от крошек
       до заголовка 24 px на ПК и 18 на телефоне — отступ крошек задаёт
       site-shell.css (--zt-crumbs-space-bottom, 20 / 14, с !important),
       плюс эти 4 px. */
    padding-top: 4px;
    color: var(--ztc-ink);
    font-family: var(--zt-font, 'Inter', Arial, Helvetica, sans-serif);
}

/* Заголовок страницы шаблона на этой странице лишний: модуль
   печатает свой. Заодно снимается наложение счётчика на H1,
   из-за которого блок корзины уезжал под шапку контента (О-026).
   Правила страницы — через body:has(.zt-cart), как у «Доставки»,
   «Новостей» и «Вакансий»: класса страницы у body на бою нет,
   а header.php ради корзины не трогаем. */
body:has(.zt-cart) .zt-page-heading {
    display: none;
}

/* ---------- Шапка модуля ----------
   15.09.2026, указание заказчика: шапка — как на странице «Избранное».
   Без карточки и без плашки «Ваш заказ»: заголовок на фоне страницы,
   набран как H1 избранного и каталога — Russo One, clamp(30px, 4vw, 46px),
   800, капсом, трекинг −0,035em, число жёлтым; пояснение 15/500 #4d5966,
   на телефоне 14 (favorites-page.css, .ztf-title / .ztf-lead). */

/* Отступы — как у шапки «Избранного»: до следующего блока 24 px,
   на телефоне 20 (замер favorites.html на 1440: 24). */
.zt-cart__intro {
    margin: 0 0 24px;
}

.zt-cart__title {
    margin: 0 !important;
    color: #333a43 !important;
    font-size: clamp(30px, 4vw, 46px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
    text-transform: uppercase !important;
}

/* 15.09.2026, указание заказчика: «— 6 позиций» из заголовка убрано,
   остаётся «Корзина»; число позиций — в полосе ниже. */

.zt-cart__lead {
    max-width: 640px;
    margin: 10px 0 0;
    color: #4d5966;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .zt-cart__intro { margin-bottom: 20px; }
    .zt-cart__lead { font-size: 14px; }
}

/* ---------- Полоса фактов ----------
   15.09.2026, указание заказчика: оформлена как показатели модуля
   «О компании» на главной («10+ лет на рынке | 1М+ запчастей | …»,
   company-map.css, .zt-company-map__stats), а показывает то, что сейчас
   в корзине: позиции, в наличии, под заказ, итого. Значения оттуда же:
   рамка 1px #e3e7eb, радиус 16, фон rgba(255,255,255,.92), тень
   0 12px 30px rgba(38,47,56,.06), поле ячейки 24 / clamp(18px, 2vw, 30px),
   число и подпись одним кеглем clamp(22px, 1.8vw, 30px)/700 — число жёлтым,
   подпись #333a43 строчными; до 1180 px — clamp(16px, 2.1vw, 22px). */

.zt-cart__stats {
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #e3e7eb;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 30px rgba(38, 47, 56, .06);
}

.zt-cart__stat {
    min-width: 0;
    padding: 24px clamp(18px, 2vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.zt-cart__stat + .zt-cart__stat {
    border-left: 1px solid #e3e7eb;
}

/* Число и подпись в одну строку; если сумма длинная и не влезает —
   подпись уходит под число, а не за край ячейки. */
.zt-cart__stat-body {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
}

.zt-cart__stat-body > b,
.zt-cart__stat-body > span {
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.zt-cart__stat-body > b { color: var(--ztc-yellow); }

/* Подписи капсом — указание заказчика 15.09.2026 («текст капсом сделай»);
   у показателей «О компании» на главной они строчные. */
.zt-cart__stat-body > span {
    color: #333a43;
    text-transform: uppercase;
}

@media (max-width: 1180px) {
    .zt-cart__stat { padding: 16px 6px; }
    .zt-cart__stat-body { gap: 4px 5px; }

    .zt-cart__stat-body > b,
    .zt-cart__stat-body > span { font-size: clamp(16px, 2.1vw, 22px); }
}

/* Телефон: 2 × 2 с перегородками — четыре ячейки в строку на 360 px
   не читаются (у главной там подписи 9 px). */
@media (max-width: 720px) {
    .zt-cart__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zt-cart__stat { padding: 14px 8px; }
    .zt-cart__stat:nth-child(3) { border-left: 0; }
    .zt-cart__stat:nth-child(n + 3) { border-top: 1px solid #e3e7eb; }

    .zt-cart__stat-body > b,
    .zt-cart__stat-body > span { font-size: 16px; }
}

/* ---------- Раскладка ---------- */

.zt-cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1024px) {
    .zt-cart__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
}

@media (min-width: 1280px) {
    .zt-cart__layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
}

@media (min-width: 1600px) {
    .zt-cart__layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* ---------- Список товаров ---------- */

.zt-cart__items {
    min-width: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    list-style: none;
    container: zt-cart-list / inline-size;
}

/* Базовая раскладка — узкий список (телефон):
     фото | описание        | удалить
     фото | наличие
     степпер ········· сумма  */
.zt-cart-row {
    position: relative;
    margin: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 40px;
    grid-template-areas:
        "media info  remove"
        "media stock stock"
        "buy   buy   buy";
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    list-style: none;
    background: #fff;
    border: 1px solid var(--ztc-line);
    border-radius: var(--ztc-radius-lg);
    box-shadow: 0 2px 10px rgba(37, 49, 66, .035);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zt-cart-row:hover {
    border-color: #d6dade;
    box-shadow: 0 6px 18px rgba(37, 49, 66, .06);
}

/* Фото — строго 3:2, как у карточек главной, каталога и поиска
   (указание заказчика 15.09.2026; sale-products.css: aspect-ratio 3/2,
   object-fit: cover — снимок заполняет кадр). Кнопка: наведение листает
   кадры, точки внизу показывают, какой; клик открывает фото крупно
   (cart-v2.js). */
.zt-cart-row__media {
    grid-area: media;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 0;
    border-radius: var(--ztc-radius);
    background: #f4f5f6;
    cursor: zoom-in;
}

.zt-cart-row__media:focus-visible {
    outline: 2px solid var(--ztc-ink);
    outline-offset: 2px;
}

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

/* Точки — как у карточек главной (sale-products.css,
   .zt-product-card__dots): 5 px, зазор 4, жёлтая — текущий кадр. */
.zt-cart-row__dots {
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}

.zt-cart-row__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(21, 26, 30, .25);
}

.zt-cart-row__dots i.is-active {
    background: #ffb800;
}

.zt-cart-row__info {
    grid-area: info;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zt-cart-row__name {
    margin-bottom: 2px;
    display: -webkit-box;
    overflow: hidden;
    color: var(--ztc-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Общее `a:hover` красит ссылки в жёлтый — на белом он не читается. */
.zt-cart-row__name:hover,
.zt-cart-row__name:focus-visible {
    color: #111820;
    text-decoration: underline;
    text-decoration-color: var(--ztc-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.zt-cart-row__meta {
    margin: 0;
    color: var(--ztc-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.zt-cart-row__stock {
    grid-area: stock;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.zt-cart-row__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ztc-green);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.zt-cart-row__state i {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--ztc-green-dot);
}

.zt-cart-row__stock-qty {
    color: var(--ztc-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}

.zt-cart-row__stock--order .zt-cart-row__state { color: var(--ztc-order); }
.zt-cart-row__stock--order .zt-cart-row__state i { background: var(--ztc-order-dot); }

.zt-cart-row__buy {
    grid-area: buy;
    min-width: 0;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--ztc-divider);
}

/* Степпер — как у каталожной карточки (1px #dfe3e7, радиус 8),
   но с перегородками у поля, как в макете. На телефоне 44 px —
   минимальная тач-цель. */
.zt-cart-row__stepper {
    height: 44px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe3e7;
    border-radius: var(--ztc-radius);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zt-cart-row__stepper:focus-within {
    border-color: var(--ztc-yellow);
    box-shadow: 0 0 0 1px var(--ztc-yellow);
}

.zt-cart-row__step {
    width: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--ztc-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.zt-cart-row__step:hover:not(:disabled) {
    color: #111820;
    background: #f5f6f7;
}

.zt-cart-row__step:disabled {
    color: #c5cbd0;
    cursor: default;
}

.zt-cart-row__step:focus-visible {
    outline: 2px solid var(--ztc-ink);
    outline-offset: -2px;
}

.zt-cart-row__qty {
    width: 48px;
    margin: 0;
    padding: 0;
    color: #1e2428;
    background: #fff;
    border: 0;
    border-left: 1px solid #dfe3e7;
    border-right: 1px solid #dfe3e7;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Общее `input:focus` рисует жёлтую рамку вокруг поля — здесь её
   заменяет подсветка всего степпера (:focus-within выше). */
.zt-cart-row__qty:focus {
    outline: none;
    background: #fffaeb;
}

.zt-cart-row__sum {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.zt-cart-row__sum-value {
    color: var(--ztc-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.zt-cart-row__sum-unit {
    color: var(--ztc-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

/* Товар без цены: вместо «0 ₽» — «Уточняйте цену», как в каталоге (О-027). */
.zt-cart-row__sum--request .zt-cart-row__sum-value {
    color: var(--ztc-body);
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
}

.zt-cart-row__remove {
    grid-area: remove;
    justify-self: end;
    width: 40px;
    height: 40px;
    margin: -6px -6px 0 0;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--ztc-muted);
    background: transparent;
    border: 0;
    border-radius: var(--ztc-radius);
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

.zt-cart-row__remove:hover {
    color: var(--ztc-red);
    background: #fdf0ef;
}

.zt-cart-row__remove:focus-visible {
    outline: 2px solid var(--ztc-ink);
    outline-offset: 0;
}

.zt-cart-row__remove svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Состояния строки на бою ----------
   Их показывает штатный component.js Битрикса (js-templates/basket-item.php):
   загрузка после «+/−», удалённая строка с «Восстановить», предупреждения,
   нет в наличии, скидка. На стенде их не видно — там нет Битрикса. */

/* Фото-заглушка вместо кнопки, когда у товара нет ни одного снимка */
.zt-cart-row__media--empty {
    cursor: default;
}

.zt-cart-row__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: rgba(255, 255, 255, .6);
    cursor: progress;
}

.zt-cart-row.is-unavailable .zt-cart-row__media,
.zt-cart-row.is-unavailable .zt-cart-row__name {
    opacity: .55;
}

.zt-cart-row__note {
    position: relative;
    margin: 4px 0 0;
    padding: 6px 30px 6px 10px;
    color: #8a6200;
    border-radius: var(--ztc-radius);
    background: #fff6dd;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.zt-cart-row__note div {
    font-size: 12px;
    line-height: 1.4;
    color: inherit;
}

.zt-cart-row__note-close {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    color: #8a6200;
    background: transparent;
    border: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.zt-cart-row__link {
    padding: 0;
    color: #333a43;
    background: transparent;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--ztc-yellow);
    text-underline-offset: 3px;
    cursor: pointer;
}

.zt-cart-row__sum-old {
    color: var(--ztc-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: line-through;
    white-space: nowrap;
}

/* Удалённая строка: одна строка текста, «Восстановить» и крестик */
.zt-cart-row.zt-cart-row--removed {
    padding: 14px 12px 14px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    background: #fafbfb;
    box-shadow: none;
}

.zt-cart-row__removed-text {
    min-width: 0;
    flex: 1 1 260px;
    margin: 0;
    color: var(--ztc-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.zt-cart-row__restore {
    min-height: 40px;
    padding: 0 16px;
    color: var(--ztc-on-yellow);
    background: var(--ztc-yellow);
    border: 0;
    border-radius: var(--ztc-radius);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.zt-cart-row__restore:hover { background: var(--ztc-yellow-hover); }

.zt-cart-row--removed .zt-cart-row__remove {
    margin: 0;
}

/* Кнопкам строки сайт назначает Manrope (роль «кнопка», вес 2-2-2);
   «Восстановить» и ссылка в заметке — Tektur, как текст строки. */
body .zt-cart .zt-cart-row .zt-cart-row__restore:not(#zt_):not(#zt_),
body .zt-cart .zt-cart-row .zt-cart-row__link:not(#zt_):not(#zt_) {
    font-family: var(--zt-font, 'Tektur', Arial, sans-serif) !important;
}

/* Обёртки списка, по id которых работает component.js */
.zt-cart__list {
    min-width: 0;
}

.zt-cart__list-inner {
    position: relative;
}

.zt-cart__list-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: var(--ztc-radius-lg);
    background: rgba(255, 255, 255, .6);
}

.zt-cart__list-empty {
    padding: 24px;
    color: var(--ztc-body);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

/* Общие предупреждения корзины (#basket-warning) */
.zt-cart__warning {
    position: relative;
    margin: 0 0 16px;
    padding: 12px 44px 12px 16px;
    color: #8a6200;
    border: 1px solid rgba(255, 184, 0, .55);
    border-radius: var(--ztc-radius-lg);
    background: #fff6dd;
    font-size: 14px;
    line-height: 1.45;
}

.zt-cart__warning div {
    font-size: 14px;
    line-height: 1.45;
    color: inherit;
}

.zt-cart__warning-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #8a6200;
    background: transparent;
    border: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* Средний список (планшет, сайдбар справа на 1024–1279):
     фото | описание             | удалить
     фото | наличие | степпер и сумма */
@container zt-cart-list (min-width: 560px) {
    .zt-cart-row {
        padding: 14px 16px 14px 14px;
        grid-template-columns: 120px minmax(0, 1fr) auto 40px;
        grid-template-areas:
            "media info  info remove"
            "media stock buy  buy";
        column-gap: 16px;
        row-gap: 10px;
    }

    .zt-cart-row__stock { align-self: center; }

    .zt-cart-row__buy {
        padding-top: 0;
        justify-content: flex-end;
        gap: 20px;
        border-top: 0;
    }

    .zt-cart-row__stepper { height: 42px; }
    .zt-cart-row__step { width: 38px; }
    .zt-cart-row__sum { min-width: 116px; }
}

/* Широкий список — одна строка, как в макете:
     фото | описание | наличие | степпер и сумма | удалить
   Треки у всех строк одинаковые, поэтому колонки совпадают по
   вертикали по всему списку: суммы стоят одна под другой. */
@container zt-cart-list (min-width: 820px) {
    .zt-cart-row {
        padding: 12px 14px 12px 12px;
        grid-template-columns: 120px minmax(0, 2fr) minmax(112px, 1fr) minmax(262px, 1.4fr) 40px;
        grid-template-areas: "media info stock buy remove";
        column-gap: 16px;
        align-items: center;
    }

    .zt-cart-row__stock {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Под надписью, а не под точкой: точка 8 + зазор 7. */
    .zt-cart-row__stock-qty { padding-left: 15px; }

    .zt-cart-row__buy {
        justify-content: flex-start;
        gap: 22px;
    }

    .zt-cart-row__sum {
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }

    .zt-cart-row__remove {
        margin: 0;
        align-self: center;
    }
}

@container zt-cart-list (min-width: 1000px) {
    .zt-cart-row {
        padding: 12px 16px 12px 12px;
        grid-template-columns: 132px minmax(0, 2fr) minmax(128px, 1fr) minmax(290px, 1.4fr) 40px;
        column-gap: 20px;
    }

    .zt-cart-row__name { font-size: 16px; }
    .zt-cart-row__sum-value { font-size: 20px; }
    .zt-cart-row__buy { gap: 28px; }
}

/* ---------- Сайдбар «Итого по заказу» ---------- */

.zt-cart__summary {
    position: relative;
    padding: 22px;
    border: 1px solid var(--ztc-panel-line);
    border-radius: var(--ztc-radius-lg);
    background: #fff;
    box-shadow: var(--ztc-shadow);
    /* Кегль итоговой суммы считается от ширины самой панели (cqi). */
    container-type: inline-size;
}

@media (min-width: 1024px) {
    .zt-cart__summary {
        position: sticky;
        top: var(--zt-cart-sticky-top, 96px);
    }
}

@media (min-width: 1280px) {
    .zt-cart__summary { padding: 26px 26px 24px; }
}

.zt-cart-summary__title {
    margin: 0 0 14px !important;
    color: #333a43 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em;
    text-transform: uppercase !important;
}

@media (min-width: 1280px) {
    .zt-cart-summary__title { margin-bottom: 16px !important; font-size: 22px !important; }
}

.zt-cart-summary__rows {
    margin: 0;
    padding: 6px 0 12px;
    border-bottom: 1px solid var(--ztc-divider);
}

.zt-cart-summary__rows + .zt-cart-summary__rows {
    padding-top: 12px;
}

.zt-cart-summary__row {
    padding: 5px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

/* Кегль задаётся самим dt и dd, а не строке: общий сброс назначает
   font-size селектором `*` каждому элементу (О-025). */
.zt-cart-summary__row dt {
    margin: 0;
    color: var(--ztc-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.zt-cart-summary__row dd {
    margin: 0;
    color: var(--ztc-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
}

@media (min-width: 1280px) {
    .zt-cart-summary__row dt,
    .zt-cart-summary__row dd { font-size: 15px; }
}

.zt-cart-summary__row--discount dd {
    color: var(--ztc-red);
}

/* «Рассчитаем при оформлении» — единственное многострочное значение. */
.zt-cart-summary__row dd.zt-cart-summary__soft {
    max-width: 62%;
    color: var(--ztc-body);
    font-weight: 400;
    white-space: normal;
}

.zt-cart-summary__total {
    margin: 16px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zt-cart-summary__total-label {
    color: var(--ztc-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

/* 12.5cqi — от ширины панели: при сайдбаре 340 px это 35,75 px, и сумма
   до 14 знаков («1 234 567,89 ₽») ещё помещается в строку (замер: 11 знаков
   при 32,9 px занимают 193 px из 286). */
.zt-cart-summary__total-value {
    color: var(--ztc-ink);
    font-size: 32px;
    font-size: clamp(24px, 12.5cqi, 40px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.zt-cart-summary__checkout {
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Кнопки сайта: Tektur 15/700 капсом, тёмный текст на жёлтом
       («Каталог», «Подобрать запчасть»). */
    color: var(--ztc-on-yellow) !important;
    background: var(--ztc-yellow);
    border: 0;
    border-radius: var(--ztc-radius);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease;
}

.zt-cart-summary__checkout:hover { background: var(--ztc-yellow-hover); }

/* На бою «Оформить заказ» — <button> штатного component.js, а всем кнопкам
   сайт назначает Manrope (вес 2-2-2); здесь 2-3-1. Неактивна, когда
   в корзине нечего оформлять (DISABLE_CHECKOUT). */
body .zt-cart .zt-cart__summary .zt-cart-summary__checkout:not(#zt_):not(#zt_) {
    font-family: var(--zt-font, 'Tektur', Arial, sans-serif) !important;
}

.zt-cart-summary__checkout:disabled {
    color: #8a939b !important;
    background: #eef0f2;
    cursor: not-allowed;
}

.zt-cart-summary__checkout:focus-visible {
    outline: 2px solid #333a43;
    outline-offset: 2px;
}

.zt-cart-summary__checkout svg,
.zt-cart-promo__cta svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Полоса «Больше объём — больше выгода!» ---------- */

/* < 760: значок и заголовок, под ними текст и кнопка во всю ширину. */
.zt-cart-promo {
    margin-top: 20px;
    padding: 16px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "text text"
        "cta  cta";
    gap: 12px 14px;
    align-items: center;
    border: 1px solid rgba(255, 184, 0, .55);
    border-radius: var(--ztc-radius-lg);
    background: linear-gradient(90deg, rgba(255, 184, 0, .12), rgba(255, 184, 0, .05));
}

.zt-cart-promo__icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--ztc-yellow);
}

.zt-cart-promo__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zt-cart-promo__title {
    grid-area: title;
    margin: 0 !important;
    color: #333a43 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.015em;
    text-transform: none !important;
}

.zt-cart-promo__divider {
    display: none;
}

.zt-cart-promo__text {
    grid-area: text;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zt-cart-promo__line {
    margin: 0;
    color: var(--ztc-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.zt-cart-promo__line b {
    color: var(--ztc-yellow);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.zt-cart-promo__note {
    margin: 0;
    color: var(--ztc-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.zt-cart-promo__cta {
    grid-area: cta;
    min-height: 48px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ztc-on-yellow);
    background: var(--ztc-yellow);
    border: 0;
    border-radius: var(--ztc-radius);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}

.zt-cart-promo__cta:hover { background: var(--ztc-yellow-hover); }

.zt-cart-promo__cta:focus-visible {
    outline: 2px solid #333a43;
    outline-offset: 2px;
}

/* Всем <button> сайт назначает Manrope правилом весом 2-2-2
   (zt-redesign.css, «роли шрифтов»). У двух жёлтых кнопок модуля
   гарнитура должна быть одна — Tektur, как у «Оформить заказ»,
   которая по разметке ссылка. Вес этого селектора 2-3-1. */
body .zt-cart .zt-cart-promo .zt-cart-promo__cta:not(#zt_):not(#zt_) {
    font-family: var(--zt-font, 'Tektur', Arial, sans-serif) !important;
}

/* 760+: значок слева на две строки, кнопка справа. */
@media (min-width: 760px) {
    .zt-cart-promo {
        padding: 16px 20px;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon title cta"
            "icon text  cta";
        column-gap: 18px;
        row-gap: 6px;
    }

    .zt-cart-promo__icon { width: 56px; height: 56px; }
    .zt-cart-promo__icon svg { width: 28px; height: 28px; }
}

/* 1280+: одна строка, как в макете — значок, заголовок, черта,
   текст, кнопка. Ниже заголовку с текстом в одну строку тесно. */
@media (min-width: 1280px) {
    .zt-cart-promo {
        padding: 14px 20px 14px 16px;
        grid-template-columns: 64px auto 1px minmax(0, 1fr) auto;
        grid-template-areas: "icon title divider text cta";
        column-gap: 24px;
    }

    .zt-cart-promo__icon { width: 64px; height: 64px; }
    .zt-cart-promo__icon svg { width: 30px; height: 30px; }

    .zt-cart-promo__title {
        font-size: 24px !important;
        white-space: nowrap;
    }

    .zt-cart-promo__divider {
        grid-area: divider;
        width: 1px;
        height: 44px;
        display: block;
        background: rgba(255, 184, 0, .5);
    }

    .zt-cart-promo__cta { min-height: 52px; padding: 0 24px; }
}

/* ---------- Фото крупно ----------
   Как лайтбокс карточки товара (product-detail-v2.css, .zt-pd-lightbox):
   затемнение rgba(16,20,26,.72), белая рамка 16 px с радиусом 14, фото
   до 78vh, крестик 40 px, стрелки 44 px по бокам, счётчик «N из M» под
   фото. Окно вставляется в <body>, а не в модуль: список товаров —
   контейнер (container-type), и внутри него position: fixed считался бы
   от списка, а не от экрана. Поэтому и правила — без .zt-cart. */

.zt-cart-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    padding: 24px;
    display: grid;
    place-items: center;
    background: rgba(16, 20, 26, .72);
}

.zt-cart-lightbox[hidden] {
    display: none !important;
}

.zt-cart-lightbox svg,
.zt-cart-lightbox svg * {
    color: inherit;
}

.zt-cart-lightbox__figure {
    position: relative;
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    margin: 0;
    padding: 16px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
}

.zt-cart-lightbox__figure img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

.zt-cart-lightbox__close,
.zt-cart-lightbox__nav {
    position: absolute;
    padding: 0;
    display: grid;
    place-items: center;
    color: #55606e;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #e6e9ed;
    border-radius: 10px;
    cursor: pointer;
}

.zt-cart-lightbox__close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: #fff;
}

.zt-cart-lightbox__nav {
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
}

.zt-cart-lightbox__nav--prev { left: -22px; }
.zt-cart-lightbox__nav--next { right: -22px; }

.zt-cart-lightbox__close:focus-visible,
.zt-cart-lightbox__nav:focus-visible {
    outline: 2px solid #ffb800;
    outline-offset: 2px;
}

.zt-cart-lightbox__close svg,
.zt-cart-lightbox__nav svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zt-cart-lightbox__counter {
    position: absolute;
    bottom: -30px;
    left: 50%;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateX(-50%);
}

@media (max-width: 560px) {
    .zt-cart-lightbox { padding: 12px; }
    .zt-cart-lightbox__nav--prev { left: 4px; }
    .zt-cart-lightbox__nav--next { right: 4px; }
}

/* ---------- Фото крупно: поверх нижнего меню и на низком экране ----------
   Аудит всплывающих окон, 17.09.2026. Нижнее меню сайта стоит на слое
   9990 и перекрывало просмотр фото (9000): на телефоне боком меню
   закрывало низ фото и счётчик. Слой — как у лайтбокса карточки товара
   после той же правки. На экране ниже 560 px фото помещается целиком,
   стрелки — по бокам рамки, счётчик — внутри рамки. */

.zt-cart-lightbox {
    z-index: 10050;
}

@media (max-height: 560px) {
    .zt-cart-lightbox {
        padding: 12px 60px;
    }

    .zt-cart-lightbox__figure {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 10px;
    }

    .zt-cart-lightbox__figure img {
        max-height: calc(100vh - 44px);
        max-height: calc(100dvh - 44px);
    }

    .zt-cart-lightbox__nav--prev { left: -52px; }
    .zt-cart-lightbox__nav--next { right: -52px; }

    .zt-cart-lightbox__counter {
        bottom: 14px;
        padding: 3px 10px;
        border-radius: 999px;
        color: #333a43;
        background: rgba(255, 255, 255, .92);
    }
}

/* ---------- «С этим покупают» ---------- */

/* Своих правил у блока нет. По указанию заказчика 07.09.2026 он должен быть
   один в один как модуль «Популярные товары» с главной — по стилям, компоновке,
   адаптации под экраны, стрелкам и скроллбару, — поэтому на страницу вставлена
   сама секция #ztSaleProducts вместе с её инлайн-стилями и sale-products.js.
   Слайдер, стрелки и перетаскиваемый скроллбар инициализирует тот же скрипт;
   его брейкпоинты: 1.2 / 2 / 3 / 4 / 5 / 6 слайда на 520, 760, 1020, 1320 и 1640 px.
   Менять оформление блока здесь нельзя — правится модуль главной. */

/* «Вы смотрели» (15.09.2026) — второй блок того же модуля: на главной
   их три, в корзине два. Карточки дорисовывает cart-v2.js из истории
   просмотров; пока истории нет, блок скрыт. Стили модуля задают блоку
   display, поэтому hidden закреплён явно. */
#ztSaleProducts [data-zt-cart-viewed][hidden],
#ztSaleProducts[data-zt-cart-related] .zt-sale-products__block[hidden] {
    display: none !important;
}

/* «Очистить» — на месте «Смотреть все» и в его оформлении (жёлтый
   Tektur 16/700), но это кнопка: всем <button> сайт назначает Manrope
   (zt-redesign.css, вес 2-2-2), здесь вес 3-1-1. */
#ztSaleProducts .zt-cart-viewed__clear {
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

body #ztSaleProducts .zt-cart-viewed__clear:not(#zt_):not(#zt_) {
    font-family: var(--zt-font, 'Tektur', Arial, sans-serif) !important;
}

#ztSaleProducts .zt-cart-viewed__clear:focus-visible {
    outline: 2px solid #ffb800;
    outline-offset: 3px;
}

/* На телефоне «Очистить» — на месте «Все товары», той же плашкой
   (её оформление с !important задаёт модуль главной); здесь только
   значок корзины, нарисованный линией. */
#ztSaleProducts .zt-cart-viewed__clear-mobile {
    cursor: pointer;
}

#ztSaleProducts .zt-cart-viewed__clear-mobile svg,
#ztSaleProducts .zt-cart-viewed__clear-mobile svg * {
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Пустая корзина ----------
   15.09.2026, указания заказчика: вместо значка — его иллюстрация
   (грустная спецтехника вокруг пустой тележки, фон белый — шва нет),
   тележка катается (слой .zt-art, ниже); подборок товаров под пустой
   корзиной нет.

   17.09.2026 — «в корзине сделать так же», как в пустом «Избранном»
   (favorites-page.css): без панели и рамки; «Корзина пуста» и пояснение —
   на месте заголовка страницы и его пояснения (набраны .zt-cart__title
   и .zt-cart__lead, H1 один). С 1024 px слева заголовок, пояснение
   и кнопки, справа картинка; вся группа по центру ширины, текст —
   по вертикали посередине картинки (строки 1fr сверху и снизу делят
   между собой разницу высот). Уже — столбиком: заголовок, пояснение,
   картинка, кнопки («картинку нужно подставить над кнопками»). */

.zt-cart__empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.zt-cart__empty-art {
    width: min(100%, 560px);
    margin: 16px auto 0;
}

.zt-cart__empty-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Кнопки — как «Оформить заказ» и кнопки сайта (Tektur 15/700 капсом,
   высота 48): «Перейти в каталог» жёлтая, «Поиск запчастей» —
   белая с рамкой, ведёт на страницу поиска /poisk/. */
.zt-cart__empty-link,
.zt-cart__empty-search {
    min-height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ztc-radius);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background-color .18s ease, border-color .18s ease;
}

.zt-cart__empty-link {
    color: var(--ztc-on-yellow) !important;
    background: var(--ztc-yellow);
}

.zt-cart__empty-link:hover { background: var(--ztc-yellow-hover); }

.zt-cart__empty-search {
    color: var(--ztc-ink) !important;
    background: #fff;
    border: 1px solid var(--ztc-panel-line);
}

.zt-cart__empty-search:hover { border-color: #b9c0c6; }

@media (max-width: 519px) {
    .zt-cart__empty-link,
    .zt-cart__empty-search { flex: 1 1 100%; }
}

@media (min-width: 1024px) {
    .zt-cart__empty {
        grid-template-columns: minmax(0, 640px) min(46%, 560px);
        grid-template-rows: 1fr auto auto 1fr;
        justify-content: center;
        column-gap: clamp(32px, 4vw, 64px);
    }

    .zt-cart__empty-body {
        grid-column: 1;
        grid-row: 2;
    }

    .zt-cart__empty-actions {
        grid-column: 1;
        grid-row: 3;
        margin-top: 24px;
    }

    .zt-cart__empty-art {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        width: 100%;
        margin: 0;
    }
}

/* ---------- Иллюстрации с мини-анимацией ----------
   Основа — картинка на белом, подвижные детали — отдельными слоями
   с прозрачностью поверх неё (build-cart-art-layers.py): на месте
   слоя в основе белое, поэтому при движении шва нет. Положение
   и задержка слоя — в style разметки. Тот же блок — в order-v2.css
   («Заказ оформлен»). Без анимации (prefers-reduced-motion) — картинка
   неподвижна. */

.zt-art {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.zt-art img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    margin: 0;
}

.zt-art__base {
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
}

.zt-art__layer {
    transform-origin: 50% 85%;
    animation: 2.4s ease-in-out infinite both;
    will-change: transform;
}

/* Пустая тележка катается туда-обратно, чуть подпрыгивая на неровностях */
.zt-art__layer--roll { animation-name: zt-art-roll; animation-duration: 4.8s; }

@keyframes zt-art-roll {
    0%, 100% { transform: translateX(-9%) rotate(-1.5deg); }
    25% { transform: translate(0, -1.4%) rotate(0deg); }
    50% { transform: translateX(9%) rotate(1.5deg); }
    75% { transform: translate(0, -1.4%) rotate(0deg); }
}

/* 17.09.2026, «картинку тоже можно немного поданимировать». Техника «дышит» —
   чуть вытягивается вверх от земли и опускается, каждая в свой такт
   (задержка — в style слоя). Машины только растут от покоя и не сдвигаются:
   из-под них ничего не открывается, тени остаются на полу. */
.zt-art__layer--breathe { animation-name: zt-art-breathe; animation-duration: 4.8s; transform-origin: 50% 100%; }

@keyframes zt-art-breathe {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.03); }
}

/* Вихрь над экскаватором покачивается */
.zt-art__layer--swirl { animation-name: zt-art-swirl; animation-duration: 2.4s; transform-origin: 40% 100%; }

@keyframes zt-art-swirl {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

/* «!!» у экскаватора-погрузчика, волны у катка и дымок у погрузчика мигают */
.zt-art__layer--blink { animation-name: zt-art-blink; animation-duration: 1.8s; transform-origin: 50% 100%; }

@keyframes zt-art-blink {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .zt-art__layer { animation: none !important; }
}

/* Узкие экраны: панели компактнее. */
@media (max-width: 519px) {
    .zt-cart__summary { padding: 18px 16px; }
    .zt-cart-promo { padding: 14px; }
}

/* CTA страницы: строка согласия.

   Вложенные span'ы («политикой обработки персональных данных» и короткий
   вариант) получали 16 px от общего сброса — `* { font-size: ... }` (О-025):
   правила модуля задают кегль самой строке, а до её потомков он
   не наследуется. Из-за этого строка переносилась на две и CTA корзины
   был на 12 px выше, чем на главной. Кегль возвращён к родительскому. */
body:has(.zt-cart) #ziptehLeadModule .zl-consent-copy span {
    font-size: inherit;
}

/* =========================================================
   Вертикальный ритм страницы.

   Между модулями сайт держит 80 px, и корзина этот ритм повторяла.
   Но на этой странице подряд идут четыре блока со своими внутренними
   отступами, и воздуха набиралось слишком много: до заголовка
   «С этим покупают» — 122 px, до CTA — 190 px, а над шапкой модуля
   зря висели 50 px от хлебных крошек (на других страницах их закрывает
   заголовок страницы, здесь он скрыт).

   Правила ниже действуют только на странице корзины. Внутренние отступы
   принятых модулей не трогаются — уменьшен только зазор между ними.
   ========================================================= */

/* Отступ под крошками здесь не задаётся: его держит site-shell.css
   правилом `margin: 0 0 var(--zt-crumbs-space-bottom) !important`,
   и прежнее `margin-bottom: 18px` для корзины не срабатывало вовсе
   (замер 15.09). Расстояние до заголовка — см. padding-top у .zt-cart. */

/* Обёртка контента держит по 50 px сверху и снизу. Сверху это половина
   отступа до крошек, снизу — лишние 50 px, которые складывались с внутренним
   полем блока рекомендаций и отступом CTA: до заголовка CTA набегало 240 px. */
body:has(.zt-cart) .content-area {
    padding-top: 26px;
    padding-bottom: 0;
}

/* !important — у обоих модулей отступ закреплён так же, обычное правило
   его не перебивает даже при большем весе селектора. */
body:has(.zt-cart) #ztSaleProducts,
body:has(.zt-cart) #ziptehLeadModule {
    margin-top: 48px !important;
}

@media (max-width: 759px) {
    body:has(.zt-cart) .content-area { padding-top: 18px; }

    body:has(.zt-cart) #ztSaleProducts,
    body:has(.zt-cart) #ziptehLeadModule { margin-top: 32px !important; }
}