/* =========================================================================
   ТМ² (Tmetr2) — оформление темы.
   Грузится последним (см. Layouts/default.ctp), поэтому перекрывает
   realia/bootstrap, select2 и стили плагинов.

   Разделы:
     1. переменные и база
     2. типовые элементы (кнопки, поля, секции, контейнер)
     3. шапка и меню
     4. первый экран (hero)
    4а. слайдер CMS в первом экране и в регионе main_slider (Agency.Slider + slick)
     5. строка поиска (filter_widget)
     6. цифры, категории, «почему мы», CTA
     7. карточка объекта и списки (главная, каталог, регионы)
     8. внутренние страницы (Nodes, сайдбар, базовая пагинация)
    8а. каталог объектов (шапка, крошки, фильтр, панель сортировки, пустой результат, пагинация)
     9. подвал
    10. страница 404
    11. адаптив
   ========================================================================= */

/* ----------------------------------------- 1. переменные и база --------- */
:root {
    --tm-blue: #185FA5;
    --tm-blue-dark: #0C447C;
    --tm-blue-light: #E6F1FB;
    --tm-orange: #E87A20;
    --tm-orange-dark: #BA7517;
    --tm-white: #fff;
    --tm-gray: #f5f5f3;
    --tm-text: #1a1a1a;
    --tm-muted: #6b7280;
    --tm-border: #e5e7eb;
    --tm-footer-bg: #0a1628;
    --tm-radius: 16px;
    --tm-container: 1100px;
}

body.tm-body {
    font-family: 'Golos Text', -apple-system, 'Segoe UI', Arial, sans-serif;
    color: var(--tm-text);
    background: var(--tm-white);
    font-size: 16px;
    line-height: 1.55;
}

/* Все блоки темы считают ширину ВМЕСТЕ с padding и border.
   Это не «косметика», а обязательное условие вёрстки: базовый realia/bootstrap — это
   Bootstrap 2, а он НЕ объявляет border-box глобально (только для .row-fluid [class*="span"],
   .input-block-level и пары компонентов). Без этого правила:
     • .tm-container (width:100% + padding 0 24px) становится на 48px ШИРЕ родителя —
       контент вылезает за синий блок hero/строки поиска, появляется горизонтальная
       прокрутка, и контейнер перестаёт совпадать с .tm-nav__inner в шапке (у него
       width:auto, поэтому он считался правильно) — именно это выглядит как «разъехалась вёрстка»;
     • .tm-input (height:46px + padding 10/16 + border 1.5) получается 69px вместо 46px,
       и поля строки поиска не совпадают по высоте с кнопкой «Найти».
   Правило намеренно ограничено классами темы (`tm-`): переключать в border-box
   всю страницу нельзя — на content-box рассчитаны сетка Bootstrap 2 (.span*, фиксированные
   ширины в px) и шаблоны плагинов. */
.tm-body [class^="tm-"],
.tm-body [class*=" tm-"],
.tm-body [class^="tm-"]::before,
.tm-body [class^="tm-"]::after,
.tm-body [class*=" tm-"]::before,
.tm-body [class*=" tm-"]::after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.tm-body a {
    color: var(--tm-blue);
    text-decoration: none;
}

.tm-body a:hover {
    color: var(--tm-blue-dark);
    text-decoration: none;
}

.tm-body h1, .tm-body h2, .tm-body h3, .tm-body h4 {
    font-family: 'Unbounded', 'Golos Text', sans-serif;
    color: var(--tm-text);
    line-height: 1.2;
    font-weight: 700;
}

.tm-body img {
    max-width: 100%;
    height: auto;
}

.tm-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.tm-main {
    flex: 1 0 auto;
}

/* --------------------------------------- 2. типовые элементы ------------ */
.tm-container {
    max-width: var(--tm-container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.tm-page {
    padding: 40px 24px 64px;
}

.tm-section {
    padding: 72px 0;
}

.tm-section_gray,
.tm-objects {
    background: var(--tm-gray);
}

.tm-section__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tm-orange);
    margin: 0 0 12px;
}

.tm-section__title {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 900;
    margin: 0 0 12px;
}

.tm-section__sub {
    font-size: 16px;
    color: var(--tm-muted);
    max-width: 560px;
}

.tm-btn,
.tm-body .tm-btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 10px;
    border: none;
    font-family: 'Golos Text', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    text-align: center;
}

.tm-btn_orange,
.tm-body .tm-btn_orange {
    background: var(--tm-orange);
    color: #fff;
}

.tm-btn_orange:hover,
.tm-body .tm-btn_orange:hover {
    background: var(--tm-orange-dark);
    color: #fff;
}

.tm-btn_outline,
.tm-body .tm-btn_outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .4);
    font-weight: 500;
}

.tm-btn_outline:hover,
.tm-body .tm-btn_outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.tm-btn_blue,
.tm-body .tm-btn_blue {
    background: var(--tm-blue);
    color: #fff;
}

.tm-btn_blue:hover {
    background: var(--tm-blue-dark);
    color: #fff;
}

.tm-body .tm-input,
.tm-body input[type="text"].tm-input,
.tm-body input[type="tel"].tm-input,
.tm-body select.tm-input {
    height: 46px;
    padding: 10px 16px;
    border: 1.5px solid var(--tm-border);
    border-radius: 10px;
    background: #fff;
    font-family: 'Golos Text', sans-serif;
    font-size: 15px;
    color: var(--tm-text);
    box-shadow: none;
    outline: none;
    width: 100%;
    margin: 0;
}

.tm-body .tm-input:focus {
    border-color: var(--tm-blue);
}

/* select без нативной стрелки ОС — рисуем свою (Form->input('...', ['type' => 'select'])) */
.tm-body select.tm-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

/* появление секций при скролле (JS: webroot/js/tmetr2.js) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s, transform .6s;
}

.scroll-reveal.visible,
.no-js .scroll-reveal {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------- 3. шапка и меню ------------ */
.tm-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.tm-nav {
    background: var(--tm-blue);
}

