/* ==========================================================================
   property-view.css — брендовый слой ПУБЛИЧНОЙ СТРАНИЦЫ ОБЪЕКТА.

   Почему отдельный файл, а не правка на месте: фактические стили страницы
   живут в `/uploads/estateal/style.css` и `/uploads/files_css/style.css` —
   оба лежат в docker-volume `rebpm84_uploads_data`, ВНЕ git. Правка там не
   доедет до dev/prod и не имеет версий, поэтому их голубой (#00aeff) и
   зелёный (#28a745) перекрываются здесь.

   Почему подключается из тела CMS-блока 49 (`_view.start('customCss')`), а не
   из TmSiteHelper::$_css: только так лист гарантированно грузится ПОСЛЕ
   uploads-листов и ТОЛЬКО на этой странице.

   Почему всё заскоплено `.ea-property-view`: префикс `.ea-` в теме занят
   дважды (KI-083), а глобальные `.item-*`/`.block-*` уже красили чужие
   страницы. Класс висит на двух корнях страницы объекта: `.page-title-wrap`
   и `.container` с колонками.

   Рецепты НЕ копируются: бренд-обводка — класс `.ea-draw-border`
   (custom.css § ЕДИНАЯ БРЕНД-ОБВОДКА), примитивы поля и градиентные лейблы —
   класс `.ea-form` (ea-form.css). Здесь только то, чего в них нет:
   перекрытие uploads-листов и обвязка групп, которую на форме «продать
   объект» даёт sellprop_form.css (на этой странице он не подключается).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ШРИФТ — Montserrat вместо Roboto

   uploads-лист прибивает Roboto к `.page-content`, заголовкам и кнопкам
   (строки 63, 90, 122, 141, 164, 348). Бренд-шрифт темы уже подключён
   (`fonts/montserrat.css`), внешний запрос к fonts.googleapis.com из блока
   снят вместе с этим правилом.
   -------------------------------------------------------------------------- */
/* ЕДИНАЯ ВЫСОТА КНОПОК СТРАНИЦЫ.

   Кнопки страницы делились на две группы: 52px у действий форм (Send / Call /
   WhatsApp, заявка калькулятора) и 42px у действий вне форм («Open on Map» в
   заголовке секции адреса и под картой сайдбара, «View Listings» у агента,
   «Request Information»). Раньше это читалось как разделение по роли, но рядом
   с новой полноширинной кнопкой «Price change» (52px) в шапке разнобой стал
   виден на одном экране, и пользователь просит один размер на все.

   Значение то же, что у контролов форм (`--ea-control-h` в ea-form.css: 52px,
   ≥44px touch-target по Apple HIG) — но своим именем: `--ea-control-h`
   объявлена на `:is(#AdvertisementAddForm,#MessageViewForm,.ea-form)` и до
   кнопок вне форм не долетает. Токен висит на обоих корнях страницы
   (`.page-title-wrap` и `.container`), поэтому доступен и в шапке, и в контенте.
   Внутренний отступ строки — минус 2px на рамку. */
.ea-property-view {
  --ea-btn-h: 52px;
}

.ea-property-view,
.ea-property-view h1,
.ea-property-view h2,
.ea-property-view h3,
.ea-property-view h4,
.ea-property-view h5,
.ea-property-view h6,
.ea-property-view .page-title h1,
.ea-property-view .block-title-wrap h2,
.ea-property-view .listing-view,
.ea-property-view .btn-external-map,
.ea-property-view .btn-submit,
.ea-property-view .item-change-price p {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. ГОЛУБОЙ #00aeff → БРЕНД

   Порядок перекрытий повторяет порядок объявлений в uploads/estateal/style.css,
   чтобы правки были сверяемы построчно с исходником.

   ОСНОВНОЙ ЦВЕТ ЗАЛИВОК — ОРАНЖЕВЫЙ, не красный. Замер по живым страницам:
   главная — 16 оранжевых заливок против 1 красной, каталог — 21 против 1, и та
   единственная красная везде одна и та же кнопка шапки «Property inquiry».
   Текстом то же: на главной 21 оранжевый узел против 3 красных. То есть красный
   в системе — точечный акцент одного элемента, а не цвет кнопок; страница
   объекта, где почти всё поле белое, покрашенная в красный выбивалась из проекта.
   Пара значений взята готовой из custom.css:1622-1623 (кнопка «Sell your object»):
   фон --brand-orange, ховер #D9551A. Свои оттенки не заводим.
   -------------------------------------------------------------------------- */

/* :84 крошки */
.ea-property-view .breadcrumb > li a,
.ea-property-view .breadcrumb > li a:hover {
  color: var(--brand-orange);
}

/* :100 метки Rent/Sale/Sold */
.ea-property-view .label-btn:hover {
  color: var(--brand-orange);
}

/* :110 активная вкладка Галерея/Карта (в исходнике с !important) */
.ea-property-view .property-banner .nav-pills .nav-item.active .nav-link {
  background-color: var(--brand-orange) !important;
}

/* :197 та же пара вкладок в мобильном дубле */
.ea-property-view .mobile-property-tools .nav-pills .active .nav-link {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}

/* :128-129 стрелки галереи. Ховер темнее заливки, а не другого тона: раньше
   покой был красным, а ховер оранжевым — вместе с перекраской это стало бы
   «светлеет при наведении», что читается как выключение элемента. */
.ea-property-view .slick-arrow {
  background-color: var(--brand-orange);
  transition: background-color 0.22s var(--ease);
}
.ea-property-view .slick-arrow:hover {
  background-color: #d9551a;
}

/* :149 подложка блока Details. Плотность заливки снижена: у оранжевого при
   той же альфе (.1) фон читался как «выделено ошибкой». */
.ea-property-view .detail-wrap {
  background-color: rgba(242, 105, 33, 0.06);
  border-color: rgba(242, 105, 33, 0.35);
  border-radius: var(--r-sm);
}

/* :153 ссылки внутри блока «Contact Information» */
.ea-property-view #property-contact-agent-wrap a:not(.btn-external-map),
.ea-property-view #property-contact-agent-wrap a:not(.btn-external-map):hover {
  color: var(--brand-orange);
}

