/* ZIPTEH — страница «Производители», изолировано внутри #ztManufacturers. */
#ztManufacturers {
    --ztm-ink: var(--zt-text, #111823);
    --ztm-muted: var(--zt-muted, #6f7b90);
    --ztm-accent: var(--zt-yellow, #ffb800);
    --ztm-line: var(--zt-border, #e1e5ea);
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--ztm-ink);
    /* 07.09.2026, указание заказчика «убери с фона линии»: три дуги
       из radial-gradient сняты, остался чистый белый фон. */
    background: #fff;
    font-family: var(--zt-font, "Inter", Arial, sans-serif);
}

#ztManufacturers,
#ztManufacturers *,
#ztManufacturers *::before,
#ztManufacturers *::after {
    box-sizing: border-box;
}

/* Здесь лежал декоративный слой из концентрических колец
   (repeating-radial-gradient, повёрнутый на −13°) — снят 07.09.2026 вместе
   с дугами фона по указанию заказчика. */

/*
 * Ширину и боковые поля задаёт .zt-shell — та же сетка, что у шапки сайта
 * (решение заказчика 31.08.2026: «все модули выравниваются по шапке»).
 * Прежний собственный контейнер `min(100%, 1448px)` с полями 52/51 px
 * уводил контент на 32 px правее логотипа шапки и делал колонку уже её
 * на 63 px. Здесь остаются только вертикальные отступы.
 */
/* Снизу мало, потому что сразу под модулем идёт сквозная форма обратной
   связи со своими 74 px отступа сверху. Правим только свою половину зазора:
   форма подключается в footer.php на каждой странице, её отступы трогать
   нельзя (указание заказчика 07.09.2026 «сделать меньше отступ от CTA»). */
#ztManufacturers .zt-manufacturers__shell {
    padding-top: 39px;
    padding-bottom: 24px;
}

#ztManufacturers .zt-manufacturers__header,
#ztManufacturers .zt-manufacturers__layout {
    display: grid;
    align-items: start;
}

#ztManufacturers .zt-manufacturers__header {
    grid-template-columns: 1fr;
}

/* Раскладка на десктопе. Порядок в разметке — виды техники, производители,
   бренды запчастей: он же нужен на планшете и телефоне, где колонка одна.
   Здесь бренды запчастей возвращаются под виды техники, в левую колонку,
   а производители занимают правую на оба ряда. */
#ztManufacturers .zt-manufacturers__layout {
    grid-template-columns: 412px minmax(0, 1fr);
    column-gap: 97px;
    row-gap: 34px;
}

#ztManufacturers .zt-manufacturers__intro {
    grid-column: 1;
    grid-row: 1;
}

#ztManufacturers .zt-brands-col {
    grid-column: 2;
    grid-row: 1 / span 2;
}

#ztManufacturers .zt-parts-col {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

#ztManufacturers .zt-sprite {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

#ztManufacturers .zt-sprite svg {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: auto;
    transition: opacity .12s ease;
}

#ztManufacturers .zt-sprite__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: auto;
}

#ztManufacturers .zt-sprite.is-canvas-ready svg {
    opacity: 0;
}

#ztManufacturers .zt-brand-search {
    justify-self: end;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    width: 420px;
    height: 48px;
    margin: 0;
    border: 1px solid #dce1e8;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    color: #617087;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#ztManufacturers .zt-brand-search__icon {
    width: 20px;
    height: 20px;
    margin-left: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

#ztManufacturers .zt-brand-search input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 13px;
    border: 0;
    outline: 0;
    color: var(--ztm-ink);
    background: transparent;
    font: 500 13px/1 var(--zt-font, "Inter", Arial, sans-serif);
}

#ztManufacturers .zt-brand-search input::placeholder {
    color: #788399;
    opacity: 1;
}

#ztManufacturers .zt-brand-search__reset {
    display: grid;
    width: 38px;
    height: 46px;
    padding: 0;
    place-items: center;
    border: 0;
    color: #5e6d82;
    background: transparent;
    cursor: pointer;
}