.tm-nav__inner {
    max-width: var(--tm-container);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.tm-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.tm-logo:hover {
    color: #fff;
}

.tm-logo__text {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.5px;
}

.tm-logo__text sup {
    font-size: 12px;
    color: var(--tm-orange);
    line-height: 0;
}

.tm-logo__img {
    max-height: 40px;
}

.tm-nav__body {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    justify-content: flex-end;
}

.tm-nav__list,
.tm-nav__body .tm-menu ul {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-nav__list li,
.tm-nav__body .tm-menu li {
    position: relative;
    list-style: none;
}

.tm-nav__list a,
.tm-nav__body .tm-menu a {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
    white-space: nowrap;
}

.tm-nav__list a:hover,
.tm-nav__list a.is-active,
.tm-nav__body .tm-menu a:hover {
    color: #fff;
}

/* второй уровень меню */
.tm-nav__body .tm-menu li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: var(--tm-blue-dark);
    border-radius: 0 0 12px 12px;
    padding: 8px 0;
    flex-direction: column;
    gap: 0;
    z-index: 20;
}

.tm-nav__body .tm-menu li:hover > ul {
    display: flex;
}

.tm-nav__body .tm-menu li ul a {
    display: block;
    padding: 8px 16px;
}

.tm-nav__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tm-nav__phone {
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.tm-nav__phone:hover {
    color: var(--tm-orange);
}

.tm-nav__cta {
    padding: 10px 20px;
    font-size: 14px;
}

.tm-burger {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    padding: 8px;
    cursor: pointer;
}

.tm-burger span {
    display: block;
    height: 2px;
    background: #fff;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

/* ------------------------------------------------- 4. hero -------------- */
.tm-hero {
    background: var(--tm-blue);
    position: relative;
    overflow: hidden;
    padding: 72px 0 0;
}

.tm-hero::before {
    content: '';
    position: absolute;
    right: -100px;
    top: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(232, 122, 32, .15) 0%, transparent 70%);
    pointer-events: none;
}

/* minmax(0, 1fr), а не 1fr: у grid-элемента min-width по умолчанию = auto, поэтому
   длинный заголовок без пробелов или широкая картинка/слайдер РАСТЯГИВАЮТ колонку
   сверх 50% и выдавливают вторую за пределы блока. */
.tm-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
    position: relative;
    z-index: 1;
}

.tm-hero__text {
    padding-bottom: 72px;
    min-width: 0;
}

.tm-hero__title,
.tm-hero__subtitle {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.tm-hero__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tm-orange);
    margin: 0 0 20px;
}

.tm-hero__title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 20px;
}

.tm-hero__title span {
    color: var(--tm-orange);
}

.tm-hero__subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 480px;
}

/* Ряд «тегов» = меню `catalog`. Селектор с ДОЧЕРНИМ ul (`> ul`) обязателен:
   SiteMenusHelper::nestedLinks() рекурсивно применяет одни и те же опции ко всем
   уровням, поэтому раньше вложенный <ul> тоже получал margin-bottom: 28px и
   разрывал строку тегов. Второй уровень оформляется отдельно (.tm-hero__subtags). */
.tm-hero__tags,
.tm-hero .tm-menu > ul {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

/* пункт с подпунктами (базовый хелпер сам добавляет класс hasChild):
   родительский тег и его дочерние теги идут одной строкой, а не блоком под тегом */
.tm-hero__tags li {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tm-hero__subtags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-hero__subtags a {
    font-size: 12px;
    padding: 5px 12px;
    opacity: .85;
}

.tm-hero__tags a {
    display: inline-block;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    border: .5px solid rgba(255, 255, 255, .2);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    transition: background .2s;
}

.tm-hero__tags a:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.tm-hero__btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tm-hero__media {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    min-width: 0;
    max-width: 100%;
}

/* режим «в правой колонке слайдер CMS»: слайдер занимает колонку целиком
   (justify-content: flex-end оставил бы его прижатым вправо, если бы ширину
   когда-нибудь ограничили) и не упирается в низ синей секции */
.tm-hero__media_slider {
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 56px;
}

.tm-hero__building {
    width: 320px;
    max-width: 100%;
    animation: tm-float 4s ease-in-out infinite;
}

@keyframes tm-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
    .tm-hero__building { animation: none; }
}

.tm-hero__slider {
    width: 100%;
    min-width: 0;
    border-radius: var(--tm-radius);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(12, 68, 124, .28);
}

/* регион main_slider (Realty/main.ctp → before_content_page): слайды CMS над контентом */
.tm-slider-region {
    max-width: var(--tm-container);
    margin: 0 auto;
    padding: 0 24px;
}

.tm-slider-region img {
    max-width: 100%;
    height: auto;
}

.tm-slider-region .slick-sliders {
    border-radius: var(--tm-radius);
}

.tm-slider-region .block,
.tm-slider-region .block-body {
    margin: 0;
}

/* ------------------------------------- 4а. слайдер CMS (Agency.Slider) -- */
/* Разметку `.slick-sliders > .slider-content > .slide` печатают ДВА источника,
   и правила ниже обслуживают оба:
     • первый экран — свой элемент темы Elements/home/slider.ctp (классы намеренно
       те же; почему тема больше не зовёт хелпер — tech_doc §7д);
     • блоки региона `main_slider` — по-прежнему
       Agency/View/Helper/SliderHelper::renderSlider().
   В теме Default её инициализирует webroot/js/realia/realia.js и оформляет
   /theme/Default/css/slider.css. Tmetr2 не подключает ни того, ни другого
   (свой минимальный набор JS/CSS), поэтому БЕЗ правил ниже все слайды выводились
   стопкой — по два изображения 870×411 на каждый из десяти слайдов, и первый
   экран растягивался на несколько тысяч пикселей.
   Инициализацию slick делает webroot/js/tmetr2.js (раздел 7).
   Правила привязаны к `.slick-sliders`, а не к обёртке темы, чтобы работать
   в любом месте, где хелпер напечатает слайдер. */
.tm-slider {
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: var(--tm-radius);
    overflow: hidden;
}

.tm-body .slick-sliders {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--tm-blue-dark);
}