/* Исключение — контакты агента: телефон, мобильный и WhatsApp это ОДИН список
   одинаковых значений, и выглядеть они должны одинаково. Телефоны тёмные не по
   правилу выше, а по `span.agent-phone a { color:#222 !important }` из
   uploads-листа; ссылка WhatsApp лежит в голом `<span>` без класса, под это
   правило не попадает и красилась общим — раньше в голубой, после брендирования в
   оранжевый. Рассинхрон исходный, наш слой лишь сменил ему оттенок.

   Красим её тем же #222, что и телефоны, а не токеном --ink (#1E1E1E): нужна не
   «тёмная», а ТА ЖЕ краска, что у соседей по списку. Адресуемся по href — своего
   класса у ссылки нет, а по нему в этот селектор не попадёт ничего лишнего
   (ни «View Listings», ни аватар-ссылка, ни «Terms of Use» в форме). Отдельного
   :hover не нужно: правило специфичнее темы и держит цвет и при наведении, как
   !important у телефонов. */
.ea-property-view #property-contact-agent-wrap a[href*="api.whatsapp.com"] {
  color: #222;
}

/* --------------------------------------------------------------------------
   3. НЕБРЕНДОВЫЙ ЗЕЛЁНЫЙ #28a745 → БРЕНД
   uploads/estateal/style.css:164-165 и uploads/files_css/style.css:500-522.
   -------------------------------------------------------------------------- */
.ea-property-view .btn-submit {
  color: #fff;
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
  border-radius: var(--r-sm);
  font-weight: 700;
  height: var(--ea-btn-h);
  line-height: calc(var(--ea-btn-h) - 2px);
}
.ea-property-view .btn-submit:hover,
.ea-property-view .btn-submit:focus {
  color: #fff;
  background-color: #d9551a;
  border-color: #d9551a;
}

/* Все три кнопки формы сайдбара (Send / Call / WhatsApp) — один аутлайновый
   вид: заливка была только у Send, и рядом с двумя обведёнными он читался как
   кнопка из другого набора. Классы выровнены патчем 2026-08-17-02 (Send стал
   `btn-secondary-outlined`, обе половинные — полноширинными), здесь остаётся
   один рецепт цвета на все три.

   Обводка берётся у «вторичной» кнопки ea-form (§8, `.JS-add-photo`:
   `rgba(242,105,33,.45)` в покое, сплошной бренд на наведении) — свой оттенок
   не заводим.

   Селектор идёт через `aside#sidebar` НАМЕРЕННО: базовое правило ea-form
   `:is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .btn` держит
   `border: 1px solid transparent` со специфичностью (1,1,1) — без ID рамка
   оставалась прозрачной, и «аутлайновая» кнопка выглядела как голый текст
   (замер: computed border-color rgba(0,0,0,0)). Порядком листов это не
   решается, `!important` не нужен. */
/* Два селектора вместо одного: форма заявки лежит в `aside#sidebar` (блок 49),
   калькулятор — в своём `aside` без id (блок 50), общий у них только
   `#mortgage_calculator`. Оба идут через ID намеренно (см. абзац выше про
   специфичность ea-form), поэтому объединить их в один короткий нельзя.
   Кнопка калькулятора вдобавок гасит тень: `btn-primary` ea-form нёс её вместе
   с градиентом, и без сброса обведённая кнопка осталась бы с подсветкой. */