#ztManufacturers .zt-brand-search__reset svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

#ztManufacturers .zt-brand-search__reset:hover {
    color: var(--ztm-accent);
}

/* ── Шапка модуля ──────────────────────────────────────────────────────────
   Типографика — роли шрифтов сайта (zt-fonts.css): Russo One у заголовка,
   Tektur у подзаголовка. Семейства продублированы приёмом :not(#zt_):not(#zt_)
   не для красоты: zt-redesign.css назначает их через !important, и без
   такого же веса модуль зависел бы от порядка подключения файлов.

   Интерлиньяж подзаголовка объявлен явно — глобальные стили сажают абзацы
   на line-height: 1, и строки слипаются. */
#ztManufacturers .zt-manufacturers__head {
    max-width: 900px;
}

#ztManufacturers .zt-manufacturers__title {
    margin: 0;
    color: var(--ztm-ink);
    font-size: clamp(25px, 2.35vw, 38px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-wrap: balance;
}

#ztManufacturers .zt-manufacturers__title:not(#zt_):not(#zt_) {
    font-family: var(--zt-font-head, 'Russo One', 'Tektur', system-ui, Arial, sans-serif) !important;
}

#ztManufacturers .zt-manufacturers__subtitle {
    max-width: 64ch;
    margin: 15px 0 0;
    color: var(--ztm-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.62;
}

#ztManufacturers .zt-manufacturers__subtitle:not(#zt_):not(#zt_) {
    font-family: var(--zt-font, 'Tektur', system-ui, Arial, sans-serif) !important;
}

#ztManufacturers .zt-manufacturers__layout {
    margin-top: 38px;
}

/* Эти 20 px опускали левую колонку: они держали её текст на одной оптической
   линии с заголовком «Мультибрендовые запчасти», который стоял слева сверху.
   Заголовок снят и переехал в шапку модуля над обеими колонками — теперь
   отступ просто ронял «Виды спецтехники» на 20 px ниже «Производителей
   спецтехники». Указание заказчика 07.09.2026: оба модуля на одном уровне. */
#ztManufacturers .zt-manufacturers__intro {
    padding-top: 0;
}

#ztManufacturers .zt-machine-nav {
    display: grid;
    gap: 7px;
}

/* Запас сверху при переходе по якорю: шапка сайта `position: fixed`, и без
   запаса карточка, на которую ведёт ссылка с главной
   (/proizvoditeli/#brand-cat), оказывалась бы под шапкой.

   168 px — по замеру самой высокой шапки: 148 px на 1440, 112 на 390,
   106 на 800. Значение одно на все ширины намеренно: у шапки нет
   переменной с высотой, а брейкпоинт её перестройки не совпадает
   с брейкпоинтами модуля — угадывать его значит однажды промахнуться.
   На узких экранах запас великоват на полсотни пикселей, но это лишний
   воздух над карточкой, а не спрятанная под шапку карточка. */
#ztManufacturers .zt-brand-card {
    scroll-margin-top: 168px;
}

#ztManufacturers .zt-machine-card,
#ztManufacturers .zt-brand-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    color: inherit;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* ---------------------------------------------------------
   Карточка вида техники (07.09.2026).

   Была одной вырезкой из PNG-референса пропорцией 412 × 80:
   и картинка, и название техники — нарисованные пиксели, а в разметке
   название дублировалось скрытым span. Текст нельзя было ни поправить,
   ни перенести, на ретине он мылился, а поисковик и скринридер получали
   только скрытую копию.

   Теперь карточка собрана из трёх частей: настоящая картинка заказчика
   (webp с прозрачным фоном), название и подпись живым текстом, стрелка.
   Высота держится на min-height, а не на aspect-ratio: у подписей разная
   длина, и на узких экранах строка может уйти на вторую.
   --------------------------------------------------------- */