.tm-body .slick-sliders .slider-content {
    margin: 0;
    padding: 0;
}

/* До инициализации slick (и если JS не отработал вовсе) виден только первый слайд:
   стопки из десяти слайдов не будет ни при каком сценарии. */
.tm-body .slick-sliders .slider-content:not(.slick-initialized) .slide + .slide {
    display: none;
}

.tm-body .slick-sliders .slide {
    position: relative;
    height: 340px;
    overflow: hidden;
}

/* фоновая (размытая) копия фото — заполняет поле кадра */
.tm-body .slick-sliders .image-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.tm-body .slick-sliders .image-wrapper .background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: .7;
    transform: scale(1.1);
}

.tm-body .slick-sliders .image-wrapper .main-photo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
}

.tm-body .slick-sliders .image-wrapper .main-photo-wrap .main-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* «нет фото» в слайде: Elements/Realty/object_photo.ctp печатает <span> с теми же
   классами, что и <img>, — размерные правила выше подхватываются автоматически,
   остаётся убрать размытие фоновой копии и вторую подпись */
.tm-body .slick-sliders .image-wrapper .background-img.tm-photo__ph {
    -webkit-filter: none;
            filter: none;
    opacity: 1;
    transform: none;
}

.tm-body .slick-sliders .image-wrapper .background-img .tm-photo__ph-cap {
    display: none;
}

/* тип объекта и «/ мес.» в подписи слайда (Elements/home/slider.ctp) */
.tm-body .slick-sliders .slider-info .tm-slide__type {
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    opacity: .7;
    margin-top: 2px;
}

.tm-body .slick-sliders .slider-info .tm-slide__price-suffix {
    font-family: 'Golos Text', sans-serif;
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
    margin-left: 6px;
}

/* подпись объекта поверх фото (SliderHelper::sliderAdvertisementInfo) */
.tm-body .slick-sliders .slider-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 40px 20px 18px;
    background: linear-gradient(to top, rgba(10, 22, 40, .92) 0%, rgba(10, 22, 40, 0) 100%);
    color: #fff;
    text-align: left;
}

.tm-body .slick-sliders .slider-info a {
    color: #fff;
}

.tm-body .slick-sliders .slider-info .main-slider.title {
    font-family: 'Unbounded', 'Golos Text', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.tm-body .slick-sliders .slider-info .main-slider.block-slider-street {
    font-family: 'Golos Text', sans-serif;
    font-size: 14px;
    font-weight: 500;
    opacity: .85;
    margin-top: 4px;
}

/* цена приходит как набор .currency-price-item внутри <p> (плагин Currency) */
.tm-body .slick-sliders .slider-info p,
.tm-body .slick-sliders .slider-info .currency-price-item {
    display: inline;
    margin: 0;
}

.tm-body .slick-sliders .slider-info .advertisement__button-more {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-orange);
    white-space: nowrap;
}

/* стрелки: slick получает их разметкой <a class="prev slider"> / <a class="next slider"> */
.tm-body .slick-sliders a.slider {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--tm-blue-dark);
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.tm-body .slick-sliders a.slider:hover {
    background: #fff;
    color: var(--tm-blue-dark);
}

.tm-body .slick-sliders a.prev.slider {
    left: 12px;
}

.tm-body .slick-sliders a.next.slider {
    right: 12px;
}

/* точки: dotsClass = "navigation" (так же, как в realia.js) */
.tm-body .slick-sliders .navigation {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-body .slick-sliders .navigation li {
    list-style: none;
    line-height: 0;
}

.tm-body .slick-sliders .navigation li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    font-size: 0;
    color: transparent;
    cursor: pointer;
}

.tm-body .slick-sliders .navigation li.slick-active button {
    background: var(--tm-orange);
}

/* --------------------------------- 5. строка поиска (filter_widget) -----
   Белая «карточка» с полями поиска под первым экраном (Realty/main.ctp, секция 2).

   Разметка приходит из Elements/filter_widget_form.ctp темы:
     .tm-filter-widget > form.tm-filter-widget__form
        > .tm-filter-widget__field > .tm-filter-widget__cap + select|input.tm-input
   Поле цены рисует НЕ FormHelper, а CustomSearchViewHelper::renderRange(), и его
   разметку изменить из шаблона нельзя:
     div.input.range > label + div.range-wrapper > div.beds.control-group
                                                 + div.baths.control-group + div.clearfix
   Пока CSS темы искал `.range-value`/`.input-group`/`.row`, эти два блока оставались
   блочными (плюс Bootstrap-2 `.control-group { margin-bottom: 18px }`) — «от» и «до»
   стояли друг под другом и ломали строку. Поэтому селекторы ниже привязаны к
   реальным классам `.range-wrapper` / `.beds` / `.baths` / `.control-group`.
   ------------------------------------------------------------------------ */
.tm-searchbar {
    background: var(--tm-blue);
    padding: 0 0 40px;
}

/* сброс сетки Bootstrap 2, если фильтр пришёл из микроблока или из блока региона
   `main_slider_right_blocks` (там обёртки .span3 / .property-filter / .content) */
.tm-searchbar .span3,
.tm-searchbar .widget,
.tm-searchbar .content {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.tm-filter-widget {
    background: #fff;
    border-radius: var(--tm-radius);
    padding: 18px;
    box-shadow: 0 12px 40px rgba(12, 68, 124, .18);
}

.tm-filter-widget__form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin: 0;
}

/* Cake печатает после <form> служебный <div style="display:none"> со скрытыми полями:
   он display:none, флекс-элементом не становится и в gap не участвует */
.tm-filter-widget__field {
    flex: 1 1 190px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* подпись поля: своя (span) и встроенная у диапазона цены выглядят одинаково */
.tm-filter-widget__cap {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--tm-muted);
    line-height: 1.2;
}

/* пустой <label> от renderRange() (подпись рисует .tm-filter-widget__cap) */
.tm-filter-widget .input.range > label {
    display: none;
}

