/* ============================================================
   ОБЕРІГ — дизайн-система, напрям А «Вікно» (обрано 08.09.2026)
   Фото говорить, шрифт мовчить: тло-тиньк, чорнило, червоний знака
   лише у знаку і на головній кнопці. Дідон Prata для заголовків і цифр,
   Commissioner для тексту. Жодних заокруглень на фото, жодних
   надзаголовків капсом, один момент руху — поява хіро.
   Джерело макетів: design/canvas/*.dc.html (канвас Claude Design).
   ============================================================ */

:root{
  --bg:#F5F5F2;
  --paper:#FFFFFF;
  --ink:#1F2321;
  --mute:#6B716D;
  --line:#DAD9D2;
  --line-2:#C7C6BE;
  --red:#D82018;
  --red-700:#B51A14;
  --ok:#3E7C4F;
  --danger:#B4452F;
  --shade:rgba(31,35,33,.55);

  /* Стеки з tools/fetch_fonts.py: запасні шрифти метрично підігнані,
     тож підміна не переверстує сторінку. */
  --f-disp:'Prata', 'Prata Fallback Noto Serif', 'Prata Fallback Georgia', Georgia, serif;
  --f-body:'Commissioner', 'Commissioner Fallback Roboto', 'Commissioner Fallback Arial', system-ui, sans-serif;

  --fs-hero:clamp(2.5rem, 9.5vw, 3.5rem); /* ПК 84 → 56 px (Руслан 21.10: «на ПК завеликий»); телефон 40 px як був */
  --fs-h2:clamp(1.75rem, 4.2vw, 2.75rem);
  --fs-h3:1.375rem;
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.8125rem;

  --container:1312px;
  --gutter:20px;
  --sp-section:clamp(2.5rem, 6vw, 5.5rem);
  --hdr-h:64px;
  --tap:44px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 12px 30px -18px rgba(31,35,33,.35);
}
@media (min-width:1000px){
  :root{ --gutter:64px; --hdr-h:84px; }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)}
/* плавний скрол — лише з першого дотику/клавіші гостя (клас ставить main.js):
   з /apartments/ на /#contacts Chrome анімував стрибок до якоря ще під час
   завантаження, ціль рахував до того, як секція відгуків сіла на 672 px, і
   впирався в низ сторінки (Руслан 12.09). Миттєвий стрибок браузер сам
   доправляє після зсувів (scroll anchoring); анімований — ні. */
html.is-touched{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:#fff}
[hidden]{display:none !important}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon.off{opacity:.25}

/* ---------- Типографіка ---------- */
.h2{font-family:var(--f-disp);font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.005em}
.h3{font-family:var(--f-disp);font-size:var(--fs-h3);line-height:1.15}

.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.shead__link{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-sm);color:var(--mute);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@media (min-width:1000px){.shead{margin-bottom:2rem}.shead__link{font-size:1rem}}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:0 1.35rem;
  font-weight:600;font-size:1rem;line-height:1.2;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn:active{background:#000}
.btn--brass{background:var(--red);border-color:var(--red);color:#fff}
.btn--brass:active{background:var(--red-700);border-color:var(--red-700)}
.btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:active{background:rgba(31,35,33,.06)}
.btn--sm{min-height:var(--tap);padding:0 1rem;font-size:var(--fs-sm)}
.btn--lg{min-height:56px;font-size:1.0625rem}
.btn--block{width:100%}
.btn:disabled{opacity:.55;cursor:default}

/* Кругла іконка-кнопка (дзвінок, обране, стрілки) */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--ink);border-radius:999px;color:var(--ink);background:transparent;flex:none}
.ibtn:active{background:rgba(31,35,33,.06)}

/* ---------- Шапка ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--bg);transition:box-shadow .2s var(--ease)}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:.5rem;height:var(--hdr-h)}
/* Знак у шторці й підвалі; у шапці — цілий логотип (нижче) */
.logo{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);color:var(--ink)}
/* У шапці стоїть справжній логотип «Оберіг» зі старого сайту, обведений у
   вектор (`tools/trace_logo.py`): розета + рукописний напис + підпис, одним
   цілим шматком. Саме цілим: коли підпис був окремим текстом, а між ним і
   знаком стояв номер телефону, локап розпадався (Руслан 10.09: «на телефоні
   він не цілісний, номер тел залазить в нього»). Номер лишився круглою
   кнопкою поруч і в шторці. */
.hdr__brand .logo{position:relative;display:inline-block}
.logo__img{display:block;height:52px;width:auto}
.drawer__top .logo__img{height:38px}
.foot .logo__img{height:44px}
.hdr__brand{display:flex;align-items:center;gap:.5rem;min-width:0}
@media (max-width:999px){
  .hdr__brand{gap:.625rem}
  .hdr__brand .logo{min-height:0}
  /* логотип дрібнішає разом з екраном — кнопки праворуч не стискаються */
  .logo__img{height:clamp(44px,13vw,54px)}
}
.nav{display:none}
.hdr__cta{display:flex;align-items:center;gap:.625rem}
.hdr__cta .ibtn{width:40px;height:40px}
.hdr__phone{display:none}
/* Номери на телефоні живуть у правій групі, поруч із кнопкою дзвінка: у полі
   логотипа вони розривали локап. Два номери стовпчиком — ширини це не додає,
   лише другий рядок. Гротеск і чорнило — це дія, а не частина знака. */
.hdr__phones{display:flex;flex-direction:column;justify-content:center;gap:1px}
/* комірка цифри: у Commissioner і Prata нема табличних цифр, тому ширину
   задаємо самі — інакше «1» вужча за решту і другий номер «плив» під першим */
.dg{display:inline-block;width:.6em;text-align:center}
/* tabular-nums — щоб цифра стояла точно над цифрою навіть із запасним шрифтом
   (у своїх Commissioner і Prata ширина цифри й так однакова — заміряно) */
/* кожен номер не нижчий за 24 px — мінімальна зона тапу (Lighthouse target-size, 11.09) */
.hdr__phone-m{display:inline-block;min-height:24px;padding:2px 0;font-family:var(--f-body);font-weight:600;font-size:clamp(.8125rem,3.4vw,.9375rem);line-height:20px;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
/* на вузьких екранах кнопки трохи менші, щоб логотипу лишалось повітря */
@media (max-width:413px){
  .hdr__brand{gap:.375rem}
  .hdr__cta{gap:.5rem}
  .hdr__phone-m{font-size:12.5px}
  .hdr__cta .ibtn{width:38px;height:38px}
  .burger{width:42px;margin-right:-9px}
}
@media (max-width:374px){.logo__img{height:44px}}
.hdr__tel-m{display:inline-flex}
/* Мова на телефоні (Руслан 21.10.2026, ескіз без кружечка): літери ІНШОЇ мови («EN» на
   українській сторінці, «UA» на англійській) між дзвінком і меню, тим самим гротеском,
   що й номери; веде на цю ж сторінку тією мовою (адресу ставить build.py, finish()).
   На ПК замість нього список «UA ⌄» (.lang); рядок UA EN у шторці лишається.
   До 359 px у шапці місця нема (номери впирались би в знак) — лишається шторка. */
.hdr__lang-m{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:var(--tap);margin:0 -3px;font-family:var(--f-body);font-weight:600;font-size:14px;letter-spacing:.08em;color:var(--ink)}
@media (max-width:413px){.hdr__lang-m{min-width:32px;font-size:13px}}
@media (max-width:359px){.hdr__lang-m{display:none}}
.hdr__book{display:none}
/* від'ємний відступ вирівнює саму рисочку бургера по краю поля, а не рамку
   кнопки — інакше праворуч видно зайві пікселі, а знак ліворуч стоїть впритул */
/* Бургер підписаний словом (Руслан 10.09): саму іконку легко проґавити, і
   людина не здогадується, що там решта квартир. Підпис іде ПІД іконкою —
   так кнопка лишається завширшки 48 px і нічого в шапці не посунулось. */
.burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:48px;height:var(--tap);margin-right:-12px;color:var(--ink)}
.burger .icon{width:24px;height:24px}
.burger__t{font-size:9.5px;line-height:1;letter-spacing:.02em;font-weight:600}
@media (min-width:1000px){
  /* мінімальний просвіт між знаком, меню і кнопками: на 1100 px «Головна»
     стояла впритул до слова «Оберіг» (flex-gap діє як мінімум, space-between
     лише розподіляє залишок) */
  .hdr__in{gap:1rem}
  .hdr__brand{flex:none}
  .logo__img{height:58px}
      /* проміжок між пунктами сталий: з сімома пунктами на 1920 px 35 px між ними
     лишали 17 px між знаком і меню; тепер повітря йде по боках меню */
  .nav{position:relative;display:flex;align-items:center;gap:1.5rem;font-size:1rem}
  /* пункти меню й телефон не переносяться: на 1000–1200 px «На мапі» і номер
     ламались на два-три рядки, коли шапка тіснішала */
  .nav a{display:inline-flex;align-items:center;min-height:var(--tap);position:relative;white-space:nowrap}
  .nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--ink)}
  /* Рухома риска під меню (як на старому сайті): їде до пункту, на який
     навели, і повертається до активного. Рухаємо лише transform — ширину
     дає scaleX від смужки в 1 px, тож ані ререндера, ані перерахунку макета.
     Малює її main.js; без JS лишається статичне підкреслення .is-active. */
  .nav--ink a.is-active::after{display:none}
  .nav__ink{position:absolute;left:0;bottom:8px;width:1px;height:1px;background:var(--ink);transform-origin:0 0;opacity:0;pointer-events:none;transition:transform .22s var(--ease),opacity .18s var(--ease)}
  .nav--ink.is-ready .nav__ink{opacity:1}
  .hdr__cta{gap:1.5rem}
  /* два номери стовпчиком: ширини не додає, лише другий рядок */
  .hdr__phone{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--tap);font-family:var(--f-disp);font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .hdr__phone__col{display:flex;flex-direction:column;line-height:1.25}
  .hdr__phone__col a{padding:2px 0}
    .hdr__tel-m{display:none}
  .hdr__lang-m{display:none}
  .hdr__phone-m{display:none}
  .hdr__cta .ibtn{width:var(--tap);height:var(--tap)}
  .hdr__book{display:inline-flex}
  .burger{display:none}
}
/* Вузький десктоп: 6 пунктів меню («Відгуки» прибрано 12.09) + «UA ⌄» + номер (короткий з 12.09) + сердечко обраних.
   Поле контейнера 64 px лишає на 1000 px усього 857 px, тож до 1279 px меню
   14 px і менші відступи, а на 1000–1099 px — ще менший знак, меню 13 px,
   номер 15 px, без стрілки біля UA. Заміряно 10.09: на 1000 px 0 переповнення
   і 24 px до знака. Номер видно ЗАВЖДИ (рішення Руслана 10.09 — раніше тут
   стояла кругла кнопка дзвінка, як на мобільному). */
