/* PEYLAA Phuket — лёгкий CSS, системные шрифты, ноль внешних зависимостей */
:root{
  /* ── ШКАЛЫ ФАБРИКИ (этап 2 фейслифта, 23.07.2026). Новые значения берём ТОЛЬКО отсюда.
     --fs-scale: 12 13 14 15 16 18 20 22 24 26 + clamp() для h1/h2
     --sp-scale: 4 8 12 16 20 24 32 48 (кратно 4)
     --r-scale: 8 14 999 ── */

  --olive:#16514c;--olive-d:#0e3a37;--sand:#f5f1e9;--ink:#1b241f;--mut:#5f6b64;
  --line:#e4ded2;--acc:#b8955a;--wa:#15873d;--r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--olive);text-decoration:none}
a:hover{color:var(--olive-d)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
header{position:sticky;top:0;z-index:50;background:#fffffff2;backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;min-height:60px}
.logo{font-weight:800;font-size:18px;color:var(--ink);letter-spacing:.02em;white-space:nowrap;flex:0 0 auto}
.logo em{color:var(--olive);font-style:normal}
/* меню в одну строку: при нехватке места прокручивается вбок, а не ломает шапку */
.nav nav{display:flex;gap:12px;font-size:14px;margin-left:auto;align-items:center;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1 1 auto;justify-content:flex-start}
/* когда меню влезает — прижато вправо auto-отступом ПЕРВОГО пункта; когда не влезает —
   auto схлопывается в 0 и лента скроллится от левого края, НЕ заезжая под логотип.
   (Старый justify-content:flex-end прятал начало меню под логотип без шанса доскроллить.) */
.nav nav > a:first-child{margin-left:auto}
/* промежуточные ширины: меню из 10 пунктов + сердечко + CTA не влезает при 14px —
   плавно сжимаем, чтобы до бургер-порога (900px) всё помещалось без обрезки EN */
@media(max-width:1320px){.nav nav{font-size:14px;gap:10px}}
@media(max-width:1160px){
  .nav nav{font-size:13px;gap:8px}
  .nav nav a{padding:12px 1px}
  .nav > .btn{padding:10px 13px;font-size:14px}
  .logo{font-size:17px}
  .nav{gap:10px}
}
.nav nav::-webkit-scrollbar{display:none}
.nav nav a{color:#444;padding:12px 2px;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.nav > .btn{flex:0 0 auto;white-space:nowrap}
/* узкие экраны: логотип и CTA компактнее, меню — горизонтальная лента */
@media(max-width:1100px){
  .nav nav{font-size:13px;gap:10px;justify-content:flex-start}
  .nav nav > a:first-child{margin-left:0}
  .nav > .btn{padding:10px 14px;font-size:14px}
  .logo{font-size:16px}
}
.nav nav a[aria-current]{color:var(--olive);font-weight:600}
/* доступность: удобные тач-таргеты (≥44px) в футере и подписях */
footer .cols a{display:inline-block;padding:6px 0;min-height:32px}
footer .fine a{padding:4px 0;display:inline-block}
.skip{position:absolute;left:-9999px;top:0;background:var(--olive);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
:where(a,button,input,select,summary):focus-visible{outline:3px solid var(--olive);outline-offset:2px;border-radius:4px}
.btn{display:inline-block;background:var(--olive);color:#fff!important;padding:12px 22px;border-radius:12px;font-weight:600;border:0;cursor:pointer;font-size:15px;position:relative;overflow:hidden}
.btn:hover{background:var(--olive-d)}
/* блик: световая полоса пробегает по кнопке раз в ~4 секунды */
.btn::before{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:skewX(-25deg) translateX(0);animation:btnShine 4s ease-in-out infinite;pointer-events:none}
@keyframes btnShine{
  0%{transform:skewX(-25deg) translateX(0)}
  22%{transform:skewX(-25deg) translateX(540%)}
  100%{transform:skewX(-25deg) translateX(540%)}
}
@media (prefers-reduced-motion: reduce){.btn::before{animation:none}}
.btn-wa{background:var(--wa)}
.btn-wa:hover{background:#0f7a3d}
.btn-o{background:transparent;color:var(--olive)!important;border:1.5px solid var(--olive)}
.btn-o:hover{background:var(--sand)}
/* Telegram-синий — как в круглом виджете связи (contact-widget.js). */
.btn-tg{background:#1f7fac}
.btn-tg:hover{background:#2589b8}
/* Пара кнопок-мессенджеров вместо формы заявки: во всю ширину, стопкой. */
.lead-btns{display:grid;gap:10px;margin:14px 0 0}
.lead-btns .btn{text-align:center;padding:14px 18px;font-size:16px}
.nav .btn{padding:8px 16px;font-size:14px}

/* hero */
.hero{background:linear-gradient(160deg,#0b3330 0%,#16514c 55%,#227068 100%);color:#fff;padding:56px 0 48px}
.hero h1{font-size:clamp(28px,4.5vw,44px);line-height:1.15;margin-bottom:14px}
.hero .sub{font-size:18px;color:#e9ecdc;max-width:640px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin-top:28px}
.fact{background:#ffffff14;border:1px solid #ffffff2b;border-radius:var(--r);padding:14px 16px}
.fact b{display:block;font-size:20px}
.fact span{font-size:13px;color:#dfe4cd}
.hero .cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* answer-first */
.answer{background:var(--sand);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:32px 0}
.answer p{font-weight:500}
/* Блок «ответ первым» — гибрид: ярлык «Кратко» + ведущая фраза (её выхватывает сниппет)
   + факты списком (читаемо человеку, цитируемо AI) + мелкая строка с датой/«подробнее».
   Плотность чисел сохраняется, стена текста уходит. Стандарт — см. design-usability-guide. */
/* Ярлык «Кратко» — инлайн-зачин в начале ведущей фразы (не отдельной строкой:
   пилюля + первые слова на одной строке, дальше текст переносится на всю ширину). */
.answer .lbl{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--olive-d);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px;
  margin-right:8px;vertical-align:2px}
.answer .lead{font-weight:600;font-size:16px;line-height:1.55;margin:0 0 12px}
.answer ul.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.answer ul.facts li{position:relative;padding-left:24px;font-weight:500;font-size:15px;line-height:1.45}
.answer ul.facts li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--olive);font-weight:700}
.answer .upd{font-size:13px;color:var(--mut);margin-top:12px;font-weight:400}

/* sections */
section{padding:34px 0}
h2{font-size:clamp(22px,3vw,30px);margin-bottom:18px;line-height:1.25}
h3{font-size:18px;margin:22px 0 10px}
p+p{margin-top:12px}
.lead{color:#3c4433}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
/* КОРЕНЬ ВСЕХ «СТРАНИЦА ЕЗДИТ ВБОК»: у grid- и flex-элементов min-width по умолчанию
   равен auto, то есть «не уже своего содержимого». Достаточно одной неразрывной
   строки внутри (цена 30px, ячейка с td b{white-space:nowrap}, широкая карусель) —
   и колонка отказывается сжиматься, распирая всю страницу. min-width:0 разрешает
   сжатие; переполнение остаётся внутри блока, а не выносит вьюпорт. */
.grid2 > *,.grid3 > *,.gal > *{min-width:0}
.gal,.car,.car-track,.car-thumbs{max-width:100%}
/* Карточка лота: фото шире, панель с ценой уже. Раньше это жило инлайном
   в 492 файлах и перебивало мобильный collapse — страница ездила вбок,
   а блок с ценой было не видно (22.07). */
.grid2.u-top{grid-template-columns:1.25fr 1fr}
/* Панель цены едет за пальцем вдоль длинной галереи — но только в две колонки. */
.u-side{position:sticky;top:74px}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{margin-top:0}
.tick{list-style:none}
.tick li{padding:8px 0 8px 30px;position:relative}
.tick li::before{content:"✓";position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:var(--olive);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}

/* tables */
table{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line)}
th{background:var(--sand);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#55603f}
tr:hover td{background:#fafaf5}
td b{white-space:nowrap}
.tbl-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c3c8b4 #f1efe9}
/* Видимая тонкая полоса прокрутки (где браузер её рисует — Android/десктоп).
   На iOS полосу форсировать нельзя, поэтому надёжный сигнал — бейдж ниже. */
.tbl-scroll::-webkit-scrollbar{height:7px}
.tbl-scroll::-webkit-scrollbar-thumb{background:#c3c8b4;border-radius:999px}
.tbl-scroll::-webkit-scrollbar-track{background:#f1efe9;border-radius:999px}
/* Подсказка прокрутки — бейдж «листайте ↔» в углу таблицы (как в Tilda).
   Зачем не полоса: на мобиле браузеры прячут скроллбар, и что таблица едет вбок —
   неочевидно. Бейдж виден всегда, пока таблица шире экрана; гаснет после первого
   движения. Обёртку .tbl-hintwrap создаёт js/tables.js вокруг таблиц, которые
   реально не влезают, — поэтому на влезающих таблицах и на десктопе его нет. */
.tbl-hintwrap{position:relative}
.tbl-hint{position:absolute;top:8px;right:10px;z-index:3;pointer-events:none;
  background:rgba(11,45,42,.85);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:5px 12px;border-radius:999px;display:inline-flex;gap:5px;align-items:center;
  box-shadow:0 2px 8px rgba(8,32,30,.25);transition:opacity .35s}
.tbl-hintwrap.scrolled .tbl-hint{opacity:0}

/* promo */
.promo-box{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:linear-gradient(120deg,#0e3a37,#16514c);border-radius:var(--r);padding:26px 28px;color:#fff}
.promo-box .p-txt{flex:1;min-width:min(260px,100%)}
.promo-box .p-tag{display:inline-block;background:var(--acc);color:#2c331d;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 12px;margin-bottom:10px}
.promo-box h2{color:#fff;margin-bottom:6px;font-size:24px}
.promo-box p{color:#e6ead2;font-size:15px}
.promo-box .p-date{font-size:13px;color:#c8cfa9;margin-top:6px}

/* currency switch */
.cur-switch{display:flex;align-items:center;gap:8px;margin:6px 0 4px;font-size:14px;color:var(--mut);flex-wrap:wrap}
.cur-switch button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer;color:#444}
.cur-switch button.on{background:var(--olive);border-color:var(--olive);color:#fff;font-weight:600}
.cur-switch button:hover:not(.on){background:var(--sand)}

/* breadcrumbs */
.bc{font-size:13px;color:var(--mut);padding:14px 0 0}
.bc a{color:var(--mut)}
.bc a:hover{color:var(--olive)}

/* faq */
details{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:10px;background:#fff}
details[open]{background:var(--sand)}
summary{font-weight:600;cursor:pointer;list-style:none;position:relative;padding-right:28px}
summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:22px;color:var(--olive)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:#3c4433}

/* form */
/* margin-inline:auto — блок 560px висел у левого края в контейнере 1040px,
   и правая половина экрана оставалась пустой. Центрируем. */
.lead-box{background:var(--sand);border:1px solid var(--line);border-radius:var(--r);padding:26px;max-width:560px;margin-inline:auto}
.lead-box h2{font-size:22px}
.lead-box .note{font-size:14px;color:var(--mut);margin-bottom:16px}
.lead-box input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px;margin-bottom:10px;background:#fff}
.lead-box input:focus{outline:2px solid var(--olive);border-color:var(--olive)}
.agree{font-size:13px;color:var(--mut);margin:6px 0 14px}
/* выбор канала связи: один тап, WhatsApp по умолчанию */
.chan{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.chan label{border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-size:14px;cursor:pointer;background:#fff;color:#444;user-select:none}
.chan input{display:none}
.chan i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:1px}
.chan .i-wa{background:#25d366}.chan .i-tg{background:#2AABEE}.chan .i-call{background:var(--acc)}
.chan label:has(input:checked){background:var(--olive);border-color:var(--olive);color:#fff;font-weight:600}
.chan-q{font-size:13px;color:var(--mut);margin-bottom:6px}
.ok-msg{display:none;color:var(--olive-d);font-weight:600;margin-top:10px}

/* gallery placeholders */
.ph{border-radius:var(--r);min-height:240px;aspect-ratio:16/10;background:linear-gradient(135deg,#d7d9c5,#b9c096);display:flex;align-items:center;justify-content:center;color:#5f6a41;font-size:13px;text-align:center;padding:10px;overflow:hidden}
.photo{border-radius:var(--r);display:block;width:100%;min-height:240px;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);background:#eceadf;overflow:hidden;color:transparent}
.photo.plan{aspect-ratio:1/1;object-fit:contain;background:#fff}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;align-items:start}
section{position:relative;background:#fff}
main section{clear:both}

/* схема платежей: простая лента 4×25% без перегруза */
.paysteps{display:flex;gap:0;flex-wrap:wrap;margin:18px 0 6px}
.pstep{flex:1;min-width:130px;position:relative;padding:0 14px 0 0;text-align:center}
.pstep .pp{font-size:24px;font-weight:800;color:var(--olive-d)}
.pstep .pp.small{font-size:16px;padding-top:8px}
.pstep .pl{font-size:13px;font-weight:600;margin-top:2px}
.pstep .pt{font-size:12px;color:var(--mut);margin-top:1px}
.pstep::after{content:"→";position:absolute;right:-2px;top:12px;color:var(--acc);font-size:18px}
.pstep:last-child::after{content:""}
/* На мобиле горизонтальная лента платежей разворачивалась в 5 ВЫСОКИХ блоков
   (число+ярлык+срок в столбик каждый) — тяжело воспринимается. Делаем компактными
   строками «таблицей»: число — фиксированная колонка слева, этап и срок — справа
   в две строки. Высота вдвое меньше, читается как список долей. Разметку не трогаем —
   раскладку задаёт grid поверх тех же трёх div (23.07). */
@media(max-width:760px){
  .paysteps{flex-direction:column;gap:0;margin:14px 0 6px}
  .pstep{display:grid;grid-template-columns:72px 1fr;column-gap:14px;text-align:left;
    padding:12px 0;border-bottom:1px solid #f1efe9}
  .pstep::after{content:""}
  .pstep .pp{grid-column:1;grid-row:1/3;align-self:center;font-size:22px}
  .pstep .pp.small{font-size:15px;line-height:1.15}
  .pstep .pl{grid-column:2;grid-row:1;font-size:15px}
  .pstep .pt{grid-column:2;grid-row:2;font-size:13px}
}

/* ряды наличия по типам: подпись · пропорциональный бар · цифры одной строкой */
.trow{display:grid;grid-template-columns:150px 1fr 235px;gap:12px;align-items:center;font-size:14px}
.trow .tnote{display:block;font-weight:400;font-size:12px;color:var(--acc);margin-top:1px}
.trow .tnum{color:var(--mut);white-space:nowrap}
.trow .track{height:10px;background:#eceadf;border-radius:999px;overflow:hidden}
.trow .track span{display:block;height:100%;background:var(--olive);border-radius:999px}
@media(max-width:760px){
  .trow{grid-template-columns:128px 1fr;gap:8px;font-size:13px}
  .trow .tnum{grid-column:1/3;margin-top:1px;white-space:normal}
}

/* ── НИЖНЯЯ ЗОНА ЭКРАНА ───────────────────────────────────────────────
   За неё дрались пять плавающих блоков: липкая кнопка брони, баннер согласия,
   круглая кнопка связи, чип избранного и всплывашка. На телефоне они налезали
   друг на друга и перекрывали контент.
   Решение: одна переменная --cta-h = высота липкой панели, от неё считаются
   отступы всех остальных. Меняется высота панели — сдвигается всё разом.
   У .cb/.cwb/#favchip/#favtoast стили инжектит JS уже после style.css, поэтому
   перебиваем их через `body ...` — специфичность выше, порядок не важен. */
:root{
  /* ── ШКАЛЫ ФАБРИКИ (этап 2 фейслифта, 23.07.2026). Новые значения берём ТОЛЬКО отсюда.
     --fs-scale: 12 13 14 15 16 18 20 22 24 26 + clamp() для h1/h2
     --sp-scale: 4 8 12 16 20 24 32 48 (кратно 4)
     --r-scale: 8 14 999 ── */
--cta-h:0px}

/* sticky mobile cta */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:1px solid var(--line);gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom))}   /* полоса-индикатор iPhone */
/* без переноса строк: перенос раздувал панель вдвое на узких экранах.
   clamp ужимает шрифт вместо переноса (13px минимум — читаемо). */
.sticky-cta a{flex:1;text-align:center;padding:12px 6px;font-size:clamp(13px,3.9vw,15px);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* footer */
footer{background:#2c331d;color:#c8cdb5;padding:36px 0 26px;margin-top:40px;font-size:14px}
footer a{color:#dbe7e3}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:22px;margin-bottom:20px}
footer .foot-lang{font-size:14px;color:#c8cdb5;border-top:1px solid #454f2e;padding-top:14px;margin:0}
footer .foot-lang a{color:#dbe7e3}
footer .fine{font-size:13px;color:#a7ae91;padding-top:12px;line-height:1.6}

/* ── ТАБЛИЦЫ-КАРТОЧКИ на узком экране ──
   Широкие таблицы (цены, расчёт рассрочки, лоты) на телефоне превращаются в карточки:
   строка → карточка, каждая ячейка → «ярлык: значение». Ярлык — из data-label
   (проставляет js/tables.js по заголовкам). HTML остаётся <table> (важно для SEO
   и для того, что скрипты валют/сортировки работают с теми же ячейками).
   Порог 600px: на планшете таблица ещё читается, на телефоне — уже нет. */
@media(max-width:600px){
  .t-cards, .t-cards thead, .t-cards tbody, .t-cards tr, .t-cards th, .t-cards td{display:block}
  /* сбрасываем инлайновый min-width (у некоторых таблиц стоит min-width:600px для десктопа):
     иначе карточка остаётся 600px шире экрана и значения уезжают вправо за край (23.07). */
  .t-cards{min-width:0!important;width:100%}
  .t-cards td{overflow-wrap:anywhere}
  .t-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}  /* прячем строку заголовков, но доступно скринридеру */
  .t-cards{font-size:15px;margin:12px 0}
  .t-cards tr{border:1px solid var(--line);border-radius:12px;padding:4px 14px;margin:0 0 10px;background:#fff}
  .t-cards tr:hover td{background:transparent}
  .t-cards td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border:0;border-bottom:1px solid #f1efe9;padding:8px 0;text-align:right}
  .t-cards tr td:last-child{border-bottom:0}
  .t-cards td::before{content:attr(data-label);color:var(--mut);font-weight:400;text-align:left;flex:0 0 auto}
  .t-cards td b{white-space:normal}
  /* первая ячейка (тип/юнит) — как заголовок карточки: крупнее, без ярлыка */
  .t-cards td:first-child{border-bottom:1px solid var(--line);padding-top:12px;font-size:16px;font-weight:700}
  .t-cards td:first-child::before{display:none}
  /* в карточном режиме таблица влезает — прокрутка и бейдж-подсказка не нужны */
  .t-cards.tbl-scroll,.tbl-scroll:has(.t-cards){overflow:visible}
  .tbl-hintwrap:has(.t-cards) .tbl-hint{display:none}
}

@media(max-width:760px){
  .grid2,.grid2.u-top{grid-template-columns:1fr}
  /* на телефоне порядок сверху вниз: фото → цена и характеристики.
     sticky в одноколоночной ленте только мешает — отключаем. */
  .u-side{position:static;top:auto}
  /* Цена 30px + «≈ $189 000» рядом не влезали в 390px и распирали карточку.
     Уменьшаем и разрешаем перенос: сумма в баттах и её эквивалент встают в две строки,
     каждая при этом остаётся неразрывной. */
  .u-side > p:first-child{font-size:24px;flex-wrap:wrap}
  .u-side .thb small{white-space:nowrap}
  /* Таблица характеристик: ячейки могут переноситься, длинные значения не распирают. */
  .u-side table{width:100%;table-layout:auto}
  .u-side td{overflow-wrap:anywhere}
  .nav nav{display:none}
  .sticky-cta{display:flex}
  section{padding:26px 0}

  /* ── порядок этажей снизу вверх ── */
  :root{
  /* ── ШКАЛЫ ФАБРИКИ (этап 2 фейслифта, 23.07.2026). Новые значения берём ТОЛЬКО отсюда.
     --fs-scale: 12 13 14 15 16 18 20 22 24 26 + clamp() для h1/h2
     --sp-scale: 4 8 12 16 20 24 32 48 (кратно 4)
     --r-scale: 8 14 999 ── */
--cta-h:64px}
  body{padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom))}

  /* Круглая кнопка связи на мобиле убрана совсем: липкая панель внизу делает
     ровно то же (WhatsApp + заявка), а два плавающих элемента с одной функцией
     только съедают экран. На десктопе кнопка остаётся. */
  body .cwb,body .cwp{display:none!important}

  /* Чип избранного и всплывашка — над липкой панелью, а не под ней. */
  body #favchip{bottom:calc(var(--cta-h) + 12px)}
  body #favtoast{bottom:calc(var(--cta-h) + 12px)}

  /* Баннер согласия — тоже над панелью. Пока он открыт, чип избранного прячем:
     три уровня плашек на 390px читаются как свалка. Баннер удаляется из DOM
     после ответа, поэтому :has() отработает корректно. */
  body .cb{bottom:calc(var(--cta-h) + 10px);left:8px;right:8px}
  body:has(.cb) #favchip{display:none!important}

  /* Панель выбранного юнита на странице наличия. */
  body .upanel{bottom:var(--cta-h)}
}

/* ── a11y (Lighthouse 23.07.2026): текстовые ссылки различимы не только цветом ── */
main p a:not(.btn), main li a:not(.btn), p.upd a, .answer a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* ── таблица лотов: строка кликабельна, номер — явная ссылка (дизайн-аудит 23.07) ── */
#lots-tbl tbody tr{cursor:pointer}
#lots-tbl tbody tr:hover{background:#f0eee4}
#lots-tbl tbody td:first-child a{text-decoration:underline;text-underline-offset:2px}

/* ── таблица лотов на мобиле: компактнее и без переносов цен (фидбек 24.07) ── */
#lots-tbl th{white-space:nowrap}
#lots-tbl td{white-space:nowrap}
.mhint{display:none}
@media(max-width:760px){
  #lots-tbl{font-size:13px}
  #lots-tbl th,#lots-tbl td{padding:8px 6px}
  .mhint{display:block;font-size:13px;color:var(--mut);margin:2px 0 8px}
}

/* бургер включается с 1100px (nav.js): прячем ленту меню и сердечко на тех же ширинах,
   иначе на средних экранах видно и бургер, и обрезанное меню (фидбек 25.07) */
@media(max-width:1100px){.nav nav{display:none}.nav #favcount{display:none!important}}

/* ── Форма заявки (английская версия) ──────────────────────────────
   Отдельный контур: русская версия остаётся на мессенджерах и ничего
   не собирает, форма живёт только там, где мы работаем по GDPR. */
.leadform{max-width:560px;margin:18px auto 0;text-align:left}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.lf-row{grid-template-columns:1fr}}
.lf-field{display:block}
.lf-field span{display:block;font-size:14px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.lf-field small{font-weight:400;color:var(--mut)}
.lf-field input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color .15s}
.lf-field input:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(22,81,76,.12)}
.lf-field input:user-invalid{border-color:#c0563f}
/* Галочка НЕ предустановлена и равновесна по весу с остальным текстом:
   предвыбранное согласие не считается согласием. */
.lf-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;line-height:1.5;color:var(--mut)}
.lf-consent input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--olive)}
.lf-consent a{color:var(--olive-d)}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.leadform button[type=submit]{margin-top:16px;width:100%;font-size:16px;padding:14px 20px}
.leadform button[disabled]{opacity:.6;cursor:default}
.lf-msg{margin:10px 0 0;font-size:14px;min-height:1.2em}
.lf-msg.ok{color:#1d7a4d;font-weight:600}
.lf-msg.err{color:#b23c22}
.lf-or{margin:22px 0 10px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}

/* Мессенджеры под формой — тихой строкой, а не второй парой кнопок.
   Три ярких элемента подряд (форма + WhatsApp + Telegram) заставляли выбирать
   способ вместо того, чтобы писать. Канал остаётся, вес снят. */
.lf-alt{margin:14px 0 0;font-size:14px;color:var(--mut)}
.lf-alt a{color:var(--olive);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(22,81,76,.3);padding-bottom:1px}
.lf-alt a:hover{border-bottom-color:var(--olive)}
.lf-alt i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.lf-alt .i-wa{background:#25d366}.lf-alt .i-tg{background:#2AABEE}
.lf-alt .lf-dot{margin:0 6px;color:var(--line)}

/* Подсказки валидации под полем, а не браузерным пузырём: пузырь исчезает
   через пару секунд, не читается на мобильном и всегда на языке системы. */
.lf-err{margin:5px 0 0;font-size:13px;color:#a32d2d;line-height:1.35}
.lf-field.is-invalid input,.lf-consent.is-invalid input{border-color:#a32d2d}
.lf-field.is-invalid input:focus{box-shadow:0 0 0 3px rgba(163,45,45,.12)}
.lf-consent.is-invalid span{color:#a32d2d}
.lf-msg.err{color:#a32d2d}
.lf-msg.ok{color:var(--olive);font-weight:600}

/* main p a:not(.btn) подчёркивает все ссылки в тексте — из-за него у
   мессенджеров под формой было две линии сразу: своя рамка и подчёркивание.
   Перебиваем адресно. */
/* Селектор должен быть НЕ СЛАБЕЕ, чем `main p a:not(.btn)` (0,1,3), иначе
   подчёркивание не снимается — с первого раза я написал `main .lf-alt a`
   (0,1,2) и правило проиграло. Считать специфичность на глаз — плохая идея. */
main p.lf-alt a:not(.btn){text-decoration:none}

/* Экран после отправки: форма уходит, остаётся подтверждение и следующий шаг.
   Пустая форма после «Спасибо» — мёртвое место: человек уже сделал действие,
   и это лучший момент увести его в подбор квартиры. */
.lf-done{text-align:left}
.lf-done .lf-tick{width:44px;height:44px;border-radius:50%;background:var(--olive);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.lf-done h3{font-size:19px;margin:0 0 6px}
.lf-done p{font-size:14px;color:var(--mut);margin:0 0 16px}
.lf-done .lf-next{display:grid;gap:10px}
.lf-done .lf-next .btn{text-align:center}

/* Строка поиска внутри выпадающего списка стран.
   Настоящая причина наезда была не в моём стиле из consent.js, а в общих
   правилах формы: `.lead-box input` и `.lf-field input` задают padding 12/14px
   и рамку ВСЕМ полям внутри блока — включая поиск, который живёт в разметке
   intl-tel-input внутри того же .lf-field. Библиотека держит слева иконку лупы
   на absolute и рассчитывает на padding-left:30px; наши 14px его перебивали,
   и текст с курсором налезали на иконку.
   Возвращаем геометрию библиотеки селектором заведомо более весомым. */
.lead-box .iti__search-input,
.lf-field .iti__search-input{
  width:100%;margin:0;border:0;border-radius:3px;background:#fff;
  padding:10px 30px 10px 32px;font-size:15px;box-shadow:none
}
.lead-box .iti__search-input:focus,
.lf-field .iti__search-input:focus{outline:none;border:0;box-shadow:none}
/* Пункты списка стран тоже не должны наследовать отступы полей формы. */
.lead-box .iti__country,.lf-field .iti__country{margin:0}

/* Выравнивание пары «имя / телефон».
   Поле телефона обёрнуто разметкой intl-tel-input, и его высота отличалась
   от обычного поля на пару пикселей. Незаметно, пока полей два, — но
   подсказки об ошибке под ними вставали на разной высоте и колонка
   выглядела съехавшей. Фиксируем высоту полей: тогда и поля, и подсказки
   под ними стоят на одной линии независимо от обёрток. */
/* Подбирать высоты вручную бесполезно: у поля телефона своя обёртка от
   библиотеки, и любая правка внутри неё снова сдвинет подсказку. Поэтому
   раскладываем подпись, поле и подсказку по СТРОКАМ ОДНОЙ сетки: тогда они
   выровнены по определению, независимо от того, что у поля внутри.
   display:contents убирает сам label из раскладки, оставляя его детей
   прямыми элементами сетки; связь label с полем от этого не теряется. */
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
.lf-row .lf-field{display:contents}
.lf-row .lf-field > *{min-width:0}
.lf-row .lf-field:first-child  > *{grid-column:1}
.lf-row .lf-field:nth-child(2) > *{grid-column:2}
.lf-row .lf-field > span{grid-row:1}
.lf-row .lf-field > input,
.lf-row .lf-field > .iti{grid-row:2;align-self:start}
.lf-row .lf-field > .lf-err{grid-row:3;margin:6px 0 0}
.lf-field input,
.lf-field .iti input.iti__tel-input{height:52px;line-height:normal}

/* ===== карточки лотов (подборки, похожие лоты) ===== */
.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;margin-top:8px}
.ucard{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  text-decoration:none;color:var(--ink);background:#fff;transition:box-shadow .15s,transform .15s}
.ucard:hover{box-shadow:0 8px 22px rgba(22,81,76,.13);transform:translateY(-2px);border-color:#cfd8d2}
.ucard b{color:var(--olive-d);font-size:18px;line-height:1.2;margin-bottom:2px}
.ucard span{font-size:13px;color:var(--mut);line-height:1.35}
.ucard .uv{font-size:12.5px;color:#8a938c}
.ucard .up{font-size:17px;font-weight:700;color:var(--olive-d);margin-top:6px}
@media(max-width:520px){.ugrid{grid-template-columns:1fr 1fr;gap:10px}.ucard{padding:12px}.ucard b{font-size:16px}.ucard .up{font-size:15px}}