.tm-filter-widget .input,
.tm-filter-widget .input.range {
    margin: 0;
    padding: 0;
}

.tm-filter-widget__field_price {
    flex: 1.4 1 260px;
}

/* «от» и «до» — в одну строку */
.tm-filter-widget .range-wrapper {
    display: flex;
    gap: 8px;
}

.tm-filter-widget .range-wrapper > div,
.tm-filter-widget .range-wrapper .control-group {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tm-filter-widget .range-wrapper input {
    width: 100%;
}

/* служебные хвосты чужой разметки: распорка Bootstrap и пустой контейнер ползунка
   (renderSlider() вызывается по isset($options['slider']) — см. filter_widget_form.ctp) */
.tm-filter-widget .clearfix,
.tm-filter-widget .params-slider {
    display: none;
}

.tm-filter-widget__submit {
    flex: 0 0 auto;
    align-self: flex-end;
}

.tm-filter-widget__submit .tm-btn {
    height: 46px;
    min-width: 160px;
    padding: 0 26px;
}

.tm-filter-widget .select2-container .select2-selection--single {
    height: 46px;
    border: 1.5px solid var(--tm-border);
    border-radius: 10px;
}

.tm-filter-widget .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
}

/* --- 5а. страховка: фильтр нарисован не темой ----------------------------
   Если файл Elements/filter_widget.ctp из темы удалить, строку поиска отдаст
   микроблок `Agency.realty/filter_widget`; блок региона `main_slider_right_blocks`
   тоже может принести дефолтную разметку CMS. В обоих случаях это
   `.property-filter.widget > form > div.input × N` — поля в столбик и без
   оформления. Правила ниже приводят такую форму к виду строки поиска темы.
   Работают только внутри .tm-searchbar, чтобы не задеть фильтр каталога
   (его оформляет раздел 8а по .tm-page .property-filter).
   ------------------------------------------------------------------------ */
.tm-searchbar .property-filter {
    background: #fff;
    border: none;
    border-radius: var(--tm-radius);
    padding: 18px;
    box-shadow: 0 12px 40px rgba(12, 68, 124, .18);
    float: none;
    width: auto;
    margin: 0;
}

.tm-searchbar .property-filter form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
}

.tm-searchbar .property-filter form > div,
.tm-searchbar .property-filter .input {
    flex: 1 1 190px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tm-searchbar .property-filter label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--tm-muted);
    line-height: 1.2;
}

.tm-searchbar .property-filter select,
.tm-searchbar .property-filter input[type="text"],
.tm-searchbar .property-filter input[type="number"] {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 10px 16px;
    border: 1.5px solid var(--tm-border);
    border-radius: 10px;
    background: #fff;
    font-family: 'Golos Text', sans-serif;
    font-size: 15px;
    color: var(--tm-text);
    box-shadow: none;
}

.tm-searchbar .property-filter .range-wrapper {
    display: flex;
    gap: 8px;
}

.tm-searchbar .property-filter .range-wrapper > div,
.tm-searchbar .property-filter .control-group {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tm-searchbar .property-filter .clearfix,
.tm-searchbar .property-filter .params-slider {
    display: none;
}

.tm-searchbar .property-filter .form-actions {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.tm-searchbar .property-filter .btn,
.tm-searchbar .property-filter input[type="submit"],
.tm-searchbar .property-filter button[type="submit"] {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    height: 46px;
    min-width: 160px;
    padding: 0 26px;
    border: none;
    border-radius: 10px;
    background: var(--tm-orange);
    color: #fff;
    font-family: 'Golos Text', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.tm-searchbar .property-filter .btn:hover,
.tm-searchbar .property-filter input[type="submit"]:hover,
.tm-searchbar .property-filter button[type="submit"]:hover {
    background: var(--tm-orange-dark);
    color: #fff;
}

/* ---------------------------- 6. цифры / категории / почему / CTA ------- */
.tm-stats {
    background: #fff;
    border-bottom: 1px solid var(--tm-border);
    padding: 24px 0;
}

/* auto-fit, а не repeat(4, 1fr): пустые пары «число + подпись» элемент не выводит
   (Elements/home/stats.ctp), и при 1–2 заполненных настройках жёсткие 4 колонки
   оставляли цифру прижатой к левому краю с тремя пустыми колонками справа */
.tm-stats__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
}

.tm-stat {
    text-align: center;
}

.tm-stat__num {
    display: block;
    font-family: 'Unbounded', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--tm-blue);
}

.tm-stat__label {
    display: block;
    font-size: 13px;
    color: var(--tm-muted);
    margin-top: 2px;
}

.tm-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.tm-cat,
.tm-body a.tm-cat {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--tm-gray);
    border: 2px solid transparent;
    border-radius: var(--tm-radius);
    padding: 28px 24px;
    color: var(--tm-text);
    transition: background .25s, border-color .25s, box-shadow .25s;
}

.tm-cat::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tm-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}

.tm-cat:hover {
    background: #fff;
    border-color: var(--tm-blue);
    box-shadow: 0 8px 32px rgba(24, 95, 165, .12);
    color: var(--tm-text);
}

.tm-cat:hover::before {
    transform: scaleX(1);
}

.tm-cat__icon {
    display: block;
    font-size: 36px;
    margin-bottom: 16px;
    line-height: 1;
}

.tm-cat__arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 18px;
    color: var(--tm-muted);
    transition: color .2s, transform .2s;
}

.tm-cat:hover .tm-cat__arrow {
    color: var(--tm-blue);
    transform: translate(2px, -2px);
}

.tm-cat__name {
    display: block;
    font-family: 'Unbounded', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.tm-cat__count {
    display: block;
    font-size: 13px;
    color: var(--tm-muted);
}

.tm-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.tm-why__card {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: var(--tm-radius);
    background: var(--tm-blue);
    color: #fff;
}

.tm-why__card:nth-child(2),
.tm-why__card:nth-child(3) {
    background: #fff;
    color: var(--tm-text);
    border: 1.5px solid var(--tm-border);
}

.tm-why__card:nth-child(4) {
    background: var(--tm-orange);
    color: #fff;
}

.tm-why__num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: 'Unbounded', sans-serif;
    font-size: 48px;
    font-weight: 900;
    opacity: .15;
    line-height: 1;
}

