/* ============================================================
   Намыс — адаптив
   ------------------------------------------------------------
   Макеты свёрстаны под фиксированные 1440px инлайновыми стилями.
   Этот файл ничего не меняет на >=1440px: все правила живут
   внутри медиазапросов, поэтому десктоп остаётся пиксель-в-пиксель.

   Брейкпоинты (desktop-first, т.к. база — 1440):
     <=1439  tablet-wide : сетка становится резиновой
     <=1023  tablet      : навигация уходит в бургер, колонки схлопываются
     <=767   mobile      : всё в одну колонку

   !important обязателен: переопределяем инлайновые стили.

   Хуки: атрибут data-r в разметке. Значения через пробел
   (селектор [data-r~=...]), один элемент может нести несколько.
   ============================================================ */

:root {
  /* Emil: сильные кривые, встроенные ease слишком вялые */
  --eo: cubic-bezier(.23, 1, .32, 1);
  --bar-h: 64px;
  --pad-lg: 40px;
  --pad-md: 32px;
  --pad-sm: 20px;
}

/* ============================================================
   1. <=1439 — резиновая сетка
   ============================================================ */
@media (max-width: 1439.98px) {

  /* Корень макета: снимаем жёсткие 1440 и min-width.
     overflow-x:clip (не hidden) — не создаёт скролл-контейнер
     и не ломает position:sticky у шапки внутренних страниц. */
  [data-r~="page"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  [data-r~="bar"] {
    min-width: 0 !important;
  }

  /* Горизонтальные паддинги секций становятся общей переменной */
  [data-r~="pad"] {
    padding-left: var(--pad-lg) !important;
    padding-right: var(--pad-lg) !important;
  }

  [data-r~="barinner"] {
    padding-left: var(--pad-lg) !important;
    padding-right: var(--pad-lg) !important;
    gap: 28px !important;
  }

  /* Логотипу больше не нужен ручной сдвиг под старую сетку */
  [data-r~="barinner"] img {
    margin-left: 0 !important;
  }

  /* Фиксированные широкие колонки → доли */
  [data-r~="split"],
  [data-r~="split-media"] {
    grid-template-columns: 1fr minmax(0, 46%) !important;
    gap: 48px !important;
  }

  [data-r~="zig"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%) !important;
    gap: 40px !important;
  }

  [data-r~="zig-rev"] {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important;
    gap: 40px !important;
  }

  [data-r~="worklist"] {
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 38%) !important;
    gap: 28px !important;
  }

  [data-r~="foot"] {
    grid-template-columns: minmax(0, 1fr) 170px 170px 250px !important;
    gap: 32px !important;
  }

  [data-r~="foot3"] {
    grid-template-columns: minmax(0, 1fr) 190px 260px !important;
    gap: 32px !important;
  }

  [data-r~="ctaband"] {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 40px !important;
  }

  /* Шапка на 1024–1439: полный набор (лого + 5 пунктов + телефон
     + мессенджеры) в одну строку уже не влезает. Навигация важнее,
     поэтому уплотняем правый блок, а не ломаем меню в две строки. */
  [data-r~="nav"] {
    gap: 22px !important;
  }
  /* мессенджеры — дубль футера, на этой ширине лишние */
  [data-r~="navcontact"] > div:last-child {
    display: none !important;
  }
  /* от блока телефона остаётся сам номер */
  [data-r~="navcontact"] div:has(> a[href^="tel:"]) > div {
    display: none !important;
  }
  [data-r~="navcontact"] a[href^="tel:"] {
    font-size: 18px !important;
  }

  /* Крупная типографика начинает жить от вьюпорта */
  [data-r~="brand"] {
    font-size: 25.5vw !important;
    margin-top: -4.3vw !important;
  }
  [data-r~="brand-box"] {
    height: 20.6vw !important;
  }

  /* Сверхкрупный узкий шрифт (вторая строка составных заголовков)
     на 1024 упирается в края раньше остальной типографики */
  [data-r~="d-giant"] {
    font-size: clamp(118px, 12.6vw, 188px) !important;
  }
  /* d-xl здесь не трогаем: этот токен носят и заголовки внутренних
     страниц от 40px, общий clamp их бы, наоборот, раздул */
  [data-r~="d-lg"] {
    font-size: clamp(48px, 5.2vw, 76px) !important;
  }

  /* Цифры витрины и этапов — тоже от вьюпорта */
  [data-r~="hcard-num"] {
    font-size: clamp(48px, 4.6vw, 64px) !important;
  }
  [data-r~="stepfig"] {
    font-size: clamp(78px, 8.2vw, 118px) !important;
  }

  /* Залипающая панель витрины выходит за паддинги секции, чтобы
     карточки обрезались по краю экрана. Вылет прибит к 48px
     инлайном — здесь пересчитываем под текущий паддинг. */
  [data-r~="hgal-pin"] {
    margin-left: calc(var(--pad-lg) * -1) !important;
    margin-right: calc(var(--pad-lg) * -1) !important;
    padding-left: var(--pad-lg) !important;
    padding-right: var(--pad-lg) !important;
  }
  /* Карточка + подпись + полоса прогресса должны уместиться
     в залипшую панель: на 1024×768 440px по ширине дают кадр,
     после которого полосе уже не хватает высоты */
  [data-r~="hcard"] {
    flex-basis: 380px !important;
    width: 380px !important;
  }
  [data-r~="hcard-name"] {
    font-size: 38px !important;
  }
}

