/* * Каталог объявлений в оформлении каталога автопарка. * * Правило без исключений: КАЖДЫЙ селектор начинается со скоупа HivePress * (`.hp-listings`, `.hp-listing`) либо с нашего класса `.lz-`. Бандл темы * подключён на обеих лентах, и селектор без скоупа задел бы каталог машин * `/catalog/`, который трогать нельзя. * * `!important` не используем: вес поднимаем удвоением класса - приём уже * описан в lz-account.css. */ /* Ряд HivePress рисует колонки сам (columns=3 даёт hp-col-sm-4), поэтому тёмина ширина `flex: 0 0 360px` у карточки мешает: она не даёт карточке растянуться по колонке. Снимаем весом двух классов. Скоуп - сама карточка, а НЕ контейнер каталога: теми же карточками рисуется блок похожих объявлений внизу страницы объявления, а у его контейнера нашего класса нет. Замер на 768px показал там горизонтальную прокрутку 135px - три карточки по 360px в колонке 738px. Класс повторён ТРИЖДЫ не для красоты: у темы есть `.c-catalog__list .c-vehicle {flex:0 0 340px;width:340px}` с весом 0,2,0, и при равном весе побеждала она - архив на 768px получил прокрутку 115px. Три класса дают 0,3,0 и выигрывают независимо от порядка подключения. `!important` для этого не нужен. */ .lz-vehicle.lz-vehicle.lz-vehicle { flex: 1 1 auto; width: 100%; max-width: none; height: 100%; } /* Цена «€120 / noche» - один текстовый узел, но в узкой колонке переносилась после слэша. У темы на боевом она в одну строку. */ .lz-vehicle .c-vehicle__price { white-space: nowrap; } /* Колонка сетки HivePress тянется по высоте ряда, а карточка внутри - нет. Без этого кнопки «More Details» в ряду встают на разной высоте. */ .lz-catalog-list .hp-grid__item { display: flex; } /* Тёмин `.c-vehicle__space` - распорка, которая прижимает кнопку к низу. Работает она только если колонка содержимого тянется. */ .lz-vehicle .c-vehicle__content-wrap { display: flex; flex-direction: column; flex: 1 1 auto; } .lz-vehicle .c-vehicle__space { flex: 1 1 auto; } /* Иконка детали. Тёмино правило `.c-vehicle__detail-item .c-detail__svg` задаёт только размер и действует ТОЛЬКО в карточке - на странице объявления у списка другой класс элемента, и там нашему SVG не досталось бы ничего. Размер и выравнивание задаём обоим спискам. */ .lz-vehicle .c-detail__svg, .hp-page .c-vehicle-details__detail-list .c-detail__svg { width: 16px; height: 16px; stroke: currentColor; vertical-align: middle; } /* Приглушение - ТОЛЬКО в карточке, и это не про единообразие, а про тему. Замер цветов: в карточке обёртка иконки не красится и наследует серый текст (`rgb(85,85,85)`), а на странице объявления у обёртки свой акцентный зелёный (`rgb(66,198,141)`) - так тема рисует и собственную страницу машины. Гасить там акцент значило бы отойти от оригинала, а не приблизиться к нему. */ .lz-vehicle .c-detail__svg { opacity: 0.6; } /* Фотография: у темы карточка ровно 360px шириной, у нас колонка резиновая. */ .lz-vehicle .c-vehicle__thumb { width: 100%; height: auto; object-fit: cover; } /* --- Верхняя строка поиска ------------------------------------------------ * * Раскладку и тень даёт тема (`.c-filter`, `.c-filter--layout-1`), фон и цвет * она на своём каталоге ставит инлайном из настроек виджета - у нас их нет, * поэтому повторяем теми же значениями. * * Сами поля тема прячет (`.c-filter__select{opacity:0}`) и рисует поверх свой * виджет скриптом. Скрипт мы не подключаем, поэтому поля оформляем сами - в тех * же метриках, что у темы: шрифт 16px, отступы 15/11/16/11, без рамки. */ .lz-filter { background-color: #fff; color: #222; } .lz-filter .lz-filter__control { margin: 0; width: 100%; height: auto; border: none; border-radius: 0; font-size: 16px; line-height: 1.2; padding: 15px 11px 16px 11px; background-color: #f0f0f0; color: rgba(34, 34, 34, 0.75); cursor: pointer; } .lz-filter .lz-filter__control:focus { outline: 2px solid rgba(34, 34, 34, 0.25); outline-offset: -2px; color: #222; } /* Подпись кнопки не переносим: в узкой колонке «Buscar» иначе ломается пополам. Высоту кнопке задаёт сама тема, здесь она не трогается. */ .lz-filter .c-filter__col-2 .c-button { white-space: nowrap; } /* На узком экране колонка с кнопкой уезжает под поля - иначе кнопка сжимается в нечитаемую полоску. */ @media (max-width: 767px) { .lz-filter .c-filter__field { flex: 0 0 100%; width: 100%; } .lz-filter .c-filter__col-2 { margin-left: 20px; } } /* --- Строка результатов --------------------------------------------------- * * У темы это `.c-catalog-ordering`: флекс, отступ снизу 35px, приглушённый цвет. * Переключателей «сетка / список / карта» и кнопки карты не повторяем - они * завязаны на скрипт темы и работают с её каталогом машин. */ /* Раскладку строки HivePress держит сам: у него это уже флекс, где счётчик слева, * а форма сортировки справа. Своё `align-items: center` я сюда ставил по образцу * темы и получил обратное - форма сортировки высокая (в ней плитки типов кемпера, * 420px), и счётчик уехал в вертикальную середину этой высоты. Поэтому от темы * берём только отступ снизу и приглушённый цвет. */ .lz-topbar { margin-bottom: 35px; } .lz-topbar .hp-result-count { color: rgb(145, 145, 145); font-size: 16px; } /* --- Стык двух сеток ------------------------------------------------------ * * Ряд HivePress вынесен наружу отрицательными полями (`margin: 0 -16px`), и в * родной вёрстке их гасит padding страницы. Наш контейнер несёт класс темы * `.c-catalog__list`, который сам по себе inset и такого padding не даёт, - * поэтому ряд вылезал за экран: замер дал правый край 415 при окне 400, 783 при * 768 и 1216 при 1200. * * Компенсировать padding'ом контейнера оказалось недостаточно: на разных * ширинах у темы свои отступы, и ровно на 1200px ряд снова вылезал. Поэтому * отрицательные поля просто снимаем - колонки несут собственный внутренний * отступ, и промежутки между карточками от этого не теряются. */ .lz-catalog-list > .hp-row { margin-left: 0; margin-right: 0; } /* Колонки HivePress: `columns=3` даёт `hp-col-sm-4` начиная с 768px. * * Здесь раньше стояло правило «на планшете две карточки в ряд»: при сайдбаре фильтров * колонка выдачи была шириной `hp-col-sm-8`, и карточка сжималась до 138px - кнопка темы * с её фиксированными отступами выходила за экран. 22.09 сайдбар убран, выдача занимает * всю ширину, и на 768px трём карточкам достаётся втрое больше места. Правило снято, а не * подправлено: пересчитывать нечего, ограничение держалось на исчезнувшей колонке. */ /* --- Календарь занятости --------------------------------------------------- * * Календарь тема рисует внутри контейнера (`parentEl`), поэтому всплывающие * отступы ей не нужны, а вот ширину контейнер должен дать сам. */ .hp-page .lz-calendar { position: relative; margin-bottom: 20px; } .hp-page .lz-calendar .daterangepicker { position: static; display: block; margin: 0; border: none; box-shadow: none; } /* Легенда «Ocupado» у темы - подпись с красной меткой; цвет метки тот же, что * у занятых дней в календаре (`rgba(255,0,0,.2)`). */ .hp-page .c-vehicle-details__booked-wrap { margin-bottom: 30px; } /* --- Сайдбар брони --------------------------------------------------------- * * У темы блок брони - белая карточка с тенью, цена крупная и по центру. * Функциональность формы HivePress не трогаем, меняется только вид. * ⛔ Блок `listing_attributes_primary` не переименовываем и не убираем: форма * брони перерисовывает его по имени через `data-render`. */ .hp-page .hp-page__sidebar .hp-form--booking-make { background-color: #fff; padding: 24px; border-radius: 2px; box-shadow: 0 5px 35.2px 4.8px rgba(0, 0, 0, 0.08); } .hp-page .hp-page__sidebar [data-block="listing_attributes_primary"] .hp-listing__attribute--price { font-size: 30px; font-weight: 600; line-height: 1; text-align: center; padding: 30px 0; } /* Остальные значения блока - голые, без подписей («Capuchina», «Ford», «2025»), и * дублируют раздел характеристик, где они подписаны. Скрываем стилями: сам блок * нужен форме брони (см. выше). Правило на элементе, а не на обёртке, поэтому * переживает перерисовку блока. */ .hp-page .hp-page__sidebar [data-block="listing_attributes_primary"] .hp-listing__attribute:not(.hp-listing__attribute--price) { display: none; } /* --- Страница объявления: ширина по метрике темы ---------------------------- * * Страница машины у темы 1140px (`.e-con-inner: min(100%, 1140px)`, замер 22.09), * наша была 1280 - заказчик увидел это как «прижато к краям». Класс свой, а не * `.hp-page`: каталог шире сознательно и должен остаться 1280. */ .lz-listing-page { max-width: 1140px; margin-left: auto; margin-right: auto; } /* --- Галерея объявления ---------------------------------------------------- * * Карусель темы считает ширины при инициализации, а колонка HivePress на * планшете уже, чем на десктопе: замер дал горизонтальную прокрутку 135px на * 768 и 49px на 1024 (на 1440 и 400 её не было). Подрезаем по месту - сама * лента внутри продолжает листаться. */ .hp-page .lz-gallery { max-width: 100%; overflow: hidden; } .hp-page .lz-gallery .owl-stage-outer { overflow: hidden; } .hp-page .lz-gallery .c-vehicle-details__gallery-img { max-width: 100%; height: auto; } /* --- Пагинация каталога ---------------------------------------------------- * * У темы цвет ссылок страниц задан правилом * `.c-filter__element, .c-catalog-ordering__col, .page-numbers{color:rgb(145,145,145)}`, * и разметка HivePress тоже использует `.page-numbers`, так что цвет приходит * сам. Здесь только раскладка: промежутки и отступ сверху, как у строки * результатов. * * ⚠️ Вживую не проверено: на тесте пять объявлений и страница одна, пагинация * не выводится вовсе. Проверить при переносе на боевой, когда объявлений станет * больше страницы. */ .hp-page .hp-pagination { margin-top: 35px; } .hp-page .hp-pagination .page-numbers { display: inline-block; margin: 0 6px; font-size: 16px; line-height: 1.2; } .hp-page .hp-pagination .page-numbers.current { color: #222; font-weight: 700; } /* --- Горизонтальная прокрутка около 1200px --------------------------------- * * Не наш дефект, но виден на всех страницах HivePress, включая кабинет. * * Причина замерена: HivePress в `grid.min.css` даёт `.hp-row{margin:0 -1rem}` - * ряд намеренно вылезает на 16 точек с каждой стороны, а гасить это должен * отступ контейнера. Контейнер темы на узких экранах отступ даёт (замер на * 400px: `padding 16px`), а около 1200 - не даёт (замер: `padding 0`). Ряд * остаётся торчать, страница едет вбок ровно на 16 точек. * * Лечим подрезкой, а не сдвигом: за край торчит ПУСТОЕ поле ряда - содержимое * колонок стоит внутри их собственного `padding: 0 1rem` и не теряется. Любой * из вариантов со сдвигом менял бы ширину содержимого на узких экранах, где * сейчас всё в порядке. * * `clip`, а не `hidden`: `hidden` сделал бы страницу контейнером прокрутки и * сломал бы залипание сайдбара. */ .hp-page { overflow-x: clip; } /* --- Ряд фильтров в шапке каталога ----------------------------------------- * * Фильтры переехали из бокового столбца в шапку: заказчик 22.09 попросил «карточки * поиска сверху, ниже карточки автомобилей, крупными по три в ряд». В столбце форма * шла колонкой - там это было естественно; в шапке она должна лечь строкой. * * Раскладку даём флексом с переносом, а не сеткой с фиксированным числом колонок: * полей шесть (категория, год, спальные места, город, цена, тип кемпера), и на * средних ширинах им нужно переноситься самим. */ .hp-page__header .lz-filters { margin-top: 20px; } /* Кнопку держим в одной строке с полями: форма сама становится флексом, поля забирают свободное место, кнопка прижимается к правому краю. Без этого «Filtro» уезжала на отдельную строку и ряд фильтров занимал вдвое больше высоты. */ .hp-page__header .lz-filters .hp-form--listing-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; } .hp-page__header .lz-filters .hp-form--listing-filter .hp-form__fields { /* `1 1 0%`, а не `auto`: при `auto` блок полей требует ширину по содержимому (шесть полей с промежутками - около 1300px), кнопке места не остаётся, и она переносится на вторую строку. С нулевой основой поля сжимаются первыми, а внутренний перенос у них свой. */ flex: 1 1 0%; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; } .hp-page__header .lz-filters .hp-form--listing-filter .hp-form__field { /* Базис 140, а не 180: контейнер полей после выноса кнопки в ту же строку равен 1280 - 180 - 16 = 1084px, и шесть полей с базисом 180 требуют 1160px - последнее переносилось и растягивалось на всю ширину (замер: 1074px). С базисом 140 требуется 920px, поля укладываются в строку и делят место поровну - по 167px. `max-width` держит их от растягивания, если полей вдруг станет меньше. */ flex: 1 1 140px; max-width: 240px; min-width: 0; margin: 0; } /* Список категорий у HivePress вертикальный и с вложенным уровнем. В строке он занимал бы высоту трёх полей, поэтому кладём его в строку и прижимаем к низу, как остальные подписи. */ .hp-page__header .lz-filters .hp-form__field--radio ul { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; } .hp-page__header .lz-filters .hp-form__field--radio ul ul { gap: 8px 12px; } /* ⛔ `nowrap` здесь стоял, пока поля были широкими; после ужатия ряда до одной строки подпись «Autocaravanas y campers» (196px) переставала помещаться в свою колонку (166px) и налезала на соседнее поле - замер дал правый край 312 при границе соседа 298. Пусть переносится. */ .hp-page__header .lz-filters .hp-form__field--radio label { display: inline-block; max-width: 100%; } /* Диапазон цены - два поля в одной ячейке. */ .hp-page__header .lz-filters .hp-field--number-range { display: flex; gap: 8px; } /* Кнопку «Filtro» тема показывает только на телефоне; на десктопе ряд стоит открытым, и модалка HivePress там не нужна. */ @media (max-width: 767px) { .hp-page__header .lz-filters { margin-top: 12px; } } /* --- Поле дат в строке поиска ---------------------------------------------- * * Метрики те же, что у остальных полей строки (`lz-filter__control` выше), добавляется * только кнопка снятия: поле `readonly`, и стереть интервал иначе нечем. */ /* Поле дат появляется только после того, как скрипт поднял календарь: класс `--ready` вешает `lz-catalog.js`. Видимое `readonly`-поле без календаря - это мёртвый контрол, в который нельзя ни кликнуть с результатом, ни напечатать. */ .lz-filter .lz-filter__field--dates { display: none; } .lz-filter .lz-filter__field--dates.lz-filter__field--ready { display: block; } .lz-filter .lz-filter__field--dates .c-filter__element { position: relative; } .lz-filter .lz-filter__dates { cursor: pointer; } /* ⛔ Своего `display` здесь быть НЕ должно. Крестик прячется атрибутом `hidden`, у которого в таблице браузера `display:none` весом 0,1,0, - любое наше объявление display с весом 0,2,0 перебивало бы его, и крестик висел бы над пустым полем. Замер 22.09 это и показал: `hidden=true`, а `display: block`, ширина 24px. Элемент и так становится блочным: он абсолютно позиционирован. */ .lz-filter .lz-filter__dates-clear { text-decoration: none; position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: none; background: none; padding: 0 6px; font-size: 20px; line-height: 1; color: rgba(34, 34, 34, 0.5); cursor: pointer; } .lz-filter .lz-filter__dates-clear:hover { color: #222; } /* Плитки типов кемпера в ряду фильтров НЕ строятся: `lz-submit.js` пропускает форму фильтра так же, как форму сортировки. Причина - размер: в ряду плитка давала полю высоту 175px против 80px у соседей, и шесть фильтров не укладывались в строку. Заказчик попросил «одну тонкую строчку» (`mid:437754152`), поэтому тип тут выбирается обычным списком, а плитки остались там, ради чего заводились, - в форме подачи объявления. */ /* Два лишних управления в ряду фильтров - оба чужие, оба показывают одно и то же поле. * * `c-custom-select` рисует тема поверх каждого `