.tm-why__icon {
    display: block;
    font-size: 32px;
    margin-bottom: 16px;
}

.tm-why__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
}

.tm-why__text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    opacity: .85;
}

.tm-why__card:nth-child(2) .tm-why__text,
.tm-why__card:nth-child(3) .tm-why__text {
    color: var(--tm-muted);
    opacity: 1;
}

.tm-cta {
    background: var(--tm-blue);
    padding: 88px 24px;
    text-align: center;
}

.tm-cta__inner {
    max-width: 640px;
    margin: 0 auto;
}

.tm-cta__title {
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 20px;
}

.tm-cta__title span {
    color: var(--tm-orange);
}

.tm-cta__sub {
    font-size: 17px;
    color: rgba(255, 255, 255, .7);
    margin: 0 0 32px;
}

.tm-cta__form-inner {
    display: flex;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.tm-cta__form .tm-input {
    flex: 1 1 240px;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .3);
    color: #fff;
}

.tm-cta__form .tm-input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.tm-cta__form .tm-input:focus {
    border-color: #fff;
}

.tm-cta__form .tm-btn {
    white-space: nowrap;
}

.tm-cta__confirm,
.tm-cta__note {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    margin-top: 16px;
}

.tm-cta__confirm a,
.tm-cta__note a {
    color: rgba(255, 255, 255, .8);
    text-decoration: underline;
}

.tm-cta__captcha {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ------------------------- 7. карточка объекта и списки объектов -------- */
.tm-objects__list,
.properties-grid,
.properties-rows {
    display: block;
}

/* штатные шаблоны Agency раскладывают карточки строками .row — превращаем в сетку */
.tm-objects__list .row,
.properties-grid .row,
.properties-rows .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

.tm-objects__list .row:before,
.tm-objects__list .row:after,
.properties-grid .row:before,
.properties-grid .row:after {
    display: none;
}

.tm-objects__list .h1.page-header,
.properties-grid .h1.page-header {
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 16px;
    padding: 0;
    border: none;
}

/* --- 7а. фотография объекта и заглушка «нет фото» -----------------------
   Фото и заглушку печатает Elements/Realty/object_photo.ctp:
     • есть фото  → <img class="<нужный класс>">
     • нет фото   → <span class="<тот же класс> tm-photo__ph">
   Классы совпадают специально: правила размера/кадрирования пишутся один раз,
   а «нет фото» никогда не приходит битым <img> (раньше на его месте оставалось
   пустое белое пятно — см. tech_doc §7д).

   ⚠ Селектор заглушки НЕ .tm-photo__ph в одиночку: базовое правило
   `.tm-body img { height: auto }` (0-1-1) перебивает одноклассовые правила фото,
   поэтому у всех размерных правил ниже добавлен .tm-body. */
.tm-photo__ph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: var(--tm-blue-light);
    background-image: url('/theme/tmetr2/img/no-photo.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.tm-photo__ph-cap {
    display: block;
    width: 100%;
    padding: 6px 8px;
    background: rgba(12, 68, 124, .55);
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-obj-card {
    background: #fff;
    border: .5px solid var(--tm-border);
    border-radius: var(--tm-radius);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    display: flex;
    flex-direction: column;
}

.tm-obj-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
    transform: translateY(-4px);
}

.tm-obj-card__img {
    position: relative;
    background: var(--tm-blue-light);
    height: 190px;
    overflow: hidden;
}

.tm-body .tm-obj-card__photo-link,
.tm-body .tm-obj-card__photo {
    display: block;
    width: 100%;
    height: 100%;
}

/* .tm-body в селекторе обязателен: `.tm-body img { height: auto }` (0-1-1)
   перебивало одноклассовое `.tm-obj-card__photo { height: 100% }` (0-1-0),
   и фотография вылезала из кадра 190px вместо того, чтобы кадрироваться */
.tm-body img.tm-obj-card__photo {
    object-fit: cover;
}

.tm-body .tm-obj-card__photo.tm-photo__ph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tm-obj-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--tm-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
}

.tm-obj-card__badge_rent {
    background: var(--tm-blue);
}

.tm-obj-card__badge_sold {
    background: #6b7280;
}

.tm-obj-card__fav {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-obj-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.tm-obj-card__type {
    font-size: 12px;
    color: var(--tm-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.tm-obj-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.tm-obj-card__title a {
    color: var(--tm-text);
}

.tm-obj-card__title a:hover {
    color: var(--tm-blue);
}

.tm-obj-card__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--tm-muted);
}

.tm-obj-card__price {
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--tm-blue);
    margin: 6px 0 0;
}

/* цена может приходить как несколько .currency-price-item (плагин Currency),
   лишние валюты плагин прячет сам через style="display:none" */
.tm-obj-card__price .currency-price-item {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    color: var(--tm-blue);
}

.tm-obj-card__price-suffix {
    font-family: 'Golos Text', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--tm-muted);
    white-space: nowrap;
}

.tm-obj-card__code {
    font-size: 11px;
    color: #b9bec7;
    margin: 0;
}

.tm-filters-row {
    margin: 24px 0 20px;
}

.tm-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-filters__item {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* второй уровень меню `home_filters` (childrenClass, см. Elements/home/filters.ctp):
   без отдельного класса вложенный <ul> получал бы класс .tm-filters и вставал
   блоком внутри «чипа» */
.tm-filters__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-filters__sub a {
    padding: 6px 14px;
    font-size: 12px;
}

.tm-filters a,
.tm-filters__btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1.5px solid #ddd;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--tm-text);
    transition: background .2s, color .2s, border-color .2s;
}

.tm-filters a:hover,
.tm-filters__btn:hover,
.tm-filters__btn.is-active,
.tm-filters a.is-active {
    background: var(--tm-blue);
    border-color: var(--tm-blue);
    color: #fff;
}

