/* ============================================================
   ОБЕРІГ — дизайн-система, напрям А «Вікно» (обрано 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, 5.25rem);
  --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{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 12px)}
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 ширина цифри й так однакова — заміряно) */
.hdr__phone-m{display:inline-block;padding:3px 0;font-family:var(--f-body);font-weight:600;font-size:clamp(.8125rem,3.4vw,.9375rem);line-height:1.3;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}
.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:500}
@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__phone-m{display:none}
  .hdr__cta .ibtn{width:var(--tap);height:var(--tap)}
  .hdr__book{display:inline-flex}
  .burger{display:none}
}
/* Вузький десктоп: 7 пунктів меню + «UA ⌄» + повний номер + сердечко обраних.
   Поле контейнера 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}
}

/* ---------- Мобільне меню ---------- */
.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.02;text-wrap:balance;max-width:11ch}
.hero__lede{margin-top:.75rem;font-size:1rem;line-height:1.45;max-width:22em;color:rgba(255,255,255,.92)}

/* Картка пошуку лягає на низ фото, як підвіконня */
.search{position:relative;z-index:2;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}
.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}
@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:1.55fr 1fr .95fr 1.2fr;gap:12px}
  .search input[type="text"],.stepper{height:56px}
  .hero__lede{font-size:1.25rem;max-width:26em}
}

/* ---------- Реєстр фактів (лінійки) ---------- */
.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)}
@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)}
}
@media (min-width:1000px){.dists{grid-template-columns:repeat(4,minmax(0,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}
.rev-card{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--paper);border:1px solid var(--line);height:auto}
.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 */
.swiper-pagination-rev{position:static;margin-top:10px;--swiper-pagination-bullet-size:24px;--swiper-pagination-bullet-horizontal-gap:2px}
.swiper-pagination-bullet{position:relative;width:24px;height:24px;background:transparent;opacity:1;border-radius:999px}
.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)}
.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__note{font-size:var(--fs-sm);color:var(--mute);max-width:32em}
.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)}

/* ---------- Перемикач мов (видимий з 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{width:52px;height:52px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-card)}
.msg-stack a .icon{width:26px;height:26px}
.msg-stack--wa{background:#25D366}
.msg-stack--vb{background:#7360F2}
.msg-stack--tg{background:#229ED9}
/* «тиха зона» (форма пошуку, кнопка каталогу): стек іде за правий край, а
   «вгору» гасне — інакше вони накривають саме те, куди людина цілиться.
   Ховаємо строго за край: 140% ширини вистачало лише мобільному відступу
   16 px, а на десктопі (32 px) кнопки визирали смужкою збоку */
body.is-quiet .msg-stack{transform:translateX(calc(100% + 24px))}
body.is-quiet .up{opacity:0;visibility:hidden}
.up{right:auto;left:16px}
@media (min-width:1000px){
  .msg-stack{right:32px;bottom:32px}
  .up{left:32px}
  /* ховання в тихій зоні — суто мобільне: на десктопі плаваючі кнопки
     стоять далеко від форми й кнопки каталогу */
  body.is-quiet .msg-stack{transform:none}
  body.is-quiet .up{opacity:1;visibility:visible}
}
@media (max-width:999px){body.has-bookbar .msg-stack{bottom:96px}body.has-bookbar .toast{bottom:284px}}

/* Широка кнопка в каталог під добіркою на головній: на телефоні людина
   бачила картки й не здогадувалась, що є ще (рішення Руслана 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{margin:4px 0 18px}
.findbar .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}
.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;flex-direction:column;gap:2px;padding:10px 14px;border-top:1px solid var(--line);cursor:pointer}
.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}
@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:558px;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}

/* ---------- Каталог: фільтри ---------- */
.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}
.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:.9375rem;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}
.fmore .stepper{max-width:200px}
@media (min-width:720px){
  .fmore__in{grid-template-columns:1fr 1.4fr;gap:32px}
  /* від планшета дати й ціна перестають тягтись на всю ширину і стають
     у той самий рядок, що й чіпи */
  .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)}
.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 svg{width:44px;height:44px;color:var(--red);fill:currentColor}

/* ---------- Сторінка квартири ---------- */
.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}
@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}
  .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}
.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 svg{color:var(--red);fill:currentColor}
.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__we{margin:.35rem 0 0;font-size:var(--fs-sm);color:var(--mute)}
.book label{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.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}
.lb__top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h);padding:0 8px 0 20px}
.lb__count{font-family:var(--f-disp);font-size:1rem}
.lb__close{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);color:#fff}
.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}
.lb__nav{position:absolute;top:50%;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;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)}
.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,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line);background:var(--paper);font-size:1rem;color:var(--ink)}
.field textarea{min-height:84px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--mute);opacity:1}
.field__err{display:none;font-size:var(--fs-xs);color:var(--danger);font-style:normal}
.field.is-err input{border-color:var(--danger)}
.field.is-err .field__err{display:block}
.modal__msgs{display:grid;grid-template-columns:repeat(3,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:500}
.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)}
}

/* ---------- Тост ---------- */
/* нижній край підібраний так, щоб тост не накривав стек месенджерів (176 px) */
.toast{position:fixed;left:16px;right:16px;bottom:204px;z-index:90;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}
@media (min-width:720px){.toast{bottom:220px}}
.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}
.map-topbar__hint{font-size:var(--fs-sm);color:var(--mute);white-space:nowrap;flex:1}
.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}
.mcard__title{font-family:var(--f-disp);font-size:1.125rem;line-height:1.15}
.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}
/* далекий масштаб: крапки замість цінників (map.js ставить .map--far при зумі < 15) */
.map--far .pin{width:14px;height:14px;padding:0;font-size:0;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.map--far .pin::after{display:none}
.map--far .pin.is-active{width:18px;height:18px;background:var(--red)}
@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-container{font-family:var(--f-body)}
.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)}
.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)}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:var(--line-2);text-decoration:line-through}
.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}
@keyframes hero-open{to{transform:none}}
@keyframes hero-text{to{opacity:1}}

/* Наведення лише там, де є курсор: на тачі 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)}
  .chip:hover{border-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)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-intro .hero__media img,.js-intro .hero__text,.js-intro .search{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,.msg-stack,.nav__ink{transition:none}
}