#ztManufacturers .zt-machine-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    min-height: 80px;
    padding: 8px 14px 8px 8px;
    box-shadow: inset 0 0 0 1px var(--ztm-line);
    text-align: left;
}

#ztManufacturers .zt-machine-card__media {
    display: block;
    aspect-ratio: 8 / 5;
    min-width: 0;
    overflow: hidden;
}

/* Наведение: картинка подрастает ровно так же, как в карточке товара
   каталога — `transform: scale(1.035)` за `.28s ease`
   (catalog-grid.css:964-974). Значения взяты оттуда дословно, чтобы
   отклик был один на весь сайт, а не «похожий». */
#ztManufacturers .zt-machine-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    #ztManufacturers .zt-machine-card:hover .zt-machine-card__media img {
        transform: scale(1.035);
    }

    /* Название подсвечивается фирменным жёлтым. Только для мыши:
       на тач-экранах :hover залипает после тапа, и подсветка осталась бы
       висеть на карточке, с которой уже ушли. */
    #ztManufacturers .zt-machine-card:hover .zt-machine-card__name {
        color: var(--ztm-accent);
    }
}

#ztManufacturers .zt-machine-card__name {
    transition: color .18s ease;
}

#ztManufacturers .zt-machine-card__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#ztManufacturers .zt-machine-card__name {
    overflow: hidden;
    color: var(--ztm-ink);
    font-family: var(--zt-font-head, inherit);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ztManufacturers .zt-machine-card__note {
    overflow: hidden;
    color: var(--ztm-muted);
    font-size: 12px;
    line-height: 1.32;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ztManufacturers .zt-machine-card__arrow {
    width: 18px;
    height: 18px;
    justify-self: end;
    color: var(--ztm-accent);
    transition: transform .2s ease;
}

#ztManufacturers .zt-machine-card:hover .zt-machine-card__arrow,
#ztManufacturers .zt-machine-card.is-active .zt-machine-card__arrow {
    transform: translateX(3px);
}

/* У выбранного вида техники подпись темнеет — жёлтой обводки мало,
   когда карточек семь и глаз бежит по столбцу. */
#ztManufacturers .zt-machine-card.is-active .zt-machine-card__note {
    color: var(--ztm-ink);
}

/* Пропорция карточки задана числом, а не переменными --crop-*: она больше
   не зависит от того, какого размера кусок вырезан из PNG-референса.
   Сетка от этого стала ровной — раньше высота строки прыгала вслед
   за высотой вырезки. */
#ztManufacturers .zt-brand-card {
    aspect-ratio: 408 / 170;
    box-shadow: inset 0 0 0 1px var(--ztm-line);
}

/* Пока у бренда нет файла логотипа, карточка показывает название текстом.
   Кегль задан clamp — названия разной длины («JCB» и «Caterpillar») должны
   умещаться в одну строку и читаться одинаково крупно. */
#ztManufacturers .zt-brand-card--text {
    display: grid;
    place-items: center;
    padding: 12px 16px 34px;
}

/* Название бренда работает вместо логотипа, поэтому набрано заголовочной
   гарнитурой. Её приходится защищать хаком специфичности: глобальное
   правило zt-redesign.css раздаёт семейства по ролям через !important
   и держит любой не-заголовок на Tektur. */
#ztManufacturers .zt-brand-card__name:not(#zt_):not(#zt_) {
    font-family: var(--zt-font-head, 'Russo One', sans-serif) !important;
}

#ztManufacturers .zt-brand-card__name {
    color: var(--ztm-ink);
    font-size: clamp(17px, 1.5vw, 24px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-align: center;
    text-transform: uppercase;
    transition: color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    #ztManufacturers .zt-brand-card:hover .zt-brand-card__name {
        color: var(--ztm-accent);
    }
}

/* Нижнее поле 34 px — место под надпись «Перейти к бренду». Раньше её
   закрывала белая плашка поверх логотипа; теперь логотип просто не заходит
   в эту зону. */
#ztManufacturers .zt-brand-card__logo {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 14px 18px 34px;
}

