/* ZIPTEH — интерактивный модуль категорий запчастей. */
#ztCategories,
#ztCategories * {
    box-sizing: border-box;
}

#ztCategories {
    --zt-categories-yellow: var(--zt-yellow, #ffb800);
    --zt-categories-yellow-hover: var(--zt-yellow-hover, #e8a600);
    --zt-categories-ink: var(--zt-ink, #333a43);
    --zt-categories-muted: var(--zt-ink-soft, #6b7480);
    --zt-categories-line: #e3e6e9;
    --zt-categories-card-radius: var(--zt-radius-card, 12px);
    --zt-categories-ease: cubic-bezier(.22, .61, .36, 1);
    position: relative;
    left: 50%;
    width: 100vw;
    width: 100dvw;
    margin: -24px 0 62px;
    transform: translateX(-50%);
    overflow: clip;
    background: #fff;
    color: var(--zt-categories-ink);
    font-family: var(--zt-font, Arial, sans-serif);
}

#ztCategories .zt-categories__shell {
    width: 100%;
    padding-top: 34px !important;
    padding-bottom: 28px !important;
}

#ztCategories .zt-categories__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    border-top: 1px solid var(--zt-categories-line);
    padding-top: 20px;
}

#ztCategories .zt-categories__eyebrow {
    display: inline-flex;
    min-height: 31px;
    padding: 7px 11px;
    border: 1.5px solid var(--zt-categories-yellow);
    border-radius: 8px;
    align-items: center;
    margin: 0 0 11px;
    color: var(--zt-categories-yellow);
    font-family: var(--zt-font-badge, var(--zt-font, Arial, sans-serif));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#ztCategories .zt-categories__eyebrow::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
}

#ztCategories .zt-categories__title {
    margin: 0 !important;
    color: var(--zt-categories-ink) !important;
    font-family: var(--zt-font-head, var(--zt-font, Arial, sans-serif));
}

#ztCategories .zt-categories__subtitle {
    margin: 8px 0 0;
    color: var(--zt-categories-muted);
    font-size: 14px;
    line-height: 1.45;
}

#ztCategories .zt-categories__rows {
    display: grid;
    gap: 12px;
}

#ztCategories .zt-categories__row {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 350px;
    gap: 10px;
}

#ztCategories .zt-categories__row--bottom {
    height: 350px;
}

#ztCategories .zt-category-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--zt-categories-line);
    border-radius: var(--zt-categories-card-radius);
    outline: 0;
    background: #fff;
    box-shadow: 0 8px 22px rgba(29, 34, 40, .045);
    cursor: pointer;
    transition:
        flex .92s var(--zt-categories-ease),
        border-color .52s ease,
        box-shadow .52s ease;
}

#ztCategories .zt-category-card::before {
    position: absolute;
    z-index: 8;
    top: -2px;
    right: 18px;
    left: 18px;
    height: 4px;
    border-radius: 0 0 8px 8px;
    background: transparent;
    content: "";
    pointer-events: none;
    transition: background-color .42s ease;
}

#ztCategories .zt-categories__row.has-active .zt-category-card {
    flex-grow: .72;
}

#ztCategories .zt-categories__row.has-active .zt-category-card.is-active {
    flex-grow: 5.1;
    border-width: 2px;
    border-color: var(--zt-categories-yellow);
    box-shadow: none;
}

#ztCategories .zt-categories__row.has-active .zt-category-card.is-active:focus-visible {
    box-shadow: none;
}

#ztCategories .zt-categories__row.has-active .zt-category-card.is-active::before {
    background: var(--zt-categories-yellow);
}

/* Подсветка карточки «Все категории» под курсором. Она не раскрывается,
   но должна читаться так же, как раскрытая: та же жёлтая рамка 2 px и
   тот же язычок сверху.

   Рамка набирается как 1 px границы плюс внутренняя тень в 1 px, а не
   `border-width: 2px`: при смене толщины границы содержимое карточки
   сдвинулось бы на пиксель, и на статичной карточке это читалось бы
   как подёргивание. У раскрытой карточки сдвиг не виден — он тонет
   в анимации ширины. Внешний край и толщина жёлтого при этом те же. */