.tm-objects__more {
    text-align: center;
    margin-top: 32px;
}

/* --- 7б. компактный список объектов (виджеты «Последние» / «Новые») -----
   Разметку печатает Elements/Realty/object_mini_list.ctp, а её используют
   переопределённые темой Elements/recent_advertisements.ctp и
   Elements/new_advertisements.ctp. Редактор ставит эти виджеты блоком в регион,
   поэтому список должен нормально выглядеть и на всю ширину (регион `main`,
   `main_right_block` на главной), и в узкой колонке (сайдбар каталога). */
.tm-mini-list {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.tm-mini-list__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tm-mini-list__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.tm-mini-list__more {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* на всю ширину — плитка, в узкой колонке сама схлопывается в одну колонку */
.tm-mini-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.tm-mini {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.tm-mini:hover {
    border-color: var(--tm-blue);
    box-shadow: 0 8px 24px rgba(24, 95, 165, .1);
}

.tm-mini__img {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 96px;
            flex: 0 0 96px;
    width: 96px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tm-blue-light);
}

.tm-body .tm-mini__photo-link,
.tm-body .tm-mini__photo {
    display: block;
    width: 100%;
    height: 100%;
}

.tm-body img.tm-mini__photo {
    object-fit: cover;
}

.tm-body .tm-mini__photo.tm-photo__ph {
    display: block;
}

/* в мелком кадре подпись заглушки не помещается — остаётся только картинка */
.tm-mini__img .tm-photo__ph-cap {
    display: none;
}

.tm-mini__body {
    min-width: 0;
}

.tm-mini__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.tm-mini__title a {
    color: var(--tm-text);
}

.tm-mini__title a:hover {
    color: var(--tm-blue);
}

.tm-mini__type {
    margin: 0;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--tm-muted);
}

.tm-mini__price {
    margin-top: 4px;
    font-family: 'Unbounded', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-blue);
}

.tm-mini__price .currency-price-item {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    color: var(--tm-blue);
}

.tm-mini__price-suffix {
    font-family: 'Golos Text', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--tm-muted);
    white-space: nowrap;
}

/* --- 7в. страховка для НЕпереопределённых виджетов объектов -------------
   Скелет рисует объекты ещё в нескольких элементах, которые тема не трогает
   (similar_advertisements, blured_slide, блоки сторонних плагинов). Разметка у них
   одинаковая: .widget .property > .image > img. Без правил ниже такая картинка
   выводится в натуральную величину и ломает колонку. */
.tm-body .widget .property .image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--tm-blue-light);
}

.tm-body .widget .property .image img {
    max-width: 100%;
}

/* пустой <a class="advertisement__button-more"> базовых виджетов: он растянут
   на всю картинку и без содержимого схлопывается — фиксируем как оверлей */
.tm-body .widget .property .image > a.advertisement__button-more:empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

/* ------------------------------------- 8. внутренние страницы ----------- */
.tm-page__inner {
    max-width: 100%;
}

.tm-article__title,
.tm-page h1,
.tm-page .head-title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    margin: 8px 0 24px;
}

.tm-article__body {
    font-size: 16px;
    line-height: 1.7;
}

.tm-article__body h2,
.tm-article__body h3 {
    margin: 28px 0 12px;
}

.tm-article__body p {
    margin: 0 0 14px;
}

.tm-page .breadcrumb-block,
.tm-page .site-breadcrumb {
    font-size: 13px;
    color: var(--tm-muted);
    margin-bottom: 16px;
}

.tm-page .breadcrumb-block a {
    color: var(--tm-muted);
}

.tm-page .breadcrumb-block a:hover {
    color: var(--tm-blue);
}

/* каталог: сетка «контент + сайдбар» вместо .span9/.span3 */
.tm-page .content > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    margin: 0;
}

.tm-page .content > .row > .span9,
.tm-page .content > .row > .sidebar,
.tm-page .content > .row > .span3 {
    width: auto;
    float: none;
    margin: 0;
    min-width: 0;
}

.tm-page .sidebar .widget,
.tm-page .property-filter {
    background: #fff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 20px;
}

.tm-page .sidebar input[type="text"],
.tm-page .sidebar input[type="number"],
.tm-page .sidebar select,
.tm-page .property-filter input,
.tm-page .property-filter select {
    border-radius: 8px;
    border: 1.5px solid var(--tm-border);
    box-shadow: none;
    height: 40px;
    width: 100%;
    padding: 8px 12px;
}

.tm-page .btn,
.tm-page input[type="submit"],
.tm-page button[type="submit"] {
    background: var(--tm-orange);
    border: none;
    border-radius: 10px;
    color: #fff;
    padding: 12px 22px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}

.tm-page .btn:hover,
.tm-page input[type="submit"]:hover {
    background: var(--tm-orange-dark);
    color: #fff;
}

.tm-page .pagination,
.tm-page .paginator {
    margin: 32px 0 0;
}

.tm-page .pagination ul,
.tm-page .paginator ul {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    box-shadow: none;
    flex-wrap: wrap;
}

.tm-page .pagination li a,
.tm-page .pagination li span,
.tm-page .paginator a,
.tm-page .paginator span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--tm-border);
    border-radius: 8px;
    background: #fff;
    color: var(--tm-text);
    font-size: 14px;
}

.tm-page .pagination li.active span,
.tm-page .pagination li a:hover {
    background: var(--tm-blue);
    border-color: var(--tm-blue);
    color: #fff;
}

.tm-flash {
    padding-top: 16px;
}

.tm-seo-text {
    padding: 24px;
    color: var(--tm-muted);
    font-size: 14px;
}

.tm-services,
.tm-main-map {
    background: var(--tm-gray);
}

/* ------------------------------------------------ 8а. каталог ----------- */
/* Страница `Realty/index.ctp` темы. Она рисуется в режиме pageMode = 'wide',
   поэтому обёртка каталога сама получает класс `tm-page` (+ `tm-page_flush`,
   снимающий отступы контейнера) — так к сайдбару, полям фильтра и пагинации
   применяются уже существующие правила раздела 8, а не их копия. */
