/* Страница жилого комплекса — по макетам «ЖК / Десктоп 1920» (112:161)
   и «ЖК / Телефон 390» (130:187).

   Колонка здесь 1440 внутри кадра 1920 (поля 240), а не 1680, как в каталоге:
   так в макете. Обводки — внутренней тенью, а не рамкой: рамка добавляет
   пиксель к размеру, и карточка перестаёт сходиться с макетом. */

.zk__in {
  max-width: calc(1440px + var(--side) * 2);
  margin: 0 auto;
  padding: 0 var(--side);
}

/* Липкая полоса внизу перекрывает конец подвала — освобождаем ей место. */
body.zk { padding-bottom: 84px; }

/* ─── Первый экран (112:163) ──────────────────────────────────────────────
   Обложка 1920×620, название прижато к низу, карточка предложения поверх. */

.zh { position: relative; }

.zh__cover { position: relative; height: 620px; overflow: hidden; }

/* Фотографий комплексов источники не присылают. Подложка нейтральная:
   силуэт города вместо снимка чужого дома. */
.zh__photo { position: absolute; inset: 0; background: linear-gradient(155deg, #313d4d 0%, #1b222c 55%, #12161d 100%); }
.zh__sky {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px;
  background: url("/static/img/skyline.svg") bottom center / auto 100% no-repeat;
  opacity: .14;
}
/* Фотография дома. object-fit: cover — снимки приходят разных пропорций, а
   обложка везде одной высоты; иначе один дом растянут, другой сплюснут. */
.zh__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.zh__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,15,.55) 0%, rgba(10,13,15,.12) 38%, rgba(10,13,15,.78) 100%);
}

.zh__in {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 40px; padding-bottom: 60px;
}

.zh__crumbs { display: flex; gap: 8px; font-size: 13px; font-weight: 500; line-height: 17.76px; color: #fff; }
.zh__crumbs a { color: #fff; text-decoration: none; }
.zh__crumbs a:hover { text-decoration: underline; }
.zh__crumbs span { color: rgba(255,255,255,.72); }

.zh__name { max-width: 900px; }
.zh__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.zh__badge {
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 17.76px;
}
.zh__badge--ghost { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); }

.zh__h1 {
  margin: 0; color: #fff;
  font-size: 64px; font-weight: 800; line-height: 64px; letter-spacing: -1.92px;
}
.zh__addr { margin: 12px 0 0; color: #fff; font-size: 17px; font-weight: 500; line-height: 23.22px; }

/* Карточка 400×306 лежит на обложке справа, по нижнему краю названия.
   Обёртка держит её в колонке 1440 и не перехватывает нажатия мимо. */
.zh__cardwrap {
  position: absolute; left: 0; right: 0; bottom: 60px;
  display: flex; justify-content: flex-end; pointer-events: none;
}
.zh__card {
  pointer-events: auto; width: 400px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; background: #fff; border-radius: var(--r-card);
  box-shadow: 0 18px 40px rgba(10,13,15,.28);
}
.zh__price { display: flex; flex-direction: column; gap: 2px; }
.zh__pricecap { font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-3); }
.zh__pricebig { font-size: 34px; font-weight: 800; line-height: 46.44px; letter-spacing: -0.68px; color: var(--ink); }
.zh__pricenote { font-style: normal; font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-2); }

.zh__cta, .zh__ghost {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-fld); text-decoration: none;
}
.zh__cta { height: 56px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; }
.zh__cta:hover { background: var(--accent-2); }
.zh__ghost { height: 52px; color: var(--ink); font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.zh__ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.zh__hint { margin: 0; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }

/* ─── Полоса доверия (112:180) ───────────────────────────────────────────── */

.ztr { background: var(--bg-soft); padding: 28px 0; }
.ztr__row { display: flex; gap: 32px; }
.ztr__item { flex: 1; display: flex; gap: 12px; }
/* Галочка 14×11 линией 2.4 — как в макете, без картинки. */
.ztr__ok {
  flex: none; width: 14px; height: 8px; margin-top: 6px;
  border-left: 2.4px solid var(--accent); border-bottom: 2.4px solid var(--accent);
  transform: rotate(-45deg);
}
.ztr__item span { display: flex; flex-direction: column; gap: 3px; }
.ztr__item b { font-size: 16px; font-weight: 600; line-height: 21.86px; color: var(--ink); }
.ztr__item i { font-style: normal; font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-2); }