#ztCategories .zt-category-card.is-highlighted {
    border-color: var(--zt-categories-yellow);
    box-shadow: inset 0 0 0 1px var(--zt-categories-yellow);
}

#ztCategories .zt-category-card.is-highlighted::before {
    background: var(--zt-categories-yellow);
}

#ztCategories .zt-category-card:focus-visible {
    outline: 3px solid rgba(255, 184, 0, .28);
    outline-offset: 3px;
    box-shadow: none;
}

#ztCategories .zt-category-card__compact,
#ztCategories .zt-category-card__expanded {
    position: absolute;
    inset: 0;
}

#ztCategories .zt-category-card__compact {
    display: flex;
    flex-direction: column;
    padding: 20px 18px 17px;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity .38s ease .14s,
        transform .72s var(--zt-categories-ease);
}

#ztCategories .zt-category-card.is-active .zt-category-card__compact {
    opacity: 0;
    transform: scale(.96);
    pointer-events: none;
    transition-delay: 0s;
}

#ztCategories .zt-category-card__number {
    color: #d2d6da;
    font-family: var(--zt-font-head, var(--zt-font, Arial, sans-serif));
    font-size: 22px;
    line-height: 1;
}

#ztCategories .zt-category-card__title {
    min-width: 0;
    margin: 15px 0 5px;
    color: var(--zt-categories-ink);
    font-family: var(--zt-font, Arial, sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    /* Когда соседняя карточка раскрыта, остальные ужимаются до 108 px
       (1280) — 70 px под текст. Длинные одиночные слова не переносятся
       и обрезались краем: «Электрооборудование» на 117 px, «Трансмиссия»
       на 38, «Запчасти для двигателей» на 26. Обрезка была на всех
       ширинах вплоть до 2560. Переносим по слогам, а где словарь не
       помогает — разрывом. На широкой карточке правило не срабатывает:
       break-word рвёт слово, только если оно не помещается. */
    /* hyphens: manual — переносы идут по мягким дефисам, расставленным
       в названиях (categories-module.js). Автоматическая расстановка
       для русского в браузерах не везде есть, а break-word рвал слово
       посреди слога и без дефиса. Он оставлен последним рубежом. */
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: break-word;
}

#ztCategories .zt-category-card__count {
    color: var(--zt-categories-muted);
    font-size: 12px;
    line-height: 1.3;
}

#ztCategories .zt-category-card__preview-wrap {
    display: grid;
    flex: 1;
    min-height: 0;
    place-items: center;
    padding: 8px 0 4px;
}

#ztCategories .zt-category-card__preview-picture {
    display: grid;
    width: min(100%, 260px);
    height: 100%;
    /* Без min-height: 0 grid-элемент не сжимается ниже своего
       min-content, и картинка держала 185 px в карточке 245 px
       (681–1180) и 150 px в карточке 160 px (мобильные) — низ уходил
       за край на 3–46 px и срезался. Теперь высоту задаёт контейнер. */
    min-height: 0;
    max-height: 185px;
    place-items: center;
    translate: var(--zt-category-preview-x, 0) var(--zt-category-preview-offset-y, 0);
    scale: var(--zt-category-preview-scale, 1);
    transform: translateY(var(--zt-category-preview-y, 0));
}

#ztCategories .zt-category-card[data-category="engine"] { --zt-category-preview-y: -10px; }
#ztCategories .zt-category-card[data-category="filters"] { --zt-category-preview-y: -15px; }
#ztCategories .zt-category-card[data-category="consumables"] { --zt-category-preview-y: -14px; }
/* Было -23px: картинка заходила на строку «N товаров» на 7 px
   в полосе 1400–1900. */
