/* ============================================================================
   Адаптивная вёрстка.
   Подключается в footer.php последним, после ui-states.css и <style> инклудов:
   правила перекрывают их обычным порядком каскада.
   ============================================================================ */

/* Свёрнутая панель меню (до 1023 px) уезжает за правый край экрана, а её тень
   -8px 0 24px оставалась бы в кадре серой полосой шириной около 30 px. Тень — только у открытой панели. */
@media (max-width: 1023px) {
  .site-nav { box-shadow: none; }
  .site-nav.is-open { box-shadow: -8px 0 24px rgba(0, 0, 0, .25); }
}

/* До 1100 px включительно выдача идёт карточками в две колонки, а нижний предел
   ширины таблицы 860 px (ui-states.css, раздел 10 — он нужен табличному виду) выталкивал бы
   правую колонку карточек за край блока на 1024–1100 px. */
@media (min-width: 1024px) and (max-width: 1100px) {
  .results-table { min-width: 0; }
}

/* Карточки выдачи в две колонки: у колонок 1fr нижняя граница — ширина содержимого,
   и на телефоне две карточки с промежутком выходили бы за блок на 6 px — появлялась бы прокрутка. */
@media (max-width: 1100px) {
  .results-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Избранное» с добавленной техникой на 1024–1100 px: колонке контента рядом с левой панелью
   не хватает ширины — кнопки «Удалить все» и «Сохранить в подборку» и заголовок «Требования
   для агрегатирования» (неразрывный пробел) выходили бы за край, появлялась бы прокрутка страницы
   вбок. Кнопки переносятся под заголовок, текстовые колонки карточки делят ширину поровну. */
@media (min-width: 1024px) and (max-width: 1100px) {
  .fav-head { flex-wrap: wrap; }
  .fav-item { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr) 51px; }
  .fav-item__req-title { font-size: 16px; }
}

/* ============================================================================
   Корректировки интерфейсов
   ============================================================================ */

/* Единица измерения в мобильной таблице характеристик — в той же строке, что название
   параметра: «Рабочая скорость (км/ч)», а не «(км/ч)» отдельной строкой. Утилита
   .desktop-hidden делает её блоком (template_styles.css, ui-states.css разделы 17–18).
   Только у единиц со скобками (.mobile-unit): в таблицах вариантов сменных органов
   единица без скобок приклеилась бы к названию. */
@media (max-width: 600px) {
  body .spec-table th .unit.desktop-hidden:not(:has(.mobile-unit:empty)):has(.mobile-unit),
  body .req-modal .agg-req__param .unit.desktop-hidden:not(:has(.mobile-unit:empty)):has(.mobile-unit) {
    display: inline !important; margin-left: .25em;
  }
}
@media (max-width: 768px) {
  body .machine-hero ~ .spec-table th .unit.desktop-hidden:not(:has(.mobile-unit:empty)):has(.mobile-unit) {
    display: inline !important; margin-left: .25em;
  }
}

/* Вертикальные разделители между колонками значений на телефоне — белые, как
   горизонтальные между строками (перекрывают ui-states.css). */
@media (max-width: 600px) {
  .spec-table tr:has(> td.value + td.value):not(:has(> td.value + td.value + td.value + td.value)) > td.value + td.value {
    background-image: linear-gradient(#fff, #fff);
  }
}

/* Строки с четырьмя и более значениями — по колонкам раздела: подпись колонки, под ней
   значения через запятую (блок собирает spec-table-groups.js). Колонки равной ширины: по доле
   сетки колонка «540/540E» у BELARUS 2023 заняла бы шестую часть строки и рвала подпись
   по слогам. На широком экране блока нет. */
.spec-table td.value-groups { display: none; }
@media (max-width: 600px) {
  .spec-table tr.has-value-groups > td.value { display: none; }
  .spec-table tr.has-value-groups > td.value-groups { display: flex; padding-top: 0; }
  .spec-table .value-groups__col { flex: 1 1 0; min-width: 0; padding: 0 8px; overflow-wrap: anywhere; }
  .spec-table .value-groups__col:first-child { padding-left: 0; }
  .spec-table .value-groups__col + .value-groups__col {
    background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat;
    background-position: left center; background-size: 1px 100%;
  }
  .spec-table .value-groups__head { font-weight: 700; margin-bottom: 6px; }
}

/* ============================================================================
   Мобильная версия и несколько правил по десктопу
   ============================================================================ */

/* Главная, «Найди свою технику»: заголовок раздела крупнее (в две строки, как на
   макете), картинка карточки — на всю ширину карточки, кнопка «Выбрать» ниже. */
@media (max-width: 600px) {
  body .find__title { font-size: 40px; line-height: 1.05; margin-bottom: 20px; }
  body .find-card__image { padding: 10px 0 12px; }
  body .find-card__image img { width: 100%; max-width: none; height: auto; max-height: none; }
  body .find-card__btn { padding: 6px 12px; min-height: 46px; font-size: 23px; line-height: 34px; }
}

/* Подвал: иконки соцсетей крупнее и с промежутками — по четыре в ряд, как на макете. */
@media (max-width: 600px) {
  body .site-footer__social { gap: 14px; flex-wrap: wrap; }
  body .site-footer__social-link { width: 52px; height: 52px; }
  body .site-footer__social-link img { max-width: 24px; max-height: 24px; width: 24px; height: auto; }
}

/* Страница 404: блок занимает экран под шапкой, цифры крупнее, текст уже (три строки),
   кнопка на всю ширину и ниже. */
@media (max-width: 600px) {
  body .err404 { min-height: calc(100svh - 58px); display: flex; align-items: center; padding: 24px 0 40px; }
  body .err404__inner { width: 100%; }
  body .err404__text { font-size: 18px; line-height: 1.35; max-width: 250px; margin-left: auto; margin-right: auto; }
  body .err404__actions { margin-top: 28px; }
  body .err404__btn { width: 100%; min-height: 46px; padding: 6px 16px; justify-content: center; font-size: 23px; }
}

/* Подбор по мощности: иконки тракторов одного размера. Сервер отдаёт копии без пустых
   полей (api/tractor_power.php), здесь — одинаковая рамка под иконку в каждой строке. */
@media (max-width: 600px) {
  body .power-row { grid-template-columns: 50px minmax(0, 1fr) auto; }
  body .power-row__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 30px; }
  body .power-row__icon img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
}

/* Полоса серий тракторов на телефоне крупнее — надписи серий читаются.
   Хлебные крошки остаются в обычном виде (переносятся на следующую строку), без прокрутки вбок. */
@media (max-width: 600px) {
  body .series-trip .series-trip__strip { gap: 33px; padding-top: 14px; padding-bottom: 12px; margin-right:-33px}
  body .series-trip .series-trip__strip button { font-size: 12px; line-height: 18px; }
}

/* На телефоне и планшете нет наведения мыши, но браузер после касания держит на элементе
   состояние :hover, пока не коснуться другого места. Стили наведения из стайлгайда
   (ui-states.css и стили страниц) от этого «залипали» бы:
   — «Подобрать машины» после закрытия списка оставалась бы белой, «Сохранить в мои
     тракторы» — красной;
   — флажок «В избранное» оставался бы бледно-розовым (наведение = красный флажок
     с прозрачностью 0,4);
   — пункт фильтра после снятия отметки оставался бы с розовой точкой, а последний
     выбранный — с красной надписью.
   Где наведения нет (hover: none), под :hover возвращаем обычный вид элемента. */
   