@media (min-width:1000px) and (max-width:1279px){
  .nav{gap:1vw;font-size:.875rem}
  .hdr__cta{gap:.75rem}
  .hdr__book{padding:0 .75rem}
  .hdr__phone{font-size:1rem}
  .hdr__phone .icon{display:none}
}
/* На вузькому ноутбуку 64 px поля по боках з'їдали ту саму ширину, якої бракує
   шапці (сім пунктів + номер + кнопка + сердечко). Робимо поле 40 px — це
   дає 48 px і знімає тісноту, замість того щоб різати меню. */
@media (min-width:1000px) and (max-width:1159px){
  :root{--gutter:40px}
  .nav{gap:.8vw;font-size:.8125rem}
  .hdr__cta{gap:.5rem}
  .hdr__book{padding:0 .6rem}
  .hdr__phone{font-size:.9375rem}
      .lang__btn .icon{display:none}
}
/* На 1280 px з повним номером і «UA ⌄»: з проміжком 24 px меню сідало на
   знак (8 px), 18 px дають 21 px; від 1366 px запас росте сам */
@media (min-width:1280px){
  .nav{gap:1.125rem}
  /* із сердечком обраного в шапці (+68 px) на 1366–1440 px не вміщалось:
     відступи між кнопками 16 px і номер до 18 px замість 20 */
  .hdr__cta{gap:1rem}
  .hdr__phone{font-size:clamp(1.125rem,1.5vw,1.3125rem)}
}
/* 1280–1365 px, коли ще й видно сердечко обраного (+68 px): номер 16 px без
   іконки й тісніші відступи, інакше шапка вилазила на 27 px */
@media (min-width:1280px) and (max-width:1365px){
  .nav{gap:1rem}
  .hdr__cta{gap:1rem}
  .hdr__phone{font-size:1rem}
  .hdr__phone .icon{display:none}
}
/* Широкий ПК (контейнер уже сталий, 1184 px усередині): ревізія шапки 12.09
   (Руслан: «збільш логотип і назви, попрацюй з відступами, додай гармонії») —
   шапка 92 px, логотип 66, меню 17 px із кроком 24, номери 18 px замість
   21 (вони, а не знак, були найгучнішим у шапці), кнопка 46 px. Заміряно з
   сердечком обраного: 0 переповнення, 36 px між зонами; без нього — 66. */
@media (min-width:1366px){
  :root{--hdr-h:92px}
  .logo__img{height:66px}
  .hdr__in{gap:2rem}
  .nav{gap:1.5rem;font-size:1.0625rem}
  .nav a.is-active::after,.nav__ink{bottom:10px}
  .hdr__cta{gap:1rem}
  .hdr__phone{font-size:1.125rem;gap:.6rem}
  .hdr__phone .icon{width:21px;height:21px}
  .hdr__book{min-height:46px;padding:0 1.25rem;font-size:.9375rem;margin-left:.25rem}
}

/* ---------- Мобільне меню ---------- */
.drawer{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:0 var(--gutter) 1.5rem;transform:translateX(100%);transition:transform .3s var(--ease);visibility:hidden}
.drawer.is-open{transform:none;visibility:visible}
.drawer__top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h)}
.drawer__close{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);margin-right:-10px}
.drawer__nav{display:flex;flex-direction:column;margin-top:1rem}
.drawer__nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:.5rem 0;border-top:1px solid var(--line);font-family:var(--f-disp);font-size:1.5rem}
.drawer__nav a .icon{color:var(--mute)}
.drawer__foot{margin-top:auto;display:grid;gap:.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.drawer__foot a{display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--f-disp);font-size:1.5rem}

/* ---------- Хіро (головна) ---------- */
.hero{position:relative}
.hero__media{position:relative;height:min(74vh,560px);overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,20,0) 40%,rgba(20,22,20,.64) 100%)}
.hero__text{position:absolute;left:0;right:0;bottom:3.4rem;color:#fff}
.hero__title{font-family:var(--f-disp);font-size:var(--fs-hero);line-height:1.2;text-wrap:balance;max-width:14ch} /* 1.2, не 1.02 (21.10.2026): у Prata хвіст «р» −0.3em, «Л» +0.8em — при 1.02 «р» з рядка вище налазила на «Л» */
/* ПК (Руслан 21.10.2026, обрав з ескізів): заголовок одним рядком — 56 px, а до ~1080 px
   ширини менше (5.1vw), щоб рядок (≈17.4em) влазив у контейнер; не влізе — перенесеться,
   а не вилізе за край (без nowrap). Телефон і планшет — як вище, 14ch */
@media (min-width:1000px){.hero__title{max-width:none;font-size:min(var(--fs-hero),5.1vw);line-height:1.02}
  /* заголовок «трохи нижче» (Руслан 21.10): на ПК він в один рядок, тож щільний міжрядок
     безпечний (+5 px вниз), і весь блок на 8 px нижче — до форми лишається ~16 px */
  .hero .hero__text{bottom:5rem} /* .hero — сильніше за .hero__text{bottom:5.5rem} планшета нижче */
  /* підзаголовок на ПК: перше речення цілим рядком (≈30em; було 26em — «будинках» падало вниз),
     «Заселяємо цілодобово.» — завжди з нового рядка (Руслан 21.10) */
  .hero__text .hero__lede{max-width:none}.hero__lede2{display:block}} /* .hero__text — сильніше за .hero__lede{max-width:26em} планшета нижче */ /* 14ch (21.10.2026): «Подобова оренда квартир у Львові» — 2 рядки на ПК, 3 на телефоні; з 11ch було 4 і на 1280×720 залазило під шапку */
.hero__lede{margin-top:.75rem;font-size:1rem;line-height:1.45;max-width:22em;color:rgba(255,255,255,.92)}

/* Картка пошуку лягає на низ фото, як підвіконня */
/* z-index 4 — вище за значок «ВІП» (2) і сердечко (3) карток нижче, інакше
   вони просвічували крізь список пошуку за адресою (14.09) */
.search{position:relative;z-index:4;margin:-28px var(--gutter) 0;padding:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-card);display:grid;gap:10px}
.search__f{position:relative}
.search__label{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.search input[type="text"]{width:100%;height:52px;padding:0 14px 0 44px;border:1px solid var(--line);background:var(--paper);font-size:1rem;color:var(--ink)}
.search input::placeholder{color:var(--mute);opacity:1}
.search__f .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.stepper{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 6px 0 44px;border:1px solid var(--line);background:var(--paper)}
.stepper output{font-size:1rem;white-space:nowrap}
.stepper button{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--ink)}
.stepper__btns{display:flex;gap:2px}
/* На телефоні форма пошуку головної стоїть у зоні стеку месенджерів (праві 68 px): «−» і «+»
   відсунуті ліворуч, щоб кружечок не накривав «+» (Руслан 20.10.2026). Лише головна — у
   каталозі степер угорі сторінки, стек його не чіпає. */
@media (max-width:719px){.page-home .search .stepper{padding-right:64px}}
@media (min-width:720px){
  .hero__media{height:min(70vh,680px)}
  .hero__text{bottom:5.5rem}
  .hero__media::after{background:linear-gradient(90deg,rgba(20,22,20,.55) 0%,rgba(20,22,20,.15) 55%,rgba(20,22,20,0) 100%)}
  /* планшет: три поля в рядок, кнопка під ними на всю ширину */
  .search{margin-top:-64px;margin-right:auto;width:min(1160px,calc(100% - 2*var(--gutter)));grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .search .btn{grid-column:1/-1}
  .search input[type="text"],.stepper{height:56px}
  .hero__lede{font-size:1.25rem;max-width:26em}
}
/* десктоп: один рядок; степер і кнопка не вужчі за свій текст, інакше «2 гості»
   і «Показати вільні квартири» ламались на два рядки (заміряно 11.09, 1000–1366 px) */
@media (min-width:1000px){
  .search{grid-template-columns:1.5fr 1fr minmax(200px,.9fr) minmax(max-content,1.1fr)}
  .search .btn{grid-column:auto}
}

/* ---------- Реєстр фактів (лінійки) ---------- */
.facts{display:flex;flex-direction:column}
.facts > div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:.9375rem}
.facts > div:last-child{border-bottom:1px solid var(--line)}
.facts span:first-child{color:var(--mute);flex:none}
.facts span:last-child{text-align:right}
@media (min-width:720px){
  .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .facts > div{flex-direction:column;justify-content:flex-start;gap:4px;padding:14px 0 0;border-bottom:0 !important;font-size:1rem}
  .facts span:first-child{font-size:var(--fs-sm)}
  .facts span:last-child{text-align:left}
}