/* Картинка занимает всю ячейку и вписывается в неё через object-fit.
   Прежний вариант (`max-height: 100%`) обрезал логотипы, когда карточка
   стала ниже при переходе на три колонки: процент считался от высоты
   карточки, а не от содержимого внутри полей, и картинка выходила
   на 3 px за край. */
/* ── Логотипы в чёрно-белом (07.09.2026) ───────────────────────────────────
   Указание заказчика: без наведения логотипы брендов чёрно-белые, при
   наведении — в цвете. Так сетка из семнадцати марок читается спокойнее:
   в цвете рядом стоят красный SANY, зелёный John Deere и жёлтый JCB,
   и каждая карточка тянет внимание на себя.

   Обесцвечивает НЕ filter: grayscale(1), а отдельный файл из подпапки bw/.
   Причина в самом фильтре: он сохраняет светлоту исходника, поэтому чёрный
   Liebherr оставался почти чёрным, а салатовый Zoomlion выцветал почти
   добела — в ряду это читалось как «часть логотипов не прогрузилась».
   Заказчик это и заметил: «что-то темнее, а что-то светлее». У файлов из
   bw/ средняя светлота приведена к одному значению.

   Обе картинки лежат в одной ячейке грида и переключаются прозрачностью:
   нет ни подмены src, ни подгрузки в момент наведения. Переключать через
   display здесь нельзя — правило #ztManufacturers .zt-brand-card__logo img
   ниже специфичнее (1,1,1 против 1,1,0) и вернуло бы картинку обратно. */
#ztManufacturers .zt-brand-logo {
    grid-column: 1;
    grid-row: 1;
}

/* Умолчание — цвет: так карточка выглядит на тач-экранах, где наведения
   не бывает и серая сетка осталась бы серой навсегда. */
#ztManufacturers .zt-brand-logo--bw {
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    #ztManufacturers .zt-brand-logo--bw {
        opacity: 1;
    }

    /* Цветная лежит поверх ч/б (идёт следом в разметке) и просто
       проявляется при наведении. */
    #ztManufacturers .zt-brand-logo--color {
        opacity: 0;
        transition: opacity .28s ease;
    }

    #ztManufacturers .zt-brand-card:hover .zt-brand-logo--color,
    #ztManufacturers .zt-parts-brands__link:hover .zt-brand-logo--color {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ztManufacturers .zt-brand-logo--color {
        transition: none;
    }
}

#ztManufacturers .zt-brand-card__logo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

/* Здесь была белая плашка 42 % × 42 px в левом нижнем углу — подложка
   под надпись «Перейти к бренду». Снята 07.09.2026 по указанию заказчика
   «кнопка без белой подложки, чтоб не закрывала производителя»: она
   перекрывала нижний левый угол логотипа. Место под надпись теперь
   отводится полем снизу у самого содержимого, а не заслонкой поверх него.

   Псевдоэлемент переиспользован под «бровь» — то самое выделение, что
   у карточки бренда в разделе «Производители» на главной
   (`.zip-brands__card::before`): полоска 4 px по верхней кромке, отступ
   18 px от боков, скругление снизу 8. Лежит всегда прозрачной и просто
   заливается цветом при наведении — переход мягкий и без сдвигов. */
#ztManufacturers .zt-brand-card::before {
    position: absolute;
    z-index: 2;
    top: -1px;
    right: 18px;
    left: 18px;
    height: 4px;
    background: transparent;
    border-radius: 0 0 8px 8px;
    content: "";
    pointer-events: none;
    transition: background-color .28s ease;
}

#ztManufacturers .zt-brand-card::after {
    position: absolute;
    z-index: 3;
    left: 26px;
    bottom: 15px;
    color: var(--ztm-ink);
    content: "Перейти к бренду   →";
    font-family: var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Наведение повторяет карточку бренда с главной: жёлтая рамка, белый фон,
   залитая бровь. Подъём на 2 px и тень, которые были здесь раньше, сняты —
   на главной их нет, а просили «так же, как на главной».
   Только для мыши: на тач-экранах :hover залипает после нажатия. */