#ztCategories .zt-category-card[data-category="attachment"] { --zt-category-preview-y: -14px; }
/* Было -21px: на 1181–1270 заголовок «Кабина и комфорт» переносится
   в две строки, счётчик опускается, и картинка наезжала на него на 5 px. */
#ztCategories .zt-category-card[data-category="cabin"] { --zt-category-preview-y: -16px; }

/* Зафиксированная раскладка редактора «Картинки»: широкий диапазон 2560+,
   эталонное окно заказчика 3406 px, 17.08.2026.

   06.09.2026 уменьшены подъёмы пяти карточек: по проверке непрозрачных
   пикселей на 2560 и 3406 картинки наезжали на строку «N товаров» на
   6–16 px. Масштабы (--zt-category-preview-scale) и сдвиги по X
   оставлены как заданы заказчиком — правились только смещения по Y. */
@media (min-width: 2560px) {
    #ztCategories .zt-category-card[data-category="engine"] {
        --zt-category-preview-x: -4px;
        --zt-category-preview-offset-y: -6px;
        --zt-category-preview-scale: .98;
    }

    #ztCategories .zt-category-card[data-category="hydraulics"] {
        --zt-category-preview-x: 12px;
        /* -48px → -30px: непрозрачная часть картинки наезжала на строку «N товаров» на 16 px. */
        --zt-category-preview-offset-y: -30px;
        --zt-category-preview-scale: 1.31;
    }

    #ztCategories .zt-category-card[data-category="undercarriage"] {
        /* -51px → -37px: непрозрачная часть картинки наезжала на строку «N товаров» на 13 px. */
        --zt-category-preview-offset-y: -37px;
        --zt-category-preview-scale: 1.23;
    }

    #ztCategories .zt-category-card[data-category="transmission"] {
        --zt-category-preview-offset-y: -36px;
        --zt-category-preview-scale: 1.18;
    }

    #ztCategories .zt-category-card[data-category="electrics"] {
        --zt-category-preview-offset-y: -33px;
        --zt-category-preview-scale: 1.26;
    }

    #ztCategories .zt-category-card[data-category="filters"] {
        /* -19px → -12px: непрозрачная часть картинки наезжала на строку «N товаров» на 6 px. */
        --zt-category-preview-offset-y: -12px;
        --zt-category-preview-scale: 1.04;
    }

    #ztCategories .zt-category-card[data-category="consumables"] {
        --zt-category-preview-x: 14px;
        /* -18px → -11px: непрозрачная часть картинки наезжала на строку «N товаров» на 6 px. */
        --zt-category-preview-offset-y: -11px;
        --zt-category-preview-scale: 1.12;
    }

    #ztCategories .zt-category-card[data-category="cabin"] {
        --zt-category-preview-x: 11px;
        /* -14px → -2px: непрозрачная часть картинки наезжала на строку «N товаров» на 11 px. */
        --zt-category-preview-offset-y: -2px;
        --zt-category-preview-scale: 1.02;
    }
}

/* От 1445 px кегль списка упирается в максимум clamp (13 px), а заголовок
   продолжает расти по 1.7vw — на 1920 карточка «Кабина и комфорт» вылезала
   из 350 px на 29 px. Горизонтального места на этих ширинах в избытке
   (сцена 456–818 px при минимуме 310), поэтому расширяется колонка текста:
   строки перестают переноситься и список снова умещается по высоте. */
@media (min-width: 1445px) {
    #ztCategories .zt-category-card__expanded {
        grid-template-columns: clamp(360px, 26vw, 470px) minmax(310px, 1fr);
    }
}

#ztCategories .zt-category-card__preview {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    filter: none;
    transition: transform .5s var(--zt-categories-ease);
}

#ztCategories .zt-categories__row--bottom .zt-category-card__preview-picture {
    max-height: 165px;
}

@media (hover: hover) and (pointer: fine) {
    #ztCategories .zt-category-card:hover .zt-category-card__preview {
        transform: translateY(-3px) scale(1.035);
    }
}