/* ---------- Картки квартир ---------- */
.grid-apts{display:grid;gap:20px}
.grid-apts:empty{min-height:78vh}
.apt-card{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px;position:relative}
.apt-card__media{position:relative;aspect-ratio:4/3;background:var(--line);overflow:hidden}
.apt-card__media img{width:100%;height:100%;object-fit:cover}
.apt-card__link{position:absolute;inset:0;z-index:1}
.apt-card__badge{position:absolute;left:0;top:0;z-index:2;padding:6px 10px;background:var(--paper);font-size:var(--fs-xs);font-weight:600}
.fav{position:absolute;right:8px;top:8px;z-index:3;width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink)}
.fav .icon{width:20px;height:20px}
.fav.is-on{color:var(--red)}
.fav.is-on .icon{fill:currentColor}
.fav.pop .icon{animation:favpop .28s var(--ease)}
@keyframes favpop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.apt-card__body{display:flex;flex-direction:column;gap:6px}
.apt-card__text{display:flex;flex-direction:column;gap:6px;min-height:var(--tap)}
.apt-card__title{font-family:var(--f-disp);font-size:var(--fs-h3);line-height:1.15}
.apt-card__meta{font-size:var(--fs-sm);line-height:1.45;color:var(--mute)}
.apt-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
/* ціна на сайті завжди «від …»: за основу «Ціна будні», пʼятниця-субота дорожчі
   (Руслан 10.09); слово «від» дрібніше й тихіше за цифру */
.from{font-family:var(--f-body);font-size:.7em;font-weight:400;color:var(--mute)}
.apt-card__price{font-family:var(--f-disp);font-size:1.25rem}
.apt-card__price small{font-family:var(--f-body);font-size:var(--fs-xs);color:var(--mute)}
@media (min-width:640px){.grid-apts{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}}
@media (min-width:1000px){
  .grid-apts{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
  .apt-card{border-top:0;padding-top:0}
  .apt-card__title{font-size:1.5rem}
  .apt-card__meta{font-size:.9375rem}
}

/* ---------- Райони (лінійки-посилання) ---------- */
.dists{display:flex;flex-direction:column}
.dist{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 0;border-top:1px solid var(--line)}
.dist:last-child{border-bottom:1px solid var(--line)}
.dist__name{font-family:var(--f-disp);font-size:1.25rem}
.dist__note{display:block;font-size:var(--fs-sm);color:var(--mute);margin-top:2px}
.dist__go{color:var(--mute)}
.dists__more{margin-top:8px}
@media (min-width:720px){
  .dists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  .dist:nth-last-child(2){border-bottom:1px solid var(--line)}
}
/* auto-fit: чотири райони — чотири колонки, як і було; пʼятий (новий з адмінки) стає пʼятою колонкою,
   а не сам у другому ряду (опонент 23.10 №9) */
@media (min-width:1000px){.dists{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.dist{border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 0}.dist__go{display:none}}

/* ---------- Відгуки ---------- */
.reviews-wrap{margin-top:1rem}
/* До ініціалізації Swiper (він ліниво) слайди вже стоять у ряд тієї ж ширини
   й з тим самим проміжком: інакше секція спершу 1080 px, потім 408, і стрибок
   до якоря нижче (/#contacts з іншої сторінки) промахувався (Руслан 12.09).
   Swiper після старту ставить width/margin інлайн — вони й перекривають ці. */
.reviews-wrap .swiper{overflow:hidden}
.reviews-wrap .swiper-wrapper{display:flex}
.reviews-wrap .swiper-slide{flex:0 0 auto;width:100%;margin-right:16px}
.reviews-wrap .swiper-pagination-rev{min-height:24px}
@media (min-width:700px){.reviews-wrap .swiper-slide{width:calc((100% - 24px)/2);margin-right:24px}}
@media (min-width:1040px){.reviews-wrap .swiper-slide{width:calc((100% - 64px)/3);margin-right:32px}}
.rev-card{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--paper);border:1px solid var(--line);height:auto}
/* vendor/swiper (вантажиться пізніше) ставить слайду display:block — сильнішим селектором картки
   однакової висоти, імʼя й джерело внизу (23.10.2026: справжні відгуки різної довжини давали
   порожню смугу під короткими картками) */
.reviews-wrap .swiper-slide.rev-card{display:flex;height:auto;align-self:stretch}
.rev-card__stars{display:flex;gap:2px;color:var(--ink)}
.rev-card__stars .icon{width:16px;height:16px;fill:currentColor;stroke:none}
.rev-card__text{font-size:1rem;line-height:1.55;text-wrap:pretty}
.rev-card__who{display:flex;flex-direction:column;gap:2px;margin-top:auto;font-size:var(--fs-sm);color:var(--mute)}
.rev-card__who b{font-weight:600;color:var(--ink)}
.rev-nav{display:none;gap:6px}
.rev-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--line);color:var(--ink)}
@media (min-width:720px){.rev-nav{display:flex}}
/* Крапки пагінації — зона тапу 24px, сама крапка 8px */
/* .reviews-wrap у селекторі не для краси: CSS Swiper підвантажується ПІСЛЯ style.css,
   і при рівній специфічності його position:absolute перебивав наш static, а крапки
   лягали на текст останнього рядка картки (11.09) */
.reviews-wrap .swiper-pagination-rev{position:static;margin-top:10px;--swiper-pagination-bullet-size:24px;--swiper-pagination-bullet-horizontal-gap:2px}
.reviews-wrap .swiper-pagination-bullet{position:relative;width:24px;height:24px;background:transparent;opacity:1;border-radius:999px}
.reviews-wrap .swiper-pagination-bullet::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:999px;background:var(--line-2)}
.reviews-wrap .swiper-pagination-bullet-active::after{background:var(--ink)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font-family:var(--f-disp);font-size:1.125rem;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--mute);transition:transform .2s var(--ease)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq__a{padding:0 0 16px;color:var(--mute);max-width:40em;text-wrap:pretty}
@media (min-width:1000px){.faq{max-width:760px}}

/* ---------- Блок телефону (контакти) ---------- */
.cta{background:var(--paper);border-top:1px solid var(--line)}
.cta__in{display:flex;flex-direction:column;gap:14px}
.cta__title{font-family:var(--f-disp);font-size:clamp(1.5rem,5vw,2.5rem);line-height:1.15;text-wrap:pretty;max-width:18em}
.cta__phones{display:flex;flex-direction:column;gap:2px}
.cta__phones a{display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--f-disp);font-size:clamp(1.5rem,6vw,2.5rem);letter-spacing:.02em}
.cta__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (min-width:1000px){
  .cta__in{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
  .cta__media{width:100%;height:420px;object-fit:cover}
}
.cta__media{display:none}
@media (min-width:1000px){.cta__media{display:block}}

/* ---------- Футер ---------- */
.foot{padding:28px 0 36px;font-size:var(--fs-sm);color:var(--mute)}
.foot__grid{display:grid;gap:24px}
.foot h3{font-family:var(--f-body);font-weight:600;font-size:var(--fs-sm);color:var(--ink);margin-bottom:8px}
.foot ul{display:flex;flex-direction:column}
.foot li a{display:inline-flex;align-items:center;min-height:var(--tap)}
.foot__about{max-width:34em}
.foot__soc{display:flex;gap:6px;margin-top:8px}
.foot__soc a{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);color:var(--ink)}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-xs)}
@media (min-width:720px){.foot__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}}

/* ---------- Кнопка вгору ---------- */
.up{position:fixed;right:16px;bottom:88px;z-index:30;width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
.up.is-show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (min-width:1000px){.up{bottom:32px;right:32px}}

/* ---------- Обране в шапці (10.09, Руслан: «важко знайти, як переглянути
   обрані»): сердечко з лічильником на кожній сторінці, зʼявляється, щойно є
   хоч одна обрана квартира, веде в каталог з фільтром «Обрані» ---------- */
.hdr__favs{position:relative}
.hdr__favs-n{position:absolute;top:-3px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center;font-family:var(--f-body)}
.hdr__favs.pop{animation:msgnudge .5s var(--ease)}
/* сердечко обраних лише на ПК (17.09, Руслан: «на ПК не бачу, де подивитись обране»):
   від 1000 px шторки з пунктом «Обрані квартири» нема, а в меню ПК його не було —
   лічильник у шапці поруч із «Моїми замовленнями»; на телефоні лишається шторка */
.hdr__favs--pc{display:none}
@media (min-width:1000px){.hdr__favs--pc{display:inline-flex}}

/* ---------- Перемикач мов (видимий з 10.09 за рішенням Руслана; EN/RU поки
   лише тост «готується» — перекладів ще нема). Десктоп: «UA ⌄» у шапці з
   випадним списком; телефон: рядок UA EN RU у шторці над номером ---------- */
.lang{position:relative;display:none}
.lang__btn{display:inline-flex;align-items:center;gap:2px;min-height:var(--tap);padding:0 4px;color:var(--ink);font-size:var(--fs-sm);font-weight:600;letter-spacing:.04em}
.lang__btn .icon{width:16px;height:16px;color:var(--mute)}
.lang__menu{position:absolute;right:0;top:calc(100% - 2px);z-index:5;min-width:180px;padding:6px 0;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.lang__menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:0 16px;color:var(--ink);white-space:nowrap}
.lang__menu a.is-on{font-weight:600}
.lang__menu a .icon{color:var(--mute)}
@media (min-width:1000px){.lang{display:block}}
.drawer__foot .drawer__lang{display:flex;gap:24px}
.drawer__foot .drawer__lang a{min-height:var(--tap);font-family:var(--f-body);font-size:1rem;font-weight:600;letter-spacing:.04em;color:var(--mute)}
.drawer__foot .drawer__lang a.is-on{color:var(--ink);text-decoration:underline;text-underline-offset:5px}

/* ---------- Месенджери: три іконки справа знизу ----------
   Обрано 10.09.2026 (варіант Б). Альтернатива — одна кнопка «Написати» зі
   шторкою — прибрана разом з усім А/Б-риштуванням; як завести тимчасові
   варіанти для наступного порівняння, описано в docs/AB.md.
   «Вгору» через це живе ліворуч, щоб не накривати стек. */
.msg-stack{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;flex-direction:column;gap:10px;transition:transform .25s var(--ease)}
.msg-stack a{position:relative;isolation:isolate;width:52px;height:52px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-card);transition:transform .16s var(--ease)}
.msg-stack a:active{transform:scale(.96)}
/* Підпис — «пігулка» (Руслан 11.09: окрема плашка «не зовсім дизайнерське
   рішення»): під курсором чи фокусом коло витягується вліво у пігулку свого
   кольору, підпис усередині — патерн віджетів Elfsight/GetButton, повторений
   у CSS без чужого JS. Пігулка — ::before між тлом кола й іконкою (той самий
   колір і рамка), показ через clip-path від правого краю: розміри не міняються,
   текст не розтягується, 200 мс. Текст — з aria-label, один і для читалки.
   На телефоні тап дає хибний hover, тому там пігулки нема. */