/* ============================================================
   1b. <=1279 — фильтры в бенто-карточке
   ------------------------------------------------------------
   Бенто остаётся в две колонки вплоть до 767, а «Тип жилья» +
   «Кол-во комнат» перестают помещаться в строку внутри карточки
   уже около 1230. Округлено до стандартного xl (1280).
   ============================================================ */
@media (max-width: 1279.98px) {
  [data-r~="bento-controls"] {
    margin-top: 22px !important;
  }
  [data-r~="filters"] {
    flex-direction: column !important;
    gap: 14px !important;
  }
  [data-r~="chip"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    flex: 1 1 auto !important;
    text-align: center !important;
  }
  [data-r~="chip-sq"] {
    width: auto !important;
    min-width: 44px !important;
    flex: 0 1 auto !important;
  }
}

/* ============================================================
   2. <=1023 — планшет: бургер, схлопывание колонок
   ============================================================ */
@media (max-width: 1023.98px) {

  html {
    scroll-padding-top: calc(var(--bar-h) + 16px) !important;
  }

  [data-r~="pad"] {
    padding-left: var(--pad-md) !important;
    padding-right: var(--pad-md) !important;
  }

  [data-r~="barinner"] {
    padding-left: var(--pad-md) !important;
    padding-right: var(--pad-md) !important;
  }

  /* --- Шапка ---------------------------------------------- */

  /* Десктопная навигация и блок телефона не помещаются в одну
     строку (skill: nav обязан быть в одну строку либо в бургер) */
  [data-r~="nav"],
  [data-r~="navcontact"] {
    display: none !important;
  }

  [data-r~="bar"] header,
  [data-r~="bar"] [data-r~="barlight"],
  [data-r~="barsticky"] {
    height: var(--bar-h) !important;
  }

  [data-r~="barinner"] {
    height: var(--bar-h) !important;
    justify-content: space-between !important;
  }

  [data-r~="barinner"] img {
    height: 32px !important;
  }

  /* Мобильная панель: в разметке лежит с inline display:none,
     поэтому при отсутствии этого файла десктоп не ломается */
  [data-r~="mob"] {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: none;
  }

  /* --- Секции: одна или две колонки ------------------------ */

  [data-r~="split"],
  [data-r~="split-media"],
  [data-r~="zig"],
  [data-r~="zig-rev"],
  [data-r~="ctaband"],
  [data-r~="defrow"],
  [data-r~="specrow"],
  [data-r~="tworow"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  /* В зигзаге картинка всегда должна идти первой:
     в чётных рядах она вторая по DOM */
  [data-r~="zig-rev"] > [data-r~="zig-media"] {
    order: -1;
  }

  [data-r~="worklist"] {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px 20px !important;
  }
  [data-r~="worklist"] > :nth-child(3) {
    grid-column: 2 / -1;
  }

  [data-r~="grid4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  [data-r~="grid3"],
  [data-r~="grid5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  [data-r~="grid2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-r~="foot"],
  [data-r~="foot3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 36px 32px !important;
  }

  /* Ряды-строки, которые на десктопе идут в одну линию */
  [data-r~="rowstack"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  [data-r~="rowwrap"] {
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
  }

  /* --- Блоки переработанной Главной ------------------------ */

  /* Приглашение к презентации: обложка над текстом */
  [data-r~="pres"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  [data-r~="presmedia"] {
    aspect-ratio: 16 / 10 !important;
  }
  [data-r~="preslink"] {
    justify-content: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Витрина: привязка к скроллу — десктопный приём. Здесь трек
     листается пальцем, поэтому панель перестаёт залипать, а сам
     трек становится обычной горизонтальной лентой со снапом.
     JS в этом диапазоне transform не ставит (проверяет 1024px). */
  [data-r~="hgal"] {
    height: auto !important;
  }
  [data-r~="hgal-pin"] {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-left: calc(var(--pad-md) * -1) !important;
    margin-right: calc(var(--pad-md) * -1) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  [data-r~="hgal-track"] {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad-md);
    padding: 0 var(--pad-md) 10px;
    gap: 16px !important;
    overscroll-behavior-x: contain;
  }
  [data-r~="hcard"] {
    flex: 0 0 74vw !important;
    width: 74vw !important;
    margin-top: 0 !important;
    scroll-snap-align: start;
  }
  [data-r~="hcard-name"] {
    font-size: clamp(28px, 5vw, 44px) !important;
  }
  /* счётчик и полоса считаются от скролл-прогресса, которого тут нет */
  [data-r~="hgal-foot"] {
    display: none !important;
  }

  /* Ценности: две колонки не помещаются. Кадр залипает наверху, а
     список едет поверх него — для этого сетка становится блоком:
     у sticky внутри grid-ячейки нет хода, у sticky внутри блока
     контейнер — вся секция. Список получает свою подложку,
     иначе текст ложится прямо на фотографию. */
  [data-r~="valgrid"] {
    display: block !important;
    margin-top: 56px !important;
  }
  [data-r~="valmediacol"] {
    position: sticky !important;
    top: calc(var(--bar-h) + 8px) !important;
    z-index: 0;
  }
  [data-r~="valmedia"] {
    position: static !important;
    aspect-ratio: 16 / 11 !important;
  }
  [data-r~="vallist"] {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(13, 24, 39, 0) 0%, rgba(13, 24, 39, .84) 10%, rgba(13, 24, 39, .9) 100%);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    padding-top: 15vh;
    margin-top: -6vh;
  }
  [data-r~="valitem"] {
    min-height: 0 !important;
    padding: 30px 0 !important;
  }

  /* Заголовок + подводка: единственная композиция «слева/справа»,
     на планшете складывается в стопку */
  [data-r~="split-head"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  /* Утверждение «комиссию платит застройщик»: подводка с кнопкой
     и вторая половина фразы перестают стоять рядом */
  [data-r~="claimrow"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
    align-items: start !important;
  }
  [data-r~="claim-c"] {
    text-align: left !important;
    order: -1 !important;
  }

  /* Этапы: ступенчатые сдвиги считаны под четыре колонки,
     на двух они превращаются в дыры — снимаем */
  [data-r~="stepband"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 32px !important;
    row-gap: 48px !important;
    margin-top: 96px !important;
  }
  [data-r~="stepband"] > * {
    margin-top: 0 !important;
    padding-right: 0 !important;
  }

  [data-r~="vtgrid"],
  [data-r~="faqgrid"],
  [data-r~="teamrow"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  /* Три колонки «вторички» стоят на разной высоте по 12-й сетке —
     в одну колонку и сдвиг, и явные grid-column только мешают */
  [data-r~="vtcell"] {
    grid-column: auto !important;
    margin-top: 0 !important;
    padding-right: 0 !important;
  }
  [data-r~="teamrow"] {
    gap: 28px !important;
  }

  /* Отзывы: карточки по 12-й сетке — в одну колонку, без ступеней */
  [data-r~="revgrid"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 20px !important;
  }
  [data-r~="revcell-a"],
  [data-r~="revcell-b"],
  [data-r~="revcell-c"] {
    grid-column: auto !important;
    margin-top: 0 !important;
  }
  [data-r~="revcard"] {
    border-radius: 22px !important;
    padding: 30px 26px 26px !important;
  }

  [data-r~="footband"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  [data-r~="footband"] > :last-child {
    text-align: left !important;
  }
  [data-r~="footband"] > :last-child > div {
    justify-content: flex-start !important;
  }
  [data-r~="footlinks"] {
    flex-direction: column !important;
    gap: 22px !important;
  }
  [data-r~="footlinks"] > :last-child {
    text-align: left !important;
  }

  /* Блок «Связаться»: кнопки мессенджеров тянутся на всю ширину,
     иначе на узком экране висят двумя огрызками у левого края */
  [data-r~="msgrow"] {
    gap: 10px !important;
  }
  [data-r~="msgbtn"] {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  /* Заголовок секции: "04 · что мы делаем" + примечание справа */
  [data-r~="sechead"] {
    flex-wrap: wrap !important;
    gap: 8px 24px !important;
  }

  /* Ряды плашек («Монолит · 13 подъездов · Рассрочка 12 месяцев»)
     стоят в nowrap и на узком экране уезжали за край */
  [data-r~="chiprow"] {
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 8px !important;
  }
  [data-r~="chiprow"] > * {
    white-space: normal !important;
  }

  /* Строка табов «Комнат · 1 · 2 · 3 · счётчик»:
     счётчик прижат margin-left:auto и распирал ряд */
  [data-r~="tabrow"] {
    gap: 8px !important;
  }
  /* счётчик — последний в ряду; рантайм пересобирает style,
     поэтому цепляемся за позицию, а не за строку стиля */
  [data-r~="tabrow"] > :last-child {
    margin-left: 0 !important;
  }

  /* Планировки: три карточки на планшете дают ~230px на план */
  [data-r~="grid-plans"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Бенто-карточки: фиксированная высота ломает контент */
  [data-r~="card"] {
    height: auto !important;
    min-height: 380px !important;
    padding: 26px !important;
  }

  /* Внутри карточки колонка вдвое уже секции, поэтому общий
     масштаб h2/h3 здесь ещё на ступень меньше.
     «БЛАГОУСТРОЙСТВО» — 15 знаков, на нём и ломалось */
  [data-r~="card"] h2 {
    font-size: clamp(24px, 3.6vw, 40px) !important;
  }
  [data-r~="card"] h3 {
    font-size: clamp(19px, 2.8vw, 30px) !important;
  }
  [data-r~="card"] h2,
  [data-r~="card"] h3 {
    overflow-wrap: anywhere;
  }


  /* --- Типографика ----------------------------------------- */

  h1,
  [data-r~="d-hero"] {
    font-size: clamp(34px, 6.6vw, 66px) !important;
  }

  h2,
  [data-r~="d-xl"] {
    font-size: clamp(30px, 5.6vw, 56px) !important;
  }

  h3,
  [data-r~="d-md"] {
    font-size: clamp(19px, 2.8vw, 28px) !important;
    min-height: 0 !important;
  }

  [data-r~="d-giant"] {
    font-size: clamp(56px, 15vw, 150px) !important;
  }

  [data-r~="d-lg"] {
    font-size: clamp(44px, 7.2vw, 84px) !important;
  }

  [data-r~="d-sm"] {
    font-size: clamp(17px, 2.2vw, 22px) !important;
  }

  /* Цифра над подписью: в строку они перестают помещаться
     уже на планшете, а не только на телефоне */
  [data-r~="numrow"] > * {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-right: 16px !important;
  }

  /* Ширины текстовых колонок, заданные в px */
  [data-r~="measure"] {
    width: auto !important;
    max-width: 62ch !important;
  }

  /* Правая колонка-лид переставала быть правой */
  [data-r~="lead-right"] {
    justify-content: flex-start !important;
  }

  /* --- Герой ------------------------------------------------ */

  [data-r~="hero"] {
    padding-top: var(--bar-h) !important;
    /* dvh вместо vh: адресная строка iOS Safari больше не рвёт макет */
    min-height: 100dvh !important;
  }

  [data-r~="hero-inner"] {
    padding-left: var(--pad-md) !important;
    padding-right: var(--pad-md) !important;
  }

  [data-r~="hero-gap"] {
    min-height: 56px !important;
  }

  [data-r~="hero-cardrow"] {
    gap: 28px !important;
  }

  /* Характеристики ЖК стоят в nowrap внутри overflow:hidden —
     на узком экране они не переносились, а обрезались кнопкой */
  [data-r~="hero-price"] {
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
  }
  [data-r~="hero-specs"] {
    white-space: normal !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding-bottom: 0 !important;
  }

  /* --- FAQ -------------------------------------------------- */
  [data-r~="faq"] summary {
    gap: 20px !important;
    padding: 20px 0 !important;
  }

  /* --- Форма ------------------------------------------------ */
  [data-r~="chips"] {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   3. <=767 — мобильный: одна колонка
   ============================================================ */
@media (max-width: 767.98px) {

  [data-r~="pad"] {
    padding-left: var(--pad-sm) !important;
    padding-right: var(--pad-sm) !important;
  }

  [data-r~="barinner"] {
    padding-left: var(--pad-sm) !important;
    padding-right: var(--pad-sm) !important;
  }

  [data-r~="hero-inner"] {
    padding-left: var(--pad-sm) !important;
    padding-right: var(--pad-sm) !important;
  }

  /* Всё, что ещё осталось многоколоночным, — в одну колонку */
  [data-r~="grid4"],
  [data-r~="grid3"],
  [data-r~="grid2"],
  [data-r~="foot"],
  [data-r~="foot3"],
  [data-r~="worklist"],
  [data-r~="numrow"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  [data-r~="worklist"] > :nth-child(3) {
    grid-column: auto;
  }

  /* Этапы: на телефоне только один столбец */
  [data-r~="stepband"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 40px !important;
    margin-top: 72px !important;
  }
  /* В одной колонке чередование «номер сверху / номер снизу» ставит
     две цифры подряд — номер всегда возвращается в начало шага */
  [data-r~="step"] {
    display: flex !important;
    flex-direction: column !important;
  }
  [data-r~="stepnum"] {
    order: -1 !important;
    margin-top: 0 !important;
  }
  [data-r~="steptext"] {
    margin-top: 24px !important;
  }
  [data-r~="hcard-num"] {
    font-size: clamp(44px, 12vw, 64px) !important;
  }
  [data-r~="stepfig"] {
    font-size: clamp(64px, 16vw, 88px) !important;
  }

  /* Спецификации 5-в-ряд читаются парами */
  [data-r~="grid5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Планировки: одна карточка на экран */
  [data-r~="grid-plans"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  [data-r~="card"] {
    min-height: 320px !important;
    padding: 22px !important;
  }

  /* Надзаголовок героя: «||| агентство недвижимости · Нальчик · с 2013» */
  [data-r~="eyebrow"] {
    margin-bottom: 14px !important;
    gap: 9px !important;
  }
  [data-r~="eyebrow"] > :last-child {
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }

  /* Кнопки: пара «залитая + призрачная» становится столбиком
     во всю ширину — тап-таргет вместо двух узких */
  [data-r~="btnrow"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  [data-r~="btnrow"] > a,
  [data-r~="btnrow"] > div {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [data-r~="rowwrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* Фильтры каталога: «Комнат [Все][Студия][1][2][3+]».
     Сам ряд переносится, а вот пара «подпись + группа кнопок»
     внутри — нет, она и распирала строку */
  [data-r~="tabrow"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  [data-r~="tabrow"] > div > div {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  [data-r~="tabrow"] > div > div > * {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Числовые блоки: цифра над подписью, а не рядом */
  [data-r~="numrow"] > * {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-right: 0 !important;
  }

  /* --- Типографика ----------------------------------------- */

  h1,
  [data-r~="d-hero"] {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.02 !important;
  }

  h2,
  [data-r~="d-xl"] {
    font-size: clamp(26px, 7.6vw, 34px) !important;
    line-height: 1 !important;
  }

  h3,
  [data-r~="d-md"] {
    font-size: clamp(17px, 4.6vw, 21px) !important;
  }

  [data-r~="d-giant"] {
    font-size: clamp(44px, 16vw, 68px) !important;
  }

  [data-r~="d-sm"] {
    font-size: 16px !important;
  }

  /* --- Герой ------------------------------------------------ */

  /* Статистика 13 / 500+ / 93% остаётся в три колонки:
     значения короткие, а вертикальный стек съел бы весь экран */
  [data-r~="hero-stats"] > * {
    padding-left: 14px !important;
  }
  [data-r~="hero-stats"] > :first-child {
    padding-left: 0 !important;
  }
  [data-r~="hero-stats"] [data-r~="stat-n"] {
    font-size: 22px !important;
  }
  [data-r~="hero-stats"] [data-r~="stat-l"] {
    font-size: 8.5px !important;
    letter-spacing: .06em !important;
    margin-top: 5px !important;
  }

  /* Карточка ЖК и главный CTA перестают делить строку:
     CTA уходит вниз на всю ширину */
  [data-r~="hero-cardrow"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }
  [data-r~="hero-cta"] {
    width: 100% !important;
    text-align: center !important;
    padding: 16px 20px !important;
  }
  [data-r~="hero-price"] {
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }
  [data-r~="hero-price"] > :first-child {
    font-size: 24px !important;
  }
  [data-r~="hero-specs"] {
    font-size: 13px !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    padding-bottom: 0 !important;
  }
  [data-r~="hero-meta"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  [data-r~="hero-meta"] > :last-child {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  [data-r~="hero-meta"] a {
    margin-right: 0 !important;
  }
  [data-r~="hero-gap"] {
    min-height: 24px !important;
  }

  /* --- Бренд-строка ---------------------------------------- */
  [data-r~="brand"] {
    font-size: 27vw !important;
    margin-top: -4.6vw !important;
  }
  [data-r~="brand-box"] {
    height: 21.5vw !important;
  }
  [data-r~="brandmeta"] {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* --- FAQ -------------------------------------------------- */
  [data-r~="faq"] summary {
    gap: 14px !important;
  }
  [data-r~="faq"] summary > :first-child {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  /* --- Форма ------------------------------------------------ */
  [data-r~="chips"] > * {
    padding: 13px 16px !important;
    font-size: 11px !important;
  }


  /* Кнопка презентации на всю ширину — тап-таргет вместо узкой */
  [data-r~="preslink"] {
    display: flex !important;
    width: 100% !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* --- Плашки-заглушки ------------------------------------- */
  [data-r~="stub"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 20px !important;
  }

  /* --- Галереи и медиа ------------------------------------- */
  [data-r~="media"] {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* Обложки ЖК заданы высотой 470px. На узкой колонке это
     превращало горизонтальный рендер в портретный кроп */
  [data-r~="zig-media"] {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  [data-r~="media-tall"] {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }
}

/* ============================================================
   4. Мобильная навигация
   Раскрытие без JS: <details> + <summary>.
   Рантайм макетов уже рендерит <details> (FAQ), так что новых
   зависимостей не появляется.
   ============================================================ */

[data-r~="mob"] summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms var(--eo), background-color 160ms var(--eo);
  -webkit-tap-highlight-color: transparent;
}
[data-r~="mob"] summary::-webkit-details-marker {
  display: none;
}
/* Emil: нажатие обязано давать физический отклик */
[data-r~="mob"] summary:active {
  transform: scale(.94);
}
[data-r~="mob"] summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Бургер → крестик */
[data-r~="burgerbox"] {
  display: block;
}
[data-r~="burger"] i {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 220ms var(--eo), opacity 160ms var(--eo);
}
[data-r~="burger"] i + i {
  margin-top: 5px;
}
details[open] [data-r~="burger"] i:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
details[open] [data-r~="burger"] i:nth-child(2) {
  opacity: 0;
}
details[open] [data-r~="burger"] i:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

[data-r~="mobpanel"] {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--bar-h);
  bottom: 0;
  z-index: 70;
  background: #FFFFFF;
  border-top: 1px solid #EAE2D6;
  padding: 28px var(--pad-md) 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Вход: не из scale(0) — из почти-видимого состояния */
@starting-style {
  [data-r~="mobpanel"] {
    opacity: 0;
    transform: translateY(-8px);
  }
}
[data-r~="mobpanel"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms var(--eo), transform 200ms var(--eo);
}

[data-r~="mobpanel"] a {
  font-family: 'Sofia Sans', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  color: #232A3A;
  padding: 15px 0;
  border-bottom: 1px solid #EAE2D6;
  transition: color 160ms var(--eo), padding-left 200ms var(--eo);
}
[data-r~="mobpanel"] a:active {
  padding-left: 6px;
  color: #0F131C;
}
[data-r~="mobpanel"] [data-r~="mobfoot"] {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-r~="mobpanel"] [data-r~="mobfoot"] a {
  border-bottom: none;
  padding: 0;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
[data-r~="mobpanel"] [data-r~="mobhours"] {
  font-size: 13px;
  color: rgba(35, 42, 58, .55);
}

@media (max-width: 767.98px) {
  [data-r~="mobpanel"] {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
  }
  [data-r~="mobpanel"] a {
    font-size: 22px;
    padding: 13px 0;
  }
}

/* Кнопка звонка в мобильной шапке */
[data-r~="mobcall"] {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  transition: transform 160ms var(--eo);
  -webkit-tap-highlight-color: transparent;
}
[data-r~="mobcall"]:active {
  transform: scale(.94);
}

/* Тёмная шапка героя: мобильные контролы наследуют светлый цвет */
[data-r~="mob-on-dark"] {
  color: #EDE9E2;
}

/* ============================================================
   5. Уважение к prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-r~="mobpanel"],
  [data-r~="burger"] i,
  [data-r~="mob"] summary,
  [data-r~="mobcall"],
  [data-r~="mobpanel"] a {
    transition: none !important;
  }
}

/* Ховеры только там, где есть настоящий курсор */
@media (hover: hover) and (pointer: fine) {
  [data-r~="mob"] summary:hover {
    background-color: rgba(128, 128, 128, .1);
  }
  [data-r~="mobpanel"] a:hover {
    padding-left: 6px;
  }
}