.ea-property-view aside#sidebar .btn-secondary-outlined,
#mortgage_calculator .btn-secondary-outlined,
.ea-property-view .btn-external-map {
  color: var(--brand-orange);
  background: var(--surface);
  border-color: rgba(242, 105, 33, 0.45);
  box-shadow: none;
}
.ea-property-view aside#sidebar .btn-secondary-outlined:hover,
.ea-property-view aside#sidebar .btn-secondary-outlined:focus,
#mortgage_calculator .btn-secondary-outlined:hover,
#mortgage_calculator .btn-secondary-outlined:focus,
.ea-property-view .btn-external-map:hover,
.ea-property-view .btn-external-map:focus {
  color: #fff;
  background: var(--brand-orange);
  border-color: var(--brand-orange);
}

/* Тот же аутлайновый вид носят и обе кнопки в заголовках секций — «Open on Map»
   у адреса и «View Listings» у агента (класс `.btn-external-map`), плюс
   полноширинная «Open on Map» под картой сайдбара. Раньше они были залиты
   брендом; заливка осталась только у главных действий формы, а вспомогательные
   переходы на карту и в каталог носят ту же обводку, что Send / Call / WhatsApp
   рядом. Рецепт один — селектор просто добавлен в группу выше, своих цветов эти
   кнопки не заводят. Переход `color` библиотечный (uploads: `transition: color .2s`),
   отдельный для фона не нужен.

   ГЕОМЕТРИЯ. До правки все три выпадали из системы: 28px высоты при 42px у
   `.btn-submit` и 52px у кнопок форм, кегль 12 против 15, радиус 2.5px против
   токена --r-sm (12px) — рядом с заголовком секции они читались как служебные
   подписи, а не как действия. Кегль и вес 15/700, радиус --r-sm; высота —
   общий токен --ea-btn-h (§ 0). Промежуточный шаг 17.08 давал им 42px как
   `.btn-submit`, чтобы кнопка рядом с h2 не перевешивала заголовок, — 28.08
   отменён по запросу пользователя в пользу одной высоты на всю страницу.

   `font-size` через !important — единственный способ: в uploads-листе кегль
   объявлен как `font-size: 12px!important` (estateal/style.css:141), и
   специфичностью его не перебить. Остальные свойства идут обычным порядком. */
.ea-property-view .btn-external-map {
  height: var(--ea-btn-h);
  line-height: calc(var(--ea-btn-h) - 2px);
  padding: 0 18px;
  font-size: 15px !important;
  font-weight: 700;
  border-radius: var(--r-sm);
}

/* Кнопка карты сайдбара — ЕДИНСТВЕННАЯ из трёх, что остаётся залитой, и вид у неё
   ровно тот, что был до правки 28.08.

   Почему она не идёт в общий аутлайновый рецепт: это не действие в тексте страницы,
   а шапка карты. Кнопка стоит ПЕРВЫМ узлом внутри `.sidebar-map-wrap`, карта
   начинается сразу под ней, и вместе они читаются как один элемент. Обводка и
   крупный радиус её от карты отрывают: сквозь скругления в нижних углах
   просвечивает белый фон носителя. Радиус 5.5px и кегль 14/500 — исходные
   значения; верхние углы скругляет сам носитель (`overflow: clip` + --r-lg, § 4).

   Значения перечислены здесь целиком, потому что раньше их держал инлайн с
   !important в теле блока (снят патчем db_patches/2026-08-28-02): лист был
   единственным местом, куда их можно перенести. Специфичность та же, что у общего
   правила `.btn-external-map`, но правило идёт ПОЗЖЕ — выигрывает порядком.
   `font-size` с !important вынужденно: и в uploads-листе, и в общем правиле кегль
   объявлен как !important. */
.ea-property-view .sidebar-open-on-map {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: var(--ea-btn-h);
  line-height: calc(var(--ea-btn-h) - 2px);
  font-size: 14px !important;
  font-weight: 500;
  /* Кнопка и карта — один компонент: внешнюю форму даёт обёртка
     `.sidebar-map-wrap` (radius 22px + overflow clip), собственный радиус
     кнопки рисовал бы второе скругление ровно на стыке с картой.
     Радиус самой карты снят патчем db_patches/2026-08-28-08. */
  border-radius: 0;
  color: #fff;
  background: var(--brand-orange);
  border-color: var(--brand-orange);
}
.ea-property-view .sidebar-open-on-map:hover,
.ea-property-view .sidebar-open-on-map:focus {
  color: #fff;
  background: #d9551a;
  border-color: #d9551a;
}