.msg-stack a .icon{position:relative;z-index:1}
.msg-stack a::before{content:attr(aria-label);position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;padding:0 60px 0 20px;border-radius:999px;background:inherit;color:#fff;font-size:var(--fs-sm);font-weight:600;line-height:1;white-space:nowrap;pointer-events:none;clip-path:inset(0 0 0 100%);transition:clip-path .2s var(--ease)}
.msg-stack a.msg-stack--tel::before{right:-1px;top:-1px;bottom:-1px;border:1px solid var(--ink);color:var(--ink)}
.msg-stack a:focus-visible::before{clip-path:inset(0)}
/* заливні логотипи (спрайт): WhatsApp і Viber 28 px, літачок Telegram 24 px і на
   2 px лівіше — так усі три оптично одного розміру й по центру кола */
.msg-stack a .icon{width:28px;height:28px}
.msg-stack--tg .icon{width:24px;height:24px;transform:translateX(-2px)}
.msg-stack--tel .icon{width:26px;height:26px}
/* дзвінок зверху стеку (з 11.09 замість кнопки на кожній картці); на телефоні
   сторінки квартири його нема — там свій дзвінок у панелі «Забронювати» */
/* Дзвінок — біле коло з тонкою рамкою і заливною чорнильною трубкою
   (Руслан 11.09: ні чорне коло, ні контурна трубка не сподобались) */
.msg-stack a.msg-stack--tel{background:var(--paper);border:1px solid var(--ink);color:var(--ink)}
@media (max-width:999px){body.has-bookbar .msg-stack--tel{display:none}}
.msg-stack--wa{background:#25D366}
.msg-stack--vb{background:#7360F2}
.msg-stack--tg{background:#229ED9}
/* Telegram з підписом (Руслан 13.10.2026, клас ставить main.js лише з підключеним
   акаунтом; 21.10: «без згортання» всюди): пігулка розкрита завжди і ловить тап (подія з
   ::before іде на посилання). Коло — лише на мапі телефона (нижче). */
.msg-stack a.has-label::before{clip-path:inset(0);pointer-events:auto}
/* мапа на телефоні не прокручується — розкрита пігулка висіла б над нею постійно й ловила тапи */
@media (max-width:999px){.page-map .msg-stack a.has-label::before{clip-path:inset(0 0 0 100%);pointer-events:none}}
.cta__tg{max-width:34em;line-height:1.5}
/* Пігулка Telegram у правому верхньому куті фото хіро головної (Руслан 20.10.2026: напис
   «Найкраще — в Telegram» має бути видно одразу; внизу у стеку він накривав форму пошуку
   на будь-якому телефоні). Правий край — 16 px, як у кружечків стеку (Руслан 21.10, варіант Б
   проти «врівень із кнопкою шапки»). Решта правила без змін:
   на будь-якому телефоні). Вставляє build.py лише з підключеним акаунтом; на ПК її нема —
   там стек праворуч унизу розкритий завжди. У стеку на головній лишається коло. */
.hero__tg{position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:#229ED9;color:#fff;font-weight:600;font-size:.9375rem;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(20,22,20,.28)}
.hero__tg .icon{width:22px;height:22px;flex:none;transform:translateX(-1px)}
@media (min-width:1000px){.hero__tg{top:24px;min-height:48px;font-size:1rem;padding:0 20px 0 16px}}
/* Руслан 20.10.2026: «кнопку Telegram внизу забери, на її місце перемісти Подзвонити»,
   «Вайбер і Вотсап поміняй місцями», «при прокрутці пігулку Telegram нижньою»: порядок стеку
   згори вниз — Viber, WhatsApp, дзвінок, Telegram (найнижче) на всіх сторінках і на ПК. На
   головній Telegram у стеку схований, доки пігулка в хіро на екрані (тоді найнижче — дзвінок);
   щойно вона прокрутилась за екран, main.js ставить body.tg-stack і внизу стеку зʼявляється
   кружечок Telegram (у контактах розкривається). */
.msg-stack--tel{order:9}
.msg-stack--tg{order:10}
.msg-stack--vb{order:-1}
/* Головна (Руслан 21.10.2026): поки пігулка Telegram у хіро на екрані — Telegram у стеку
   кругла кнопка над Viber, без напису; прокрутили (body.tg-stack) — кругла зникає зверху,
   а внизу стеку пігулка «Найкраще — в Telegram», як на інших сторінках. Одна й та сама
   кнопка: міняється лише місце (order) і напис. */
.page-home:not(.tg-stack) .msg-stack--tg{order:-2}
.page-home:not(.tg-stack) .msg-stack a.msg-stack--tg.has-label::before{clip-path:inset(0 0 0 100%);pointer-events:none}
@media (hover:hover) and (pointer:fine){.page-home:not(.tg-stack) .msg-stack a.msg-stack--tg.has-label:hover::before{clip-path:inset(0)}}
/* «тиха зона» (форма пошуку, кнопка каталогу): стек іде за правий край, а
   «вгору» гасне — інакше вони накривають саме те, куди людина цілиться.
   Ховаємо строго за край: 140% ширини вистачало лише мобільному відступу
   16 px, а на десктопі кнопки визирали смужкою збоку.
   Діє лише на 1000–1199 px: там стек лягає на кнопку «Показати вільні квартири»
   (перекриття 11 px); від 1200 px кнопка закінчується за 13+ px до стеку.
   На телефоні стек видно одразу — рішення Руслана 11.09 («перевірю, наскільки
   шкодить перекривання»): іконки лягають на праві краї полів форми і на «+»
   гостей (заміряно на 375 px: перекриття «+» 24 px). Старий поріг 1439 лишився
   від попередньої верстки форми. */
@media (min-width:1000px) and (max-width:1199px){body.is-quiet .msg-stack{transform:translateX(calc(100% + 24px))}}
/* «вгору» на телефоні гасне, доки в кадрі форма пошуку чи широка кнопка каталогу
   (вона стоїть зліва, під його краєм). Мобільних тихих зон для стеку нема
   з 11.09 (Руслан: іконки видно всюди однаково) */
@media (max-width:999px){body.is-quiet .up{opacity:0;visibility:hidden}}
.up{right:auto;left:16px}
@media (min-width:1000px){
  /* 16 px від краю, а не 32: інакше стек заходив на поле контейнера (40–64 px) */
  .msg-stack{right:16px;bottom:24px}
  .up{left:16px;bottom:24px}
}
@media (max-width:999px){body.has-bookbar .msg-stack{bottom:96px}body.has-bookbar .toast{bottom:284px}}
/* На мапі стек стоїть над стрічкою карток (її висоту ставить map.js у --strip-h);
   на десктопі стрічка — ліва колонка, стек лишається у куті мапи */
@media (max-width:999px){.page-map .msg-stack{bottom:calc(var(--strip-h,0px) + 16px)}.page-map .toast{bottom:calc(var(--strip-h,0px) + 266px)}}

/* Широка кнопка в каталог під добіркою на головній: на телефоні людина
   бачила картки й не здогадувалась, що є ще (рішення Руслана 10.09). */
.featured__more{margin-top:1.5rem}
.featured__more .btn{width:100%}
@media (min-width:720px){
  .featured__more{display:flex;justify-content:center;margin-top:2rem}
  .featured__more .btn{width:auto;min-width:280px}
}

/* ---------- Пошук за адресою (головна і сторінка квартири) ----------
   Список квартир зʼявляється з другого символу; кожне слово запиту шукається
   окремо, тож «гал 9» знаходить Галицьку, 9. Малює його main.js. */
.find{position:relative}
.findbar{display:flex;gap:8px;margin:4px 0 18px}
.findbar .find{flex:1 1 auto;min-width:0}
.findbar .find .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.findbar input{width:100%;height:var(--tap);padding:0 14px 0 44px;border:1px solid var(--ink);background:var(--paper);font-size:1rem;color:var(--ink)}
.findbar input::placeholder{color:var(--mute);opacity:1}
/* гості поруч із пошуком (Руслан 13.09): та сама висота й рамка, що в поля;
   порожнє значення сіре, як плейсхолдер, бо це водночас підпис поля */
.findbar__guests{flex:none;height:var(--tap);padding:0 2px 0 12px;gap:6px;border-color:var(--ink)}
.findbar__guests > .icon{color:var(--mute)}
.findbar__guests output{font-size:.9375rem}
.findbar__guests output[data-val="0"]{color:var(--mute)}
.findbar__guests button{width:var(--tap)} /* тап-ціль ≥44 px і тут */
.find__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:min(60vh,360px);overflow:auto;background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow-card)}
.find__list li{display:flex;align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--line);cursor:pointer}
.find__list li img{width:64px;height:48px;object-fit:cover;flex:none;background:var(--bg)}
.find__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.find__list li:first-child{border-top:0}
.find__list li b{font-family:var(--f-disp);font-weight:400;font-size:1rem;line-height:1.2}
.find__list li span{font-size:var(--fs-sm);color:var(--mute)}
.find__list li.is-on{background:rgba(31,35,33,.06)}
.find__none{color:var(--mute);cursor:default;padding:10px 14px}
@media (hover:hover) and (pointer:fine){.find__list li[data-id]:hover{background:rgba(31,35,33,.06)}}
/* висота як у полів фільтра під ним; поле пошуку −10% від початкових 620,
   плюс степер гостей поруч */
@media (min-width:1000px){.findbar{max-width:764px;margin:6px 0 14px}}

/* ---------- Сторінковий хіро (каталог, квартира) ---------- */
.phero{padding:12px 0 0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-sm);color:var(--mute);min-height:var(--tap);align-items:center}
.crumbs .sep{opacity:.6}
.phero__title{font-family:var(--f-disp);font-size:clamp(2rem,8vw,3.25rem);line-height:1.05;letter-spacing:-.005em;text-wrap:balance}
.phero__sub{margin-top:.75rem;color:var(--mute);max-width:32em}
/* Хаби (build.py + data/hubs.json): вступ у два-три абзаци, далі картки або умови */
.hub__intro{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}
.hub__intro p{max-width:40em;line-height:1.55;text-wrap:pretty}
.hub__link a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-sm);color:var(--mute);text-decoration:underline;text-underline-offset:4px}
.hub__cta{display:flex;flex-direction:column;gap:14px;padding-top:24px}
/* розгорнутий текст хаба (22.10.2026): під картками — згорнутий, як «Детальніше про квартиру»;
   у текстовому хабі (гайд, погодинно) — відкритий, тією ж версткою */