/* ─── Квартиры в продаже (112:186) ───────────────────────────────────────── */

.zfl { padding: 80px 0; }
.zfl .zk__in { display: flex; flex-direction: column; gap: 32px; }

.zfl__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.zfl__title { display: flex; flex-direction: column; gap: 6px; }
.zfl__h2 { margin: 0; font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1px; }
.zfl__sub { margin: 0; font-size: 15px; font-weight: 500; line-height: 20.49px; color: var(--ink-2); }
.zfl__all {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--r-fld);
  box-shadow: inset 0 0 0 1px var(--line); text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink);
}
.zfl__all i { font-style: normal; color: var(--accent-2); }
.zfl__all:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* Комнатность плашками с числами (112:196). */
.zfl__rooms { display: flex; flex-wrap: wrap; gap: 8px; }
.zfl__room {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--bg-soft); text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink);
}
.zfl__room i { font-style: normal; font-size: 13px; font-weight: 600; line-height: 17.76px; color: var(--ink-3); }
.zfl__room:hover { background: #e9ebef; }
.zfl__room.is-on { background: var(--accent); color: #fff; }
.zfl__room.is-on i { color: #fff; }

/* Поля фильтра — тот же компонент, что в каталоге (.ff), но их четыре
   на колонку 1440, поэтому предел ширины снимается. */
.zfl__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zfl__row .ff { flex: 1 1 300px; max-width: none; }
.zfl__tgl, .zfl__mobbtn { display: none; }

/* Ползунки цены и площади стоят в той же строке, что поля. Ширина им нужна
   больше, чем полю: на дорожке две подписи — «от» и «до», — и на 300px они
   налезают друг на друга. */
.zfl__row .rng { flex: 1 1 340px; }

/* Порядок выдачи — под строкой фильтров, над сеткой. Сами кнопки берут
   оформление из flats.css: это тот же компонент, что в каталоге. */
.zfl__sorts { margin: 20px 0 0; }

/* Сетка 5×275 с зазором 16 (112:210). */
.zfl__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.zc {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.zc:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.zc__plan { position: relative; display: block; height: 260px; background: var(--bg-soft); }
.zc__plan img { width: 100%; height: 100%; object-fit: contain; }
.zc__count {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(29,34,42,.66); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 15px;
}
.zc__body { display: flex; flex-direction: column; gap: 5px; padding: 16px; }
.zc__price {
  font-size: 20px; font-weight: 800; line-height: 27.32px; letter-spacing: -0.4px;
  color: var(--ink); text-decoration: none;
}
.zc__price:hover { color: var(--accent-2); }
.zc__meta { font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink); }
.zc__sub { font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }

.zfl__more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 21px 0; border-radius: var(--r-fld);
  background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none; font-size: 16px; font-weight: 600; line-height: 21.86px; color: var(--ink);
}
.zfl__more i { font-style: normal; color: var(--ink-3); }
.zfl__more:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* Все квартиры дома списком — перелинковка для робота (§8).

   Оформлен сдержанно и свёрнут: это оглавление дома, а не витрина.
   Витрина — сетка карточек выше. */
.zall { margin-top: 28px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.zall__sum {
  padding: 18px 24px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.zall__sum::-webkit-details-marker { display: none; }
.zall__sum::after { content: "▾"; float: right; color: var(--ink-3); }
.zall[open] .zall__sum::after { content: "▴"; }
.zall__sum i { font-style: normal; color: var(--ink-3); }
.zall__sum:hover { color: var(--accent-2); }
.zall__list {
  margin: 0; padding: 0 24px 20px; list-style: none;
  columns: 280px 3; column-gap: 28px;
}
.zall__list li {
  break-inside: avoid; padding: 5px 0;
  font-size: 14px; line-height: 20px;
}
.zall__list a { color: var(--ink); text-decoration: none; }
.zall__list a:hover { color: var(--accent-2); text-decoration: underline; }
.zall__list span { color: var(--ink-3); }

/* Пустая выдача и дом без квартир (261:1080). */
.zfl__empty {
  max-width: 860px; padding: 32px 36px;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
}
.zfl__empty b { font-size: 20px; font-weight: 800; line-height: 27.32px; }
.zfl__empty p { margin: 0; font-size: 15px; font-weight: 500; line-height: 23.22px; color: var(--ink-2); }
.zfl__reset {
  align-self: flex-start; margin-top: 4px;
  font-size: 15px; font-weight: 600; color: var(--accent-2); text-decoration: none;
}
.zfl__reset:hover { text-decoration: underline; }

/* ─── Зачем через нас (112:224) ──────────────────────────────────────────── */

.zwh { padding: 80px 0; }
.zwh .zk__in { display: flex; flex-direction: column; gap: 32px; }
.zwh__head { display: flex; flex-direction: column; gap: 8px; }
.zwh__h2 { margin: 0; font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1px; }
.zwh__sub { margin: 0; font-size: 16px; font-weight: 500; line-height: 21.86px; color: var(--ink-2); }

.zwh__args { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zwh__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 32px; border-radius: var(--r-card); background: var(--bg-soft);
}
.zwh__card b { font-size: 20px; font-weight: 700; line-height: 27.32px; }
.zwh__card p { margin: 0; font-size: 15px; font-weight: 500; line-height: 23.22px; color: var(--ink-2); }

.zwh__denis {
  display: grid; grid-template-columns: 180px 1fr; gap: 10px 32px;
  padding: 32px; border-radius: var(--r-card); background: var(--accent-bg);
}
.zwh__ava { grid-row: 1 / span 3; align-self: center; width: 180px; height: 180px; border-radius: var(--r-pill); object-fit: cover; }
.zwh__who {
  grid-column: 2; align-self: end;
  font-size: 12px; font-weight: 700; line-height: 16.39px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--accent-2);
}
.zwh__who i { font-style: normal; }
.zwh__who i::before { content: " · "; }
.zwh__quote {
  grid-column: 2; margin: 0;
  font-size: 22px; font-weight: 600; line-height: 30.8px; letter-spacing: -0.33px; color: var(--ink);
}
.zwh__acts { grid-column: 2; display: flex; gap: 12px; margin-top: 6px; }
.zwh__btn, .zwh__phone {
  display: inline-flex; align-items: center; padding: 15px 24px;
  border-radius: var(--r-fld); text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 20.49px;
}
.zwh__btn { background: var(--accent); color: #fff; }
.zwh__btn:hover { background: var(--accent-2); }
.zwh__phone { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* ─── Уникальный текст (§8; в макете блока нет) ──────────────────────────── */

.zab { padding: 0 0 80px; }
.zab__h2 { margin: 0 0 16px; font-size: 28px; font-weight: 800; line-height: 38.24px; letter-spacing: -0.7px; }
/* pre-line сохраняет деление на абзацы из data/seo-texts.csv, не позволяя
   тексту прийти в разметку разметкой. */
.zab__text { max-width: 900px; white-space: pre-line; font-size: 16px; font-weight: 500; line-height: 26px; color: var(--ink-2); }

/* ─── Где находится (112:240) ────────────────────────────────────────────── */

.zmap { padding: 0 0 80px; }
.zmap .zk__in { display: flex; flex-direction: column; gap: 32px; }
.zmap__head { display: flex; flex-direction: column; gap: 6px; }
.zmap__h2 { margin: 0; font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1px; }
.zmap__sub { margin: 0; font-size: 15px; font-weight: 500; line-height: 20.49px; color: var(--ink-2); }

.zmap__wrap { position: relative; }
.zmap__prev {
  position: relative; height: 440px; border-radius: var(--r-card);
  background: #e9edf0; overflow: hidden;
}
.zmap__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 20.49px;
  box-shadow: 0 8px 18px rgba(15,23,33,.28);
}
.zmap__pin i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.zmap__open {
  position: absolute; left: 24px; bottom: 24px;
  padding: 14px 22px; border-radius: var(--r-fld);
  background: #fff; color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 20.49px;
  box-shadow: 0 6px 14px rgba(15,23,33,.18);
}
.zmap__addr {
  position: absolute; right: 24px; top: 24px; width: 360px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 24px; border-radius: var(--r-card); background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,33,.2);
}
.zmap__cap { font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }
.zmap__val { font-size: 18px; font-weight: 700; line-height: 24.59px; color: var(--ink); }
.zmap__note { font-style: normal; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }
.zmap__route {
  display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 8px;
  border-radius: var(--r-fld); box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent-2); text-decoration: none; font-size: 15px; font-weight: 600;
}
.zmap__route:hover { background: var(--accent-bg); }

/* ─── Что ещё строится рядом (112:252) ───────────────────────────────────── */

.znb { padding: 0 0 80px; }
.znb .zk__in { display: flex; flex-direction: column; gap: 32px; }
.znb__head { display: flex; flex-direction: column; gap: 6px; }
.znb__h2 { margin: 0; font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1px; }
.znb__sub { margin: 0; font-size: 15px; font-weight: 500; line-height: 20.49px; color: var(--ink-2); }
.znb__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.nc {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit;
}
.nc:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.nc__photo {
  position: relative; display: block; height: 190px; overflow: hidden;
  background: linear-gradient(155deg, #e9edf0, #dbe1e8);
}
.nc__photo img { width: 100%; height: 100%; object-fit: cover; }
.nc__dist {
  position: absolute; left: 12px; top: 12px; font-style: normal;
  padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.94);
  font-size: 12px; font-weight: 600; line-height: 16.39px; color: var(--ink);
}
.nc__body { display: flex; flex-direction: column; gap: 5px; padding: 16px; }
.nc__name { font-size: 17px; font-weight: 700; line-height: 23.22px; }
.nc__price { font-style: normal; font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink-3); }
.nc__price--on { color: var(--accent-2); }
.nc__meta { font-style: normal; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }

/* ─── Липкая полоса (112:246) ────────────────────────────────────────────── */

.zst {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: 84px; background: #fff; box-shadow: 0 -6px 24px rgba(10,13,15,.14);
}
.zst__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.zst__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zst__txt b { font-size: 16px; font-weight: 700; line-height: 21.86px; }
.zst__txt i { font-style: normal; font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-2); }
.zst__act { display: flex; align-items: center; gap: 12px; }
.zst__phone { font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink); text-decoration: none; }
.zst__cta {
  display: inline-flex; align-items: center; height: 52px; padding: 0 28px;
  border-radius: var(--r-fld); background: var(--accent); color: #fff;
  text-decoration: none; font-size: 16px; font-weight: 700;
}
.zst__cta:hover { background: var(--accent-2); }