@media (hover: hover) and (pointer: fine) {
    #ztManufacturers .zt-machine-card:hover,
    #ztManufacturers .zt-brand-card:hover {
        z-index: 2;
        background: #fff;
        box-shadow: inset 0 0 0 1px var(--ztm-accent);
    }

    #ztManufacturers .zt-brand-card:hover::before {
        background: var(--ztm-accent);
    }
}

#ztManufacturers .zt-machine-card.is-active {
    box-shadow: 0 0 0 2px rgba(255, 184, 0, .8);
}

#ztManufacturers .zt-machine-card:focus-visible,
#ztManufacturers .zt-brand-card:focus-visible,
#ztManufacturers .zt-brand-search:focus-within {
    outline: 3px solid rgba(255, 184, 0, .46);
    outline-offset: 3px;
}

/* Колонки равной ширины. Прежние 408fr / 414fr — ширины вырезок из
   PNG-референса; с ними правая карточка была на 6 px шире левой и при
   фиксированной пропорции вылезала на 3 px выше. Кропов больше нет —
   и повода для неровной сетки тоже. */
/* ── Заголовки групп (07.09.2026) ──────────────────────────────────────────
   Три группы на странице: виды спецтехники, бренды запчастей и производители
   спецтехники. Заголовок компактный — он подписывает столбец, а не открывает
   раздел, поэтому кегль меньше H1 модуля и черта короче, чем у заголовков
   секций на посадочных. */
#ztManufacturers .zt-group-title {
    margin: 0 0 14px;
    color: var(--ztm-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#ztManufacturers .zt-group-title:not(#zt_):not(#zt_) {
    font-family: var(--zt-font-btn, 'Manrope', sans-serif) !important;
}

#ztManufacturers .zt-group-title::after {
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 9px;
    background: var(--ztm-accent);
    border-radius: 2px;
    content: "";
}

/* Отбивку «Брендов запчастей» от видов техники раньше давало соседство
   (`.zt-machine-nav + .zt-group-title`). Блоки разъехались по разным секциям
   07.09.2026, соседями быть перестали — теперь расстояние задаёт row-gap
   раскладки, и оно одинаково на всех ширинах. */

/* ── Бренды запчастей ──────────────────────────────────────────────────────
   Поставщики, чью продукцию компания представляет официально. Список узкий —
   он стоит в левой колонке под видами техники, — поэтому не карточки, а строки
   со стрелкой: так девять пунктов читаются столбцом и не спорят по весу
   с сеткой производителей справа. */
#ztManufacturers .zt-parts-brands {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#ztManufacturers .zt-parts-brands__link {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 16px;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    color: var(--ztm-ink);
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--ztm-line);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: box-shadow .2s ease, color .18s ease;
}

/* Место под логотип бренда запчастей. Слот зарезервирован всегда — ряд
   не «прыгает», когда часть логотипов уже есть, а часть ещё нет.
   Пока файла нет, в слоте монограмма: пустая рамка читалась бы как
   незагрузившаяся картинка. */
#ztManufacturers .zt-parts-brands__logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 44px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ztm-soft, #f5f7f8);
}

#ztManufacturers .zt-parts-brands__logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#ztManufacturers .zt-parts-brands__logo--empty {
    color: var(--ztm-muted);
    box-shadow: inset 0 0 0 1px var(--ztm-line);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

#ztManufacturers .zt-parts-brands__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ztManufacturers .zt-parts-brands__link svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--ztm-accent);
    transition: transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    #ztManufacturers .zt-parts-brands__link:hover {
        color: var(--ztm-accent);
        box-shadow: inset 0 0 0 1px var(--ztm-accent);
    }

    #ztManufacturers .zt-parts-brands__link:hover svg {
        transform: translateX(3px);
    }
}

/* Колонка производителей: заголовок над сеткой карточек. */
#ztManufacturers .zt-brands-col {
    min-width: 0;
}