/* --------------------------------------------------------------------------
   4. ПОВЕРХНОСТИ СТРАНИЦЫ — плоские

   Страница целиком плоская: ни секции контента, ни карточки сайдбара не несут
   ни бренд-обводки, ни тени. История правки:
     15.08 — кольцо `.ea-draw-border` + тень канона карточек повесили на 7
             `.block-wrap` и 3 `.property-form-wrap`;
     17.08 — сняли с секций контента (шесть приподнятых плашек подряд в одной
             колонке читались как шесть отдельных поверхностей);
     17.08 — сняли и с сайдбара: те же кольцо и тень на форме заявки,
             калькуляторе и карте держали страницу «слоёной» справа.
   Кольцо снято из разметки патчами db_patches/2026-08-17-01 (секции, блок 49)
   и 2026-08-17-02 (сайдбар, блоки 49 и 50) — класс, а не гашение `::after`
   в листе. Тень снята здесь: правила больше нет, а не `box-shadow:none`.

   Что осталось от карточек — только форма поверхности: радиус --r-lg и белый
   фон. Плашка на фоне страницы #f7f8f9 различима и без обводки.
   -------------------------------------------------------------------------- */
.ea-property-view .property-form-wrap {
  border-radius: var(--r-lg);
}

/* Носитель карты — единственный без собственного фона (замер: rgba(0,0,0,0)):
   карта уходила прямо в край носителя. Поверхность + clip делают его такой же
   плашкой, как остальные, и радиус применяется к самой карте. */
.ea-property-view .sidebar-map-wrap {
  background-color: var(--surface);
  overflow: clip;
}

/* --------------------------------------------------------------------------
   5. ОБВЯЗКА ГРУПП ФОРМЫ

   ea-form.css даёт примитивы поля, но вертикальный ритм групп и
   position:relative под кольцо живут в sellprop_form.css:26-30, а он на этой
   странице не подключается.
   -------------------------------------------------------------------------- */
.ea-property-view .ea-form .form-group {
  position: relative;
  margin-bottom: 20px;
}

/* Группа согласия и капча — не поля ввода.

   Кольцо ea-form кладётся в ряд контрола (ea-form.css § 2.5), а у группы
   согласия поля-коробки нет вовсе — обводить нечего, на фокусе выходит
   артефакт. Волна по буквам на юридической фразе тоже читается
   как ошибка — ea-form намеренно красит лейбл согласия по СОСТОЯНИЮ чекбокса,
   а не по фокусу (§1.6).

   Штатные гасители ea-form ловят `:has(> input[type=checkbox])`, но здесь
   чекбокс вложен в <label>, и они не срабатывают. Специфичность поднята ID
   страницы: базовые правила ea-form идут через `:is(#Id,…)` и четырьмя
   классами их не перебить. */
#property-contact-agent-wrap .ea-form .form-group:has(.confirmation-checkbox)::after,
#property-contact-agent-wrap .ea-form .form-group:has(.recaptcha-block)::after,
#property-contact-agent-wrap .ea-form .form-group:has(> .g-recaptcha)::after {
  content: none;
}
#property-contact-agent-wrap .ea-form .form-group:has(.confirmation-checkbox) > label {
  width: auto;
  background-image: none;
  /* обязательно вместе с background-image:none: базовое правило ea-form держит
     text-fill прозрачным, текст без заливки градиентом стал бы невидимым */
  -webkit-text-fill-color: currentColor;
}
.ea-property-view .ea-form .form-group .hz-terms-of-use {
  margin-bottom: 0;
}

/* Ссылка «Terms of Use» в обеих формах — бренд, а не наследуемый голубой. */
.ea-property-view .ea-form .hz-terms-of-use a,
.ea-property-view .privacy-alert a {
  color: var(--brand-orange);
}

/* Кнопка калькулятора «Leave a mortgage application» — 28 символов на 285px
   сайдбара. Геометрия ea-form (padding 0 24px, 15px/700, nowrap) даёт
   scrollWidth 303 при clientWidth 285: подпись обрезалась. Отпускаем высоту и
   разрешаем перенос; сокращать подпись нельзя — текст прикладной.
   Специфичность 0,1,1,0 = как у базового правила ea-form, лист грузится
   позже — выигрывает порядком, а не !important.

   Подпись ставим в ОДНУ строку, чтобы кнопка стояла ровно 52px, как три
   кнопки формы заявки над ней. Замер: «LEAVE A MORTGAGE APPLICATION» при
   15px/700 + letter-spacing .15 и uppercase темы занимает 279px, а под текст
   при padding 16 остаётся 251 — отсюда две строки и высота 65, из-за которой
   кнопка снова выбивалась из ряда. Три поправки дают 256 против доступных
   263: padding 10, letter-spacing normal, кегль 14 (регистр НЕ трогаем —
   uppercase несут все кнопки темы, отмена только здесь опять выделила бы её).
   Перенос оставлен страховкой под переводы: там подпись длиннее и одной
   строкой не станет ни при каком padding. */