@media (hover: none) {
  body .country-select:not(.is-open) .country-select__toggle:hover,
  body .profile-actions__select:not(.profile-save):hover {
    background: var(--c-red); color: #fff; border-color: #fff;
  }
  body .country-select.is-open .country-select__toggle:hover { background: #fff; color: var(--c-red); border-color: #DEDEDE; }
  body .tractor-profile button.profile-save:not(.profile-save--disabled):hover,
  body .profile-save:not(.profile-save--disabled):hover {
  } 
  
  body .country-select.is-open .country-select__toggle:active { background: #fff; color: var(--c-red); border-color: #DEDEDE; }
  

  body .profile-save:not(.profile-save--disabled):active,
  body .tractor-profile button.profile-save:not(.profile-save--disabled):focus,
  body .profile-save:not(.profile-save--disabled):focus   {
	   transition: all 0.3s ease;
	   background: var(--c-red); color: #fff; border-color: var(--c-red);
  }
  
  body .btn--primary:hover, body .country-select__apply:hover {
    background: var(--c-red); color: #fff; border-color: var(--c-red);
  }

  body input.fav-flag:hover:not(:checked) {
    background: url("/local/templates/agregatirovanie/images/icons/flag.svg") center / contain no-repeat;
    opacity: 1;
  }
  body input.fav-flag:checked:hover { opacity: 1; }
  body .add-to-fav:not(.is-active):hover svg path { fill: none; stroke: #BDBDBD; }

  body .custom-checkbox:hover input ~ .checkmark { border-color: #C5C5C5; }
  body .custom-checkbox:hover span:not(.checkmark) { color: inherit; }
  body .custom-checkbox:hover input:not(:checked) ~ .checkmark::after { transform: translate(-50%, -50%) scale(0); }
}

/* Подбор машин на планшете и телефоне: быстрые фильтры («BELARUS 82.1 ×») стоят над
   строкой с моделью трактора и кнопкой «Характеристики», как на макете; надпись фильтра —
   обычным начертанием, не жирным. */
@media (max-width: 1100px) {
  body .agri-params-strip { display: flex; flex-direction: column; }
  body .agri-params-strip > .quick-filters { order: -1; padding-bottom: 8px; }
  body .quick-filters .tag {  font-size: 12px; }
}

/* Карточки машин в выдаче (планшет и телефон): «Наименование» перед «Типом
   машины»; равные отступы между картинкой и кнопками «Описание» / «Требования»; значения
   полей — с межстрочным интервалом 1,2 вместо 1,45: двух-трёхстрочные названия и списки
   серий не «рассыпаются». */
@media (max-width: 1100px) {
  body .results-table tbody td.col-name { order: 5; }
  body .results-table tbody td.col-machine-type { order: 6; }
  body .results-table tbody td.col-image { margin-bottom: 6px; }
  body .results-table tbody td.col-info .info-btn + .info-btn { margin-top: 3px; }
  body .results-table tbody td.col-name,
  body .results-table tbody td.col-machine-type,
  body .results-table tbody td.col-model,
  body .results-table tbody td.col-manuf,
  body .results-table tbody td.col-series { line-height: 1.2; }
  body .results-table tbody td .hidden-desktop { margin-bottom: 2px; }
}

/* Списки в фильтрах подбора («Производитель», «Типы машин», «Серии», «Виды
   выполняемых работ»):
   — полоса прокрутки везде одна: тонкая серая на светлой дорожке, как в «Типах машин»; дорожка
     нарисована и фоном списка — iPhone Safari не показывает полосу прокрутки, пока список
     не прокручивают, и не видно, что список длиннее;
   — разделительные линии пунктов заканчиваются за 12 px до полосы прокрутки;
   — у последнего пункта группы тот же отступ до линии, что и у остальных;
   — «Типы машин» раскрываются на ту же высоту, что «Серии», а не на 40 % экрана. */
   
   
   

@media (max-width: 1023px) {
  body .holding-grid, body .mtype-list, body .series-filter__list {
    padding-right: 16px;
  }
  body .filters__group-body .mtype-list { max-height: 60vh; }
  body .mtype-list .mtype-group label.checkbox:last-child { padding-bottom: 9px; }
  body .worktype-item:last-child { padding-bottom: 10px; }
}

/* Плитки «Возможно, вас заинтересует» на телефоне и планшете: у подписи машины
   («Полуприцеп малогабаритный тракторный») и названия производителя межстрочный интервал
   1,2 — как на макете; с общим 1,45 трёхстрочная подпись занимала бы полплитки. */
@media (max-width: 1023px) {
  body .agri-reco__text, body .agri-reco__manuf,
  body .reco-tile__text, body .spec-reco__text, body .name__prod { line-height: 1.2; }
}

/* Таблица характеристик на телефоне: во всех профайлах — машин, мини- и лесной
   техники, спецтехники — тот же кегль, что в профайле трактора (18 px у названий, значений
   и заголовков разделов «Параметры агрегатирования», «Двигатель», «ВОМ»). */
@media (max-width: 600px) {
  html body .spec-table,
  html body .spec-table th, html body .spec-table td,
  html body .spec-table tr.section-row th { font-size: 18px; }
  html body .spec-table th, html body .spec-table td { line-height: 1.3; }
}

/* Заголовок раздела под раскрытым разделом таблицы — с линией сверху, как на макете:
   иначе серая строка «2560±20» упиралась бы прямо в «Бульдозерное оборудование». Линия нужна,
   когда над заголовком видны строки: у раскрытого раздела (.is-visible) и у первого,
   всегда раскрытого раздела таблицы. */
@media (max-width: 600px) {
  body .spec-table tr.spec-section-item.is-visible + tr.section-row,
  body .spec-table tr.section-row--first ~ tr.section-row:not(tr.section-row--first ~ tr.section-row ~ tr.section-row) {
    border-top: 1px solid #BDBDBD;	
  }
  body .spec-table tr.section-row--first ~ tr.section-row:not(tr.section-row--first ~ tr.section-row ~ tr.section-row) {margin-top: 13px }
}

/* Примечания под таблицей характеристик («*Комплектация по заказу», «Характеристики
   представлены…», сноски «1)») — один кегль во всех профайлах. */
@media (max-width: 600px) {
  body .spec-notes, body .spec-notes p, body .spec-notes div, body .spec-notes li,
  body .spec-table ~ p.text-muted.text-small { font-size: 16px; line-height: 1.3; }
}

/* «Сменные рабочие органы» в профайле машины на телефоне — заголовком раздела, как
   «Гидронавесная система» на макете: без рамки кнопки, с линией сверху и отступом текста
   таблицы; «Вариант 1» — на одной вертикали с названиями строк таблицы. */
@media (max-width: 600px) {
  body .parts-block__head { border: 0; border-top: 1px solid #BDBDBD; padding: 13px 23px; }
  body .parts-variant__title { padding-left: 23px; }
}

/* «По вашему запросу ничего не найдено» на телефоне: между кнопкой «Сбросить последний
   фильтр» и полем поиска по модели — 12 px, как на макете. */
@media (max-width: 600px) {
  body .empty-query__actions { gap: 10px; }
}

/* FAQ на телефоне: картинки с тракторами под списком нет — на мобильном макете её
   нет; вложенные вопросы и ответы начинаются на одной вертикали с разделами («Общие вопросы»,
   «Регистрация»), а не со сдвигом 50 px. */
@media (max-width: 600px) {
  body .page-banner { display: none; }
  body .faq-item__body .sub-item-heading { padding-left: 16px; }
  body .faq-item__body .sub-item { padding-left: 16px; padding-right: 16px; }
  body .faq-item__body .sub-item p {margin-top:0;}
}

/* «Избранное» и подборка на телефоне:
   — стрелка раздела справа от первой строки заголовка, а не после последнего слова;
   — строки тракторов кеглем 20 px, как на макете: при 30 px длинные модели («BELARUS МПТ-40…»)
     обрезались бы многоточием; BELARUS — начертанием Black, номер модели — обычным. */
@media (max-width: 600px) {
  body .fav-section__title { position: relative; display: block; width: fit-content; max-width: 100%; padding-right: 34px; text-align: left; line-height: 1.15; }
  body .fav-section__title .fav-section__arrow { position: absolute; right: 0; top: .2em; margin: 0; }
  body .fav-row__model { font-size: 30px; font-weight: 700; }
  body .fav-row__model strong { font-weight: 900; }
}

/* Карточка машины в «Избранном» и подборке на телефоне: картинка крупнее (половина
   ширины карточки) и отделена от описания; межстрочный интервал текстов 1,25 вместо 1,6;
   «Требования для агрегатирования» ближе к своему тексту, чем к блоку над ним. */
@media (max-width: 600px) {
  body .fav-item__img img { width: 50%; max-width: 180px; height: auto; margin-right: 0; }
  body .fav-item__img { margin-bottom: 14px; }
  body .fav-item__props, body .fav-item__props p, body .fav-item__props span { line-height: 1.25; }
  body .fav-item__props p { margin-bottom: 8px; }
  body .fav-item__req { font-size: 12px; line-height: 1.25; padding-top: 10px; }
  body .fav-item__req .fav-item__req-title { display: block; margin-bottom: 6px; }
  body .fav-item__req > span:not(.fav-item__req-title) { line-height: 1.25; }
}

/* Личный кабинет на телефоне: кнопка «Обратная связь» под заголовком «Личный кабинет»,
   шириной в половину строки, как на макете, а не рядом с ним. */
@media (max-width: 600px) {
  body .lk-content__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  body .lk-content__head .btn { width: 50%; min-width: 180px; justify-content: center; }
}

/* «Сортировать по» на телефоне: у кнопок без стрелки («Производителю», «Видам
   выполняемых работ») надпись по центру, как на макете; «Параметрам трактора» со стрелкой
   раскрытия — надпись слева, стрелка справа. */
@media (max-width: 600px) {
  body a.agri-btn { justify-content: center; text-align: center; }
}

/* Окно требований для агрегатирования на телефоне: таблица тяг ЗНУ («Особенности»,
   «Изображение», «Обозначение») не шире окна — ячейки не держат текст в одну строку
   (длинное обозначение «50-4605030-А3-04(правая)/…» переносится), картинка тяги вписывается
   в ширину окна. */
@media (max-width: 600px) {
  body .req-modal .agg-req__table--tugs,
  body .req-modal .agg-req__table--tugs tbody { display: block; width: 100%; max-width: 100%; }
  body .req-modal .agg-req__table--tugs td { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
  body .req-modal .agg-req__table--tugs img { max-width: 100%; height: auto; }
  body .req-modal .agg-req__variant { max-width: 100%; overflow-x: hidden; }
}

/* Плашки согласования агрегатирования в профайле машины — по дизайн-макету: без
   цветной полосы, фона и значка-галочки; перед текстом красный «!», текст полужирный тёмный,
   кеглем описания машины (18 px). Заголовок («Согласовано», «Не проходило согласование»,
   «Предупреждение…») на макете не выводится — смысл несёт сам текст. Оформление задано
   стилем в разметке, поэтому здесь с !important. */
body .machine-approval {
  padding: 0 !important; border: 0 !important; background: none !important;
  font-size: 18px !important; line-height: 1.3 !important; color: #2A3948 !important;
  font-weight: 600; gap: 12px !important; margin-bottom: 16px !important;
}
body .machine-approval > span:first-child { display: none; }
body .machine-approval::before {
  content: "!"; flex: 0 0 auto; color: var(--c-red, #A21B2C); font-weight: 900;
  font-size: 1.6em; line-height: .85;
}
body .machine-approval > span:last-child > strong:first-child,
body .machine-approval > span:last-child > strong:first-child + br { display: none; }

/* Подборка на телефоне: крестик у машины и «Удалить все» после касания не остаются
   красными — возвращаются к обычному виду (см. блок hover: none выше). */
@media (hover: none) {
  body .fav-del:hover { background: #F0F0F0; }
  body .fav-del:hover img { filter: none; }
  body .fav-section__clear:hover { color: #2A3948; background: none; border-color: #CCCCCC; }
}

/* Кнопка меню («три полоски») и крестик закрытия на iPhone. Safari рисует кнопку
   со своим оформлением и сжимает её во flex-строке шапки — полоски без явной ширины
   пропадают. Полоскам задана ширина, кнопка не сжимается, крестик — тёмный. */
   
   
@media (max-width: 1100px) {
    .results-table .col-image img.no-image {
        aspect-ratio: 16 / 9;
        object-fit: cover;
		width: 100%
    }
	
	.results-table .col-image:has(.no-image) {border-color: transparent;}
}


@media (max-width: 1023px) {
  body .site-header__burger { -webkit-appearance: none; appearance: none; flex: 0 0 32px; min-width: 32px; -webkit-tap-highlight-color: transparent; }
  body .site-header__burger span { width: 100%; flex: 0 0 2px; min-height: 2px; }
  body.burger-open .site-header__burger span { background: #2A3948; }
  body .machine-hero__desc {    font-size: 14px; margin-top: 20px;}
}

/* Окно обратной связи на телефоне, по макету:
   — окно не выше экрана, с полями сверху и снизу: на телефоне с панелью браузера окно
     иначе занимает всю высоту, и верхней и нижней границ окна не видно;
   — звёздочка обязательного поля — справа от поля, у его верхнего края, а не над ним;
   — пункты «Выберите тип своего сообщения» и поля ввода — с равными промежутками;
   — кнопка «Отправить» выше. */
@media (max-width: 600px) {
  body .modal-backdrop[data-modal-id="feedback"] { padding: 24px 16px; }
  body .modal--feedback { max-height: calc(100svh - 48px); overflow-y: auto; }
  body .modal--feedback .feedback-topics { gap: 12px; }
  body .modal--feedback .feedback-topics__item { font-size: 13px; }
  body .modal--feedback .field-group { padding-right: 16px; margin-bottom: 14px; }
  body .modal--feedback .field-group .required { top: -4px; right: 0; left: auto; }
  body .modal--feedback .feedback-form__submit { min-height: 48px; justify-content: center; }
}

/* Окна со сканом протокола/сертификата и окна требований: полоса прокрутки тонкая
   серая с отступом от края окна, как на макете, а не системная широкая. */
   
.modal, .doc-modal__body, .req-modal__body {  }

.modal::-webkit-scrollbar, .doc-modal__body::-webkit-scrollbar, .req-modal__body::-webkit-scrollbar { width: 12px; }
.modal::-webkit-scrollbar-track, .doc-modal__body::-webkit-scrollbar-track, .req-modal__body::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb, .doc-modal__body::-webkit-scrollbar-thumb, .req-modal__body::-webkit-scrollbar-thumb {
  background: #9B9B9B; border: 4px solid transparent; background-clip: padding-box; border-radius: 6px;
}
.modal::-webkit-scrollbar-button, .doc-modal__body::-webkit-scrollbar-button, .req-modal__body::-webkit-scrollbar-button { display: none; }

/* «Избранное», поле «Изменить язык для отчёта» (десктоп): у выбранного языка при
   наведении нет серого фона — серым подсвечиваются только другие языки, которые можно выбрать. */
.fav-side .choices__list--dropdown .choices__item--selectable.is-current.is-highlighted,
.fav-side .choices__list[aria-expanded] .choices__item--selectable.is-current.is-highlighted,
.lk-sidebar .choices__list--dropdown .choices__item--selectable.is-current.is-highlighted,
.lk-sidebar .choices__list[aria-expanded] .choices__item--selectable.is-current.is-highlighted {
  background: transparent; color: var(--c-red, #A21B2C);
}
/* То же при наведении мышью и для языка, сохранённого в личном кабинете
   (is-selected), — с весом выше стилей Choices и инлайн-стилей страниц. */
html body .fav-side .choices .choices__list--dropdown .choices__item--choice.is-current,
html body .fav-side .choices .choices__list--dropdown .choices__item--choice.is-current:hover,
html body .fav-side .choices .choices__list[aria-expanded] .choices__item--choice.is-current,
html body .fav-side .choices .choices__list[aria-expanded] .choices__item--choice.is-current:hover {
  background: transparent; background-color: transparent; color: var(--c-red, #A21B2C);
}
html body .lk-sidebar .choices .choices__list--dropdown .choices__item--choice.is-selected,
html body .lk-sidebar .choices .choices__list--dropdown .choices__item--choice.is-selected:hover,
html body .lk-sidebar .choices .choices__list[aria-expanded] .choices__item--choice.is-selected,
html body .lk-sidebar .choices .choices__list[aria-expanded] .choices__item--choice.is-selected:hover {
  background: #fff; background-color: #fff; color: var(--c-red, #A21B2C);
}

/* Подвал на телефоне: логотипы министерств и ведомств — сеткой в две колонки на всех
   страницах. На части страниц («Подбор по видам выполняемых работ» и др.) стиль страницы
   переключает блок в display: block, и логотипы рассыпались бы строкой разной ширины. */
@media (max-width: 600px) {
  body .site-footer .site-footer__partners.hidden-desktop { display: grid !important; grid-template-columns: 1fr 1fr; }
}

/* Плитки «Возможно, вас заинтересует»: у машины без фото заглушка вписывается в рамку
   фотографии, а у заглушки серый фон #F0F0F0, а у рамки белый — сверху и снизу были бы
   белые полосы. Фон рамки под заглушкой — тот же серый. */
body img.agri-reco__noimage, body img.spec-reco__noimage, body img.reco-tile__noimage { background: #F0F0F0; }

/* Окно требований на телефоне: под названием машины и трактора отступ 32 px до
   «Способ агрегатирования» — на iPhone текст иначе подходит вплотную к названию. */
@media (max-width: 600px) {
  body .req-modal .req-modal__head { margin-bottom: 24px; }
  body .req-modal .req-modal__body { padding-top: 8px; }
}

/* Профайлы мини-техники: стиль страницы дорисовывает скобки вокруг единицы измерения
   (::before/::after), а в разметке единица уже в скобках — получилось бы «((кВт (л.с.)))». У единиц
   со своими скобками (.mobile-unit) дорисованные убираем. */
@media (max-width: 600px) {
  body .unit:has(.mobile-unit)::before, body .unit:has(.mobile-unit)::after { content: none; }
}


@media (max-width: 600px) {
    a[href].agri-btn {justify-content: center; text-align: center;}         
	.spec-reco { margin-top: 16px;}
	.spec-reco__title { margin: 0 0 15px;}
	.manuf-country, .filters__group-body {padding-right: 9px;}
	body .doc-modal__pages { margin-right: 14px;}
	body .doc-modal .modal {padding-right: 10px;}
  
}

    body .holding-grid, body .mtype-list, body .series-filter__list, body .benergy-list  {padding-right: 16px;}
	body .benergy-list { max-height: 40vh; overflow-y: auto; }
	 
	.browser-firefox .benergy-list {
		  /* Firefox */
		  scrollbar-width: thin;
		  scrollbar-color: #9B9B9B #E9E9E9;
		}
	.benergy-list::-webkit-scrollbar, .doc-modal__body::-webkit-scrollbar {
		width: 4px;
		height: 8px;
		border-radius: 2px;		
	}

	.doc-modal__body::-webkit-scrollbar-track, .benergy-list::-webkit-scrollbar-track {
		background: #E9E9E9;
			 border-left: 1px solid transparent;
			border-right: 1px solid transparent;
			/* Ensures the background doesn't bleed into the transparent borders */
			background-clip: padding-box; 
	}

	.doc-modal__body::-webkit-scrollbar-thumb, .benergy-list::-webkit-scrollbar-thumb {
		background: #9B9B9B;
		border-radius:37px;
		width: 4px;
		border: 4px solid #9B9B9B;;
	}

	.doc-modal__body::-webkit-scrollbar-thumb:hover, .benergy-list::-webkit-scrollbar-thumb:hover {
		background: #9B9B9B;
	}
	
	.doc-modal .modal {    padding-right: 16px;}
	.doc-modal__pages   {margin-right: 52px;}

/* Строка-сетка таблицы характеристик (SpecTemplate::gridRow): равные доли столбцов значений
   на десктопе; на телефоне строки идут столбиком — сетка не нужна. */
@media (max-width: 600px) {
  body .spec-table tr.spec-table__grid { display: none; }
}

/* ============================================================================================
   Мобильная и десктопная версии
   ============================================================================================ */

/* Полоса серий и тяговых классов на телефоне: вбок прокручивается только
   рамка фильтра, страница стоит на месте. Раскрытый список моделей лежит в той же прокрутке под
   выбранной серией и уезжает вместе с ней. Рамка — у всего блока, список раздвигает её вниз,
   как на макете «iPhone 16».
   Прокрутка во всю ширину экрана — рамка уходит за поля страницы до края экрана
   (в начале и в конце прокрутки стоит по полю), выбранная серия встаёт в середину экрана
   (centerTab в include/agri-params-strip.php). На страницах с фильтрами (по производителю, по
   видам работ, «Подбор машин») прокрутку перебивает «.layout-with-filters > div.series-trip
   { overflow: initial }» из template_styles.css, поэтому правило усилено.
   Модели ближе к строке серий, промежуток между моделями больше (макет «iPhone 16 - 6»). */
@media (max-width: 600px) {
  html body .series-trip[data-series-trip] {
    display: flex; margin-left: -33px; margin-right: -33px;
    overflow-x: auto; overflow-y: hidden; border: 0; background: transparent;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html body .series-trip[data-series-trip]::-webkit-scrollbar { display: none; }
  html body .series-trip[data-series-trip]::before,
  html body .series-trip[data-series-trip]::after { content: ''; flex: 0 0 33px; }
  html body .series-trip .series-trip__frame {
    display: block; flex: 0 0 auto; min-width: calc(100% - 66px);
    border: 1px solid #CCCCCC; background: #fff;
  }
  html body .series-trip .series-trip__strip {
    overflow: visible; border: 0; margin-right: 0; width: max-content; min-width: 100%;
  }
  html body .series-trip .series-trip__models {
    position: static; border: 0; background: transparent; margin-top: -16px; padding-top: 0; max-height: none; overflow: visible;
  }
  html body .series-trip .series-trip__models-list { max-width: none; }
  html body .series-trip--model .series-trip__models-item a { padding: 6px 0; line-height: 19px; }
}

/* «Сортировать по: Параметрам трактора» и такие же кнопки со списком
   на телефоне после закрытия списка снова красные: касание оставляло бы их в виде «наведения». */
@media (hover: none) {
  html body .agri-btn-group:not(.is-open) .agri-btn:hover,
  html body a.agri-btn:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); }
}

/* Подборка на телефоне — как «Избранное»: «Удалить все» под
   заголовком раздела по ширине надписи, «Требования для агрегатирования» полужирным 12 px,
   текст под ним во всю ширину карточки, модель над оборудованием (BELARUS 012WM) мелко справа.
   У подборки свои стили страницы, и правила «Избранного» до неё не доходят. */
@media (max-width: 800px) {
  html body .lk-layout .fav-section__head { justify-content: space-between; }
  html body .lk-layout .fav-section__clear { margin-left: 0; flex-shrink: 0; }
  html body .lk-layout .fav-item__req-title { font-size: 12px; font-weight: 700; margin-bottom: 0; }
  html body .lk-layout .agg-req__method { font-size: 12px; }
}
@media (max-width: 650px) {
  html body .lk-layout .fav-section__head { flex-direction: column; align-items: flex-start; gap: 9px; }
  html body .lk-layout .fav-section__title { font-size: 24px; }
  html body .lk-layout .fav-item__req { grid-column: 1 / -1; padding-top: 8px; border-top: none; }
  html body .lk-layout .fav-item__req-body { max-height: 148px; }
  html body .lk-layout .fav-row { padding: 9px 0; }
  html body .lk-layout .fav-row__icon { max-height: 22px; max-width: 36px; }
  html body .lk-layout .fav-item { padding-top: 8px; }
  html body .lk-layout .fav-section:not(.is-collapsed):has(.fav-group__model) .fav-group__model {
    font-size: 16px; gap: 5px; border-bottom: 1px solid #BDBDBD; margin-top: 0;
  }
  html body .lk-layout .fav-group__model img { max-height: 11px; max-width: 18px; }
}

/* Профайл трактора на телефоне: надписи кнопок без стрелки
   («Подобрать спецтехнику», «Сохранить в мои тракторы») по центру, как на макете.
   Селектор усилен: «.tractor-profile .profile-actions__select:not(.profile-save)» из
   template_styles.css (≤768) ставит «Подобрать спецтехнику» влево. */
@media (max-width: 768px) {
  html body .tractor-profile .profile-actions__select.profile-actions__podbor,
  html body .tractor-profile .profile-actions__select.profile-save { justify-content: center; text-align: center; }
}

/* «Сохранить в мою спецтехнику / мини-технику / лесную технику» на
   телефоне после нажатия возвращаются к белому виду, как «Сохранить в мои тракторы»: красная —
   только в момент нажатия. */
@media (hover: none) {
  html body .spec-profile__save .btn:not(.btn--off):hover,
  html body .spec-profile__save .btn:not(.btn--off):focus {
    background: transparent; color: var(--c-text); border-color: var(--c-border-strong);
  }
  html body .spec-profile__save .btn:not(.btn--off):active { background: var(--c-red); color: #fff; border-color: var(--c-red); }
  html body button.profile-save:not(.profile-save--disabled):hover { background: transparent; color: var(--c-text); border-color: #ccc; }
  html body button.profile-save.is-clicked:not(.profile-save--disabled),
  html body button.profile-save:not(.profile-save--disabled):active { background: var(--c-red); color: #fff; border-color: var(--c-red); }
}

/* iPhone (iOS 26): при прокрутке вниз над шапкой просвечивала бы страница — браузер рисует
   свою панель прозрачной, и между ней и прилипшей шапкой оставалась бы щель. Шапка продолжается
   вверх своим цветом, щель закрыта. */
@media (max-width: 1100px) {
  html body .site-header::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px;
    background: var(--c-red, #A21B2C); pointer-events: none;
  }
}

/* «Поиск по модели трактора или машины» на телефоне помещается в поле целиком.
   Кегль подсказки подбирает fit-placeholder.js по ширине поля (--ph-fs); вводимый текст —
   16 px, иначе iPhone приближает страницу при касании поля. */
@media (max-width: 600px) {
  html body .empty-query__search input { font-size: 16px; padding-left: 12px; padding-right: 38px; }
}
html body [data-agri-search-input]::placeholder { font-size: var(--ph-fs, 1em); }
/* Chrome держит справа от текста место под крестик «очистить» даже в пустом поле — оно
   съедает последнюю букву подсказки. Крестик поверх поля, у лупы: строке достаётся вся ширина. */
html body [data-agri-search-input]::-webkit-search-cancel-button { position: absolute; right: 36px; top: 50%; margin-top: -8px; }

/* Главная на телефоне: подзаголовок переносится сам по ширине рамки макета (13,75 em — по самой
   длинной строке «сельскохозяйственных машин» с запасом), без принудительного переноса: текст подзаголовка
   ведёт ОД, и при другом тексте строки ложатся по рамке, а не рвутся после «BELARUS». */
@media (max-width: 600px) {
  html body .hero .hero__subtitle { line-height: 1.3; padding-right: 0; max-width: 13.75em; }
}

/* Фильтры спецтехники («Назначение», «Базовое энергосредство») и лесной техники («Типы
   оборудования») на телефоне: «Применить» первой, кнопки того же размера, что в фильтрах с/х машин. */
@media (max-width: 768px) {
  html body .purpose-toolbar .btn, html body .benergy-toolbar .btn, html body .ftype-toolbar .btn {
    flex: 1 0 auto; padding: 0 21px; font-size: 10px; height: 20px; line-height: 0.9;
  }
}
@media (max-width: 600px) {
  html body .purpose-toolbar, html body .benergy-toolbar, html body .ftype-toolbar { justify-content: flex-end; flex-direction: row-reverse; }
  html body .purpose-toolbar .btn, html body .benergy-toolbar .btn, html body .ftype-toolbar .btn { flex: 0 0 108px; }
}

/* «Избранное», «Изменить язык для отчёта»: при наведении серым подсвечивается
   язык, который можно выбрать; у выбранного (красного) фона нет — как в личном кабинете. */
html body .fav-side .choices .choices__list--dropdown .choices__item--choice.is-highlighted:not(.is-current),
html body .fav-side .choices .choices__list[aria-expanded] .choices__item--choice.is-highlighted:not(.is-current) {
  background: var(--c-bg-soft, #F0F0F0);
}

/* Плитки «Возможно, вас заинтересует» на странице подбора оборудования лесной и
   мини-техники (после «Сбросить все»): машины того же размера, что на странице направления, —
   по макету заходят за край плитки. */
@media (min-width: 1024px) {
  .forest-results .reco-strip--split .reco-strip__card:nth-child(3) .reco-strip__img { height: initial; width: initial; left: 5%; right: unset; bottom: 14%; transform: scale(1.6); }
  .forest-results .reco-strip--split .reco-strip__card:nth-child(1) .reco-strip__img { right: -10%; bottom: -2%; scale: 1.15; }
  .forest-results .reco-strip--split .reco-strip__card:nth-child(2) .reco-strip__img { right: -10%; }
  .mini-results .reco-strip--split .reco-strip__card:nth-child(3) .reco-strip__img { height: initial; width: initial; left: -12%; bottom: 7%; transform: scale(1.5); }
  .mini-results .reco-strip--split .reco-strip__card:nth-child(1) .reco-strip__img { right: -16%; bottom: -6%; scale: 1.02; }
  .mini-results .reco-strip--split .reco-strip__card:nth-child(2) .reco-strip__img { right: -2%; transform: scale(1.4); bottom: 5%; }
}

/* Личный кабинет: «Тут пока ничего нет» — тем же начертанием Bold, что «Мои подборки». */
html body .tehnika-empty__title { font-weight: 700; }

/* Профайл спецтехники: плашка с «!» шириной с блок описания и ближе к нему;
   название модели и «сертификат» под ним — по центру друг друга. */
@media (min-width: 1024px) {
  html body .spec-profile:has(+ .spec-profile__note) { margin-bottom: 8px; }
  html body .spec-profile__note { max-width: 55%; }
}
@media (min-width: 769px) {
  html body .spec-profile__right .spec-profile__links { justify-content: center; align-items: center; }
}

/* Кнопка «Требования для агрегатирования» в карточках выдачи: строки ближе друг к другу. */
html body .info-btn { line-height: 1.2; }

/* Плашка «Данное оборудование не проходило процедуру
   согласования…» в профайле спецтехники — межстрочный интервал как у плашки с/х машин
   (макет АМКОДОР-141, .machine-approval: 1.3). Десктоп и телефон. */
html body .spec-profile__note { line-height: 1.3; }

/* Подвал на планшете и телефоне: строка «© МТЗ · Карта портала · Политики» под логотипом, как на
   макете. В template_styles.css до 1023px она скрыта. */
@media (max-width: 1023px) {
  body .site-footer .site-footer__copy { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 10px; padding: 0 0 40px; }
  body .site-footer .site-footer-logo.hidden-desktop { padding-bottom: 24px; }
}

/* Фильтры: флажки внутри прокручиваемых списков (производители, типы машин, серии, базовые
   энергосредства, назначения, типы оборудования). Скрытый input флажка — position: absolute,
   а сам список не позиционирован, поэтому input привязывался бы к панели снаружи списка и при
   прокрутке списка оставался на месте. Касание строки ставит фокус на input — и браузер
   прокручивает страницу к нему, вниз до плиток рекомендаций.
   Список — точка отсчёта: input едет вместе со своей строкой, вид не меняется. */
.holding-grid, .mtype-list, .series-filter__list, .benergy-list, .ftype-list, .purpose-list { position: relative; }

/* ============================================================================
   Таблицы на телефоне — mobile-tables.css/js; здесь остальное.
   ============================================================================ */

/* iPhone: сквозь прозрачную панель браузера над шапкой видна страница («Обратная связь»).
   Полоса ::before выше шапки не помогает: браузер не рисует ничего выше верхнего края окна.
   С viewport-fit=cover (header.php) окно начинается от самого верха экрана, шапка уходит под
   панель своим цветом — отступ сверху на высоту панели. По бокам в горизонтальной ориентации —
   отступы под вырез экрана. На устройствах без выреза и в обычных браузерах env() = 0,
   ничего не меняется. */
html body .site-header { padding-top: env(safe-area-inset-top, 0px); }
html body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 1023px) {
  html body .site-nav { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
}

/* Выпадающие списки «Подобрать машины» / «Подобрать оборудование» и «Сохранить
   в подборку»: надпись выбранного пункта — красная (макет), как и точка. */
html body .country-select__panel .custom-checkbox input:checked ~ span:not(.checkmark),
html body .save-podborka-dropdown__menu .custom-checkbox input:checked ~ span:not(.checkmark) { color: var(--c-red); }
/* На телефоне после касания пункт оставался бы тёмно-синим (стиль наведения из
   ui-states.css «залипает»): снятый пункт — серый, выбранный — красный. Правило сильнее
   правила ui-states.css для этих списков. */
@media (hover: none) {
  html body .country-select__panel .custom-checkbox:hover span:not(.checkmark),
  html body .save-podborka-dropdown__menu .custom-checkbox:hover span:not(.checkmark) { color: inherit; }
  html body .country-select__panel .custom-checkbox:hover input:checked ~ span:not(.checkmark),
  html body .save-podborka-dropdown__menu .custom-checkbox:hover input:checked ~ span:not(.checkmark) { color: var(--c-red); }
  html body .country-select__panel .custom-checkbox:hover input:not(:checked) ~ .checkmark::after,
  html body .save-podborka-dropdown__menu .custom-checkbox:hover input:not(:checked) ~ .checkmark::after { transform: translate(-50%, -50%) scale(0); }
  html body .country-select__panel .custom-checkbox:hover input ~ .checkmark,
  html body .save-podborka-dropdown__menu .custom-checkbox:hover input ~ .checkmark { border-color: #C5C5C5; }
}

/* Карточки выдачи на планшете и телефоне: белой подложки под изображением нет —
   изображение на фоне карточки, как в таблице на десктопе. Касание флажка «В избранное»
   оставляет строке «наведение», а оно красит все ячейки серым (template_styles.css). */
@media (max-width: 1100px) {
  html body .results-table td.col-image,
  html body .results-table tbody tr:hover td.col-image { background: transparent; }
}

/* «Сохранить в подборку» в «Избранном»: у раскрытого списка — линия по верхнему краю
   во всю ширину списка и под кнопкой тоже — список начинается от низа кнопки, а не заходит
   под неё на 3 px; на телефоне надпись раскрытой кнопки красная. */
html body .save-podborka-dropdown__menu { top: 100%; border-top: 1px solid var(--c-border-strong); padding-top: 8px; }
html body .save-podborka-dropdown .btn-save-open[aria-expanded="true"] { position: relative; z-index: 11; }
@media (max-width: 767px) {
  html body .fav-head__actions .btn-save-open[aria-expanded="true"] { color: var(--c-red); }
}

/* Профайл трактора на телефоне: между сериями тот же промежуток, что на странице
   «Подбор по модели трактора» (33 px). Правило ui-states.css (4.1) для широкого
   экрана перебивает мобильное, поэтому правило здесь усилено. Отступ от серии
   до моделей ставит скрипт полосы (include/agri-params-strip.php). */
@media (max-width: 600px) {
  html body .tractor-profile .series-trip--model .series-trip__strip { gap: 33px; }
}

/* Тяговые классы на телефоне: модели свободнее (шаг 28 px вместо 22), список —
   до десяти моделей с вертикальной прокруткой и всегда видимым ползунком (справа от списка; рисует
   mobile-tables.js), без горизонтальной прокрутки. Выбранный класс после касания не
   краснеет (стиль наведения «залипал» бы). */
/* Горизонтальная прокрутка у класса 1,4 — от раскладки длинного списка в колонки
   (column-count 1–2 на планшете и телефоне) при ограниченной высоте: лишние колонки уходят
   вбок. У тяговых классов список одной колонкой с вертикальной прокруткой. */
html body .series-trip--class .series-trip__models-list.is-multicol { columns: auto; }
@media (max-width: 600px) {
  html body .series-trip--class .series-trip__models-inner { position: relative; }
  html body .series-trip--class .series-trip__models-item a { padding: 4px 0; line-height: 20px; }
  html body .series-trip--class .series-trip__models-list {
    max-height: 280px; overflow-x: hidden; padding-right: 4px;
  }
  html body .series-trip--class .series-trip__models-list.has-m-bar { scrollbar-width: none; }
  html body .series-trip--class .series-trip__models-list.has-m-bar::-webkit-scrollbar { display: none; }
  html body .series-trip--class .m-bar--y { position: absolute; display: block; width: 4px; }
  html body .series-trip--class .m-bar--y[hidden] { display: none; }
  html body .series-trip--class .m-bar--y .m-bar__thumb { width: 100%; min-height: 32px; }
}
@media (hover: none) {
  html body .series-trip--class .series-trip__strip button:hover .strip-val { color: inherit; }
}

/* Ближайший дилер, когда дилеров в стране нет, — по макету: «Ближайший дилер:» и
   ссылка «Открыть карту» с глобусом, прописными. */
html body .nearby__card--map .nearby__title::after { content: ':'; }
html body .nearby__card--map .nearby__map-link { gap: .4em; font-size: 14px; text-transform: uppercase; color: #2A3948; }
/* Глобус — картинка из макета (Frame 1200, «Открыть карту»), в пропорции к надписи: 13 × 14.8 при 16 px. */
html body .nearby__card--map .nearby__map-link img { width: .8125em; height: .925em; flex: 0 0 auto; }
html body .nearby__card--map .nearby__map-link:hover { color: var(--c-red); }

/* Десктоп: состояния наведения по макету. */
@media (hover: hover) {
  /* Пагинация: цифра при наведении тёмно-синяя, а не красная (красная — текущая). */
  html body .results-pager a:hover { color: #2A3948; }

  /* «Подобрать оборудование» в профайлах лесной и мини-техники при наведении —
     белая с тёмной надписью, как «Подобрать машины» у трактора. */
  html body .forest-profile .country-select:not(.is-open) .country-select__toggle:hover,
  html body .mini-profile .country-select:not(.is-open) .country-select__toggle:hover {
    background: #fff; color: #2A3948; box-shadow: inset 0 0 0 1px #BDBDBD;
  }

  /* Кнопки «Описание» / «Требования для агрегатирования» в таблице выдачи при
     наведении — красные с белой надписью. */
  html body .results-table .info-btn:not(.info-btn--disabled):hover {
    background: var(--c-red); color: #fff; text-decoration: none;
  }
  html body .results-table .info-btn:not(.info-btn--disabled):hover * { color: inherit; text-decoration: none; }

  /* «Сохранить в подборку» при наведении белая — белая стрелка иначе пропадала бы. */
  html body .save-podborka-dropdown .btn-save-open:hover svg path { stroke: currentColor; }

  /* «сертификат» / «протокол» при наведении — красные, подчёркнутые. */
  html body .machine-hero__cert:not(.machine-hero__cert--off):hover,
  html body .spec-profile__doc:not(.spec-profile__doc--off):hover { color: var(--c-red); text-decoration: underline; }

  /* Сайт предприятия в окне производителя при наведении — красный. */
  html body [data-modal-id="manufacturer"] .prod-link:hover { color: var(--c-red); }
}

/* Мини-техника, плитка BELARUS 132H-01 (вторая): изображение в покое увеличено
   в 1,4 раза, а при наведении — 1,5 (общее 1,1 уменьшало бы его). */
@media (min-width: 1024px) {
  html body .mini-dir .reco-strip--split .reco-strip__card:nth-child(2):hover .reco-strip__img,
  html body .mini-results .reco-strip--split .reco-strip__card:nth-child(2):hover .reco-strip__img {
    transform: scale(1.5) translateX(-10px);
  }
}

/* ============================================================================================
   «Телефон горизонтально» — (orientation: landscape) and (max-height: 500px): экран телефона
   повёрнут, ширина 640–1023 px попадает в планшетные правила, а высота остаётся телефонной.
   ============================================================================================ */

/* Боковое меню в горизонтальной ориентации (и на планшете) — с логотипом, как на телефоне
   вертикально. */
@media (max-width: 1023px) {
  html body .site-nav.is-open {
    background: #fff url(./images/logos/black-logo.svg) no-repeat;
    background-position: 31px calc(35px + env(safe-area-inset-top, 0px));
  }
}

/* Полоса серий и тяговых классов в горизонтальной ориентации — как на телефоне вертикально:
   прокручивается вся рамка во всю ширину экрана, список моделей под
   выбранной серией и уезжает вместе с ней. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  html body .series-trip[data-series-trip] {
    display: flex; margin-left: -33px; margin-right: -33px;
    overflow-x: auto; overflow-y: hidden; border: 0; background: transparent;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html body .series-trip[data-series-trip]::-webkit-scrollbar { display: none; }
  html body .series-trip[data-series-trip]::before,
  html body .series-trip[data-series-trip]::after { content: ''; flex: 0 0 33px; }
  html body .series-trip .series-trip__frame {
    display: block; flex: 0 0 auto; min-width: calc(100% - 66px);
    border: 1px solid #CCCCCC; background: #fff;
  }
  html body .series-trip .series-trip__strip {
    overflow: visible; border: 0; margin-right: 0; width: max-content; min-width: 100%;
  }
  html body .series-trip .series-trip__models {
    position: static; border: 0; background: transparent; margin-top: -16px; padding-top: 0; max-height: none; overflow: visible;
  }
  html body .series-trip .series-trip__models-list { max-width: none; }
  html body .series-trip--model .series-trip__models-item a { padding: 6px 0; line-height: 19px; }

  /* «Сортировать по» на /agri/ и такие же кнопки направлений: надписи кнопок-ссылок по
     центру, как на телефоне вертикально; кнопка со списком — надпись слева, стрелка справа. */
  html body a[href].agri-btn { justify-content: center; text-align: center; }
}

/* Профайл трактора на телефоне: лишняя линия между полосой серий и названием модели
   (верхняя граница блока названия, template_styles.css). */
html body .tractor-hero__model { border-top: none; }

/* ============================================================================================
   Полоса тяговых классов и серий на телефоне, карточки выдачи.
   ============================================================================================ */

/* Тяговые классы: от левого края рамки до первой подписи «Тяговый класс» — отступ 20 px,
   как на макете (заметно в горизонтальной ориентации, где видна вся полоса). */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  html body .series-trip--class .series-trip__strip { padding-left: 20px; }

  /* Ползунок списка моделей — справа от списка, как на макете (рисует mobile-tables.js).
     Модели выровнены по подписи «Тяговый класс»: alignPanel вычитает левое поле
     списка, оно 0. Тот же ползунок у списка моделей серии. */
  html body .series-trip .series-trip__models-inner { position: relative; }
  html body .series-trip .series-trip__models-list { direction: ltr; padding: 0 16px 0 0; }
  html body .series-trip .series-trip__models-list.has-m-bar { scrollbar-width: none; }
  html body .series-trip .series-trip__models-list.has-m-bar::-webkit-scrollbar { display: none; }
  html body .series-trip .m-bar--y {
    display: block; position: absolute; width: 4px;
    background: #EDEDED; border-radius: 3px; touch-action: none;
  }
  html body .series-trip .m-bar--y[hidden] { display: none; }
  html body .series-trip .m-bar--y .m-bar__thumb {
    position: absolute; left: 0; top: 0; width: 100%; min-height: 32px;
    background: #9B9B9B; border-radius: 3px;
  }
  html body .series-trip .m-bar--y .m-bar__thumb::before { content: ''; position: absolute; inset: -10px -4px; }
}

/* Серии в горизонтальной ориентации: между сериями 33 px, как на макете и на телефоне
   вертикально. Список моделей серии — одной колонкой с прокруткой и
   ползунком справа, как у тяговых классов. Шаг строк 28 px —
   как в списке тягового класса на макете. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  html body .series-trip--model .series-trip__strip { gap: 33px; }
  html body .series-trip .series-trip__models-list,
  html body .series-trip .series-trip__models-list.is-multicol {
    columns: auto; max-height: 214px; overflow-x: hidden; overflow-y: auto;
  }
  html body .series-trip .series-trip__models-item a { padding: 4px 0; line-height: 20px; }
}

/* Карточки выдачи на планшете и телефоне: под изображением нет белой линии — у ячейки
   изображения нет нижней границы, которой разделены поля карточки («Модель», «Наименование»…),
   как на макете. */
@media (max-width: 1100px) {
  html body .results-table tbody td.col-image { border-bottom-color: transparent; }
}

/* ============================================================================================
   Телефон горизонтально и мобильная версия: правки по дизайн-макетам планшета (iPad mini).
   ============================================================================================ */

/* Боковое меню: логотип прокручивается вместе с пунктами и не попадает под них.
   Подпись «Выберите язык:» в меню не выводится (по макету — только поле выбора языка). */
@media (max-width: 1023px) {
  html body .site-nav.is-open { background-attachment: local; }
  html body .site-nav .site-nav__lang > .text-small { display: none; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  /* Профайл трактора: между сериями 33 px, как на странице «Подбор по модели трактора». */
  html body .tractor-profile .series-trip--model .series-trip__strip { gap: 33px; }

  /* «Избранное» и подборка: слева изображение, под ним «Требования для агрегатирования»,
     справа название и поля карточки — подпись полужирным, значение под ней. */
  html body .fav-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 0 20px; padding-top: 10px; }
  html body .fav-item__img { grid-column: 1; grid-row: 1; margin: 0 0 12px; }
  html body .fav-item__img img { max-height: 150px; max-width: 100%; margin: 0 auto 0 0; }
  html body .fav-item__info { grid-column: 2; grid-row: 1 / 3; }
  html body .fav-item__req { grid-column: 1; grid-row: 2; padding-top: 0; border-top: none; font-size: 14px; line-height: 1.3; }
  html body .fav-item__req-body { display: none; }
  html body .fav-item__info .fav-item__model { display: block; font-size: 24px; line-height: 1.1; margin-bottom: 12px; }
  html body .fav-item__props { display: block; }
  html body .fav-item__props, html body .fav-item__props p, html body .fav-item__props span { font-size: 14px; line-height: 1.3; }
  html body .fav-item__props p { margin: 0 0 10px; }
  html body .fav-item__props p span { display: block; font-weight: 700; }
  html body .fav-item__req .fav-item__req-title { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
  html body .fav-item__more { font-size: 14px; margin-top: 0; }

  /* Личный кабинет: «Обратная связь» у правого края строки заголовка, ближайший дилер
     и сервисный центр — под полем «Город». */
  html body .lk-content__head { justify-content: space-between; }
  html body .profile-form .nearby { grid-column: 1 / 3; margin-top: 4px; }

  /* Профайлы мини- и лесной техники: «Сохранить в мою …» — одной строкой по ширине надписи
     у правого края, той же высоты, что в профайле спецтехники. */
  html body .forest-profile .profile-actions .profile-save,
  html body .mini-profile .profile-actions .profile-save {
    flex: 0 1 auto; margin-left: auto; padding-left: 24px; padding-right: 24px;
    justify-content: center; text-align: center; white-space: nowrap;
  }
  html body .forest-profile .profile-actions .profile-actions__group:empty + .profile-save,
  html body .mini-profile .profile-actions .profile-actions__group:empty + .profile-save { width: fit-content; }

  /* Профайлы всех направлений — одни размеры текста по макету профайла ЭП-491:
     название модели 36 px, описание и таблица характеристик 12 px. */
  html body .tractor-hero__model, html body .tractor-hero__model small, html body .tractor-hero__model b,
  html body .spec-profile__title, html body .spec-profile__title strong, html body .spec-profile__title-mark,
  html body .machine-hero__title, html body .machine-hero__title-mark { font-size: 36px; line-height: 1; }
  html body .container .spec-notes, html body .container .spec-notes p,
  html body .spec-profile__desc, html body .machine-hero__desc { font-size: 12px; line-height: 1.45; }
  html body .spec-table, html body .spec-table th, html body .spec-table td,
  html body .spec-table tr.section-row th { font-size: 12px; line-height: 1.4; }
  html body .spec-table th, html body .spec-table td { padding: 7px 12px 5px 12px; }

  /* Плитки «Возможно, вас заинтересует» мини- и лесной техники: машины крупнее и заходят
     за край плитки, как на десктопе и на макете. */
  html body .reco-strip--split .reco-strip__card .reco-strip__img {
    left: auto; top: auto; right: -9%; bottom: -5%; width: 100%; height: 90%;
    object-fit: contain; object-position: right bottom; transform: none;
  }
  html body .reco-strip--split .reco-strip__card:nth-child(3) .reco-strip__img { right: -7%; bottom: -4%; width: 114%; height: 76%; }
  html body .forest-dir .reco-strip--split .reco-strip__card:nth-child(3) .reco-strip__img,
  html body .forest-results .reco-strip--split .reco-strip__card:nth-child(3) .reco-strip__img { height: initial; width: initial; left: 5%; right: unset; bottom: 14%; transform: scale(1.6); }
  html body .forest-dir .reco-strip--split .reco-strip__card:nth-child(1) .reco-strip__img,
  html body .forest-results .reco-strip--split .reco-strip__card:nth-child(1) .reco-strip__img { right: -10%; bottom: -2%; scale: 1.15; }
  html body .forest-dir .reco-strip--split .reco-strip__card:nth-child(2) .reco-strip__img,
  html body .forest-results .reco-strip--split .reco-strip__card:nth-child(2) .reco-strip__img { right: -10%; }
  html body .mini-dir .reco-strip--split .reco-strip__card:nth-child(3) .reco-strip__img,
  html body .mini-results .reco-strip--split .reco-strip__card:nth-child(3) .reco-strip__img { height: initial; width: initial; left: -12%; bottom: 7%; transform: scale(1.5); }
  html body .mini-dir .reco-strip--split .reco-strip__card:nth-child(1) .reco-strip__img,
  html body .mini-results .reco-strip--split .reco-strip__card:nth-child(1) .reco-strip__img { right: -16%; bottom: -6%; scale: 1.02; }
  html body .mini-dir .reco-strip--split .reco-strip__card:nth-child(2) .reco-strip__img,
  html body .mini-results .reco-strip--split .reco-strip__card:nth-child(2) .reco-strip__img { right: -2%; transform: scale(1.4); bottom: 5%; }
}

/* Плитки «Возможно, вас заинтересует» мини- и лесной техники в горизонтальной ориентации
   от 601 px: две колонки, как на десктопе (≤767 px плитки иначе встают в одну колонку,
   а крупные машины горизонтальной ориентации вылезают за плитку). */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 601px) and (max-width: 767px) {
  html body .reco-strip--split .reco-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .reco-strip--split .reco-strip__card:nth-child(1) { grid-area: 1 / 1; aspect-ratio: 669 / 402; }
  html body .reco-strip--split .reco-strip__card:nth-child(2) { grid-area: 2 / 1; aspect-ratio: 669 / 402; }
  html body .reco-strip--split .reco-strip__card:nth-child(3) { grid-area: 1 / 2 / span 2; aspect-ratio: auto; }
}

/* Карточки выдачи на планшете и телефоне: «Тип оборудования», «Применяемость» и
   «Назначение» тем же кеглем, что остальные поля карточки, с межстрочным интервалом
   карточек с/х машин (1,2). */
@media (max-width: 1100px) {
  html body table.results-table td.col-type,
  html body table.results-table td.col-use,
  html body table.results-table td.col-use .use-list,
  html body table.results-table td.col-use .use-item { font-size: 12px; line-height: 1.2; }
}

/* ============================================================================================
   Мотивированный отказ, Приложение 1 от 26.10.2026.
   ============================================================================================ */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  /* Профайлы мини- и лесной техники с кнопкой «Подобрать оборудование»: обе кнопки в одну строку,
     поровну; «Сохранить в мою … технику» — в две строки. */
  html body .forest-profile .profile-actions:has(.profile-actions__group:not(:empty)),
  html body .mini-profile .profile-actions:has(.profile-actions__group:not(:empty)) { flex-wrap: nowrap; gap: 27px; align-items: stretch; }
  html body .forest-profile .profile-actions .profile-actions__group:not(:empty),
  html body .mini-profile .profile-actions .profile-actions__group:not(:empty) { flex: 1 1 0; min-width: 0; }
  html body .forest-profile .profile-actions .profile-actions__group:not(:empty) > *,
  html body .mini-profile .profile-actions .profile-actions__group:not(:empty) > * { width: 100%; height: 100%; }
  /* Кнопка «Подобрать оборудование» — высотой с соседнюю, когда та в две строки. */
  html body .forest-profile .profile-actions .profile-actions__group:not(:empty) > .country-select,
  html body .mini-profile .profile-actions .profile-actions__group:not(:empty) > .country-select { display: flex; }
  html body .forest-profile .profile-actions .profile-actions__group:not(:empty) .country-select__toggle,
  html body .mini-profile .profile-actions .profile-actions__group:not(:empty) .country-select__toggle { flex: 1 1 auto; height: auto; min-height: 58px; }
  html body .forest-profile .profile-actions .profile-actions__group:not(:empty) + .profile-save,
  html body .mini-profile .profile-actions .profile-actions__group:not(:empty) + .profile-save {
    flex: 1 1 0; min-width: 0; height: auto; min-height: 58px; margin-left: 0; white-space: normal;
    line-height: 1.05; padding-top: 6px; padding-bottom: 6px;
  }

  /* Описание в профайле спецтехники — в левой половине, до середины строки (рамка макета ЭП-491). */
  html body .spec-profile__desc { flex: 0 1 50%; max-width: 50%; }

  /* «Избранное» и подборка: заголовок над левой колонкой, «Удалить все» и «Сохранить подборку»
     справа в той же строке, поровну на ширину колонки; поле и его кнопка в левой колонке — вплотную. */
  html body .fav-layout .fav-head__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; width: 100%; margin: 0; }
  html body .fav-layout .fav-head__actions > * { width: 100%; min-width: 0; margin: 0; }
  html body .fav-layout .fav-head__actions > .btn,
  html body .fav-layout .fav-head__actions .btn-save-open { width: 100%; min-width: 0; height: 46px; margin: 0; justify-content: center; }
  html body .fav-layout .fav-head__title { margin: 0; line-height: 46px; }
  html body .fav-side .report-block .choices { margin-bottom: 9px; }
  html body .fav-side .report-block .choices + .btn { margin-top: 0; margin-bottom: 45px; }
  html body .fav-side .report-block input.field { margin-top: 0; margin-bottom: 8px; }
  html body .fav-side .report-block input.field + .btn { margin-top: 0; }
}

/* «Избранное» и подборка от 801 px: заголовок над левой колонкой, кнопки — над правой.
   На 600–800 px шапка и так сеткой «заголовок | кнопки» над обеими колонками (стили страницы). */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 801px) and (max-width: 1023px) {
  html body .fav-layout { position: relative; }
  html body .fav-layout .fav-content, html body .fav-layout .fav-head { position: static; }
  html body .fav-layout .fav-head { display: block; margin-bottom: 34px; }
  html body .fav-layout .fav-head__title { position: absolute; left: 0; top: 8px; }
  html body .fav-layout .fav-side { padding-top: 80px; }
}

/* «Возможно, вас заинтересует» (спецтехника, с/х машины, подбор по видам работ и по производителю),
   от 601 px: логотип и производитель прижаты к низу плитки — во всех плитках ряда на одной линии;
   низ логотипа — по нижней строке названия. На телефоне вертикально плитка — сетка «текст | фото»
   (стили блоков), её не трогаем. */
@media (min-width: 601px) {
  html body .spec-reco__tile, html body .agri-reco__tile, html body .reco-tile { display: flex; flex-direction: column; }
  html body .spec-reco__prod, html body .agri-reco__prod, html body .reco-tile__prod { margin-top: auto; padding-top: 6px; align-items: end; }
}

/* Карточки выдачи спецтехники, мини- и лесной техники на планшете и телефоне: под последним
   полем («Производитель») нет разделительной линии, как на макете. */
@media (max-width: 1100px) {
  html body table.results-table tbody tr:not(:has(td.col-series)) td.col-manuf { border-bottom-color: transparent; }
}

/* ============================================================================================
   Мотивированный отказ, Приложение 1 от 28.10.2026.
   ============================================================================================ */
/* Лесная техника, планшет и телефон горизонтально: панель «Производитель» встаёт вровень с заголовком
   своей группы фильтров. Отступ 128,5 px из общей панели рассчитан на с/х страницы, где над фильтрами
   идёт полоса серий; у лесной техники её нет — панель уезжала вниз под название трактора. */
@media (min-width: 601px) and (max-width: 1100px) {
  html body .forest-results .section-manufacturer { left: 234px; top: 41px; }
}
/* Фильтр «Типы оборудования» лесной техники: надпись выбранного пункта — тёмная, как в остальных
   фильтрах подбора (макет); красная только точка. */
html body .ftype-list .checkbox input[type="checkbox"]:checked ~ span { color: inherit; }