#ztCategories .zt-category-card__arrow {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--zt-categories-line);
    border-radius: 9px !important;
    background: #fff;
    color: var(--zt-categories-ink);
    box-shadow: 0 6px 14px rgba(29, 34, 40, .06);
    font-size: 17px;
}

#ztCategories .zt-category-card__expanded {
    display: grid;
    grid-template-columns: clamp(320px, 25vw, 350px) minmax(310px, 1fr);
    gap: 16px;
    padding: 26px 28px;
    opacity: 0;
    pointer-events: none;
    transform: scale(.985);
    transition:
        opacity .44s ease,
        transform .76s var(--zt-categories-ease);
}

#ztCategories .zt-category-card.is-active .zt-category-card__expanded {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    transition-delay: .10s;
}

#ztCategories .zt-category-card__copy {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    padding-top: 2px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .24s ease, transform .36s var(--zt-categories-ease);
}

#ztCategories .zt-category-card.is-active .zt-category-card__copy {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .78s;
}

#ztCategories .zt-category-card__expanded-number {
    color: var(--zt-categories-yellow);
    font-family: var(--zt-font-head, var(--zt-font, Arial, sans-serif));
    font-size: 25px;
    line-height: 1;
}

#ztCategories .zt-category-card__expanded-title {
    /* Поля срезаны с 8/6: на 1600+ заголовок вырастает по clamp и вместе
       со списком перестаёт помещаться в карточку 350 px. */
    margin: 6px 0 4px;
    color: var(--zt-categories-ink);
    font-family: var(--zt-font-head, var(--zt-font, Arial, sans-serif));
    font-size: clamp(22px, 1.7vw, 30px);
    font-weight: 400;
    line-height: 1.08;
}

#ztCategories .zt-category-card__expanded-count {
    color: var(--zt-categories-muted);
    font-size: 13px;
}

#ztCategories .zt-category-card__types {
    min-height: 0;
    /* Было 16/14. Восемь пикселей отданы списку: на 1600+ он не влезал. */
    margin: 12px 0 10px;
}

#ztCategories .zt-category-card__type-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#ztCategories .zt-category-card__type-columns ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#ztCategories .zt-category-card__types li {
    position: relative;
    margin: 0 0 3px;
    padding-left: 13px;
    break-inside: avoid;
    color: var(--zt-categories-muted);
    font-size: clamp(12px, .9vw, 13px);
    line-height: 1.32;
    transition: color .15s ease;
}

#ztCategories .zt-category-card__types li::before {
    position: absolute;
    top: .47em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zt-categories-yellow);
    content: "";
}

/* Наведение на подкатегорию: жёлтый текст и подчёркивание.
   Пункты списка — не ссылки, поэтому подчёркивается только сам текст;
   жёлтый маркер-точка вынесен в ::before и под линию не попадает.
   Цвет линии не задан отдельно — она берёт currentColor и желтеет
   вместе с текстом. */
#ztCategories .zt-category-card__types li:hover {
    color: var(--zt-categories-yellow);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#ztCategories .zt-category-card__cta {
    position: absolute;
    z-index: 4;
    top: auto;
    right: 28px;
    bottom: 24px;
    display: inline-flex;
    min-height: 46px;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 18px;
    border-radius: var(--zt-radius-btn, 8px);
    background: var(--zt-categories-yellow);
    color: #1a1a1a;
    /* Тот же шрифт, что у кнопок шапки (.zt-header .zt-catalog-button):
       var(--zt-font) + капс + межбуквенное .025em. Было --zt-font-btn. */
    font-family: var(--zt-font, "PT Sans Caption", "Montserrat", Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 0;
    margin-left: 0;
    box-shadow: 0 10px 22px rgba(255, 184, 0, .22);
    opacity: 0;
    transition: background-color .2s ease, transform .2s ease, opacity .24s ease .46s;
}