.tm-page_flush {
    padding: 0;
}

/* синяя «шапка каталога» — компактный родственник hero */
.tm-catalog-head {
    background: var(--tm-blue);
    padding: 28px 0 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.tm-catalog-head:before {
    content: '';
    position: absolute;
    right: -140px;
    top: -160px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(232, 122, 32, .18) 0%, transparent 70%);
    pointer-events: none;
}

.tm-catalog-head .tm-container {
    position: relative;
    z-index: 1;
}

.tm-catalog-head__title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 900;
    color: #fff;
    margin: 10px 0 0;
}

.tm-catalog-head__count {
    margin: 10px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
}

.tm-catalog-head__bid {
    margin-top: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

/* крошки (Elements/Site/breadcrumb.ctp) */
.tm-crumbs {
    font-size: 13px;
    display: block;
}

.tm-crumbs__list > span {
    color: rgba(255, 255, 255, .55);
}

.tm-crumbs a {
    color: rgba(255, 255, 255, .7);
}

.tm-crumbs a:hover {
    color: #fff;
}

.tm-crumbs__sep {
    margin: 0 8px;
    color: rgba(255, 255, 255, .35);
}

.tm-crumbs .is-active {
    color: #fff;
}

/* на белых страницах (не на синей шапке) крошки тёмные */
.tm-page .tm-crumbs__list > span,
.tm-page .tm-crumbs .is-active {
    color: var(--tm-text);
}

.tm-page .tm-crumbs a {
    color: var(--tm-muted);
}

.tm-page .tm-crumbs a:hover {
    color: var(--tm-blue);
}

.tm-page .tm-crumbs__sep {
    color: var(--tm-border);
}

/* сетка «фильтр + список» */
.tm-catalog {
    padding-bottom: 64px;
}

.tm-catalog__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-top: 32px;
}

/* каталог без сайдбара (нет фильтра и пустой регион realty_index_sidebar) */
.tm-catalog__grid_full {
    grid-template-columns: minmax(0, 1fr);
}

.tm-catalog__aside {
    min-width: 0;
    position: sticky;
    top: 84px;
}

.tm-catalog__main {
    min-width: 0;
}

.tm-catalog__intro,
.tm-catalog__full {
    padding-top: 32px;
}

.tm-catalog__seo {
    color: var(--tm-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px;
}

.tm-catalog__list {
    margin: 0;
}

/* кнопка «Фильтр» — только на узких экранах (см. раздел 11) */
.tm-catalog__filter-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border: 1.5px solid var(--tm-border);
    border-radius: 10px;
    background: #fff;
    font-family: 'Golos Text', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text);
    cursor: pointer;
}

.tm-catalog__filter-toggle.is-open {
    border-color: var(--tm-blue);
    color: var(--tm-blue);
}

/* панель сортировки (Elements/Realty/sorting.ctp) */
.tm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}

.tm-toolbar .viewtype_buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tm-toolbar__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--tm-border);
    border-radius: 10px;
    background: #fff;
    color: var(--tm-muted);
    font-size: 15px;
}

.tm-toolbar__view:hover {
    border-color: var(--tm-blue);
    color: var(--tm-blue);
}

.tm-toolbar__view.is-active {
    background: var(--tm-blue);
    border-color: var(--tm-blue);
    color: #fff;
}

.tm-toolbar .block-show-map {
    display: inline-block;
    margin: 0 0 0 4px;
}

.tm-body .tm-toolbar__mapbtn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border: 1.5px solid var(--tm-border);
    border-radius: 10px;
    background: #fff;
    color: var(--tm-text);
    font-size: 14px;
    font-weight: 500;
}

.tm-body .tm-toolbar__mapbtn:hover,
.tm-body .tm-toolbar__mapbtn.filter-is-active {
    border-color: var(--tm-blue);
    color: var(--tm-blue);
}

.tm-toolbar__form {
    margin: 0;
}

.tm-toolbar .filter-sort {
    margin: 0;
}

.tm-toolbar select.main-catalog {
    height: 40px;
    min-width: 250px;
    padding: 8px 36px 8px 14px;
    font-size: 14px;
}

/* пустой результат (Plugin/Agency/Elements/search_fail.ctp) */
.tm-empty {
    text-align: center;
    background: var(--tm-gray);
    border-radius: var(--tm-radius);
    padding: 48px 24px;
}

.tm-empty__icon {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
}

.tm-empty__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}

.tm-empty__text {
    color: var(--tm-muted);
    font-size: 15px;
    max-width: 480px;
    margin: 0 auto 24px;
}

.tm-empty__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* пагинация (Elements/paginator.ctp) */
.tm-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 32px 0 0;
}

.tm-pager__list {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    box-shadow: none;
}

.tm-pager__list li {
    list-style: none;
}

.tm-pager__list li a,
.tm-pager__list li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: #fff;
    color: var(--tm-text);
    font-size: 14px;
}

.tm-pager__list li a:hover {
    border-color: var(--tm-blue);
    color: var(--tm-blue);
}

.tm-pager__list li.active a,
.tm-pager__list li.active span {
    background: var(--tm-blue);
    border-color: var(--tm-blue);
    color: #fff;
}

.tm-pager__list li.hidden {
    display: none;
}

.tm-pager__counter {
    font-size: 13px;
    color: var(--tm-muted);
}

/* --------------------------------------------------- 9. подвал ---------- */
.tm-footer {
    background: var(--tm-footer-bg);
    padding: 56px 0 32px;
    margin-top: auto;
    color: rgba(255, 255, 255, .5);
}

.tm-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: .5px solid rgba(255, 255, 255, .1);
}

.tm-logo_footer {
    margin-bottom: 12px;
}

.tm-footer__desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .5);
}