/* «Interest rate» — ПОКАЗ значения, а не выбор: в разметке блока 50 это
   `<select disabled readonly>` c ОДНОЙ опцией, и select2 к нему применяется
   отдельно от остальных (mortgage_calculator.js). Стрелка выпадающего списка
   у поля, которое ничего не открывает, вводит в заблуждение — прячем её и
   отдаём поле под ширину значения. Рамка, радиус и высота остаются общими с
   «Minimum Initial Payment» и «Loan term»: это по-прежнему поле формы, просто
   недоступное для правки. Курсор `not-allowed` select2 ставит сам. */
/* Специфичность не ниже ea-form.css:`:is(#AdvertisementAddForm,…) .select2-…__arrow`
   (1,3,0), иначе стрелка остаётся flex. */
#mortgage_calculator .select2-container--bootstrap.select2-container--disabled .select2-selection--single .select2-selection__arrow {
  display: none;
}
#mortgage_calculator .select2-container--bootstrap.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  padding-right: 12px;
}

#mortgage_calculator .btn {
  height: var(--ea-control-h, 52px);
  padding: 6px 10px;
  font-size: 14px;
  letter-spacing: normal;
  line-height: 1.25;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   6. STICKY-КОЛОНКИ

   Замер до правки (1440×900): контент сайдбара 1881px при боксе колонки
   4658px — 2777px пустоты, пока читается основная колонка. Контент сайдбара
   ВЫШЕ вьюпорта (1881 > 900), поэтому нативный position:sticky не подходит:
   он прибил бы верх и сделал низ сайдбара недостижимым. Взят тот же
   theia-sticky-sidebar в режиме 'modern', что и на «sell your property».

   `.row` темы — flex со stretch: колонки уже равной высоты, и theia сочла бы
   короткую колонку «во всю высоту контейнера». flex-start возвращает
   колонкам высоту по контенту.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ea-property-view .js-sticky-cols {
    align-items: flex-start;
  }
}

/* Низ секции: колонки обязаны кончаться на одном уровне.

   Замер до правки (внизу страницы): левая колонка кончалась за 31px до футера,
   правая (карта) — за 2px. Причина не в sticky-опциях, а в геометрии ряда:
   левая колонка несёт margin-bottom:30px, поэтому КОНТЕЙНЕР ряда на 30px выше
   её содержимого, а theia выдаёт короткой колонке min-height по контейнеру
   (замер: inline `min-height: 4677px` при высоте левой 4648) — та и садится
   на 29px ниже.

   Поэтому зазор снимаем с колонки и отдаём ряду: контейнер становится равен
   контенту, обе колонки заканчиваются вровень, а отступ до футера остаётся
   тот же. Только с 768px: ниже колонки идут в стопку, и margin-bottom левой —
   это зазор ПЕРЕД сайдбаром, его трогать нельзя. */