#ztCategories .zt-category-card.is-active .zt-category-card__cta {
    opacity: 1;
}

#ztCategories .zt-category-card__cta:hover {
    transform: translateY(-1px);
    background: var(--zt-categories-yellow-hover);
    color: #1a1a1a;
}

#ztCategories .zt-category-card__badges {
    display: flex;
    gap: 18px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--zt-categories-muted);
    font-size: 10px;
    line-height: 1.25;
}

#ztCategories .zt-category-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#ztCategories .zt-category-card__badge-icon {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid var(--zt-categories-line);
    border-radius: 50%;
    color: var(--zt-categories-yellow);
    font-size: 12px;
    font-style: normal;
}

#ztCategories .zt-category-explode {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

#ztCategories .zt-category-explode::before {
    position: absolute;
    inset: 8% 3%;
    opacity: .42;
    background-image: radial-gradient(#dfe4e8 1px, transparent 1px);
    background-size: 18px 18px;
    content: "";
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

#ztCategories .zt-category-explode__origin {
    position: absolute;
    top: 42%;
    left: 50%;
    display: block;
    width: min(48%, 260px);
    aspect-ratio: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.94);
    transition: opacity .34s ease, transform .48s var(--zt-categories-ease);
}

#ztCategories .zt-category-card.is-active .zt-category-explode__origin {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#ztCategories .zt-category-card.is-explosion-running .zt-category-explode__origin,
#ztCategories .zt-category-card.is-explosion-static .zt-category-explode__origin {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9);
}

#ztCategories .zt-category-explode__origin-image,
#ztCategories .zt-category-explode__source-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

#ztCategories .zt-category-explode__source,
#ztCategories .zt-category-explode__canvas {
    position: absolute;
    top: 42%;
    right: clamp(12px, 2.1vw, 34px);
    display: block;
    width: min(92%, 900px);
    height: auto;
    aspect-ratio: 20 / 7;
    opacity: 0;
    pointer-events: none;
    transform: translate(24px, -50%);
    transition: opacity .22s ease, transform .36s cubic-bezier(.2, .8, .2, 1);
    will-change: transform, opacity;
}

#ztCategories .zt-category-card.is-explosion-running .zt-category-explode__canvas,
#ztCategories .zt-category-card.is-explosion-static .zt-category-explode__source {
    opacity: 1;
    transform: translate(0, -50%);
}

#ztCategories .zt-category-explode__source {
    visibility: hidden;
}

#ztCategories .zt-category-card.is-explosion-static .zt-category-explode__source {
    visibility: visible;
}

#ztCategories .zt-category-grid-icon {
    display: grid;
    grid-template-columns: repeat(2, 25px);
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 184, 0, .28);
    border-radius: 12px;
    background: #fffaf0;
    box-shadow: 0 10px 22px rgba(29, 34, 40, .06);
}

#ztCategories .zt-category-grid-icon i {
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    background: #e6e8ea;
}

#ztCategories .zt-category-grid-icon i:nth-child(1),
#ztCategories .zt-category-grid-icon i:nth-child(4) {
    background: var(--zt-categories-yellow);
}

#ztCategories .zt-category-grid-icon i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--zt-categories-ink);
    content: "";
    transform: translate(-50%, -50%);
}

#ztCategories .zt-category-explode--all {
    display: grid;
    place-items: center;
    /* CTA приколота к низу карточки и накрывала иконку сетки на 44 px
       на всех ширинах. Нижнее поле поднимает иконку над кнопкой.
       С 06.09.2026 карточка «Все категории» не раскрывается вовсе
       (клик ведёт прямо в каталог), так что правило в обычной работе
       не срабатывает. Оставлено на случай возврата раскрытия. */
    padding-bottom: 74px;
}

#ztCategories .zt-category-explode--all .zt-category-grid-icon {
    transform: scale(1.35);
}

