/* Дополнения к базовым стилям под три каталога, динамические фильтры и детальную карточку. */ /* Страница никогда не должна ехать вбок (после зума полей на iOS появлялись пустые области справа/слева). Обрезаем только на корне: overflow у уходит вьюпорту, и боковой прокрутки всё так же нет. На его вешать нельзя — тогда body становится прокручиваемым контейнером, и position:sticky внутри (панель сортировки на телефоне) прилипает к нему, то есть никуда. */ html { max-width: 100%; overflow-x: hidden; } body { max-width: 100%; } /* iOS зумит страницу при фокусе на поле со шрифтом меньше 16px, и после этого вёрстку можно двигать вбок. Держим все поля ввода на мобильном ровно 16px — зум при фокусе не срабатывает, а визуальный размер сохраняем через transform. */ @media (max-width: 767px) { .filter input, .filter select, .filter textarea, .dd-input, .r-min, .r-max, .r-text, .cost-city input, .ab-modal input, .ab-modal select { font-size: 16px !important; } } /* ------------------------------------------------- ширина контента Каталог и панель фильтров выравниваются по ширине шапки (1280px): в исходной вёрстке они были уже на 100px, из-за чего колонка характеристик поджимала значения и переносила их на две строки. */ /* Одна колонка контента шириной 1280px на всех страницах. У панели фильтров боковые отступы даёт hero, поэтому ей хватает ровно 1280. У каталога и карточки отступы свои, и к ширине их нужно прибавить — иначе содержимое этих блоков оказывается уже панели на 32px с каждой стороны, что и было видно на стыке. */ .catalog-wrap { max-width: 1344px; } .filter { max-width: 1280px; } .car-page { max-width: 1344px; } /* Колонки карточки: фото шире, характеристикам отдано больше места */ .car-card { grid-template-columns: 300px 250px 1fr 300px; } /* ------------------------------------------- фон панели фильтров Панель светло-серая, поля внутри остаются белыми — так поля читаются как активные элементы, а не сливаются с подложкой. */ .filter { background: #f5f6f7; } .filter .dd-trigger, .filter .pf { background: #fff; } .filter .pair-box { background: transparent; } /* Марка — главное поле панели, с неё начинается любой подбор. Поэтому она всегда обведена так же, как активное поле, только серым: взгляд цепляется за неё раньше остальных. Наведение и открытие перекрашивают обводку в красный — ровно то же поведение, что и у прочих полей. */ .filter .dd[data-field="brand"] .dd-trigger { border-color: #a9aeb6; box-shadow: 0 0 0 3px rgba(23, 24, 26, .09); } .filter .dd[data-field="brand"]:hover .dd-trigger, .filter .dd[data-field="brand"].is-open .dd-trigger { border-color: var(--red, #f00); box-shadow: 0 0 0 3px rgba(255, 0, 0, .12); } /* Строки чекбоксов получают собственную подложку, как отдельная группа */ .filter .check-track { background: #eeeff1; border-radius: 12px; padding: 6px 8px; } /* -------------------------------------------------- список сортировки Раньше это был системный