@media (min-width: 768px) {
  .ea-property-view .js-sticky-cols {
    margin-bottom: 30px;
  }
  .ea-property-view .js-sticky-cols > .bt-content-wrap {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   7. ГАЛЕРЕЯ (lightSlider, gallery:true)

   Замер до правки (1440px, объект S1842, 34 снимка): кадр 845×529 и лента
   превью 845px совпадают по краям, но миниатюра внутри ячейки — 94px при
   ячейке 101.25px (`.lSGallery img{max-width:100%}` даёт натуральную ширину
   thumb'а 94×70). Отсюда «зазор справа»: восьмая превью кончалась на 943.25
   при правом крае кадра 950.5, а шаг между снимками читался 12.25px вместо
   заявленных 5px. width:100% + cover заполняет ячейку — крайние превью встают
   ровно под края кадра. Высота 70px — та же, что уже держит max-height в
   uploads/estateal/style.css:68 (и натуральная высота thumb'а).

   Радиус: lightslider даёт скругление ТОЛЬКО активной и наведённой превью
   (lightslider.min.css: `.lSGallery li.active,li:hover{border-radius:5px}`),
   из-за чего первый снимок выглядел обведённым, остальные и сам кадр — нет.
   Радиус получают все ячейки и кадр; значения — токены системы, не «свои».
   Специфичность равна библиотечной, лист грузится позже — берём порядком.
   -------------------------------------------------------------------------- */
.ea-property-view .lSSlideOuter .lSSlideWrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ea-property-view .lSSlideOuter .lSPager.lSGallery li,
.ea-property-view .lSSlideOuter .lSPager.lSGallery li.active,
.ea-property-view .lSSlideOuter .lSPager.lSGallery li:hover {
  border-radius: var(--r-sm);
}
.ea-property-view .lSSlideOuter .lSPager.lSGallery li > a {
  display: block;
}
.ea-property-view .lSSlideOuter .lSPager.lSGallery img {
  width: 100%;
  height: 70px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. АВАТАР АГЕНТА (секция Contact Information и форма сайдбара)

   Оба аватара просили у сервера квадрат 80×80 режимом crop, а ImageCompress
   умеет только ЦЕНТРАЛЬНЫЙ кроп (это же ограничение записано в custom.css
   § карточки агента). Половина фото агентства — портреты 2:3 (замер оригиналов
   в uploads/users: 600×900 у трёх, 600×891, 600×800, 600×784), и центральный
   квадрат режет их ровно по лицу — на странице было видно пол головы.

   Рецепт берём тот же, что уже работает на карточках команды: превью с ЗАПАСОМ
   по высоте (патч 2026-08-17-02 просит 160×240 = 2:3 — пропорция самого узкого
   из оригиналов, то есть портрет входит целиком) плюс кадрирование на стороне
   CSS. `object-position` держит окно у верха: макушка попадает в кадр и у
   портрета в полный рост, и у поясного снимка.

   Пер-агентских поправок (`--ag-focal`/`--ag-zoom` из custom.css) здесь нет
   намеренно: там кадр 3:4 высотой в пол-карточки, здесь — 70–80px аватар, где
   разница в пару процентов не читается. Нужна точечная подгонка — заводится
   переменная на `.agent-image`, рецепт для этого и оставлен.
   -------------------------------------------------------------------------- */
/* Радиус — токен `--r-sm` (12px), тот же, что у кнопок и карточек страницы:
   пользователь просил мягкий угол в системе проекта, а не круг (круглые
   `.fb-avatar`/`rv-avatar` — другой размер, 34–44px, там кружок читается).

   `!important` вынужденно: на самом <img> висит bootstrap-класс `.rounded`, а он
   объявлен как `border-radius: .25rem !important` сразу в двух uploads-листах —
   специфичностью это не перебить (замер: без него computed 2.5px).
   Снимать класс из разметки блока не стали: он приходит из шаблона вместе с
   остальными аватарами, и правка тела блока задела бы больше, чем просят. */
.ea-property-view .agent-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: center var(--ea-avatar-focal, 15%);
  border-radius: var(--r-sm) !important;
}
.ea-property-view aside .agent-image img {
  width: 70px;
  height: 70px;
}

/* --------------------------------------------------------------------------
   9. РЕЗУЛЬТАТЫ ИПОТЕЧНОГО РАСЧЁТА (блок 50)

   Таблица без линий: подпись слева полужирная, значение справа обычным
   начертанием. Раньше подпись и значение шли одной строкой текста
   («Overpayment amount: 12 345»), поэтому значения не выстраивались в колонку —
   их левый край гулял вслед за длиной подписи.

   Сетка на весь блок, а не строка-flex: колонка значений одна на все три
   строки, и её ширину задаёт самое длинное число — иначе каждая строка
   выравнивалась бы сама по себе. Подписи и значения лежат в сетке напрямую,
   без обёрток-строк (обёртки потребовали бы subgrid ради общей колонки).
   `tabular-nums` держит цифры одной ширины — при пересчёте (смена срока или
   первого взноса) числа больше не «дышат».
   -------------------------------------------------------------------------- */
.ea-property-view .mortage-calculation-results {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 10px;
  column-gap: 16px;
  margin-top: 4px;
}
.ea-property-view .mcr-label {
  font-weight: 700;
  color: var(--ink);
}
.ea-property-view .mcr-value {
  text-align: right;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
/* Кнопка заявки лежит внутри того же блока результатов — растягиваем её на обе
   колонки, иначе сетка посадила бы её в колонку подписей. */
.ea-property-view .mortage-calculation-results > .submit {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   10. ШАПКА ОБЪЕКТА — две колонки под сетку контента

   До правки заголовок, метки и адрес шли во всю ширину контейнера, а цена
   висела абсолютом в правом верхнем углу (uploads/estateal/style.css:93).
   Отсюда две проблемы: заголовок приходилось держать искусственным
   `max-width` (500/640/800px по брейкпоинтам, там же:361-369), чтобы он не
   уезжал под цену, а адрес всё равно тянулся на все 1220px и заканчивался
   под ценой. Шапка не совпадала по краям с рядом контента, который идёт
   сразу под ней.

   Теперь шапка — обычный ряд с теми же колонками, что и контент
   (разметка: db_patches/2026-08-28-04). Ширины НЕ 8/4: замер живой страницы
   на 1440px даёт слайдер 875px и сайдбар 375px при контейнере 1250 —
   то есть 70/30, их задают `.bt-content-wrap`/`.bt-sidebar-wrap`
   (uploads/estateal/style.css:365-366). Классы `col-lg-8`/`col-lg-4` в
   разметке оставлены как поведение по умолчанию и как раскладка до 992px,
   а здесь колонки доводятся до фактических 70/30 — иначе левый край цены
   не сел бы на левый край сайдбара.

   Ниже 992px обе колонки идут в стопку (`col-md-12`), ровно как контент и
   сайдбар под ними; ниже 768px шапка скрыта целиком (там же:71) и вместо
   неё работает `.mobile-property-title`.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ea-property-view .property-title-col {
    flex: 0 0 70%;
    max-width: 70%;
  }
  .ea-property-view .property-price-col {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

/* Цена больше не абсолют: она лежит в своей колонке. `position` снимается
   вместе с `top/right`, которые ставило то же правило uploads-листа.
   Цена и цена за м² центрируются по колонке — под ними во всю её ширину
   стоит кнопка истории, и прижатая вправо строка читалась бы смещённой
   относительно неё. */
.ea-property-view .property-price-col .item-price-wrap {
  position: static;
  top: auto;
  right: auto;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1;
  align-content: space-between;
  row-gap: 12px;
}

/* Колонка — flex-столбец, чтобы список цены занял её ПОЛНУЮ высоту (`flex:1`),
   а `align-content: space-between` развёл его две строки по краям: цена стоит
   вровень с заголовком, кнопка истории — вровень с городом в левой колонке.
   Зазор между ними не фиксируется числом, а равен остатку высоты (замер 1440:
   колонка 108 − строка цены 36 − кнопка 52 = 20px) и пересчитывается сам,
   когда заголовок переносится на вторую строку. `row-gap` — нижний предел на
   случай, когда остатка нет: ниже 992px колонки идут в стопку, их высота равна
   контенту, и разводить строки space-between уже нечем. */
.ea-property-view .property-price-col {
  display: flex;
  flex-direction: column;
}

/* Цена и заголовок начинаются на одной высоте. Кегль у них один (30px), но
   межстрочный разный: у h1 темы 36px, у цены uploads-лист держит 25px — при
   lh меньше кегля глифы вылезают за верх бокса, и цена вставала на 5px выше
   заголовка (замер текстовых прямоугольников: h1 632…669, цена 627…664).
   Выравниваем межстрочный по заголовку — верхние края текста совпадают. */
.ea-property-view .property-price-col .item-price {
  line-height: 36px;
  margin-bottom: 0;
}

/* Цена за м² стоит на базовой линии основной цены, а не по центру её строки.
   Оба `<li>` — flex-элементы, и при выравнивании по умолчанию (stretch) строка
   18px вставала посередине глифов 30px: замер текстовых прямоугольников давал
   цену 627…664 и «/m2» 634…656 — ровно центр. `baseline` сажает «/m2» на линию
   цифр, как было до перевода шапки в колонки. Задаём его двум элементам, а не
   контейнеру: в том же `<ul>` лежит кнопка истории, и выравнивать её по
   базовой линии нечему. */
.ea-property-view .property-price-col .item-price,
.ea-property-view .property-price-col .item-sub-price {
  align-self: baseline;
}

/* Ограничитель ширины заголовка снимаем: его держала колонка, а не он сам. */
.ea-property-view .property-title-col .page-title {
  max-width: none;
}

/* Левая колонка распределяет свой остаток так же, как правая: заголовок сверху,
   город снизу. Без этого равнение по нижней строке держалось только пока
   колонки одинаковой высоты — а правая перерастает левую, как только строка
   цены переносится (замер 992px: «€ 1 400 /m2» не влезает в 261px рядом с
   ценой, ряд вырастает на 29px, и город повисает выше кнопки). Теперь остаток
   забирают обе колонки, и низ города совпадает с низом кнопки на любой
   ширине — считать брейкпоинты и подгонять кегли под длину цены не нужно.
   Собственные отступы меток (10/12px) остаются нижним пределом. */
.ea-property-view .property-title-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Во flex-контексте соседние вертикальные margin не схлопываются, и пара
   «12px снизу у меток + 7px сверху у адреса» дала бы 19px вместо прежних 12,
   подняв всю шапку на 7px. Оставляем один отступ — тот, что больше. */
.ea-property-view .property-title-col .item-address {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   11. «PRICE CHANGE» — кнопка системы, а не плашка

   Кнопка раскрытия истории цены приехала со своим видом: серо-розовая
   заливка #FFF9F9, серая рамка, радиус 5px, вес 300 и жёсткий `max-width:205px`
   (инлайновый `<style>` в теле блока 77). Рядом с колонкой сайдбара, где все
   действия — Send / Call / WhatsApp — носят один аутлайновый вид, она читалась
   как элемент из другого набора.

   Рецепт НЕ заводится свой: значения сняты с кнопок формы сайдбара
   (замер на 1440px: 52px высоты, 15px/700, uppercase, letter-spacing .15px,
   радиус 12px = --r-sm, рамка rgba(242,105,33,.45), заливка на наведении).

   Кнопкой становится внутренняя `.wrapper-button`, а не сама `<li>`: в li
   вложена и таблица истории, и заливка на наведении накрыла бы её вместе с
   кнопкой. Поэтому li — прозрачный контейнер на всю ширину колонки, кнопка и
   раскрывающаяся панель внутри — два отдельных элемента.

   Специфичность: инлайновый `<style>` блока 77 идёт в теле страницы, то есть
   ПОЗЖЕ этого листа, но его селекторы одноклассовые (0,1,0) — перекрываем
   классом страницы (0,2,0+), без !important. */
.ea-property-view .item-price-wrap .item-change-price {
  flex: 0 0 100%;
  width: 100%;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  align-items: stretch;
}
.ea-property-view .item-change-price .wrapper-button {
  justify-content: center;
  height: var(--ea-btn-h);
  padding: 0 24px;
  color: var(--brand-orange);
  background: var(--surface);
  border: 1px solid rgba(242, 105, 33, 0.45);
  border-radius: var(--r-sm);
  transition: color .2s, background-color .2s, border-color .2s;
}
.ea-property-view .item-change-price:hover .wrapper-button {
  color: #fff;
  background: var(--brand-orange);
  border-color: var(--brand-orange);
}
.ea-property-view .item-change-price .wrapper-button p {
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .15px;
}
/* Иконка со стрелками — чёрный PNG (/uploads/arrows.png), своего белого
   варианта в проекте нет. На залитой кнопке выводим её в белый фильтром:
   это дешевле, чем заводить второй файл ради одного состояния. */
.ea-property-view .item-change-price:hover .wrapper-button img {
  filter: brightness(0) invert(1);
}

/* Раскрытая история — ДРОПДАУН поверх страницы, не блок в потоке.

   В потоке она давала 78px высоты правой колонке, а колонка стоит в общем
   ряду с левой: раскрытие сдвигало вниз всё, что ниже шапки — слайдер,
   сайдбар, весь экран. Оверлей на `position:absolute` от `<li>` (отсюда
   `relative` на нём) занимает нулевую высоту в потоке, поэтому клик по
   кнопке больше ничего не двигает. Тень — признак слоя над страницей:
   без неё панель читается как продолжение кнопки.

   `left/right: 0` вместо ширины: панель обязана совпасть с кнопкой, а её
   ширину задаёт колонка. z-index держим низким (20) — слоёв над шапкой на
   этой странице нет, выше поднимать незачем. */
.ea-property-view .item-change-price {
  position: relative;
}
.ea-property-view .item-change-price .table-change {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(30, 30, 30, 0.12);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 28px rgba(30, 30, 30, 0.14);
  text-align: left;
}

/* Строки — одна сетка на всю таблицу: колонка под значок, колонка даты и
   колонка цены, прижатая к правому краю. Раньше строка была flex-ом с
   `gap:10px`, а строку «создано» (без значка) выравнивал `padding-left:26px`
   — то есть подпорка под ширину значка, которая ломалась при любом
   изменении отступов. Теперь строка без значка просто начинается со второй
   колонки (`grid-column: 2`), и колонки совпадают у всех строк по
   построению.

   Отступы: 12/16 вместо 5/0 — строки читаются как строки таблицы, а не как
   слипшийся список. Первая линия снимается: рядом с рамкой панели она
   читалась как вторая рамка. `tabular-nums` держит цифры одной ширины,
   поэтому разряды цен стоят друг под другом. */
.ea-property-view .item-change-price .table-change li {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top-color: rgba(30, 30, 30, 0.10);
}
.ea-property-view .item-change-price .table-change li:first-child {
  border-top: 0;
}
.ea-property-view .item-change-price .table-change .wrapper-create {
  padding-left: 16px;
}
.ea-property-view .item-change-price .table-change .wrapper-create > div:first-child {
  grid-column: 2;
}
.ea-property-view .item-change-price .table-change li > div:last-child {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}