.hub__more{margin-top:32px}
.hub__text{max-width:40em}
.page-hub .rules{max-width:40em;font-size:1rem}
/* Правила оренди (/rules/, site.json → rules, адмінка «Правила оренди», 21.10.2026):
   номер ліворуч цифрою знака, текст — звичайний абзац; лінії як у реєстрі умов */
.rules-list{max-width:40em;counter-reset:rule}
.rules-list li{counter-increment:rule;display:grid;grid-template-columns:2.25rem 1fr;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);line-height:1.55;text-wrap:pretty}
.rules-list li:last-child{border-bottom:1px solid var(--line)}
.rules-list li::before{content:counter(rule);font-family:var(--f-disp);font-size:1.125rem;color:var(--mute)}

/* ---------- Каталог: фільтри ---------- */
.fbar{padding:14px 0 0}
.fbar__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Дати й ціна — такі самі заввишки, як чіпи, щоб увесь фільтр стояв одним
   рядком (Руслан 10.09). Рамка чорнилом лишає їх головними серед чіпів. */
.f-dates{flex:1 1 100%;height:var(--tap);padding:0 14px;border:1px solid var(--ink);background:var(--paper);font-size:1rem;color:var(--ink)}
.f-dates::placeholder{color:var(--ink);opacity:1}
.f-price{flex:1 1 100%;display:flex;align-items:center;gap:10px;height:var(--tap);padding:0 12px;border:1px solid var(--ink);background:var(--paper)}
.f-price__cap{font-size:var(--fs-sm);color:var(--mute);flex:none}
.f-price__vals{flex:none;min-width:112px;font-family:var(--f-disp);font-size:.9375rem;white-space:nowrap;text-align:right}
.f-price .range{flex:1 1 auto;min-width:76px;height:var(--tap);margin:0}
.chip{display:inline-flex;align-items:center;gap:8px;height:var(--tap);padding:0 16px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:.9375rem;white-space:nowrap;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.chip .icon{width:18px;height:18px}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip__x{display:none;margin-left:2px}
.chip.is-on .chip__x{display:inline}
/* 1rem, не менше: селект дрібнішим за 16 px iOS Safari збільшує сторінку при тапі */
.fbar select{height:var(--tap);padding:0 36px 0 14px;border:1px solid var(--line);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F2321' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);font-size:1rem;appearance:none;-webkit-appearance:none}
.fbar__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:600}
.chip.is-on .fbar__count{background:#fff;color:var(--ink)}
.fbar__reset{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-sm);color:var(--mute);text-decoration:underline;text-underline-offset:4px}
.fmore{display:none;margin-top:12px;padding:16px;background:var(--paper);border:1px solid var(--line)}
.fmore.is-open{display:block}
.fmore__in{display:grid;gap:24px}
.fmore h2{font-family:var(--f-body);font-weight:600;font-size:var(--fs-sm);color:var(--mute);margin-bottom:10px}
.fmore__amen{display:flex;flex-wrap:wrap;gap:8px}
/* на телефоні ціна й район сховані під кнопкою «Фільтри»: пʼять рядків
   фільтрів відсували першу картку за межі екрана (заміряно 11.09: 621 px з 812).
   Кімнати («1 кімната» / «2 кімнати») на телефоні видно завжди — Руслан 11.09:
   у меню їх не додаємо, але в каталозі вони мають бути на сторінці */
@media (max-width:719px){
  .fbar:not(.is-open) .f-price,.fbar:not(.is-open) #fDistrict{display:none}
}
@media (min-width:720px){
  /* від планшета дати й ціна перестають тягтись на всю ширину і стають
     у той самий рядок, що й чіпи */
  .f-dates{flex:0 1 168px;min-width:0}
  .f-price{flex:0 1 300px}
}

/* Подвійний повзунок ціни */
.range{position:relative;height:var(--tap);margin:6px 0 0}
.range__track{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line);transform:translateY(-50%)}
.range__fill{position:absolute;top:50%;height:2px;background:var(--ink);transform:translateY(-50%)}
.range input[type="range"]{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:999px;background:var(--paper);border:1px solid var(--ink);pointer-events:auto;cursor:pointer}
.range input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:999px;background:var(--paper);border:1px solid var(--ink);pointer-events:auto;cursor:pointer}