/* Порог вертикальной раскладки — 1366 px, а не 1180.

   На 1280 горизонтальная раскладка не работала: соседние карточки
   ужимались до 108 px, названия вроде «Электрооборудование» не влезали,
   а в раскрытой карточке рисунок схемы занимал 66 px в области
   358×294 px — схема широкая (20:7), в узкой высокой колонке крупнее
   её не сделать, только обрезать бока с реальными деталями.
   Решение заказчика от 06.09.2026: до 1366 px включительно показываем
   ту же композицию, что на планшете и телефоне. Ряд из пяти карточек
   остаётся от 1367 px, где ему хватает ширины.

   Порог продублирован в categories-module.js: `desktopLayout` и
   мобильная ветка `syncExplosionCanvas`. Менять только вместе. */
@media (max-width: 1366px) {
    #ztCategories {
        margin-top: -12px;
        margin-bottom: 50px;
    }

    /* Оба ряда раскрываются в одну общую сетку: `display: contents`
       снимает их собственные боксы, и все десять карточек идут сплошным
       потоком по две в строке. Пока сеткой были сами ряды, верхний ряд
       из пяти карточек оставлял пустую ячейку справа от пятой, и между
       «Электрооборудованием» и «Фильтрами» зияла дыра.

       Ряды остаются в разметке: на них висит класс `has-active`, по ним
       работает `closest('.zt-categories__row')` в скрипте и селектор
       нижнего ряда `--bottom`. */
    /* Строка из двух карточек собрана на flex, а не на grid: сетка
       задаёт колонки на весь модуль сразу, и раскрытую карточку в ней
       можно было только растянуть на всю строку — соседка при этом
       уезжала на следующую. На flex ширины живут на самих карточках:
       раскрытая берёт 66%, соседка ужимается до 34% и остаётся на месте.

       `align-items: flex-start` — чтобы соседка не растягивалась по
       высоте раскрытой карточки, а сохраняла свои 245 px. */
    #ztCategories .zt-categories__rows {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    #ztCategories .zt-categories__row,
    #ztCategories .zt-categories__row--bottom {
        display: contents;
    }

    #ztCategories .zt-category-card {
        flex: 0 1 calc(50% - 6px);
    }

    #ztCategories .zt-category-card.is-active {
        flex-basis: calc(66% - 6px);
    }

    /* Класс ставит скрипт: соседку по строке нельзя выбрать селектором —
       пятая и шестая карточки лежат в разных рядах разметки. */
    #ztCategories .zt-category-card.is-paired {
        flex-basis: calc(34% - 6px);
    }

    #ztCategories .zt-category-card {
        height: 245px;
    }

    /* Закрытая карточка в этой полосе широкая (608 px на 1280) и низкая
       (245 px). Вертикальная десктопная раскладка тратила ширину впустую:
       картинка упиралась в 91 px по высоте и выходила 260×79. Здесь та же
       схема, что на телефоне, — текст слева, картинка справа во всю
       высоту карточки. Структурные правила общие с блоком ≤680,
       там переопределены только размеры. */
    #ztCategories .zt-category-card__compact {
        display: grid;
        grid-template-columns: 1fr 42%;
        grid-template-rows: auto auto 1fr;
        column-gap: 12px;
        padding: 19px;
    }

    #ztCategories .zt-category-card__number,
    #ztCategories .zt-category-card__title,
    #ztCategories .zt-category-card__count {
        grid-column: 1;
    }

    #ztCategories .zt-category-card__preview-wrap {
        grid-row: 1 / 4;
        grid-column: 2;
        padding: 0;
    }

    #ztCategories .zt-category-card__preview {
        max-height: none;
    }

    #ztCategories .zt-category-card__preview-picture,
    /* Правило нижнего ряда лежит вне медиазапросов и по специфичности
       перебивает это — поэтому дублируется. */
    #ztCategories .zt-categories__row--bottom .zt-category-card__preview-picture {
        width: min(100%, 260px);
        max-height: 185px;
    }

    #ztCategories .zt-category-card__arrow {
        position: absolute;
        bottom: 16px;
        left: 19px;
    }

    /* Высота раскрытой карточки — по содержимому. Раскрытый слой на
       время раскрытия выводится в поток; компактный остаётся абсолютным
       и невидимым, перекрывая карточку целиком. */
    #ztCategories .zt-category-card.is-active {
        height: auto;
    }

    #ztCategories .zt-category-card.is-active .zt-category-card__expanded {
        position: static;
    }

    /* Подъёмы превью заданы под карточку 350 px, где под картинку
       отведено 197 px. Здесь карточка 245 px и место под картинку —
       91 px, тот же сдвиг в −14…−21 px задирал её на строку
       «N товаров» на 2–9 px. Значения уменьшены пропорционально. */
    #ztCategories .zt-category-card[data-category="engine"] { --zt-category-preview-y: -5px; }
    #ztCategories .zt-category-card[data-category="filters"] { --zt-category-preview-y: -7px; }
    #ztCategories .zt-category-card[data-category="consumables"] { --zt-category-preview-y: -6px; }
    #ztCategories .zt-category-card[data-category="attachment"] { --zt-category-preview-y: -6px; }
    #ztCategories .zt-category-card[data-category="cabin"] { --zt-category-preview-y: -9px; }

    /* От 1366 px и ниже раскрытая карточка читается сверху вниз:
       схема, номер с заголовком и составом, кнопка. Раньше здесь была
       та же горизонтальная раскладка, что на десктопе (текст слева,
       схема справа), и в карточке 480 px оставалось много пустоты.
       Порядок в разметке обратный, поэтому строки назначены явно. */
    #ztCategories .zt-category-card__expanded {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 6px;
        padding: 14px 16px;
    }

    /* Высота сцены — 90% высоты картинки со схемой. У схем крупные
       прозрачные поля: рисунок занимает 37–86% высоты и всегда
       отцентрован, так что обрезка съедает только пустоту. */
    #ztCategories .zt-category-explode {
        grid-row: 1;
        grid-column: 1;
        min-height: 0;
        /* Ширина ограничена 700 px и по центру. Высота сцены привязана
           к её ширине, а раскрытая карточка на планшете занимает весь
           ряд (до 1100 px) — без ограничения схема раздувалась до 276 px
           и тянула карточку вверх. На телефоне карточка уже 700 px,
           поэтому там правило ничего не меняет. */
        width: min(100%, 700px);
        justify-self: center;
        aspect-ratio: 100 / 30;
    }

    #ztCategories .zt-category-card__copy {
        grid-row: 2;
        grid-column: 1;
    }

    /* top: 50% вместо 42%: на обрезанной сцене смещение вверх уводило
       схему двигателей под верхний край. */
    #ztCategories .zt-category-explode__source,
    #ztCategories .zt-category-explode__canvas {
        top: 50%;
        /* Отступ 10, а не 8: рисунок занимает 95% ширины картинки, и при
           8 px его правый край упирался ровно в границу сцены — на дробных
           ширинах срезало пиксель. Пара `right` / `width` держит схему
           по центру, те же числа продублированы в syncExplosionCanvas. */
        right: 10px;
        width: calc(100% - 20px);
    }

    #ztCategories .zt-category-card__expanded-number {
        font-size: 19px;
    }

    #ztCategories .zt-category-card__expanded-title {
        margin: 4px 0 3px;
        padding-right: 0;
        font-size: 24px;
    }

    /* Кнопка в потоке третьей строкой: текст теперь внизу, абсолютная
       кнопка легла бы поверх состава. */
    #ztCategories .zt-category-card__cta {
        position: static;
        grid-row: 3;
        grid-column: 1;
        justify-self: end;
        min-height: 38px;
        margin-top: 0;
        padding: 0 15px;
        font-size: 12px;
    }

    #ztCategories .zt-category-card__type-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #ztCategories .zt-category-card__types {
        max-height: none;
        overflow: visible;
        margin: 8px 0 10px;
    }

    /* Кегль пунктов не трогаем — 12,5 px читаемы. Ужимаются межстрочный
       и отбивка: на списке из 12 позиций это около 30 px. */
    #ztCategories .zt-category-card__types li {
        margin-bottom: 2px;
        font-size: 12.5px;
        line-height: 1.26;
    }

    #ztCategories .zt-categories__row.has-active .zt-category-card,
    #ztCategories .zt-categories__row.has-active .zt-category-card.is-active {
        flex-grow: 1;
    }
}