.tm-footer__email {
    display: inline-block;
    margin-top: 12px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.tm-footer__title {
    font-family: 'Golos Text', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px;
}

.tm-footer__links,
.tm-footer .tm-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.tm-footer__links li {
    list-style: none;
}

.tm-footer__links a,
.tm-footer .tm-menu a {
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
    transition: color .2s;
}

.tm-footer__links a:hover,
.tm-footer .tm-menu a:hover {
    color: #fff;
}

.tm-footer__bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.tm-footer__copy,
.tm-footer__copy p {
    font-size: 13px;
    color: rgba(255, 255, 255, .3);
    margin: 0;
}

.tm-footer__copy a {
    color: rgba(255, 255, 255, .5);
}

.tm-footer__phone {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--tm-orange);
}

.tm-scrollup {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tm-blue);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
}

.tm-scrollup.is-visible {
    display: flex;
}

/* ------------------------------------------------ 10. страница 404 ------ */
.tm-404 {
    background: var(--tm-blue);
    position: relative;
    overflow: hidden;
    padding: 88px 0 96px;
    color: #fff;
}

.tm-404::before {
    content: '';
    position: absolute;
    right: -120px;
    top: -120px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(232, 122, 32, .18) 0%, transparent 70%);
    pointer-events: none;
}

.tm-404__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.tm-404__code {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(64px, 12vw, 132px);
    font-weight: 900;
    line-height: 1;
    color: var(--tm-orange);
    margin: 0 0 8px;
}

.tm-404__title {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 900;
    color: #fff;
    margin: 0 0 16px;
}

.tm-404__title span {
    color: var(--tm-orange);
}

.tm-404__text {
    font-size: 16px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 560px;
}

.tm-404__btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.tm-404__search {
    margin-top: 4px;
}

.tm-404__form {
    display: flex;
    gap: 12px;
    max-width: 420px;
    margin: 0;
    flex-wrap: wrap;
}

.tm-404__form .tm-input {
    flex: 1 1 200px;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.tm-404__form .tm-input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.tm-404__nav {
    margin-top: 40px;
    padding-top: 24px;
    border-top: .5px solid rgba(255, 255, 255, .15);
}

.tm-404__nav-title {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tm-orange);
    margin: 0 0 12px;
}

.tm-404__links,
.tm-404 .tm-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-404__links li {
    list-style: none;
}

.tm-404__links a,
.tm-404 .tm-menu a {
    color: rgba(255, 255, 255, .8);
    font-size: 15px;
}

.tm-404__links a:hover,
.tm-404 .tm-menu a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------------------------- 11. адаптив ------- */
@media (max-width: 1024px) {
    .tm-hero__grid {
        gap: 32px;
    }

    .tm-footer__top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .tm-burger {
        display: block;
        order: 3;
    }

    .tm-nav__inner {
        flex-wrap: wrap;
    }

    .tm-nav__body {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 12px 0 20px;
    }

    .tm-nav__body.is-open {
        display: flex;
    }

    .tm-nav__list,
    .tm-nav__body .tm-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .tm-nav__body .tm-menu li ul {
        position: static;
        display: flex;
        background: transparent;
        padding: 4px 0 4px 16px;
    }

    .tm-hero__grid {
        grid-template-columns: 1fr;
    }

    .tm-hero__text {
        padding-bottom: 32px;
    }

    .tm-hero__media {
        justify-content: center;
        padding-bottom: 24px;
    }

    /* ⚠ селектор обязан повторять базовый (`.tm-body .slick-sliders …`):
       у базового правила специфичность 0-3-0, и короткий `.tm-slider .slide` (0-2-0)
       не перебил бы его даже из медиазапроса — высота слайда осталась бы 340px.
       Заодно правило работает и для слайдера в регионе `main_slider`,
       у которого класса .tm-slider нет. */
    .tm-body .slick-sliders .slide {
        height: 280px;
    }

    .tm-stats__inner {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    /* строка поиска переносится в две строки — кнопку «Найти» на всю ширину,
       иначе она остаётся одна в последней строке и висит справа */
    .tm-filter-widget__submit,
    .tm-searchbar .property-filter .form-actions {
        flex: 1 1 100%;
    }

    .tm-filter-widget__submit .tm-btn,
    .tm-searchbar .property-filter .btn,
    .tm-searchbar .property-filter input[type="submit"] {
        width: 100%;
    }

    .tm-page .content > .row {
        grid-template-columns: 1fr;
    }

    /* каталог: фильтр сворачивается в кнопку «Фильтр» */
    .tm-catalog__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tm-catalog__filter-toggle {
        display: flex;
    }

    .tm-catalog__aside {
        display: none;
        position: static;
    }

    .tm-catalog__aside.is-open {
        display: block;
    }
}

@media (max-width: 600px) {
    .tm-section {
        padding: 48px 0;
    }

    .tm-hero {
        padding-top: 48px;
    }

    .tm-body .slick-sliders .slide {
        height: 220px;
    }

    .tm-body .slick-sliders .slider-info {
        padding: 32px 16px 14px;
    }

    .tm-body .slick-sliders .slider-info .main-slider.title {
        font-size: 16px;
    }

    .tm-cta {
        padding: 56px 20px;
    }

    .tm-footer__top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* ⚠ при flex-direction: column базис flex-элемента задаёт ВЫСОТУ, поэтому
       `flex: 1 1 190px` из десктопных правил обязательно сбрасывается в `0 0 auto`:
       иначе каждое поле фильтра растянулось бы до 190px в высоту */
    .tm-filter-widget__form,
    .tm-searchbar .property-filter form {
        flex-direction: column;
        align-items: stretch;
    }

    .tm-filter-widget__field,
    .tm-filter-widget__submit,
    .tm-searchbar .property-filter form > div,
    .tm-searchbar .property-filter .input,
    .tm-searchbar .property-filter .form-actions {
        flex: 0 0 auto;
        width: 100%;
    }

    .tm-filter-widget__submit .tm-btn,
    .tm-searchbar .property-filter .btn,
    .tm-searchbar .property-filter input[type="submit"] {
        width: 100%;
        min-width: 0;
    }

    .tm-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tm-toolbar select.main-catalog {
        min-width: 0;
        width: 100%;
    }

    .tm-pager {
        justify-content: center;
    }
}