.results-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;font-size:var(--fs-sm);color:var(--mute);white-space:nowrap}
.results-meta b{font-weight:600;color:var(--ink)}
/* як поле «Усі райони»: з рамкою, щоб читалось як елемент керування (Руслан 11.09) */
.fbar__sort{height:var(--tap);padding:0 36px 0 14px;border:1px solid var(--line);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F2321' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;font-size:1rem;color:var(--ink);appearance:none;-webkit-appearance:none}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:40px 0;max-width:32em}
.empty h3{font-family:var(--f-disp);font-size:1.5rem}
.empty p{color:var(--mute)}
.empty img{width:44px;height:44px}

/* ---------- Сторінка квартири ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px calc(-1*var(--gutter)) 0;padding:0 6px}
.gallery button{position:relative;display:block;overflow:hidden;background:var(--line);padding:0}
.gallery button:first-child{grid-column:1/-1;margin:0 -6px;aspect-ratio:13/10}
.gallery button:not(:first-child){aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--shade);color:#fff;font-size:var(--fs-xs);font-weight:600}
/* «в обране» на головному фото (Руслан 18.09: як на картках): поза сіткою, у правому
   верхньому куті обкладинки; специфічність вища за .gallery button:not(:first-child) */
.gallery{position:relative}
.gallery button.fav{position:absolute;display:inline-flex;overflow:visible;aspect-ratio:auto;width:var(--tap);height:var(--tap);right:8px;top:8px;margin:0;background:rgba(255,255,255,.92)}
@media (min-width:720px){
  .gallery{margin:20px 0 0;padding:0;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto}
  /* обкладинка — колонки 1–2 з чотирьох (gap 8px): її правий край на 50% − 4px */
  .gallery button.fav{right:calc(50% + 12px)}
  .gallery button:first-child{grid-column:1/3;grid-row:1/3;margin:0;aspect-ratio:auto;height:100%}
  /* висоту рядків задають мініатюри 4:3; головне фото лише заповнює свою клітинку,
     інакше портретний кадр розтягує рядки і між мініатюрами зʼявляються прогалини */
  .gallery button:first-child img{position:absolute;inset:0}
  .gallery button:not(:first-child){aspect-ratio:4/3}
}
.apt-head{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.apt-head__district{font-size:var(--fs-sm);color:var(--mute)}
.apt-head__meta{display:flex;flex-direction:column;gap:6px;font-size:.9375rem;color:var(--mute)}
.apt-head__meta span{display:flex;align-items:flex-start;gap:8px}
.apt-head__meta .icon{margin-top:2px}
.apt-head__rate{display:flex;align-items:baseline;gap:8px;font-size:.9375rem;color:var(--mute)}
.apt-head__rate b{font-family:var(--f-disp);font-weight:400;font-size:1.125rem;color:var(--ink)}
/* На мобільному секції йдуть у порядку розмітки (факти, опис, зручності,
   календар, мапа, умови); на десктопі картка бронювання стає правою колонкою. */
.apt-layout{display:grid;gap:0}
.apt-sec{padding-top:24px}
.apt-sec h2{font-family:var(--f-disp);font-size:1.5rem;line-height:1.1;margin-bottom:12px}
.apt-desc{font-size:1rem;line-height:1.55;text-wrap:pretty;max-width:40em}
/* «Детальніше про квартиру» — розгорнутий текст під коротким описом (build.py,
   data/descriptions/). Той самий малюнок, що у FAQ: Prata, плюс обертається.
   Текст кольору чорнила, бо це основний зміст сторінки, а не примітка. */
.apt-more{margin-top:16px;max-width:40em;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.apt-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font-family:var(--f-disp);font-size:1.125rem;line-height:1.25}
.apt-more summary::-webkit-details-marker{display:none}
.apt-more summary .icon{flex:none;color:var(--mute);transition:transform .2s var(--ease)}
.apt-more[open] summary .icon{transform:rotate(45deg)}
.apt-more__body{padding:4px 0 20px}
.apt-more__body h3{font-family:var(--f-disp);font-weight:400;font-size:1.0625rem;line-height:1.25;margin:22px 0 6px}
.apt-more__body h3:first-child{margin-top:0}
.apt-more__body p{font-size:1rem;line-height:1.55;text-wrap:pretty}
.apt-more__body p+p{margin-top:10px}
.apt-more__body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.amen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.amen li{display:flex;align-items:center;gap:12px;min-height:var(--tap);font-size:.9375rem}
.amen .icon{color:var(--mute);width:22px;height:22px;stroke-width:1.6}
.rules{display:flex;flex-direction:column}
.rules li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:.9375rem}
.rules li:last-child{border-bottom:1px solid var(--line)}
.rules li span{color:var(--mute);flex:none}
.rules li b{font-weight:400;text-align:right}
.map-box{position:relative;height:200px;background:#EBEBE5;overflow:hidden}
.map-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px}
.map-load p{font-size:var(--fs-sm);color:var(--ink)}
.map-load img{width:36px;height:36px}
.map-route{position:absolute;left:12px;bottom:12px;z-index:500}
@media (min-width:720px){.map-box{height:300px}}

/* Бронювання (картка) */
.book{margin-top:28px;padding:20px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.book__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.book__price .n{font-family:var(--f-disp);font-size:2rem;line-height:1}
.book__price .per{font-size:var(--fs-sm);color:var(--mute)}
.book label,.book .book__field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--mute)}
.book input[type="text"]{width:100%;height:52px;padding:0 14px;border:1px solid var(--line);background:var(--paper);font-size:1rem;color:var(--ink)}
.book input::placeholder{color:var(--mute);opacity:1}
.book .stepper{padding-left:14px;color:var(--ink)}
.quote{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.quote__row{display:flex;justify-content:space-between;gap:12px;font-size:.9375rem;color:var(--mute)}
.quote__row.disc{color:var(--ok)}
.quote__row span:last-child{white-space:nowrap;flex:none} /* сума («+600 ₴») не рветься, переноситься підпис ліворуч (21.10.2026) */
.quote__row.total{align-items:baseline;color:var(--ink)}
.quote__row.total span:last-child{font-family:var(--f-disp);font-size:1.625rem}
.quote__hint{font-size:var(--fs-xs);color:var(--mute)}
.book__trust{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-xs);color:var(--mute)}
.book__trust span{display:inline-flex;align-items:center;gap:6px}
.similar{margin-top:var(--sp-section)}
@media (min-width:1000px){
  .apt-head{margin-top:32px}
  .apt-layout{grid-template-columns:minmax(0,1fr) 400px;gap:0 64px;align-items:start}
  .apt-layout > *{grid-column:1}
  .apt-layout > .book{grid-column:2;grid-row:1 / span 12;position:sticky;top:calc(var(--hdr-h) + 16px);margin-top:24px;padding:24px}
  .apt-sec h2{font-size:1.75rem}
}

/* Липка панель бронювання (мобільний) */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:10px;padding:10px 16px 14px;background:rgba(245,245,242,.96);border-top:1px solid var(--line);transition:transform .25s var(--ease)}
.bookbar.is-hidden{transform:translateY(110%)}
.bookbar__price{display:flex;flex-direction:column;justify-content:center;min-width:96px;line-height:1.1}
.bookbar__price strong{font-family:var(--f-disp);font-weight:400;font-size:1.25rem}
.bookbar__price span{font-size:var(--fs-xs);color:var(--mute)}
.bookbar__cta{flex:1;min-height:52px}
.bookbar__tel{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--ink);color:var(--ink);flex:none}
body.has-bookbar{padding-bottom:84px}
@media (min-width:1000px){.bookbar{display:none}body.has-bookbar{padding-bottom:0}}

/* ---------- Лайтбокс ---------- */
.lb{position:fixed;inset:0;z-index:70;background:#111;color:#fff;display:none;flex-direction:column}
.lb.is-open{display:flex}
/* Лічильник і хрестик лежать ПОВЕРХ фото (як стрілки), а не окремим рядом:
   раніше ряд висотою шапки (84 px на ПК) забирав місце у фото (Руслан 11.09:
   «чому великий чорний проміжок над фото»). Підкладки — щоб читалось на світлому кадрі */
.lb__top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 8px 0 16px;pointer-events:none}
.lb__top > *{pointer-events:auto}
.lb__count{font-family:var(--f-disp);font-size:1rem;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.45)}
.lb__close{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);color:#fff;background:rgba(255,255,255,.12);border-radius:999px}
.lb .swiper{flex:1;width:100%;min-height:0}
.lb .swiper-slide{display:flex;align-items:center;justify-content:center}
.lb .swiper-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* z-index:2 — контейнер Swiper має z-index:1 і без цього слайд лежав над
   стрілками й зʼїдав клік (Руслан 11.09: «стрілки не працюють») */
.lb__nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:var(--tap);height:var(--tap);display:none;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.12);border-radius:999px}
.lb__nav--prev{left:16px}.lb__nav--next{right:16px}
@media (min-width:720px){.lb__nav{display:inline-flex}}

/* ---------- Модалка заявки ---------- */
.modal{position:fixed;inset:0;z-index:80;display:none}
.modal.is-open{display:block}
.modal__bg{position:absolute;inset:0;background:rgba(31,35,33,.5)}
.modal__card{position:absolute;left:0;right:0;bottom:0;max-height:92vh;max-height:92dvh;overflow:auto;background:var(--bg);padding:0 20px 24px;-webkit-overflow-scrolling:touch}
.modal__close{position:sticky;top:0;float:right;margin-right:-12px;width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink);z-index:1}
.modal__title{font-family:var(--f-disp);font-size:1.375rem;line-height:1.2;padding:14px 44px 0 0}
.modal__sub{margin-top:6px;font-size:var(--fs-sm);color:var(--mute)}
/* квартира в заявці: адреса великим (як у пошуку), назва, дати й сума; фото ліворуч */
.req-apt{display:flex;gap:14px;align-items:center;margin:12px 0 4px;padding:12px 14px;background:var(--bg);border:1px solid var(--line)}
.req-apt img{width:96px;height:72px;object-fit:cover;flex:none;background:var(--line)}
.req-apt > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.req-apt b{font-family:var(--f-disp);font-weight:400;font-size:1.25rem;line-height:1.2;color:var(--ink)}
.req-apt span{font-size:var(--fs-sm);color:var(--mute)}
.req-apt em{font-style:normal;font-size:var(--fs-sm);color:var(--ink)}
/* попередження про місткість: гостей більше, ніж вміщує квартира — заявка не йде */
.req-warn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--danger);background:var(--paper);color:var(--ink);font-size:var(--fs-sm);line-height:1.4}
.req-warn .icon{width:20px;height:20px;flex:none;color:var(--danger)}
.req-cap{margin-top:-2px;font-size:var(--fs-sm);color:var(--mute)}
/* сума за обрані дати у формі — як рядок «Разом» у картці квартири (Руслан 14.09) */
.req-sum{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-2px 0 14px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.35;color:var(--ink)}
.req-sum > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.req-sum strong{font-weight:600;color:var(--ink)}
.req-sum small{font-size:var(--fs-sm);color:var(--mute)}
.req-sum b{font-family:var(--f-disp);font-weight:400;font-size:1.75rem;line-height:1;color:var(--ink);white-space:nowrap}
/* «Мої замовлення» (/my/, js/my.js): заявки й броні цього браузера */
.orders{display:flex;flex-direction:column;gap:14px;max-width:640px}
.order{display:flex;gap:14px;padding:14px;background:var(--paper);border:1px solid var(--line)}
.order__img{flex:none;width:96px;height:72px;background:var(--line)}
.order__img img{width:100%;height:100%;object-fit:cover;display:block}
.order__body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.order__addr{font-family:var(--f-disp);font-size:1.25rem;line-height:1.2;color:var(--ink);text-decoration:none}
.order__title{font-size:var(--fs-sm);color:var(--mute)}
.order__when{font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.order__sum{font-family:var(--f-disp);font-size:1.375rem;line-height:1.1;color:var(--ink)}
.order__sum:empty{display:none}
.order__at{font-size:var(--fs-xs);color:var(--mute)}
.order__state{display:flex;gap:8px;align-items:flex-start;margin-top:4px;font-size:var(--fs-sm);line-height:1.4;color:var(--mute)}
.order__state::before{content:"";flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--mute)}
.order__state.is-ok{color:var(--ok)}
.order__state.is-ok::before{background:var(--ok)}
.order__state.is-bad{color:var(--danger)}
.order__state.is-bad::before{background:var(--danger)}
.order__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.order__acts .msgbtn{min-height:40px;padding:0 12px}
.order__rm{border:0;background:none;padding:0 4px;font-size:var(--fs-xs);color:var(--mute);text-decoration:underline;cursor:pointer}
.orders__empty{display:grid;justify-items:center;gap:12px;max-width:420px;padding:32px 0;text-align:center;color:var(--mute)}
@media (max-width:479px){
  .order{flex-direction:column}
  .order__img{width:100%;height:auto;aspect-ratio:4/3}
}
/* підсумок у вікні після надсилання: квартира, дати, сума */
.req-done__sum{display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--line);text-align:left}
.req-done__sum b{font-family:var(--f-disp);font-weight:400;font-size:1.25rem;line-height:1.2;color:var(--ink)}
.req-done__sum span{font-size:var(--fs-sm);color:var(--mute)}
.req-done__sum em{font-style:normal;font-size:1rem;color:var(--ink);font-weight:600}
/* оплата броні (демо 14.09.2026): стан словами під номером броні */
.req-pay{font-size:var(--fs-sm);line-height:1.45;color:var(--ink)}
.req-pay--ok{color:var(--ok)}
.req-pay--err{color:var(--danger)}
/* вибір «як Вам зручно» (демо оплати; ескіз preview/pay-choice.html, Руслан 14.09):
   три картки-вибори без різких заливок — назва ліворуч, сума праворуч у Prata,
   підпис дрібним; відтінки з палітри: червоний знака і чорнило на 6–7 % */