/* ─── Срезы дома по комнатности ──────────────────────────────────────────── */

/* Отдельные страницы «однушки в этом доме». Блок намеренно скромный: он не
   витрина, а перекрёсток — человеку показывает, что выбор можно сузить, а
   роботу открывает страницы, до которых иначе он дошёл бы только из карты
   сайта. Заголовок на ступень тише соседних разделов: раздел служебный. */

.zrp { padding: 0 0 64px; }
.zrp .zk__in { display: flex; flex-direction: column; gap: 20px; }
.zrp__h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 38px; letter-spacing: -0.5px; }
.zrp__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.zrp__item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: inherit; background: var(--bg-soft);
  transition: border-color .15s, background .15s;
}
.zrp__item:hover { border-color: var(--ink-3); background: var(--bg); }
.zrp__item b { font-size: 16px; font-weight: 700; line-height: 22px; }
.zrp__item i { font-style: normal; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--ink-2); }

/* ─── Ноутбук ────────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .zfl__grid { grid-template-columns: repeat(3, 1fr); }
  .znb__grid { grid-template-columns: repeat(2, 1fr); }
  .zwh__args { grid-template-columns: 1fr; }
  .zrp__list { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Телефон 390 (130:187) ──────────────────────────────────────────────── */

@media (max-width: 760px) {
  body.zk { padding-bottom: 78px; }

  .zrp { padding-bottom: 40px; }
  .zrp__h2 { font-size: 22px; line-height: 30px; }
  .zrp__list { grid-template-columns: 1fr; }

  /* Обложка 390×400, название прижато к её низу; карточка предложения
     уходит из-под обложки в отдельный блок (130:196). */
  .zh__cover { height: 400px; }
  .zh__in { padding-top: 16px; padding-bottom: 24px; }
  .zh__h1 { font-size: 30px; line-height: 31.5px; letter-spacing: -0.75px; }
  .zh__addr { margin-top: 8px; font-size: 14px; line-height: 19.12px; }
  .zh__badges { margin-bottom: 8px; }
  .zh__badge { padding: 6px 12px; font-size: 12px; line-height: 16.39px; }

  .zh__cardwrap { position: static; display: block; padding-top: 24px; padding-bottom: 24px; }
  .zh__card { width: auto; padding: 0; border-radius: 0; box-shadow: none; }
  .zh__pricebig { font-size: 30px; line-height: 41px; letter-spacing: -0.6px; }
  .zh__cta { height: 54px; }
  .zh__ghost { height: 50px; }

  .ztr { padding: 24px 0; }
  .ztr__row { flex-direction: column; gap: 12px; }
  .ztr__item b { font-size: 14px; line-height: 19.12px; }
  .ztr__item i { font-size: 12px; line-height: 16.39px; }

  .zfl { padding: 40px 0; }
  .zfl .zk__in { gap: 16px; }
  .zfl__h2 { font-size: 28px; line-height: 38.24px; letter-spacing: -0.7px; }
  .zfl__sub { font-size: 12px; line-height: 16.39px; }
  /* Кнопка «Смотреть все» на телефоне не нужна: её место занимает
     кнопка фильтров, а список и так идёт следом. */
  .zfl__all { display: none; }

  /* Плашки комнатности лентой: в макете строка шире экрана. */
  .zfl__rooms {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side);
  }
  .zfl__rooms::-webkit-scrollbar { display: none; }
  .zfl__room { flex: none; padding: 10px 16px; font-size: 14px; line-height: 19.12px; }

  /* Поля спрятаны за кнопкой. Флажок, а не скрипт: без JS фильтры обязаны
     открываться (§2, инвариант 1). */
  .zfl__mobbtn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 16px; border-radius: var(--r-fld);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink); cursor: pointer;
  }
  .zfl__mobbtn i { font-style: normal; color: var(--accent-2); }
  .zfl__row { display: none; flex-direction: column; align-items: stretch; }
  .zfl__tgl:checked ~ .zfl__row { display: flex; }
  .zfl__row .ff { flex: none; max-width: none; }
  /* 🔴 Ползунку основа тоже снимается. В колонке основа flex-basis становится
     ВЫСОТОЙ, а не шириной: с «flex: 1 1 340px» каждый ползунок вырастал на
     треть экрана, и до полей под ними приходилось листать. */
  .zfl__row .rng { flex: none; }

  /* Квартиры лентой 240 с прокруткой (130:214). */
  .zfl__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 240px;
    gap: 12px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side);
  }
  .zfl__grid::-webkit-scrollbar { display: none; }
  .zc__plan { height: 210px; }
  .zc__body { padding: 14px; gap: 4px; }
  .zc__price { font-size: 18px; line-height: 24.59px; letter-spacing: -0.36px; }
  .zc__meta { font-size: 13px; line-height: 17.76px; }
  .zc__sub { font-size: 11px; line-height: 15px; }
  .zfl__more { padding: 18px 0; font-size: 15px; line-height: 20.49px; }
  .zfl__empty { padding: 20px 18px; }

  .zwh { padding: 40px 0; }
  .zwh .zk__in { gap: 24px; }
  .zwh__h2 { font-size: 26px; line-height: 28.6px; letter-spacing: -0.65px; }
  .zwh__sub { font-size: 14px; line-height: 19.12px; }
  .zwh__args { gap: 12px; }
  .zwh__card { padding: 18px; gap: 6px; }
  .zwh__card b { font-size: 17px; line-height: 23.22px; }
  .zwh__card p { font-size: 14px; line-height: 21.7px; }

  /* Денис: фото 64 рядом с именем, дальше цитата и кнопка во всю ширину. */
  .zwh__denis { grid-template-columns: 64px 1fr; gap: 12px; padding: 20px 18px; }
  .zwh__ava { grid-row: auto; width: 64px; height: 64px; align-self: center; }
  .zwh__who {
    grid-column: 2; align-self: center; text-transform: none;
    display: flex; flex-direction: column; gap: 2px;
    font-size: 17px; font-weight: 700; line-height: 23.22px; color: var(--ink);
  }
  .zwh__who i { font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--accent-2); }
  .zwh__who i::before { content: none; }
  .zwh__quote { grid-column: 1 / -1; margin-top: 4px; font-size: 17px; line-height: 23.8px; letter-spacing: 0; }
  .zwh__acts { grid-column: 1 / -1; flex-direction: column; }
  .zwh__btn, .zwh__phone { justify-content: center; }

  .zab { padding: 0 0 40px; }
  .zab__h2 { font-size: 22px; line-height: 30px; }
  .zab__text { font-size: 15px; line-height: 24px; }

  .zmap { padding: 0 0 40px; }
  .zmap .zk__in { gap: 16px; }
  .zmap__h2 { font-size: 26px; line-height: 35.49px; letter-spacing: -0.65px; }
  .zmap__sub { font-size: 13px; line-height: 17.76px; }
  /* Превью во всю ширину экрана, как в макете. */
  .zmap__prev {
    height: 260px; border-radius: 0;
    margin: 0 calc(var(--side) * -1);
  }
  .zmap__pin { padding: 9px 14px; font-size: 13px; line-height: 17.76px; }
  .zmap__open { left: var(--side); bottom: 12px; padding: 12px 16px; font-size: 14px; }
  .zmap__addr {
    position: static; width: auto; margin-top: 12px; padding: 18px;
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .znb { padding: 0 0 40px; }
  .znb .zk__in { gap: 16px; }
  .znb__h2 { font-size: 26px; line-height: 35.49px; letter-spacing: -0.65px; }
  .znb__sub { font-size: 13px; line-height: 17.76px; }
  .znb__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 240px;
    gap: 12px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side);
  }
  .znb__grid::-webkit-scrollbar { display: none; }
  .nc__photo { height: 140px; }
  .nc__body { padding: 12px; gap: 3px; }
  .nc__name { font-size: 15px; line-height: 20.49px; }
  .nc__price { font-size: 13px; line-height: 17.76px; }
  .nc__meta { font-size: 11px; line-height: 15px; }

  .zst { height: 78px; }
  /* Название дома на телефоне не повторяем: оно стоит в заголовке выше,
     а места хватает только на цену и кнопку. */
  .zst__txt b { display: none; }
  .zst__txt i { font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink); }
  .zst__phone { display: none; }
  .zst__cta { height: 48px; padding: 0 20px; font-size: 15px; }
}