/* Три карточки в ряд (указание заказчика 07.09.2026). При колонке 876 px
   карточка выходит ~282 px — логотипу и названию этого хватает, а ряд
   перестал выглядеть полупустым, как было при двух.

   Шестнадцать на три не делится: в последнем ряду остаётся одна карточка.
   Растягивать её на всю ширину не стал — она стала бы втрое крупнее
   соседних и читалась бы как выделенный, «главный» бренд, чего в списке
   марок быть не должно. */
#ztManufacturers .zt-brands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px 14px;
}

/* На средних ширинах колонка уже, и три карточки в ряд дают ~200 px:
   длинные названия вроде «Caterpillar» и «John Deere» в одну строку
   уже не помещаются. Возвращаем две. */
@media (max-width: 1180px) {
    #ztManufacturers .zt-brands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#ztManufacturers .zt-brand-card[hidden] {
    display: none;
}

#ztManufacturers .zt-brands__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 48px 24px;
    border: 1px solid var(--ztm-line);
    border-radius: 10px;
    color: var(--ztm-muted);
    background: #fff;
    text-align: center;
}

#ztManufacturers .zt-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1299px) {
    #ztManufacturers .zt-manufacturers__shell {
        padding-top: 32px;
        padding-bottom: 26px;
    }

    #ztManufacturers .zt-manufacturers__header {
        grid-template-columns: 1fr;
    }

    #ztManufacturers .zt-brand-search {
        width: 100%;
    }

    #ztManufacturers .zt-manufacturers__layout {
        grid-template-columns: 1fr;
        gap: 34px;
        margin-top: 36px;
    }

    /* Колонка одна — явные места из десктопной раскладки надо снять,
       иначе grid-column: 2 создаст пустую вторую дорожку. Порядок блоков
       на экране становится порядком разметки: виды техники, производители,
       бренды запчастей. */
    #ztManufacturers .zt-manufacturers__intro,
    #ztManufacturers .zt-brands-col,
    #ztManufacturers .zt-parts-col {
        grid-column: 1;
        grid-row: auto;
    }

    /* Раньше intro делился на две колонки: слева заголовок с лидом, справа
       виды техники. Текст снят 07.09.2026 — делить больше нечего, колонка одна. */
    #ztManufacturers .zt-manufacturers__intro {
        padding-top: 0;
    }

    #ztManufacturers .zt-machine-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
    }

    #ztManufacturers .zt-machine-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 4px);
    }
}

@media (max-width: 800px) {
    #ztManufacturers .zt-manufacturers__shell {
        padding-top: 25px;
        padding-bottom: 22px;
    }

    #ztManufacturers .zt-manufacturers__header {
        grid-template-columns: 1fr;
    }

    #ztManufacturers .zt-manufacturers__layout {
        gap: 28px;
        margin-top: 30px;
    }

    #ztManufacturers .zt-manufacturers__intro {
        display: block;
    }

    #ztManufacturers .zt-machine-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #ztManufacturers .zt-machine-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 4px);
    }

    #ztManufacturers .zt-brands {
        gap: 12px;
    }
}