.req-choice{display:grid;gap:8px;width:100%}
.req-choice__h{font-size:var(--fs-sm);color:var(--mute)}
.req-opt{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;width:100%;min-height:60px;padding:11px 14px;border:1px solid var(--line);background:var(--paper);text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.req-opt b{font-weight:600;font-size:1rem;line-height:1.25}
.req-opt small{grid-column:1/-1;font-size:var(--fs-xs);line-height:1.3;color:var(--mute);margin-top:2px}
.req-opt em{font-style:normal;font-family:var(--f-disp);font-size:1.25rem;line-height:1;white-space:nowrap;color:var(--ink)}
.req-opt--dep{background:rgba(216,32,24,.07);border-color:rgba(216,32,24,.35)}
.req-opt--dep em{color:var(--red)}
.req-opt--full{background:rgba(31,35,33,.06);border-color:var(--line-2)}
.req-opt--full em{color:var(--ok)}
.req-opt:active{background:rgba(31,35,33,.1)}
.req-opt:disabled{opacity:.55;cursor:default}
/* «Мої замовлення» на екрані вибору — помітний текстовий лінк замість кнопки */
.req-link{display:inline-block;padding:6px 0;font-size:1rem;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}
/* смужка «Демо оплати» (?pay=demo) — риштування для перегляду, не частина дизайну */
.paydemo{position:relative;z-index:41;padding:8px var(--gutter);border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:var(--fs-xs);line-height:1.35;text-align:center}
.paydemo b{font-weight:600;color:var(--red)}
.paydemo a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.modal form{display:grid;gap:14px;margin-top:18px}
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field > span{font-size:var(--fs-sm);color:var(--mute)}
/* лише власні поля форми: .field input чіпав і шапку вбудованого календаря (місяць/рік
   flatpickr — теж select/input), назва місяця зʼїжджала й обрізалась (аудит 21.10.2026) */
.field > input,.field > select,.field > .flatpickr-wrapper > input{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line);background:var(--paper);font-size:1rem;color:var(--ink)}
.field > select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2321' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}
.field > input::placeholder,.field > .flatpickr-wrapper > input::placeholder{color:var(--mute);opacity:1}
/* «Дати | Кількість гостей» в один рядок у заявці (Руслан 12.09); гості — степер
   «− / +» як у пошуку, лише число, без відступу під іконку */