@media (max-width: 680px) {
    #ztCategories {
        margin-top: -18px;
        margin-bottom: 40px;
        overflow: hidden;
    }

    #ztCategories .zt-categories__shell {
        padding-top: 24px !important;
        padding-bottom: 22px !important;
    }

    #ztCategories .zt-categories__head {
        margin-bottom: 16px;
        padding-top: 16px;
    }

    #ztCategories .zt-categories__eyebrow {
        margin-bottom: 8px;
        font-size: 9px;
    }

    #ztCategories .zt-categories__subtitle {
        margin-top: 4px;
        font-size: 12px;
    }

    /* На телефоне карточки идут по одной, ужимать нечего. */
    #ztCategories .zt-categories__rows {
        gap: 9px;
    }

    #ztCategories .zt-category-card,
    #ztCategories .zt-category-card.is-active,
    #ztCategories .zt-category-card.is-paired {
        flex-basis: 100%;
    }

    #ztCategories .zt-category-card {
        height: 160px;
    }

    #ztCategories .zt-category-card__compact {
        column-gap: 8px;
        padding: 17px;
    }

    #ztCategories .zt-category-card__title {
        margin-top: 10px;
        font-size: 15px;
    }

    #ztCategories .zt-category-card__preview-picture,
    #ztCategories .zt-categories__row--bottom .zt-category-card__preview-picture {
        width: min(100%, 150px);
        max-height: 115px;
    }

    #ztCategories .zt-category-card[data-category="engine"] { --zt-category-preview-y: -4px; }
    #ztCategories .zt-category-card[data-category="filters"] { --zt-category-preview-y: -7px; }
    #ztCategories .zt-category-card[data-category="consumables"] { --zt-category-preview-y: -6px; }
    #ztCategories .zt-category-card[data-category="attachment"] { --zt-category-preview-y: -11px; }
    #ztCategories .zt-category-card[data-category="cabin"] { --zt-category-preview-y: -10px; }

    #ztCategories .zt-category-card__arrow {
        bottom: 14px;
        left: 17px;
        width: 34px;
        height: 34px;
    }

    #ztCategories .zt-category-card__badges {
        display: none;
    }

}

/* До 419 px две колонки уже не помогают: подписи вроде «Водяные насосы,
   радиаторы и термостаты» переносятся в три строки, и высота списка
   почти не падает (239 против 246 px на 360). Поэтому здесь одна колонка,
   а место под неё берётся из высоты карточки и сцены со схемой:
   40 (поля) + 361 (худший состав, «Кабина и комфорт») + 8 (зазор)
   + 231 (сцена) = 640. */
@media (max-width: 419px) {
    /* Одна колонка тут больше не нужна: после уплотнения межстрочного
       две колонки выигрывают даже на 360 px — список 198 против 213 px,
       на 390 px 165 против 213. Отдельные заголовки вроде «Водяные
       насосы, радиаторы и термостаты» переносятся в три строки, но
       общая высота всё равно ниже. */
    #ztCategories .zt-category-card__type-columns {
        gap: 10px;
    }

    #ztCategories .zt-category-explode--all {
        padding-bottom: 66px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ztCategories .zt-category-card,
    #ztCategories .zt-category-card *,
    #ztCategories .zt-category-card::before,
    #ztCategories .zt-category-explode__origin,
    #ztCategories .zt-category-explode__source,
    #ztCategories .zt-category-explode__canvas {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}