@media (max-width: 560px) {

    #ztManufacturers .zt-manufacturers__shell {
        padding: 21px 16px 18px;
    }

    #ztManufacturers .zt-manufacturers__header {
        grid-template-columns: 1fr;
    }

    #ztManufacturers .zt-brand-search {
        justify-self: stretch;
    }

    /* Здесь стояли `width: 44%` и `height: 38px` — размеры белой подложки
       под надписью «Перейти к бренду», которую `::before` рисовал до 07.09.2026.
       Подложку сняли по указанию заказчика, псевдоэлемент переиспользовали
       под бровь (полоска 4 px по верхней кромке), а это правило осталось
       от прежнего назначения. `width` перебивает пару `left`/`right`, и на
       узких ширинах бровь превращалась в жёлтый блок 44 % × 38 px в левом
       верхнем углу карточки — заказчик увидел это на CASE («на мобилках
       обводка странная»). Собственных размеров на узких ширинах брови
       не нужно: карточка там во всю ширину, отступов 18 px от боков хватает. */

    #ztManufacturers .zt-brand-card::after {
        left: 16px;
        bottom: 14px;
        font-size: 11px;
    }

    #ztManufacturers .zt-manufacturers__layout {
        margin-top: 27px;
    }

    #ztManufacturers .zt-machine-nav,
    #ztManufacturers .zt-brands {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    #ztManufacturers .zt-machine-card:last-child {
        grid-column: auto;
        width: 100%;
    }

    /* На телефоне карточка одна в ряд и места хватает: картинка крупнее,
       подписи разрешено уйти на вторую строку — «Асфальтоукладчики и фрезы»
       в одну не помещается на 360 px. */
    #ztManufacturers .zt-machine-card {
        grid-template-columns: 104px minmax(0, 1fr) 18px;
        min-height: 76px;
    }

    #ztManufacturers .zt-machine-card__note {
        white-space: normal;
    }

    #ztManufacturers .zt-brands {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ztManufacturers *,
    #ztManufacturers *::before,
    #ztManufacturers *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ── Стыковка с боевым шаблоном ───────────────────────────────────────────
   На стенде модуль лежит в странице сам по себе, на бою — внутри обёрток
   шаблона: `<h1 class="zt-page-heading zt-page-heading--content">` из
   ShowTitle() и `<div class="container">`, в котором же лежат хлебные крошки.

   1. Шаблонный H1 («Производители») гасим: у модуля теперь свой заголовок,
      два H1 на странице — дубль для поиска и лишняя строка для читателя.

   2. Поля контейнера НЕ снимаем — их задаёт site-shell.css с !important,
      и в том же контейнере стоят крошки: снимешь поля, и крошки уедут
      к краю экрана. Вместо этого модуль вычитает их отрицательными полями
      ровно на ту же величину, дальше колонку задаёт его собственный
      .zt-shell — и левый край совпадает с логотипом шапки на любой ширине.

   Оба правила висят на :has и включаются только на странице с модулем.
   В браузере без :has они не сработают: останется лишний заголовок,
   а модуль будет уже шапки — но вёрстка не развалится.
   Тот же приём, что на «Вакансиях» (careers-module.css) и «Сертификатах». */
body:has(#ztManufacturers) .zt-page-heading--content {
    display: none;
}

/* Зазор до формы обратной связи (указание заказчика 07.09.2026
   «сделать меньше отступ от CTA»). Замер на стенде до правки: 24 px своего
   поля снизу + 80 px верхнего отступа формы + 64 px её внутреннего поля —
   168 px пустоты между сеткой брендов и заголовком формы.

   Форму подключает footer.php на каждой странице сайта, её собственные
   отступы трогать нельзя — уедут все страницы разом. Поэтому гасим верхний
   отступ формы точечно, только там, где на странице стоит этот модуль:
   :has() ограничивает правило одной страницей. Остаётся 24 + 64 = 88 px.

   !important здесь обязателен, и это не «на всякий случай»: 80 px задаёт
   zt-home-unify.css одним общим правилом со списком модулей и пометкой
   !important — единый ритм между блоками главной. Без такого же веса
   правило просто не применяется (проверено на стенде: зазор оставался 80).

   Без поддержки :has() правило не сработает — вернётся прежний зазор,
   но ничего не сломается. */
body:has(#ztManufacturers) #ziptehLeadModule {
    margin-top: 0 !important;
}

.container > .zt-manufacturers {
    /* !important обязателен: .zt-shell в zt-home-unify.css объявлен
       с margin и padding через !important. width: auto — иначе блок
       сдвинется влево, но не расширится, и правый край уедет внутрь. */
    width: auto !important;
    margin-right: calc(-1 * var(--zt-site-shell-gutter, 20px)) !important;
    margin-left: calc(-1 * var(--zt-site-shell-gutter, 20px)) !important;
}