.field-row{display:grid;grid-template-columns:3fr 2fr;gap:12px}
@media (max-width:400px){.field-row{grid-template-columns:minmax(0,1fr) 122px}#reqDates{padding-left:12px;padding-right:12px}}
@media (max-width:360px){#reqDates{padding-left:9px;padding-right:9px}} /* діапазон дат з роками влазить на 360–375 */
.field .stepper--n{padding-left:14px;height:52px} /* урівень з полями заявки і на ПК (де .stepper 56) */
.field__err{display:none;font-size:var(--fs-xs);color:var(--danger);font-style:normal}
.field.is-err > input,.field.is-err > .flatpickr-wrapper > input{border-color:var(--danger)}
/* нагадування «Вкажіть, будь ласка, дату заїзду — виїзду» згори календаря форми (21.10.2026) */
.cal-note{padding:10px 12px;font-size:var(--fs-sm);font-weight:600;line-height:1.3;color:var(--danger);text-align:center;border-bottom:1px solid var(--line)}
.cal-note[hidden]{display:none}
/* стрілки місяців — від рядка з місяцем, а не від верху календаря: інакше нагадування згори
   лягало під стрілку «наступний місяць» */
.flatpickr-calendar .flatpickr-months{position:relative}
.field.is-err .field__err{display:block}
.modal__msgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.msgbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 8px;border:1px solid var(--ink);color:var(--ink);font-size:var(--fs-sm);font-weight:600;background:transparent}
.msgbtn--copy{grid-column:1/-1;border-color:var(--line);color:var(--mute);font-weight:400}
.msgbtn.pop{animation:msgnudge .5s var(--ease)}
@keyframes msgnudge{0%{transform:translateY(0)}30%{transform:translateY(-4px)}60%{transform:translateY(0)}80%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@media (min-width:720px){
  .modal{display:none;align-items:center;justify-content:center}
  .modal.is-open{display:flex}
  .modal__card{position:relative;width:min(560px,calc(100% - 32px));max-height:90vh;padding:0 28px 28px;border:1px solid var(--line);box-shadow:var(--shadow-card)}
  .modal__msgs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .modal__msgs.modal__msgs--two{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Cloudflare Turnstile у формі заявки (30.09.2026): зазвичай невидимий; лише коли просить
   галочку — рамка над кнопкою «Надіслати» */
.req-cf:not(.is-on){height:0;overflow:hidden}
.req-cf.is-on{margin:4px 0 8px}

/* ---------- Тост ---------- */
/* нижній край підібраний так, щоб тост не накривав стек месенджерів (176 px) */
/* тост — над календарем (у flatpickr z-index 99999): підказка про горизонт ховалась під ним (аудит 21.10.2026) */
.toast{position:fixed;left:16px;right:16px;bottom:266px;z-index:100001;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--ink);color:#fff;font-size:var(--fs-sm);opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
/* тост стоїть над стеком: 4 кола по 52 px + відступи = 238 px + край */
@media (min-width:1000px){.toast{bottom:274px}}
.toast.is-show{opacity:1;transform:none}
.toast .icon{color:#fff}
@media (min-width:720px){.toast{left:auto;right:32px;bottom:32px;max-width:420px}}

/* ---------- Мапа всіх квартир ---------- */
.map-main{display:flex;flex-direction:column;height:calc(100dvh - var(--hdr-h))}
.map-topbar{border-bottom:1px solid var(--line);background:var(--bg)}
.map-topbar__in{display:flex;align-items:center;gap:10px;height:56px}
.map-topbar__title{font-family:var(--f-disp);font-size:1.375rem;white-space:nowrap}
/* чіпи локацій замість «Списком» (Руслан 17.09): Центр / Чорновола / Привокзальна /
   Новобудови з site.json; на телефоні ряд прокручується вбік, висоти мапі не забирає */
.map-chips{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.map-chips::-webkit-scrollbar{display:none}
.map-chips .chip{flex:none;padding:0 14px}
@media (min-width:1000px){.map-chips{margin-left:8px}}
.map-wrap{position:relative;flex:1;min-height:0}
.bigmap{position:absolute;inset:0;background:#EBEBE5}
.map-strip{position:absolute;left:0;right:0;bottom:0;z-index:500;display:flex;gap:10px;overflow-x:auto;padding:0 16px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.map-strip::-webkit-scrollbar{display:none}
.mcard{position:relative;flex:0 0 calc(100% - 24px);scroll-snap-align:center;display:grid;grid-template-columns:112px 1fr;gap:12px;padding:12px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.mcard img{width:112px;height:112px;object-fit:cover}
.mcard.is-active{border-color:var(--ink)}
.mcard__body{display:flex;flex-direction:column;gap:4px;min-width:0}
/* не більше двох рядків: назва на чотири рядки закривала пів мапи (11.09) */
.mcard__title{font-family:var(--f-disp);font-size:1.125rem;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard__meta{font-size:var(--fs-xs);color:var(--mute)}
.mcard__price{font-family:var(--f-disp);font-size:1.125rem;margin-top:auto}
.mcard__price small{font-family:var(--f-body);font-size:var(--fs-xs);color:var(--mute)}
.mcard__link{position:absolute;inset:0}
.pin-wrap{background:none;border:0}
.pin{position:relative;transform:translate(-50%,-125%);display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 8px;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font-family:var(--f-disp);font-size:.8125rem;white-space:nowrap;cursor:pointer}
.pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:1px;height:6px;background:var(--ink)}
.pin.is-active{background:var(--red);border-color:var(--red);color:#fff;z-index:2}
/* далекий масштаб (зум < 15): усе — кола-кластери .cluster, і поодинока квартира теж (з «1», 18.09) */
/* точка будинку на сторінці квартири: 14 px + білий обідок, рівно на координаті */
.pin-dot{position:relative;width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid #fff;box-shadow:0 0 0 1px rgba(31,35,33,.25),0 2px 6px rgba(31,35,33,.35);transform:translate(-50%,-50%)}
/* крапка — мініатюра цінника: папір, тонка рамка чорнила, легка тінь (Руслан 12.09: чорні
   заливні 14 px зливались у пляму); активна — червона з білим обідком, як .pin-dot */
/* кластер: кілька квартир поруч на далекому зумі (map.js recluster) — те саме коло з числом,
   ::before розширює тап-ціль до 44 px; активна квартира всередині — червоне коло */
.cluster{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--paper);border:1.5px solid rgba(31,35,33,.6);box-shadow:0 1px 4px rgba(31,35,33,.25);font-family:var(--f-disp);font-size:.9375rem;line-height:1;color:var(--ink);transform:translate(-50%,-50%);cursor:pointer}
.cluster::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.cluster--l{width:36px;height:36px}
.cluster--xl{width:42px;height:42px;font-size:1.0625rem}
.cluster.is-active{background:var(--red);border-color:#fff;color:#fff;box-shadow:0 0 0 1px rgba(31,35,33,.25),0 2px 6px rgba(31,35,33,.35)}
@media (min-width:1000px){
  .map-wrap{display:grid;grid-template-columns:420px 1fr}
  .map-strip{position:static;flex-direction:column;overflow-y:auto;padding:16px;gap:12px;scroll-snap-type:none;border-right:1px solid var(--line)}
  .mcard{flex:none;box-shadow:none}
  .bigmap{position:relative}
}
/* Окремий контекст накладання: шари Leaflet мають z-index 400 і без цього лягали
   НАД плаваючими кнопками (стек 30, «вгору» 30) — на мапі іконки месенджерів
   було видно лише на мить під час зуму, коли зникали старі тайли (Руслан 11.09) */
.leaflet-container{font-family:var(--f-body);isolation:isolate}
.leaflet-control-attribution{font-size:10px}

/* ---------- Flatpickr у нашій системі ---------- */
.flatpickr-calendar{font-family:var(--f-body);border-radius:0;box-shadow:var(--shadow-card);border:1px solid var(--line)}
.flatpickr-day{border-radius:0;font-family:var(--f-disp)}
/* календар форми заявки вбудований у вікно форми (static) — обгортка на всю ширину поля */
.modal .flatpickr-wrapper{display:block}
/* вбудований календар завжди під полем — трикутник-стрілка flatpickr малювався не з того боку */
.flatpickr-calendar.static:before,.flatpickr-calendar.static:after{display:none}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.flatpickr-day.inRange{background:rgba(31,35,33,.08);border-color:rgba(31,35,33,.08);box-shadow:-5px 0 0 rgba(31,35,33,.08),5px 0 0 rgba(31,35,33,.08)}
/* Зайняті ночі (Руслан 21.10.2026, за ескізом): день = ніч, що починається цього дня.
   Зайнята — сірий кружечок із закресленою цифрою (OB.calDay → .is-busy, і на сторінці
   квартири, і у формі заявки); минулі дні й дні за горизонтом — бліді, без закреслення;
   вільні дні сусіднього місяця — ледь світліші за поточний. Префікс .flatpickr-calendar —
   сильніше за vendor/flatpickr.min.css, який OB.loadFlatpickr підключає пізніше. */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover{color:#cfd1ce;text-decoration:none;background:none;border-color:transparent}
.flatpickr-calendar .flatpickr-day.nextMonthDay:not(.flatpickr-disabled):not(.notAllowed):not(.selected):not(.startRange):not(.endRange),.flatpickr-calendar .flatpickr-day.prevMonthDay:not(.flatpickr-disabled):not(.notAllowed):not(.selected):not(.startRange):not(.endRange){color:#5c5f5c}
.flatpickr-calendar .flatpickr-day.is-busy:not(.selected):not(.startRange):not(.endRange),.flatpickr-calendar .flatpickr-day.is-busy:not(.selected):not(.startRange):not(.endRange):hover{background:#ebe9e4;border-color:#fff;color:#8d908c;text-decoration:line-through;text-decoration-thickness:1px}
.cal-legend{display:flex;gap:18px;justify-content:center;padding:10px 12px 12px;font:13px/1.2 var(--f-body);color:var(--mute);border-top:1px solid var(--line)}
.cal-legend[hidden]{display:none}
.cal-legend i{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border:1px solid var(--line)}
.cal-legend i.b{background:#ebe9e4;border-color:#ebe9e4}
.flatpickr-months .flatpickr-month,.flatpickr-current-month{font-family:var(--f-disp)}

/* ---------- Рух: один момент, поява хіро ----------
   Клас .js-intro ставить інлайн-скрипт у <head>: стан «до появи» діє ще до
   першого малювання, а зі скриптом із defer текст не блимає. */
.js-intro .hero__media img{transform:scale(1.06);animation:hero-open 1.4s var(--ease) forwards}
.js-intro .hero__text{opacity:0;animation:hero-text .7s var(--ease) .35s forwards}
.js-intro .search{opacity:0;animation:hero-text .6s var(--ease) .55s forwards}
.js-intro .hero__tg{opacity:0;animation:hero-text .6s var(--ease) .45s forwards}
@keyframes hero-open{to{transform:none}}
@keyframes hero-text{to{opacity:1}}

/* Нижче першого екрана: розкладку й малювання секції браузер робить, лише коли
   вона підходить до вʼюпорта (content-visibility:auto). Замір 19.09 на CPU ×4:
   повна розкладка головної 69 → 24 мс, LCP менше чекає на секції, яких не видно.
   contain-intrinsic-size — висота-заглушка до першого показу (телефон 375 px);
   після нього браузер памʼятає справжню (auto; перед ним просте число — для старих
   Chrome 85–97, що знають content-visibility, але не ключ auto). html.js-hash ставлять інлайн-скрипт
   голови (сторінка відкрита з /#faq) і main.js (тап по якорю на цій же сторінці):
   тоді все малюється одразу, щоб перехід ліг точно. Секція з мапою лишається
   звичайною — Leaflet міряє контейнер при створенні. */
html:not(.js-hash) .page-home main > .section{content-visibility:auto;contain-intrinsic-size:480px;contain-intrinsic-size:auto 480px}
html:not(.js-hash) .page-home #featured{contain-intrinsic-size:5300px;contain-intrinsic-size:auto 5300px}
html:not(.js-hash) .page-apartment .apt-layout > .apt-sec:not(.apt-sec--map){content-visibility:auto;contain-intrinsic-size:300px;contain-intrinsic-size:auto 300px}
html:not(.js-hash) .page-apartment .similar{content-visibility:auto;contain-intrinsic-size:1350px;contain-intrinsic-size:auto 1350px}
@media (min-width:640px){html:not(.js-hash) .page-home #featured{contain-intrinsic-size:2800px;contain-intrinsic-size:auto 2800px}}
@media (min-width:1000px){html:not(.js-hash) .page-home #featured{contain-intrinsic-size:1900px;contain-intrinsic-size:auto 1900px}}
/* Каталог (з 20.10.2026): картки від четвертої — так само, перші три видимі одразу (їх фото
   eager). Картка на 375 px ≈ 440 px (фото 4:3 + текст); після першого показу — справжня. */
html:not(.js-hash) #catalogGrid > .apt-card:nth-child(n+4),html:not(.js-hash) #hubGrid > .apt-card:nth-child(n+4){content-visibility:auto;contain-intrinsic-size:440px;contain-intrinsic-size:auto 440px}

/* Наведення лише там, де є курсор: на тачі hover-стани залипають. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#000;border-color:#000}
  .btn--brass:hover{background:var(--red-700);border-color:var(--red-700)}
  .btn--ghost:hover{background:rgba(31,35,33,.06)}
  .ibtn:hover,.fav:hover,.foot__soc a:hover{background:rgba(31,35,33,.06)}
  .gallery button.fav:hover{background:#fff}  /* на фото — біле коло лишається білим, лише щільніше */
  .chip:hover{border-color:var(--ink)}
  .req-opt:hover{border-color:var(--ink)}   /* картки вибору оплати — як чипи */
  .req-link:hover{text-decoration-color:var(--ink)}
  .apt-card__media img{transition:transform .5s var(--ease)}
  .apt-card:hover .apt-card__media img{transform:scale(1.03)}
  .nav a:hover,.shead__link:hover,.fbar__reset:hover{color:var(--ink)}
  .lang__menu a:hover{background:rgba(31,35,33,.06)}
  .lang__btn:hover .icon{color:var(--ink)}
  .dist:hover .dist__name{text-decoration:underline;text-underline-offset:4px}
  .pin:hover{border-color:var(--red)}
  .cluster:hover{border-color:var(--ink)}
  /* стек месенджерів: під курсором коло витягується у пігулку з підписом */
  .msg-stack a:hover::before{clip-path:inset(0)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-intro .hero__media img,.js-intro .hero__text,.js-intro .search,.js-intro .hero__tg{animation:none;opacity:1;transform:none}
  .fav.pop .icon,.msgbtn.pop,.hdr__favs.pop{animation:none}
  .drawer,.bookbar,.up,.toast,.btn,.chip,.faq summary .icon,.apt-more summary .icon,.msg-stack,.nav__ink{transition:none}
  /* стек: пігулка зʼявляється одразу, без висування; натискання без стискання */
  .msg-stack a,.msg-stack a::before{transition:none}
  .msg-stack a:active{transform:none}
}