/* ============================================================
   FAKTOR - фірмові шрифти, свої файли
   ============================================================

   Раніше шрифти підключалися рядком <link> на fonts.googleapis.com. Файл там
   важить 1,4 КБ, а коштує близько 266 мс: чужий домен - це окремий DNS,
   окреме TLS-рукостискання й окремий запит, і все це ПЕРЕД тим, як браузер
   узагалі дізнається адреси самих woff2 на третьому домені (gstatic).
   Лістинг каталогу впирався саме в цей рядок - він був найдорожчим із того,
   що блокує показ сторінки.

   Тепер і опис, і файли лежать у нас: опис приїжджає тим самим з'єднанням,
   що й решта стилів, а woff2 - наступним кроком без нових рукостискань.

   Шрифти - ВАРІАТИВНІ (font-weight: 400 800 - це діапазон, а не два числа):
   один файл на підмножину символів замість окремого файлу на кожну жирність.
   Було п'ять накреслень Inter і три Manrope, тобто до шістнадцяти запитів на
   сторінку; стало чотири. Заразом коректно малюється font-weight:650, який у
   статичних накресленнях округлявся до 700.

   Підмножини - лише ті, якими сайт користується: кирилиця й латиниця в двох
   варіантах кожна. Грецьку й в'єтнамську, які віддає Google, не тримаємо.
   unicode-range лишається тим самим: файл качається, тільки якщо на сторінці
   є хоч один його символ.

   Оновлення: файли взяті з Google Fonts (Inter v20). Щоб оновити -
   завантажити css2 з тими самими параметрами (Inter:wght@400..800,
   скачати woff2 у css/fonts/ і замінити src.
   ============================================================ */


/* ---------- NAMU 1990: заголовки й ціни ----------

   Шрифт Дмитра Растворцева для Національного художнього музею України,
   ліцензія Creative Commons BY-ND 4.0: безкоштовно для веба й друку, з
   двома умовами.

   BY - авторство вказане в "Умовах користувача".

   ND - не змінювати. Тому файл повний, без субсетингу: вирізати з нього
   зайві символи заради кількох кілобайтів означало б зробити похідний
   твір, а це рівно те, чого ліцензія не дозволяє. Конвертація OTF у WOFF2
   похідним твором не є - це те саме, інакше запаковане.

   Один файл на всі накреслення: у шрифті одне, і font-weight на
   заголовках синтетичного жирного не просить.
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'NAMU-1990';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/css/fonts/namu-1990.woff2") format('woff2'),
       url("/css/fonts/namu-1990.otf") format('opentype');
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/css/fonts/inter-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/css/fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ЧОМУ З ЛАТИНСЬКОГО ДІАПАЗОНУ ВИРІЗАНА ОДНА ЛІТЕРА (406).

   U+20B4 - це "₴". Формально вона стоїть у наборі валютних знаків
   U+20AD-20C0, і Google роздає її і в latin-ext, і в cyrillic-ext. Наслідок
   був такий: на сторінці з гривневими цінами - тобто на будь-якій нашій,
   бо гривня стоїть за замовчуванням, - браузер тягнув inter-latin-ext.woff2
   заради ОДНОГО знака. Це 83 КБ, найважчий файл сторінки після фотографії.
   Заміряно: інших символів із latin-ext на головній немає жодного.

   Тепер "₴" лишається тільки в cyrillic-ext, який і так завантажується.
   Латиною сторінка нічого не втрачає: якщо десь трапиться справжній
   latin-ext (польське "ł", румунське "ș"), файл прийде як і раніше.

   Перевірено до коміту: рядок ціни "₴ 2 990 000" до і після правки дає
   ОДНАКОВИЙ знімок екрана, побайтово. Змінюється не вигляд, а те, з якого
   файлу береться той самий знак. */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/css/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B3, U+20B5-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/css/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* MANROPE ТУТ БІЛЬШЕ НЕМАЄ, І ОСЬ ЧОМУ.

   Він стояв другим у --font-brand, тобто запасним після NAMU-1990. Поки
   NAMU завантажується - а він завантажується, - черга до запасного не
   доходить ніколи. Заміряно на бойовому 18.09: Inter 1 471 елемент,
   NAMU-1990 18, Manrope НУЛЬ.

   Самі по собі @font-face браузер не качає, качав їх preload у шаблоні -
   примусово й з високим пріоритетом, конкуруючи за канал із фотографією
   першого екрана. Прибрано разом: і рядок preload, і оголошення, і файли
   (чотири підмножини, 57 КБ).

   Якщо NAMU колись відпаде, наступним у стеку стоїть Inter - він уже
   завантажений і на сторінці, тож запасний із нього кращий, ніж третій
   шрифт, який довелося б качати. */


/* =====================================================================
   FAKTOR - ДИЗАЙН-ТОКЕНИ (єдине джерело правди)
   Кольори та типографіка для всього сайту. Підключати ПЕРШИМ,
   до style.css. Усі значення в розмітці беруться лише звідси через var().
   Джерело шкали - Figma (див. REFERENCE.md).
   ===================================================================== */
:root{

  /* ---------------- АДАПТИВ-ЛЕЙАУТ ---------------- */
  /* Обернений коефіцієнт zoom-у .frame (1/zoom). На широких екранах zoom=1, тож
     counter=1. На вужчих - перевизначається в style.css на тих самих zoom-
     сходинках (1/.93, 1/.87, ...). Навбар контр-масштабується ним, щоб лишатись
     1:1 поверх стиснутого фрейма. Усе на CSS, без JS. */
  --nav-counter:1;

  /* ---------------- ШРИФТИ ---------------- */
  --font-brand:'NAMU-1990','Inter',system-ui,sans-serif;                  /* H1 / великі категорії (ТЗ) */
  --font-base :'Inter','SFT Schrifted Sans','Helvetica Neue',Arial,sans-serif; /* основний текст / UI */

  /* ---------------- РОЗМІРИ ТЕКСТУ (кегль) ---------------- */
  /* Одна шкала на весь сайт, без стрибків між екранами.
     clamp(мінімум, гумова частина, максимум): розмір їде плавно від
     телефона до великого монітора, і окремі значення "для мобільного" більше
     не потрібні - саме вони й давали стрибок на межі 900 пікселів.

     Верхні межі не випадкові: H2 на 56 пікселях займав два рядки і сам по
     собі важив 118 пікселів висоти ("Хочете продати нерухомість?"). */
  --fs-display:clamp(28px, 3.4vw, 44px);  /* H1 сторінки */
  --fs-h1     :clamp(24px, 2.3vw, 32px);  /* заголовок секції (H2 за змістом) */
  --fs-h2     :clamp(26px, 2.6vw, 36px);  /* велика ціна: обʼєкт, ексклюзив */
  --fs-h3     :clamp(17px, 1.5vw, 20px);  /* заголовки карток, ціна в лістингу */
  --fs-h4     :clamp(16px, 1.3vw, 18px);  /* заголовок суцільної картки */
  --fs-lg     :clamp(15px, 1.2vw, 17px);  /* лід, назви ЖК, характеристики */
  --fs-base   :clamp(15px, 1vw, 16px);    /* ОСНОВНИЙ текст, меню, поля, кнопки */
  --fs-md     :clamp(13px, .95vw, 14px);  /* підписи полів, мета-рядки, таблиці */
  --fs-sm     :clamp(12px, .9vw, 13px);   /* дрібні підписи */
  --fs-xs     :clamp(11px, .8vw, 12px);   /* мікромітки */

  /* ---------------- ТРЕКІНГ (letter-spacing, пара до кегля) ---------------- */
  --ls-display:-2.88px;
  --ls-h1     :-2.24px;
  --ls-h2     :-1.6px;
  --ls-h3     :-.96px;
  --ls-h4     :-.6px;
  --ls-lg     :-.72px;
  --ls-base   :-.3px;
  --ls-sm     :-.26px;
  --ls-xs     :-.24px;

  /* ---------------- ІНТЕРЛІНЬЯЖ (line-height) ---------------- */
  --lh-none   :1;      /* однорядкові кнопки / великі цифри */
  --lh-tight  :1.05;   /* заголовки */
  --lh-snug   :1.2;    /* підзаголовки карток */
  --lh-base   :1.3;    /* основний текст */
  --lh-relaxed:1.55;   /* hero-підзаголовок */

  /* ---------------- НАСИЧЕНІСТЬ (font-weight) ---------------- */
  --fw-regular :400;
  --fw-medium  :500;
  --fw-semibold:600;
  --fw-bold    :700;
  --fw-heavy   :800;
  --fw-black   :900;

  /* ---------------- КОЛЬОРИ · бренд і текст ---------------- */
  --navy :#001D4B;               /* бренд: лого, кнопки, заливки, футер */
  --dark :#141414;               /* основний текст */
  --slate:rgba(20,20,20,.87);               /* посилання навбару */
  --muted:rgba(20,20,20,.60);    /* вторинний текст (Dark 60%) */
  --white:#fff;
  --gold :#DEB87A;               /* фірмове золото: значки, риски, бейдж "Комісія 0%" */
  --gold-hover :#E7C68C;            /* єдиний hover золотої кнопки на весь сайт */

  /* Прозоре золото: тонкі лінії й підкладки. Було шість однакових
     rgba(222,184,122,...) у пʼятьох файлах - тобто той самий колір, який
     ніхто не міг змінити в одному місці. */
  --gold-line :rgba(222,184,122,.55);   /* лінія-роздільник на темному */
  --gold-edge :rgba(222,184,122,.35);   /* рамка золотої кнопки-привида */
  --gold-soft :rgba(222,184,122,.22);   /* підкладка під золотим акцентом */
  /* Золото на світлому тлі як ТЕКСТ не читається (контраст 1.9:1), тому
     другого, темнішого золота більше немає: там, де раніше стояло
     --gold-deep, текст тепер navy. Золотим лишається те, що читається
     формою, а не кольором: значки, риски, бейдж на темному. */
  --gold-deep:var(--navy);
  --danger    :#b4422f;          /* небезпечна дія "Очистити все" (Обране) */
  --ok        :#1F7A4D;          /* "зараз відкрито", підтверджений стан */
  --danger-bd :#f0d4d4;          /* межа кнопки "Очистити все" у спокої */

  /* Стани форм - єдиний виняток із чотирьох кольорів брендбуку. Зелений і
     червоний тут не оформлення, а відповідь: "надіслано" і "не вдалося".
     Кольором стану позначається тільки це і більше ніде. */
  --ok-bg     :#E8F5EE;
  --ok-bd     :#BFE3D0;
  --ok-fg     :#17603F;
  --danger-bg :#FDECEC;
  --danger-fg :#8A1F1F;
  --secondary :rgba(20,20,20,.66);          /* вторинний підпис ("від", підзаголовки картки Обране) */
  --addr      :rgba(20,20,20,.62);          /* адреса в картці об'єкта (Обране) */
  --navy-82   :rgba(0,29,75,.82);/* напівпрозорий navy-бейдж типу на фото (Обране) */

  /* ---------------- КОЛЬОРИ · поверхні ---------------- */
  --soft       :rgba(20,20,20,.03);         /* карткові фони */
  --field      :rgba(20,20,20,.04);         /* поля пошуку (головна) */
  --field-2    :rgba(20,20,20,.06);         /* поля фільтрів (каталог) */
  --chip-bg    :rgba(20,20,20,.08);         /* пігулка-лейбл під hero */
  --pay-pill   :rgba(222,184,122,.18);         /* фон пігулки "Перший внесок" (картка новобудови) */
  --placeholder:rgba(20,20,20,.16);         /* плейсхолдери зображень (колір-fallback) */
  --placeholder-img:url("/img/decor/property-placeholder.webp"); /* картинка-заглушка фото об'єктів */
  /* Слова-категорії під пошуком. Вони стоять НА БІЛОМУ, а не на фото:
     темна підкладка шапки закінчується вище. Тому це світло-сірий від
     чорного, а не білий з прозорістю - білим по білому їх не видно
     взагалі, і півекрана виглядало порожнім. */
  --hero-word  :rgba(20,20,20,.22);
  --hero-bg-fallback:rgba(20,20,20,.22);    /* суцільний fallback під hero-фото (.hero__bg) */
  --img-fallback    :rgba(20,20,20,.21);    /* fallback під inline-фото (.hw-img) */
  --excl-ph-1       :rgba(20,20,20,.21);    /* теплий плейсхолдер-градієнт, верх (.excl__img) */
  --excl-ph-2       :rgba(20,20,20,.29);    /* теплий плейсхолдер-градієнт, низ (.excl__img) */
  --hero-sup        :rgba(20,20,20,.30);       /* лічильники біля слів-категорій - там само, на білому */

  /* ---------------- КОЛЬОРИ · лінії та межі ---------------- */
  --line       :rgba(20,20,20,.08);         /* розділювачі, тонкі межі */
  --border-field:rgba(20,20,20,.10);        /* межа полів пошуку */
  --border-soft:rgba(20,20,20,.15);         /* підкреслення полів форми */
  --pick-div   :rgba(20,20,20,.11);         /* вертикальні розділювачі в блоці ціни (пікер пошуку) */
  --pick-cat   :rgba(20,20,20,.06);         /* фон неактивної категорії-pill у пікері локацій */
  --hl-bg      :rgba(222,184,122,.22);         /* підсвітка збігу в живому пошуку (фон) */
  --hl-fg      :var(--navy);         /* підсвітка збігу в живому пошуку (текст) */
  --navy-08    :rgba(0,29,75,.08); /* фокус-кільце полів пошуку (навколо --navy) */
  --navy-hover :rgba(0,29,75,.88);         /* hover navy-кнопки "Знайти" */

  /* ---------------- КОЛЬОРИ · темна шкала (на світлому) ---------------- */
  --ink-05:rgba(20,20,20,.05);
  --ink-08:rgba(20,20,20,.08);
  --ink-10:rgba(20,20,20,.10);
  --ink-12:rgba(20,20,20,.12);
  --ink-14:rgba(20,20,20,.14);
  --ink-18:rgba(20,20,20,.18);
  --ink-28:rgba(20,20,20,.28);
  --ink-40:rgba(20,20,20,.40);
  /* --ink-70 стояв у двадцяти девʼяти місцях восьми файлів (підписи під
     числами, примітки, години роботи в підвалі) - і НЕ БУВ визначений
     ніде. Браузер такий рядок просто викидає, і "дрібний сірий підпис"
     малювався кольором батька, тобто основним чорним. Виглядало це не
     як помилка, а як "щось тут занадто чорне", тому й прожило довго.
     .70 від чорного на білому - 5,3:1, тобто AA і для дрібного тексту. */
  --ink-70:rgba(20,20,20,.70);

  /* ---------------- КОЛЬОРИ · світла шкала (на темному футері/hero) ---------------- */
  --white-06:rgba(255,255,255,.06);
  --white-22:rgba(255,255,255,.22);
  --white-55:rgba(255,255,255,.55);
  --white-60:rgba(255,255,255,.60);
  --white-72:rgba(255,255,255,.72); /* посилання в підвалі */
  --white-73:rgba(255,255,255,.73); /* напівпрозорі плашки поверх фото картки */

  /* СКЛО: одна підкладка на всі плашки поверх фото (383 §4б, §4в).

     Плашка з роком, плашка забудовника, тип угоди й сердечко раніше мали
     три різні стилі на одній картці: щільний білий прямокутник, щільний
     navy і напівпрозоре скло. Тепер усі три - це одне скло.

     Запасний варіант для браузерів без backdrop-filter - НАПІВПРОЗОРЕ
     ТЕМНЕ, а не білий прямокутник: на світлому фото біла плашка без
     розмиття зливається з небом, і цифру стає не видно зовсім. */
  --glass      :rgba(255,255,255,.55);   /* скло поверх фото */
  --glass-line :rgba(255,255,255,.55);   /* тонка світла межа по краю */
  --glass-dark :rgba(0,29,75,.82);     /* темне скло: той самий вагою, що "Комісія 0%" (383 §4е) */
  --glass-edge :rgba(255,255,255,.30);   /* межа запасного варіанта */
  --glass-shade:0 2px 10px rgba(0,29,75,.18);
  --white-82:rgba(255,255,255,.82);

  /* ---------------- РАДІУСИ (у макеті - гострі кути) ---------------- */
  --r-ctrl :0;   /* кнопки, перемикачі */
  --r-field:0;   /* поля вводу */
  --r-nav  :0;   /* навбар */
  --r-card :0;   /* картки та зображення */
  --r-pill :30px;/* пігулкові кнопки (CTA) */
  --r-pill-full:999px;/* чипи, лічильники, круглі мітки - повне коло країв */
  --r-badge:14px;/* бейджі-оверлеї на фото (рік на картці новобудови) */

  /* ---------------- ЛЕЙАУТ ---------------- */
  /* ШИРИНА КОНТЕНТУ. Це БАЗОВЕ значення - для широких моніторів (>1600px).
     Для вужчих екранів перевизначається в style.css медіазапитами (шукай блок
     "ШИРИНА КОНТЕНТУ ПО ДІАПАЗОНАХ"). Один рядок = один діапазон, задаєш точну
     ширину в px. Менше = вужчі картки + ширші поля. */
  --content:1344px;
  --content-fixed:1344px;  /* стала ширина для .excl (його координати зашиті під 1344) - не чіпати */
  /* коефіцієнт стиснення .excl під --content, щоб слайдер збігався завширшки з
     рештою на будь-якій ширині. Адаптивний: --content / 1344 (ширина .excl).
     Рахується автоматично, чіпати не треба. */
  --excl-scale:calc(var(--content) / 1344px);
  --card-h :513px;   /* єдина висота карток об'єктів на головній (суцільні + лістинг; крім карток агентів) */

  /* Вертикальний ритм між секціями. Базове значення - макетні 160px; на
     вузьких екранах (13-14" ноутбуки) перевизначається меншим у медіазапитах
     style.css, щоб сторінка була компактнішою без горизонтального скролу.
     --sec-gap-half - рівно половина (футер: 80 над лінією + 80 під), тримає
     той самий ритм. Усі вертикальні проміжки секцій тягнуть лише ці токени. */
  --sec-gap     :48px;  /* проміжок між секціями (.section, відгуки, агенти, забудовники) */
  --sec-gap-half:32px;   /* половина ритму (розділювач/мапа сайту/seo/футер) */
  --sec-head-gap:36px;   /* відступ під шапкою секції (заголовок, далі сітка карток) */

  /* =====================================================================
     СТОРІНКА "ПРО КОМПАНІЮ" (about.html)
     Hifi-хендоф design_handoff_about_company/ має власну, м'якшу
     дизайн-мову (заокруглені картки, тіні, темно-синій градієнт),
     відмінну від строгого лістингового стилю сайту. Її токени -
     лише тут; css/about.css тягне їх через var(), без magic-значень.
     Дублі базової шкали (#001D4B ≈ навбарний navy, але інший hex із
     макета) свідомо ізольовані під --about-*, щоб не зачіпати решту.
     ===================================================================== */
  --about-ink     :#001D4B;            /* акцент/бренд блоку (темні картки, заголовки, плашки іконок) */
  --about-ink-2   :rgba(20,20,20,.80);            /* текст у параграфах місії */
  --about-muted   :rgba(20,20,20,.66);            /* вторинний текст (описи карток, підзаголовки) */
  --about-muted-2 :rgba(20,20,20,.60);            /* uppercase-лейбли на світлому */
  --about-crumb   :rgba(20,20,20,.62);            /* неактивний пункт хлібних крихт */
  --about-bg      :rgba(20,20,20,.04);            /* фон секції */
  --about-surface :#fff;               /* картки */
  --about-chip    :rgba(20,20,20,.06);            /* світла плашка іконки / поле */
  --about-line    :rgba(20,20,20,.10);           /* бордери карток і роздільники */
  --about-tl-line :rgba(20,20,20,.13);           /* лінія таймлайна */
  --about-hero-sub:rgba(255,255,255,.72);            /* підзаголовок hero */
  --about-accent  :var(--gold);            /* світло-блакитний лейбл на темному */
  --about-grad    :var(--navy); /* hero / темна CTA-картка */
  --about-shadow  :0 1px 4px rgba(0,0,0,.06); /* тінь карток */

  /* напівпрозорі білі на темних блоках цієї сторінки */
  --about-w-04 :rgba(255,255,255,.04);
  --about-w-06 :rgba(255,255,255,.06);
  --about-w-07 :rgba(255,255,255,.07);
  --about-w-08 :rgba(255,255,255,.08);
  --about-w-10 :rgba(255,255,255,.10);
  --about-w-12 :rgba(255,255,255,.12);
  --about-w-28 :rgba(255,255,255,.28);
  --about-w-70 :rgba(255,255,255,.70);
  --about-w-74 :rgba(255,255,255,.74);
  --about-w-76 :rgba(255,255,255,.76);
  --about-w-78 :rgba(255,255,255,.78);

  /* радіуси блоку - гострі кути, як на решті сайту */
  --about-r-lg  :0;  /* hero, темні блоки, CTA-картки */
  --about-r-md  :0;  /* картки переваг, смуга фактів */
  --about-r-sm  :0;  /* картки послуг, кроки, плашки команди */
  --about-r-icon:0;  /* плашки іконок */
  --about-r-btn :0;  /* кнопки */

  /* ---- спільні токени контент-сторінок (Власникам/Кар'єра/Франшиза/
          Офіси/Блог/FAQ/Політика - той самий хендоф-стиль, що "Про компанію").
          Усі ці сторінки тягнуть --about-* через css/handoff.css. ---- */
  --about-ink-3   :rgba(20,20,20,.83);            /* основний текст довгих абзаців (політика, статті) */
  --about-ink-4   :rgba(20,20,20,.86);            /* тіло статті блогу */
  --about-q       :rgba(20,20,20,.89);            /* заголовок закритого питання (FAQ) */
  --about-head    :#141414;            /* заголовки карток статей, ціни об'єктів */
  --about-fieldbd :rgba(20,20,20,.14);            /* межа полів форм */
  --about-fieldbd2:rgba(20,20,20,.11);            /* тонша межа (пошук, TOC) */
  --about-chip2   :rgba(20,20,20,.09);            /* неактивний чип-фільтр */
  --about-muted-3 :rgba(20,20,20,.60);            /* номери TOC / дуже світлий muted */
  /* Зелений "усе гаразд": галочка переваг, "зараз відчинено", "надіслано".
     Світліший відтінок давав 4.38 до 1 на дрібному тексті - трохи нижче
     норми; цей проходить із запасом і лишається тим самим зеленим. */
  --about-ok      :#17603F;
  --about-w-14    :rgba(255,255,255,.14); /* межа плашок месенджерів на темному */
  --about-w-60    :rgba(255,255,255,.60); /* субтекст у месенджерах */
  --about-w-72    :rgba(255,255,255,.72); /* лід на темних блоках */
  --about-card-hover:0 10px 26px rgba(0,29,75,.12); /* hover карток-лінків (офіси/блог) */
  --about-form-shadow:0 10px 30px rgba(0,0,0,.18);   /* тінь спливної форми оцінки (hero owners) */
}

/* =====================================================================
   ТЕЛЕФОН: ЗАГОЛОВКИ БЕЗ СТИСНЕННЯ

   Трекінг у нас абсолютний, у пікселях, а кегель заголовків - ні. На 1440
   дисплейний рядок 44 px і -2,88 px це близько -6 %: щільно й доречно. На
   390 той самий заголовок 28 px, а трекінг лишається -2,88 px - це вже
   -10 %, і літери злипаються (Вадим, скриншот 01:27: "Продаж квартир в
   Одесі та області").

   Тому на вузькому екрані заголовки йдуть без стиснення. Дрібний текст
   (base/sm/xs) лишається як був: там -0,3 px це відсоток-два.

   Селектор навмисно з `html :is(...)`: tokens.css підключається ПЕРШИМ, а
   власні правила сторінок (.bl-hero h1, .ff-h1) мають ту саму вагу і
   виграють за порядком. Зайвий `html` додає вагу, і правило працює
   незалежно від того, скільки ще css підключить сторінка.
   ===================================================================== */
@media (max-width:768px){
  :root{
    --ls-display:0;
    --ls-h1     :0;
    --ls-h2     :0;
    --ls-h3     :0;
    --ls-h4     :0;
    --ls-lg     :0;
  }

  /* Інтерліньяж 1,15: на двох рядках заголовка 1,05 злипався по вертикалі
     так само, як літери по горизонталі. */
  html :is(h1, h2, h3, .ff-h1, .pp-title, .hf-hero__body h1){ line-height:1.15; }

  /* Трекінг нулем - і для тих заголовків, які задають його повз токени.
     Обнулити самі токени було мало: .ff-h1 у каталозі, .bl-hero h1 у
     блозі, .hf-hero h1 і .pp-title на обʼєкті мають власний
     letter-spacing у em, і на 390 він знову стискав рядок (-0,42 px при
     28 px). Правило одне на всі: на вузькому екрані заголовки без
     стиснення, звідки б воно не приходило. */
  html :is(h1, h2, h3, h4, .ff-h1, .pp-title, .bl-hero h1, .hf-hero h1,
           .hf-hero__body h1, .cat-h1, .pr__h1, .bl-hero__t){ letter-spacing:0; }

  /* Кегель H1 - 28 px, H2 - 24 px. Плавний розмір на головній розганяв
     заголовок до 34 px уже на 606 px завширшки: три слова в рядок, і
     перенос падає посеред словосполучення. */
  html :is(h1, .ff-h1, .pp-title, .bl-hero h1, .hf-hero h1, .pr__h1){ font-size:28px; }
  html :is(h2){ font-size:24px; }

  /* Вага - лише 700. Восьма вага лишалась подекуди від старої шкали, і
     поруч із 700 на сусідньому екрані це видно як різні заголовки. */
  html body :is(h1, h2, h3, .ff-h1, .pp-title){ font-weight:700; }
}

/* СИНТЕТИЧНОГО ЖИРНОГО НЕМАЄ.

   NAMU-1990 підключений як змінний (font-weight: 400 800), і коли браузер
   не встиг його завантажити, заголовок малюється запасним Inter, до якого
   при font-weight:800 домальовується ще й синтетична жирність. Саме це й
   виглядає "занадто товстим": не шрифт, а шрифт плюс обведення.

   font-synthesis:none означає "або справжня жирна накреслення, або
   звичайна" - і ніколи не домальована. */
h1, h2, h3, h4, .ff-h1, .pp-title{
  font-synthesis:none;
  -webkit-font-synthesis:none;
}

/* Шрифти Inter і NAMU-1990 підключені в <head> (layouts/app.blade.php).
   Через @import тут вони чекали, поки завантажиться і розпарситься
   цей файл: браузер дізнавався про них аж на 356 мс, а самі woff2
   приходили на 572 мс. З <link> у head запит іде одразу з HTML. */

/* Усі токени (кольори, кеглі, трекінг, шрифти, радіуси) - у css/tokens.css.
   Підключати tokens.css ПЕРШИМ. Тут лише розкладка та компоненти, що
   посилаються на токени через var(). Нових "магічних" значень не додавати -
   спершу заводити токен у tokens.css.

   Фірмовий шрифт NAMU-1990 (за ТЗ). Оголошення живе у fonts.css; цей блок
   лишився як слід від часу, коли файлів ще не було. Запасний у стеку -
   Inter, він і так завантажений.
@font-face{
  font-family:'NAMU-1990';
  src:url('fonts/NAMU-1990.woff2') format('woff2'),
      url('fonts/NAMU-1990.woff')  format('woff');
  font-weight:400 700;font-style:normal;font-display:swap;
}
*/


*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--font-base);color:var(--dark);background:var(--white);font-size:var(--fs-base);line-height:var(--lh-base);}
a{color:inherit;text-decoration:none;}

/* ФОРМИ БЕРУТЬ ШРИФТ СТОРІНКИ, А НЕ СИСТЕМНИЙ.

   Браузер малює select, input і кнопку власним шрифтом - у нас це виходив
   Arial. На бойовому 18.09 їх було 118 елементів: перемикачі мови й валюти
   в шапці та в підвалі, нативні списки у фільтрах. Поруч із Inter це видно
   як чужа гарнітура в тому самому рядку.

   inherit, а не назва шрифту: якщо стек колись зміниться, форми поїдуть
   за ним самі. */
button, input, select, optgroup, textarea{ font: inherit; }

/* ЗАМОК ПРОКРУТКИ (FLock, js/scroll-lock.js).

   Один клас на всі оверлеї сайту - меню, галереї, шторки. position:fixed,
   а не сам overflow:hidden: на iOS Safari один overflow сторінку не тримає,
   палець далі гортає те, що під шаром. top виставляє скрипт, щоб сторінка
   лишилась на тому самому місці, а не стрибнула вгору. */
body.fk-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
img{display:block;max-width:100%;}

/* .page - обгортка над .frame. На широких екранах фрейм віддає горизонтальне
   обрізання сюди (.frame стає overflow:visible >1440), щоб фони-банери лилися в
   бічні поля. .page обрізає все зайве по ширині контенту: бічні прев'ю, hero-слова
   та надлишок 100vw-фонів від скролбара - тож сторінка не отримує горизонтального
   скролу. overflow-x:clip (не hidden) не створює scroll-контейнер і не обрізає
   position:fixed навбар, на відміну від overflow на корені (html/body). */
.page{overflow-x:clip;}
.frame{width:1440px;margin:0 auto;background:var(--white);position:relative;overflow-x:clip;}
.container{width:var(--content);margin:0 auto;}

/* ---------- типографіка ---------- */
.h-hero{font-family:var(--font-brand);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:var(--fw-medium);text-transform:uppercase;}
/* Заголовки секцій - navy, як у "Відгуках компанії". Один колір на всі
   заголовки сайту: різні відтінки чорного й синього поруч читаються як
   недогляд, а не як задум (рішення Вадима). На темних блоках .h-sec не
   стоїть ніде - перевірено по восьми сторінках. */
.h-sec {font-family:var(--font-brand);font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-h1);font-weight:var(--fw-medium);color:var(--navy);}
/* Ціна - теж брендовим: це друге, на що дивляться після заголовка, і
   цифри в NAMU виглядають як частина того самого голосу. */
.price-xl{font-family:var(--font-brand);font-size:var(--fs-h2);line-height:var(--lh-none);letter-spacing:var(--ls-h2);font-weight:var(--fw-medium);}
.t24{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-h3);font-weight:var(--fw-medium);}
.t18{font-size:var(--fs-lg);line-height:var(--lh-base);letter-spacing:var(--ls-lg);}
.t15{font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:var(--ls-base);}
.muted{color:var(--muted);}

/* ---------- кнопки / службові ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border-radius:var(--r-pill);border:none;cursor:pointer;background:var(--navy);color:var(--white);font-family:var(--font-base);font-weight:var(--fw-medium);font-size:var(--fs-base);line-height:var(--lh-none);letter-spacing:var(--ls-base);}
.see-all{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);}
.see-all img{width:20px;height:20px;display:block;transition:transform .2s;}
.see-all:hover img{transform:translateX(3px);}
.pill-tag{display:inline-flex;align-items:center;height:24px;padding:0 16px;border-radius:100px;border:1px solid var(--ink-18);font-size:var(--fs-xs);letter-spacing:var(--ls-xs);color:var(--dark);}

/* серця (іконки fav.svg / like.svg) */
.heart{display:inline-grid;place-items:center;}
.heart img{display:block;width:32px;height:32px;}

/* стрілки/крапки на зображеннях */
.arrow-circle{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--white);display:grid;place-items:center;box-shadow:0 4px 14px var(--ink-14);cursor:pointer;z-index:2;}
.arrow-circle.l{left:12px;}
.arrow-circle.r{right:12px;}
.arrow-circle img{width:14px;height:14px;display:block;}
.arrow-circle.l img{transform:scaleX(-1);}
.arrow-circle.filled{background:var(--navy);}
.arrow-circle.filled img{filter:brightness(0) invert(1);}
.dots{display:flex;gap:6px;align-items:center;}
.dots .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-28);display:block;}
.dots .dot.on{background:var(--dark);width:18px;border-radius:3px;}
.img-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;}
.arrow-lg{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--white);box-shadow:0 6px 20px var(--ink-10);cursor:pointer;}
.arrow-lg img{width:48px;height:48px;display:block;border-radius:50%;}
.arrow-lg.l img,.excl__arrow--l img{transform:scaleX(-1);}
.cd{display:block;transform:rotate(90deg);}

/* ---------- секції ---------- */
.section{margin-top:var(--sec-gap);}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--sec-head-gap);}
.sec-head--center{flex-direction:column;align-items:center;gap:16px;text-align:center;}
.sec-sub{margin-top:8px;font-size:var(--fs-base);font-weight:var(--fw-regular);line-height:var(--lh-base);letter-spacing:var(--ls-base);color:var(--muted);}
/* компенсація лівого side-bearing великого заголовка: вирівнюємо перші гліфи назви й підзаголовка */
.sec-head:not(.sec-head--center) > div:has(.sec-sub) .h-sec{text-indent:-3px;}


/* Навбар (шапка-пігулка) - винесений у самодостатній компонент.
   Стилі: public/css/nav.css · Розмітка: resources/views/partials/nav.blade.php.
   CSS підключає сам партіал (@push('styles')). Тут лишились ЛИШЕ значення
   --nav-counter по брейкпойнтах (нижче, у медіа-запитах), бо це частина
   глобальної zoom-системи фрейму, а не самого навбару. */



/* Селекти й поле ціни рядка пошуку (сам рядок - у css/home.css). Лишаються
   ТУТ, у базі, попри те що є лише на головній: далі в цьому ж файлі
   .fks__native ховає нативний <select> правилом такої самої ваги
   (width:1px). Виграє те, що нижче за потоком, тож у per-page файлі,
   який підключається ПІСЛЯ style.css, .fk-sel перебивав би .fks__native -
   і поверх кастомного селекта вилазив би нативний. */
/* 2. ТИП + спільний селект */
.fk-sel-wrap{position:relative;}
.fk-sel-wrap--type{flex:1.2 1 200px;min-width:0;}
.fk-sel{appearance:none;-webkit-appearance:none;width:100%;font-family:var(--font-base);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--dark);cursor:pointer;background:transparent;border:none;outline:none;}
.fk-sel-wrap--type{display:flex;align-items:center;}
.fk-type{height:42px;padding:0 40px 0 16px;}
.fk-sel-wrap--type .fk-ic-cd{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;}

/* 3. ЦІНА */
.fk-price{flex:1.6 1 260px;min-width:0;display:flex;align-items:center;}
.fk-sel-wrap--cur{flex:0 0 76px;height:100%;}
.fk-cur{height:100%;padding:0 20px 0 14px;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--navy);}

.fk-sel-wrap--cur .fk-ic-cd{position:absolute;right:6px;top:50%;transform:translateY(-50%);pointer-events:none;}


/* ============================================================
   .fks - універсальний кастомний селект (js/fk-select.js).
   Нативний <select> лишається джерелом правди (прихований),
   поверх нього - стилізований тригер + попап у фірмовому стилі.
   Базовий вигляд = самодостатній контрол (owners/career/фільтри).
   Усередині пошукового бару (.fk-sel-wrap) - прозорий, зливається
   з .fk-field. ============================================================ */
.fks{position:relative;display:inline-flex;width:100%;}
.fks__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;pointer-events:none;}

/* тригер (кнопка, що замінює нативний select) */
.fks__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:48px;
  padding:0 14px;border:1px solid var(--border-field);border-radius:var(--r-field);background:var(--white);
  font-family:var(--font-base);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--dark);
  cursor:pointer;outline:none;text-align:left;transition:border-color .15s,box-shadow .15s;}
.fks__trigger:hover{border-color:var(--ink-28);}
/* Розділено навмисно, не злито через кому.

   Safari до 15.4 не знає :focus-visible, а невідомий псевдоклас у списку
   селекторів робить НЕДІЙСНИМ УСЕ правило - разом із сусіднім селектором,
   який браузер прекрасно розуміє. Тобто на iOS 14.8 разом із фокусом
   зникав би й вигляд відкритого списку.

   Перевірено 18.09: таких правил було пʼять. */
.fks__trigger:focus-visible{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08);}
.fks.is-open .fks__trigger{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08);}
.fks__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* стрілка-каретка (малюється CSS, без зовнішнього svg) */
.fks__caret{flex:none;width:10px;height:10px;position:relative;margin-left:2px;color:var(--muted);transition:transform .18s ease;}
.fks__caret::before{content:"";position:absolute;left:1px;top:1px;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);}
.fks.is-open .fks__caret{transform:rotate(180deg);color:var(--navy);}

/* попап зі списком опцій */
.fks__pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;min-width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-field);
  box-shadow:0 16px 40px var(--ink-14);padding:6px;max-height:320px;overflow:auto;
  animation:fks-in .14s ease;}
.fks__pop[hidden]{display:none;}
@keyframes fks-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.fks__opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-field);
  cursor:pointer;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--dark);white-space:nowrap;}
.fks__opt-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.fks__opt-check{flex:none;width:16px;height:16px;position:relative;opacity:0;}
.fks__opt-check::before{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);}
.fks__opt.is-active{background:var(--soft);}
.fks__opt.is-sel{color:var(--navy);}
.fks__opt.is-sel .fks__opt-check{opacity:1;}
.fks__opt.is-disabled{color:var(--ink-28);cursor:default;}
.fks__opt.is-disabled.is-active{background:transparent;}

/* компактний варіант (валюта у блоці ціни): label+каретка як єдина
   щільна група по центру. Каретку робимо вужчою (7px), щоб не було
   зайвого повітря між текстом і стрілкою. */
.fks--compact{height:100%;}
.fks--compact .fks__trigger{justify-content:center;gap:4px;}
.fks--compact .fks__label{flex:0 0 auto;}
.fks--compact .fks__caret{width:8px;height:8px;margin-left:0;}
.fks--compact .fks__caret::before{width:5px;height:5px;left:0;top:0;}
.fks--compact .fks__pop{min-width:120px;right:auto;}



/* =================== КАРТКИ =================== */
/* Усі картки на головній зведені до однієї висоти (--card-h), щоб ряди й секції
   були вирівняні. Виняток - картки агентів (.fa-card) у блоці "Топ агенти",
   які мають власну розмітку й сюди не входять. */
/* minmax(0,1fr), а не 1fr: дозволяє колонці стискатись ВУЖЧЕ за вміст. Інакше
   nowrap-назва картки (.card__title) задає min-content і розпирає колонку - за
   вузького контейнера картки вилазять за край. min-width:0 на картці вмикає
   ellipsis (текст обрізається, а не штовхає сусідів). */
/* align-items:stretch, тож усі картки в ряду однакової висоти; .card має
   margin-top:auto на футері, тож стат-рядок притискається донизу. */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch;}
.grid4 > *{min-width:0;}




/* ====== ЗГОДА НА ОБРОБКУ ПЕРСОНАЛЬНИХ ДАНИХ (partials/consent) ======
   Спільний блок під усіма лід-формами сайту, тому живе в базовому style.css,
   а не в per-page css. Чекбокс - нативний (accent-color), щоб браузер міг
   показати підказку required і сфокусувати його. */
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer;}
.consent__box{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:var(--navy);cursor:pointer;}
.consent__text{color:var(--muted);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);line-height:1.45;}
.consent__text a{color:var(--dark);text-decoration:underline;}
.consent__text a:hover{color:var(--navy);}

/* Блоки "ВІДГУКИ" (.fr-*) і "ТОП АГЕНТИ" (.fa-*) - у власних css/reviews.css та css/top-agents.css */

/* =================== ФУТЕР =================== */
/* Розділювач + карта сайту вирівняні з рештою макета: колонки починаються
   від лівого краю .container (як секції вище і темний футер нижче), а не з
   відступом 114px. Вертикаль на ритмі секцій: 80px над лінією + 80px під нею
   = 160px до контенту (як проміжок між .section). Сітка - 5 рівних колонок на
   повну ширину .container (repeat(5,1fr)): однакові поля зліва й справа, а
   зайвий простір іде в ширші проміжки між колонками, а не в порожнечу праворуч. */
/* =====================================================================
   ЛАУНЧЕР "МИ НА ЗВʼЯЗКУ" (partials/contact-launcher.blade.php)

   Одне коло в правому нижньому куті й панель із трьома рівними рядками.
   Свідомо не сторонній скін: віджет дзвінка оформлюється у своєму
   кабінеті, а панель - наша, у типографіці сайту.

   Зʼявляється через три секунди після завантаження, щоб не заважати
   першому екрану й не чіпати LCP. Позиція фіксована - зсуву верстки не
   дає навіть у момент появи. Без пульсацій і бейджів: кнопка має бути
   помітною, а не настирливою.
   ===================================================================== */
.cl{
  position:fixed; right:24px; bottom:24px; z-index:150;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.cl.is-ready{ opacity:1; transform:none; pointer-events:auto; }

.cl__btn{
  width:56px; height:56px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--navy); color:#fff;
  box-shadow:0 8px 24px rgba(0,29,75,.22);
}
.cl__btn:hover{ opacity:.92; }
.cl__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.cl__ico{ width:24px; height:24px; }

/* Панель - те саме скло, що в шапці при прокрутці: біле 85 % з розмиттям
   12. Лаунчер висить над сторінкою, і суцільна біла плита виглядала на
   ній чужою наліпкою; крізь скло видно, що під нею. Скло на сайті рівно
   в трьох місцях: шапка, мобільне меню й тут. */
.cl__panel{
  width:280px; max-width:calc(100vw - 32px);
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(0,29,75,.12); border-radius:var(--r-card);
  box-shadow:0 16px 48px rgba(0,29,75,.14);
  padding:14px;
}

/* Браузер без скла отримує щільний білий - напівпрозорий фон без
   розмиття зробив би текст нечитабельним поверх фотографій. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cl__panel{ background:var(--white); }
}
.cl__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
.cl__title{ font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--dark); }
.cl__close{
  border:0; background:none; cursor:pointer; padding:0 4px;
  font-size:22px; line-height:1; color:var(--muted);
}
.cl__close:hover{ color:var(--dark); }

/* Три рядки однакової ваги: жодна дія не головніша за інші, бо люди
   різні - хтось пише, хтось дзвонить. */
.cl__act{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; margin:0 0 8px; cursor:pointer; text-align:left;
  background:#fff; border:1px solid var(--ink-08); border-radius:2px;
  color:var(--dark); font:inherit; font-size:var(--fs-base);
  text-decoration:none;
}
.cl__act:last-child{ margin-bottom:0; }
/* Обвідка при наведенні - navy, не золото: золота лінія на білому
   ледь помітна, і рядок виглядає так само, як до наведення (080 Е). */
.cl__act:hover{ border-color:var(--navy); }
.cl__act:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.cl__act-ic{
  width:32px; height:32px; flex:none; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff;
}
.cl__act-ic svg{ width:18px; height:18px; }

@media (max-width:700px){
  .cl{ right:16px; bottom:16px; left:16px; align-items:flex-end; }
  /* Панель на всю ширину - у неї три рядки, і тулити їх у 280 пікселів
     на вузькому екрані немає потреби.

     І скло: на телефоні панель лежить поверх контенту, який під нею
     прокручується. Матове скло показує, що там щось є, і панель перестає
     виглядати вирізаною з іншої сторінки. */
  .cl__panel{
    width:100%; max-width:none;
    background:rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cl__panel{ background:rgba(255,255,255,.97); }
  }
}

/* Кругла кнопка постачальника колтрекінгу в лівому куті - прибрана.

   Вона робить те саме, що наш рядок "Замовити дзвінок", тільки чужим
   виглядом і з пульсацією, а два плаваючі кола на екрані - це вже не
   зручність, а перешкода: на телефоні вони вдвох накривають картку.

   Ховаємо саме КНОПКУ, а не віджет: форму колбеку відкриває наш рядок, і
   вона має лишитись робочою. Правильне місце для цього - налаштування
   віджета в його кабінеті; доти цей рядок тримає слово, дане на сайті.

   pointer-events - щоб невидиме коло не перехоплювало натискання по
   картках, які під ним. */
.rngst_phone_button{
  display:none !important;
  pointer-events:none !important;
}

/* Друк і рамка: плаваюча кнопка там ні до чого. */
@media print{ .cl{ display:none; } }

/* Перехід за якорем не має ховати заголовок під шапкою.

   Шапка плаває над сторінкою (fixed, 24 зверху + 56 висоти), тож браузер,
   доводячи якір до верху вікна, ставив його рівно за нею: на /franchise від
   слова "Новобудови" лишалось "...дови". Одне правило на корені знімає це
   скрізь - і в меню, і в змісті статті, і в посиланнях мапи сайту, - тому
   поодинокі scroll-margin-top по файлах більше не потрібні.

   Значення - висота шапки плюс ковток повітря. */
:root{ --nav-space:96px; }
html{ scroll-padding-top:var(--nav-space); }

@media (max-width:900px){
  :root{ --nav-space:92px; }
}

/* Мапа сайту сама задає свій ритм над собою.

   Було так: сторінка закінчувалась секцією з власним нижнім відступом (у
   .hf це 80px), і зверху додавались іще 80 від лінії - разом 160. А на
   головній остання секція нижнього відступу не має, і виходило 80. Той
   самий блок на різних сторінках висів на різній висоті - і саме це
   впадало в око: на /owners і /terms над "Квартири" біла пляма, на
   головній - ні.

   Тепер відступ один і належить блоку, а остання секція сторінки свій
   нижній відступ віддає. :has() тут доречний: правило звучить рівно так,
   як його треба прочитати - "секція, за якою одразу йде мапа сайту". */
:where(section, div, article):has(+ .container > .footer-divider){
  padding-bottom:0;
  margin-bottom:0;
}
.footer-divider{height:1px;background:var(--line);margin:var(--sec-gap-half) 0 0;}
/* Мапа сайту під лінією. Відступ згори - 40, а не 80: лінію від секції
   вище вже відсуває той самий ритм, і два відступи поспіль давали між
   забудовниками й першим заголовком порожню смугу в півтори сотні
   пікселів. Колонки вирівнюємо по верху - інакше коротка колонка
   розтягується на висоту найдовшої й додає порожнечі вже під собою. */
/* Шість колонок: пʼять розділів і країни новобудов. Не auto-fit - у
   колонок різна довжина списків, і рівна сітка тримає їх на одній лінії. */
.sitemap{display:grid;grid-template-columns:repeat(6,1fr);gap:0 16px;padding:40px 0 0;align-items:start;}
.sitemap .col h5{margin-bottom:24px;}
.sitemap .col a{display:block;color:var(--dark);margin-bottom:5px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.sitemap .col a:hover{opacity:.6;}
.sitemap .col a.gap{margin-top:18px;color:var(--muted);}

.seo{background:var(--soft);margin-top:var(--sec-gap-half);padding:64px 0;}
.seo__in{width:var(--content);margin:0 auto;}
.seo__in h3{font-weight:var(--fw-medium);margin-bottom:12px;}
.seo__in > p{color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;}
.seo__in.is-open > p{-webkit-line-clamp:unset;overflow:visible;}

/* Текстові блоки з Content & SEO Hub: заголовки, абзаци, питання-відповіді,
   перелінковка. line-clamp тут не годиться - він обрізав би КОЖЕН абзац
   окремо, тож ріжемо блок цілком по висоті чотирьох рядків, як і власний
   текст, а "Читати повністю" розкриває його весь. */
.seo__in > .seo__html{color:var(--muted);max-height:calc(4em * var(--lh-base));overflow:hidden;}
.seo__in.is-open > .seo__html{max-height:none;overflow:visible;}
.seo__in > .seo__html > * + *{margin-top:12px;}
.seo__in > .seo__html h2,.seo__in > .seo__html h3,.seo__in > .seo__html h4{color:var(--dark);font-weight:var(--fw-medium);margin-top:22px;}
.seo__in > .seo__html a{text-decoration:underline;text-underline-offset:3px;}
.seo__in > .seo__html ul,.seo__in > .seo__html ol{padding-left:20px;list-style:revert;}
.seo__in > .seo__html li + li{margin-top:6px;}
.seo__faq-q{margin-top:18px;}
.seo__faq-a{margin-top:6px;}
.seo__links{margin-top:22px;}
.seo__links-title{color:var(--dark);font-weight:var(--fw-medium);display:block;margin-bottom:12px;}
.seo__links ul{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;}
.seo__links li + li{margin-top:0;}
.seo__links a{background:var(--white);border-radius:999px;padding:6px 14px;display:inline-block;text-decoration:none;}
.seo__links a:hover{opacity:.7;}
/* "Читати повністю" - текстова кнопка сайту: navy, без рамки й заливки,
   золоте підкреслення при наведенні. Шеврон малюємо самі й повертаємо
   його, коли текст розгорнуто, - тоді напис і стрілка кажуть одне й те
   саме. */
.seo__more{
  color:var(--navy); font-weight:var(--fw-semibold); margin-top:22px;
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:var(--fs-base); font-family:inherit;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:4px; transition:text-decoration-color .16s ease;
}
.seo__more::after{
  content:''; width:8px; height:8px; margin-top:-3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .16s ease;
}
.seo__more[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:2px; }
.seo__more:hover{ text-decoration-color:var(--gold); }
.seo__more:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

.dark{background:var(--navy);color:var(--white);padding:var(--sec-gap-half) 0 0;}
/* Мінімальної висоти більше немає. Вона тримала підвал "великим", коли
   колонок було пʼять; тепер їх три (оренда зʼявиться сама, коли в ній
   будуть обʼєкти), і 460 пікселів просто домальовували порожнечу під
   посиланнями. */
.dark .container{display:flex;flex-direction:column;}
.dark__logo{margin-bottom:32px;}
.dark__logo img{height:18px;width:auto;display:block;filter:brightness(0) invert(1);}
.dark__cols{display:grid;grid-template-columns:227px 228px 228px 226px 228px 1fr;gap:0;}
.dark__cols h5{margin-bottom:18px;color:var(--white);font-weight:var(--fw-medium);}
/* Заголовок колонки, який ще й посилання, має виглядати як решта
   заголовків: колір бере в них, а не в звичайних посилань підвалу. */
.dark__cols h5 a{color:inherit;}
.dark__cols h5 a:hover{color:var(--gold);}
.dark__cols a{display:block;color:var(--white-72);margin-bottom:7px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.dark__cols a:hover{color:var(--white);}
/* Нижній ряд підвала: гнучкий, а не сітка з фіксованих колонок.

   У сітці перемикачі стояли в останній колонці шириною двісті пікселів і
   вилазили за неї - рівно під плаваючу кнопку звʼязку, яка накривала
   вибір валюти. Тепер вони просто останні в ряду, а праворуч лишається
   місце під кнопку. */
/* НИЖНІЙ РЯДОК ПІДВАЛУ - В ОДИН РЯДОК.

   Було: `flex-wrap:wrap` і `gap:40px`, копірайт із `white-space:nowrap`.
   Разом елементи займали ширше за контейнер, і перемикач мови й валюти
   падав на другий рядок - висота 129 пікселів замість сорока (385).

   Тепер на десктопі рядок не переноситься, а стискається копірайт: він
   єдиний, кому є що віддати. Посилання й перемикачі лишаються цілими -
   обрізаний "Вхід для аг..." гірший за коротший копірайт. */
.dark__bottom{display:flex;flex-wrap:nowrap;align-items:center;gap:16px 24px;margin-top:auto;padding:24px 0 20px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.dark__bottom > span:empty{display:none;}
.dark__bottom > a{white-space:nowrap;flex:0 0 auto;}
/* Копірайт короткий і не ріжеться. Був довгий рядок із правами, і щоб
   рядок тримався в одну лінію, він обрізався трьома крапками: "Все права
   защищ...". Недописане слово в підвалі гірше за короткий напис (385). */
.dark__bottom .muted2{color:var(--white-73);white-space:nowrap;flex:0 0 auto;margin-right:auto;}
/* Праворуч від перемикачів лишається місце під плаваючу кнопку звʼязку:
   вона висить у правому нижньому куті над усім і накривала собою вибір
   валюти - "USD" було видно наполовину. Відступ дає сам ряд, а не
   перемикачі: у ряду шість колонок фіксованої ширини, і зовнішній відступ
   останньої з них сітку не звужував. */
.dark__switch{margin-left:auto;display:flex;gap:12px;flex:0 0 auto;}
.dark__bottom{padding-right:96px;}

@media (max-width:900px){
  /* На телефоні переноси дозволені: рядок ділиться на групи, і це
     нормально - місця для одного рядка там немає ні в якій мові. */
  .dark__bottom{padding-right:0;flex-wrap:wrap;}
  .dark__bottom .muted2{flex:1 1 100%;overflow:visible;text-overflow:clip;white-space:normal;}
  .dark__switch{margin-left:0;}
}
.dark__switch .sw{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--white-22);border-radius:var(--r-ctrl);font-size:var(--fs-xs);cursor:pointer;}
/* мова + валюта як окремі .fks-випадашки на темному футері: рамка-пігулка,
   білий текст, попап лишається світлим (успадковує базовий .fks__pop) */
.dark__switch .fks{width:auto;}
.dark__switch .fks__trigger{height:40px;padding:0 14px;gap:8px;border:1px solid var(--white-22);
  background:transparent;box-shadow:none;border-radius:var(--r-ctrl);
  font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--white);}
.dark__switch .fks__trigger:hover{border-color:var(--white-55);background:var(--white-06);}
/* Розділено навмисно, не злито через кому.

   Safari до 15.4 не знає :focus-visible, а невідомий псевдоклас у списку
   селекторів робить НЕДІЙСНИМ УСЕ правило - разом із сусіднім селектором,
   який браузер прекрасно розуміє. Тобто на iOS 14.8 разом із фокусом
   зникав би й вигляд відкритого списку.

   Перевірено 18.09: таких правил було пʼять. */
.dark__switch .fks__trigger:focus-visible{border-color:var(--white);box-shadow:none;background:var(--white-06);}
.dark__switch .fks.is-open .fks__trigger{border-color:var(--white);box-shadow:none;background:var(--white-06);}
.dark__switch .fks__caret{color:var(--white);}
.dark__switch .fks.is-open .fks__caret{color:var(--white);}
/* ВИПАДАЙКИ В ПІДВАЛІ РОЗКРИВАЮТЬСЯ ВГОРУ.

   Вони стоять у найнижчому рядку сторінки, і список, що падає вниз,
   вилазив білою плямою під темний підвал - на тло, якого там уже немає.
   Виглядало як помилка верстки, а не як меню.

   Угору місця завжди досить: над рядком перемикачів лежить увесь підвал.
   Анімація теж перевертається, інакше список "виїжджав" згори вниз,
   тобто в бік, протилежний до того, куди відкрився. */
.dark__switch .fks__pop{left:auto;right:0;min-width:96px;
  top:auto;bottom:calc(100% + 8px);animation:fks-up .14s ease;}
@keyframes fks-up{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}


/* тост */
/* ПОВІДОМЛЕННЯ - У КУТКУ, А НЕ ПОСЕРЕД ТОВАРУ (409 §6).

   Стояло по центру внизу й лягало просто поверх картки: людина прибирає
   обране, а замість фотографії бачить темну плашку "Видалено з обраного".
   Тепер у правому нижньому кутку, з відступом від краю; на вузькому екрані
   притискається до обох країв, але лишається внизу й гасне саме через 2,6 с. */
.toast{position:fixed;right:24px;left:auto;bottom:24px;max-width:min(360px, calc(100vw - 32px));transform:translateY(16px);background:var(--navy);color:var(--white);padding:14px 24px;font-size:var(--fs-base);letter-spacing:var(--ls-base);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;}
.toast.show{opacity:1;transform:translateY(0);}

/* =================== КАТАЛОГ (сторінка лістингу) =================== */
/* Розпірка під фіксованою шапкою.

   Шапка (.nav) стоїть position:fixed і живе в координатах вікна: 24px
   зверху плюс 56px висоти = 80 реальних пікселів. А ця розпірка лежить
   ВСЕРЕДИНІ .frame, який на вузьких екранах стиснутий через zoom, - і
   80px тут перетворюються на 80 × zoom реальних. На 13-дюймовому
   ноутбуці (zoom .87) це 70 замість 80, і шапка накриває заголовок
   сторінки на десять пікселів; що вужчий екран, то більше (321).

   Тому множимо на той самий --nav-counter (1/zoom), яким компенсує себе
   сама шапка: 80 × 1.149 × .87 = 80 реальних. На широких екранах
   --nav-counter = 1, і нічого не змінюється. */
.cat-header{position:relative;height:calc(80px * var(--nav-counter));}

/* Хлібні крихти - ЄДИНИЙ компонент для всього сайту (розмітку дає
   partials/crumbs.blade.php): знак FAKTOR, далі іконка-роздільник, далі пункти,
   останній неактивний. Живе у style.css, бо він глобальний. */
.cat-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);}
.cat-crumbs a{color:inherit;text-decoration:none;}
.cat-crumbs a:hover{color:var(--dark);}
/* Перша ланка - слова, а не знак: Google читає крихти як текст, і на місці
   логотипа в нього була порожнеча. */
.cat-crumbs .crumb-home{display:inline-flex;align-items:center;}
.cat-crumbs .sep{display:grid;place-items:center;color:var(--ink-40);font-size:var(--fs-md);line-height:1;}
.cat-crumbs .sep svg,.cat-crumbs .sep img{width:12px;height:12px;}
.cat-crumbs .cur{color:var(--dark);}
/* крихти першими у власному блоці з паддінгом - верхній відступ зайвий */
.cat-crumbs--flush{margin-top:0;}

/* Заголовок, швидкі теги, панель фільтрів та обрані чипи каталогу - окремий
   самодостатній компонент .ff-block (css/catalog-filters.css + js/catalog-filters.js). */

/* розділювач під блоком фільтрів */
.cat-hr{height:1px;background:var(--line);}

/* --- результати: лічильник зліва + сортування справа --- */
.cat-resultrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:33px;margin-bottom:56px;}
.cat-count{font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--muted);}
.cat-count b{font-weight:var(--fw-medium);color:var(--dark);}
.cat-sortrow{display:flex;justify-content:flex-end;margin-top:33px;margin-bottom:56px;}
.sort-wrap{position:relative;}
.sort-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;background:var(--white);border:1px solid var(--ink-14);color:var(--dark);font-family:var(--font-base);font-weight:var(--fw-regular);font-size:var(--fs-base);line-height:var(--lh-none);letter-spacing:var(--ls-base);cursor:pointer;border-radius:var(--r-ctrl);}
.sort-btn svg,.sort-btn img{flex:0 0 auto;}
.sort-menu{position:absolute;top:calc(100% + 8px);right:0;width:230px;list-style:none;background:var(--white);border:1px solid var(--line);box-shadow:0 18px 44px var(--ink-14);z-index:30;padding:6px;display:none;}
.sort-wrap.open .sort-menu{display:block;}
.sort-menu li{padding:11px 14px;font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);cursor:pointer;}
.sort-menu li:hover{background:var(--soft);}
.sort-menu li.sel{color:var(--navy);font-weight:var(--fw-medium);}

/* --- сітка карток (ЕТАЛОН .card - компактні; ряди вирівнюються згори) --- */
.cat-grid{gap:32px 20px;align-items:start;}

/* --- пагінація --- */
.pagination{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:20px;}
.showmore{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border:1px solid var(--ink-14);border-radius:var(--r-ctrl);background:var(--white);color:var(--dark);font-family:var(--font-base);font-weight:var(--fw-regular);font-size:var(--fs-base);letter-spacing:var(--ls-base);cursor:pointer;transition:border-color .15s,background .15s;}
.showmore:hover{border-color:var(--ink-40);}
.showmore.is-loading{opacity:.6;cursor:progress;}
.showmore svg,.showmore img{width:16px;height:16px;flex:0 0 auto;}
.pages{display:flex;gap:7px;}
.pg{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--ink-14);background:var(--white);color:var(--dark);font-family:var(--font-base);font-weight:var(--fw-regular);font-size:var(--fs-base);line-height:var(--lh-none);letter-spacing:var(--ls-base);cursor:pointer;border-radius:var(--r-ctrl);}
.pg:hover{border-color:var(--ink-40);}
.pg.on{background:var(--navy);border-color:var(--navy);color:var(--white);}
.pg.arrow{color:var(--dark);}
.pg.arrow.prev svg,.pg.arrow.prev img{transform:scaleX(-1);}

/* =================== АДАПТИВ · підгонка 1440-макета =================== */
/* Макет зафіксований на 1440px. На вужчих екранах (13" ноутбуки тощо)
   пропорційно зменшуємо весь .frame через zoom - композиція 1:1, без
   горизонтального скролу. Усе на CSS (без JS): ступінчастий zoom за шириною
   вікна. Кожен крок підібрано так, щоб zoom×1440 влазив у нижню межу свого
   діапазону навіть зі скролбаром. Порядок: від ширшого до вужчого -
   спрацьовує найвужчий збіг. --nav-counter = 1/zoom на кожному кроці -
   контр-масштабує навбар, щоб він лишався 1:1 поверх стиснутого фрейма. */

/* Вертикальний ритм окремо від zoom: zoom стискає лише ширину-композицію, тож
   на ноутбуках сторінка лишається дуже високою. На вужчих екранах стискаємо
   міжсекційні відступи понад zoom - сторінка стає коротшою, контент щільніший,
   без впливу на горизонталь. --sec-gap-half тримає пропорцію 2:1 футера;
   --sec-head-gap підтискає шапку секції в тому ж ритмі. */
@media (max-width:1439px){ :root{ --sec-gap:104px; --sec-gap-half:52px; --sec-head-gap:28px; } }  /* 13-14" */
@media (max-width:1200px){ :root{ --sec-gap: 88px; --sec-gap-half:44px; --sec-head-gap:24px; } }
@media (max-width: 960px){ :root{ --sec-gap: 72px; --sec-gap-half:36px; --sec-head-gap:20px; } }

/* =================== ШИРИНА КОНТЕНТУ ПО ДІАПАЗОНАХ ===================
   Базове --content (для >1600px) - у tokens.css. Тут перевизначаєш ширину
   колонки на кожному діапазоні монітора. ОДИН РЯДОК = ОДИН ДІАПАЗОН.
   Просто став потрібну ширину в px. Менше = вужчі картки + ширші поля.
   .excl і навбар підлаштуються самі. Порядок: від ширшого до вужчого. */
@media (max-width:1600px){ :root{ --content:1280px; } }  /* великі ноути / 1440-1600 */
@media (max-width:1440px){ :root{ --content:1200px; } }  /* 14-15" / 1367-1440 */
@media (max-width:1366px){ :root{ --content:1140px; } }  /* типові 13" / 1281-1366 */
@media (max-width:1280px){ :root{ --content:1080px; } }  /* 1201-1280 */
@media (max-width:1120px){ :root{ --content:1000px; } }  /* 1025-1120 */
@media (max-width: 960px){ :root{ --content: 900px; } }  /*  ≤960 */

@media (max-width:1439px){ .frame{ zoom:.93; } :root{ --nav-counter:1.075; } }  /* 1367-1439 */
@media (max-width:1366px){ .frame{ zoom:.87; } :root{ --nav-counter:1.149; } }  /* 1281-1366 (типові 13") */
@media (max-width:1280px){ .frame{ zoom:.82; } :root{ --nav-counter:1.220; } }  /* 1201-1280 */
@media (max-width:1200px){ .frame{ zoom:.76; } :root{ --nav-counter:1.316; } }  /* 1121-1200 */
@media (max-width:1120px){ .frame{ zoom:.69; } :root{ --nav-counter:1.449; } }  /* 1025-1120 */
@media (max-width:1024px){ .frame{ zoom:.65; } :root{ --nav-counter:1.538; } }  /*  961-1024 */
@media (max-width: 960px){ .frame{ zoom:.58; } :root{ --nav-counter:1.724; } }  /*  861-960  */
@media (max-width: 860px){ .frame{ zoom:.52; } :root{ --nav-counter:1.923; } }  /*  769-860  */
@media (max-width: 768px){ .frame{ zoom:.46; } :root{ --nav-counter:2.174; } }  /*  ≤768 (нижче - планшет/моб., окрема історія) */

/* =================== FULL-BLEED ФОНІВ (екрани > 1440) ===================
   Макет зафіксований на 1440px (.frame центрований). На вузьких екранах він
   масштабується zoom-ом і вже заповнює всю ширину - там нічого не потрібно.
   На широких (Full HD тощо) zoom = 1, тож фрейм стоїть 1440px по центру, а
   ліворуч/праворуч лишалися білі поля. Тут фон-фото хедера і темний футер
   розтягуються на всю ширину вікна, а КОНТЕНТ (контейнери) лишається в колонці
   1440px - вирівняний з рештою секцій. Бо медіазапит вмикається лише >1440,
   де zoom завжди = 1, прийом із 100vw не конфліктує з масштабуванням. */
@media (min-width:1441px){
  /* фрейм перестає обрізати по горизонталі - зайве підбирає обгортка .page вище */
  .frame{overflow:visible;}


  /* темний футер: ФОН на всю ширину через псевдоелемент, колонки лишаються центровані в 1440 */
  .dark{position:relative;isolation:isolate;}
  .dark::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--navy);z-index:-1;}

  /* SEO-блок: сірий ФОН на всю ширину вікна через псевдоелемент, текст лишається центрованим у 1440 */
  .seo{position:relative;isolation:isolate;background:transparent;}
  .seo::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--soft);z-index:-1;}
}

/* ============================================================================
   МОБІЛЬНИЙ РЕЖИМ (≤900px) - справжнє переверстання головної під телефон.

   Вище 900px працює zoom-система: увесь 1440-макет пропорційно стискається.
   На телефоні це дало б нечитабельно дрібний текст, тож із 900px і нижче ми
   ВИМИКАЄМО zoom (zoom:1) і скидаємо фрейм у гумову колонку (width:100%). Далі
   кожен блок переверстано у вертикальний потік: абсолютні координати hero/excl
   знімаємо, багатоколонкові сітки згортаємо в одну колонку.

   ПЕРЕДУМОВА: home віддає адаптивний viewport (@section('viewport') у
   home/index.blade.php дає width=device-width). Без нього телефон рендерив би
   сторінку в 1440px і ці медіазапити не спрацювали б.
   ============================================================================ */
@media (max-width:900px){

  /* --- фрейм: знімаємо zoom і фіксовану ширину, лишаємо гумову колонку --- */
  .frame{width:100%;zoom:1;overflow-x:clip;}
  :root{--nav-counter:1;--sec-gap:80px;--sec-gap-half:44px;--sec-head-gap:18px;}
  .container{width:auto;padding:0 16px;}

  /* ширші токени кеглів під мобільний масштаб (заголовки секцій, ціна) */
  /* Кегль тут більше не перевизначаємо: шкала в tokens.css гумова (clamp),
     і друге значення "для мобільного" лише поверталo б стрибок. */


  /* колонку sitemap "Райони Одеси" на телефоні ховаємо */
  .col--districts{display:none;}





  /* =============== СІТКИ ОБ'ЄКТІВ =============== */
  /* grid4 стає ДВОМА колонками, а не однією.

     Одна колонка тут була помилкою масштабу: 900 пікселів - це не телефон,
     це вікно ноутбука або браузер із збільшенням 150 %. Картка розтягувалась
     на всі 868 пікселів, фото ставало заввишки з пів екрана, і в ряду
     лишалась одна плитка замість чотирьох. На телефоні одна колонка
     правильна - вона нижче, від 600. */
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}






  /* =============== ФУТЕР =============== */
  /* карта сайту: 5 колонок стають 2; темний футер: 6 фіксованих колонок стають 1 стеком */
  .sitemap{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .seo{padding:40px 0;}
  .seo__in{width:auto;padding:0 16px;}

  .dark__logo{margin-bottom:36px;}
  .dark__cols{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .dark__bottom{grid-template-columns:1fr;gap:20px;padding:32px 0 24px;}
  .dark__switch{justify-self:start;}
}

/* ============================================================================
   КАТАЛОГ (сторінка лістингу) - МОБІЛЬНИЙ РЕЖИМ (≤900px)

   Блок фільтрів .ff-block переверстує css/catalog-filters.css (свій медіазапит).
   Тут - "хром" сторінки навколо нього: шапка-пігулка, рядок результатів +
   сортування, сітка карток і пагінація. Сітка .cat-grid успадковує .grid4, яка
   вже згорнута в 1 колонку вище; тут лише щільніший проміжок під компактні .card.
   ПЕРЕДУМОВА та сама - адаптивний viewport каталогу (width=device-width).
   ============================================================================ */
@media (max-width:900px){
  /* шапка-пігулка: фіксований навбар (top:24px, h:52px, тобто низ ≈76px) -
     лишаємо запас під breadcrumb блоку фільтрів */
  .cat-header{height:calc(80px * var(--nav-counter));}

  /* лічильник + сортування: щільніші відступи, лічильник може перенестись */
  .cat-resultrow{margin-top:18px;margin-bottom:24px;gap:12px;}
  .sort-menu{width:min(230px,calc(100vw - 32px));}

  /* сітка карток: 1 колонка (від .grid4), під компактну .card - вужчий проміжок */
  .cat-grid{gap:26px;}

  /* пагінація: менші кнопки + перенос, щоб ряд не вилазив за вузький екран */
  .pagination{margin-top:36px;gap:16px;}
  .pages{flex-wrap:wrap;justify-content:center;gap:6px;}
  .pg{width:42px;height:42px;}
}

/* Планшет / великий телефон-ландшафт (600-900px): каталог показує картки у 2
   колонки. .card компактна й розрахована на сітку, тож на планшеті 1 колонка
   давала б завелике фото - 2 колонки краще заповнюють ширину. Стосується лише
   .cat-grid (перебиває .grid4 з 1fr вище саме в цьому діапазоні). */
@media (min-width:600px) and (max-width:900px){
  .cat-grid{grid-template-columns:1fr 1fr;gap:32px 20px;}
}

/* Дуже вузькі телефони (≤380px) - прибираємо зайву щільність у 2-колонкових зонах */
/* Телефон: одна колонка на всю ширину. Ширший проміжок, щоб між обʼєктами
   лишалось повітря. */
@media (max-width:600px){
  .grid4{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:380px){
  .sitemap,.dark__cols{grid-template-columns:1fr;}
}


/* Відповідь на заявку, надіслану без JavaScript (partials/lead-status).
   Зі скриптом не показується взагалі: відповідь малює сам JS. */
.lead-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size:var(--fs-md);
    line-height: 1.4;
}
.lead-note--ok  { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-bd); }
.lead-note--err { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-bd); }


/* ---------- мережі агентства в підвалі ----------
   Рядок зʼявляється лише якщо адреси заведені в налаштуваннях: порожньо -
   немає ні рядка, ні кнопок. */
/* Знизу теж потрібен відступ: під рядком соцмереж іде золота лінія, і без
   цього вона проходить рівно по нижньому краю плиток - виглядає як
   підкреслення, а не як межа блоку. */
.dark__soc{ display:flex; align-items:center; gap:10px; margin-top:20px; margin-bottom:4px; flex-wrap:wrap; }
.dark__soc-a{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  /* Золота волосина замість білої заливки: у брендбуку золото - це тонка
     лінія й значок, а не плашка. Заливка робила з підвалу сітку сірих
     квадратів. */
  border-radius:2px; color:#fff; background:transparent;
  border:1px solid var(--gold-edge); transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.dark__soc-a:hover{ background:transparent; border-color:var(--gold); color:var(--gold); }
.dark__soc-a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.dark__soc-t{ font-size:var(--fs-sm); color:var(--white-73); }
@media (max-width:620px){ .dark__soc{ margin-top:20px; } }


/* ---------- фірмові кольори (020 §12) ----------
   Один прохід по компонентах: акцент навмисно дрібний - помітно, що бренд
   navy+gold, але золота на екрані менше, ніж білого простору навколо. */

/* 1. Активний пункт шапки - navy текст і золоте підкреслення 2px. */
.nav__link.is-active,
.nav a[aria-current="page"]{ color:var(--navy); box-shadow:inset 0 -2px 0 var(--gold); }
.nav__link:hover{ box-shadow:inset 0 -2px 0 var(--gold); }

/* 6. Підвал: тонка золота лінія над копірайтом - єдине золото в підвалі. */
.dark__bottom{ border-top:1px solid var(--gold-line); }
.dark a:hover{ color:var(--gold); }

/* "Написати в Telegram" у підвалі (318). Той самий рядок, що телефон, -
   не кнопка: у підвалі кнопка кричала б голосніше за все інше на
   сторінці. Іконка перед текстом, вирівняна по базовій лінії. */
.dark__tg{ display:inline-flex; align-items:center; gap:7px; }
.dark__tg svg{ flex:none; opacity:.72; }
.dark__tg:hover svg{ opacity:1; }

/* 7. Хлібні крихти: поточний рівень navy, решта приглушена. */
.cat-crumbs [aria-current="page"],
.cat-crumbs__cur{ color:var(--navy); font-weight:var(--fw-semibold); }

/* 8. Фокус - navy, а не золото: рамку має бути видно, а золото на білому
   майже не видно. Це доступність, не декор. */
:where(a, button, input, select, textarea, summary):focus-visible{
  outline:2px solid var(--navy); outline-offset:2px;
}


/* Плаваюча шапка стоїть поверх сторінки, тож перехід за якорем ставив
   заголовок рівно під нею. Відступ прокрутки прибирає це скрізь одразу:
   80px - висота шапки з її верхнім відступом. */
:where(h1, h2, h3, section, [id]){ scroll-margin-top: 96px; }

/* ---------- "Шукають також": тег-сторінки поруч ----------
   Рядок посилань, а не картки: це навігація, і виглядати вона має як
   навігація. Дванадцять штук у два-три рядки й нічого більше. */
.also{ margin-top:var(--sec-gap); }
.also__title{ font-size:var(--fs-h4); letter-spacing:var(--ls-h4); margin:0 0 16px; }
.also__list{ display:flex; flex-wrap:wrap; gap:8px; }
.also__link{
  display:inline-flex; align-items:center; height:40px; padding:0 16px;
  border:1px solid var(--ink-08); border-radius:var(--r-ctrl);
  font-size:var(--fs-base); color:var(--dark); text-decoration:none;
}
.also__link:hover{ border-color:var(--gold); }

/* ---------------------------------------------------------------
   ВКЛАДКИ ТОВАРНИХ СЕКЦІЙ (головна: "Нові пропозиції", "Новобудови")

   Той самий словник, що й у решти вкладок сайту: без капсу, активна -
   navy з підкресленням. Підкреслення золоте: це єдиний акцент на блок,
   і саме воно каже, де ти зараз.
   --------------------------------------------------------------- */
/* Ряд карток у секції з вкладками - завжди ЧОТИРИ плитки в один ряд, як і
   було в стрічках до вкладок. На вузькому екрані ряд не ламається на два, а
   гортається вбік: два ряди по дві плитки - це вже не "ряд пропозицій", а
   півсторінки карток, заради чого все й переробляли.

   Тому тут свій розкид колонок, а не спільний .grid4: у каталозі дві
   колонки на вузькому екрані правильні, бо там список, а не ряд. */
/* Відступ під липку шапку.

   Шапка сайту плаває над сторінкою, її низ - на 80-му пікселі. Коли людина
   зупиняла прокрутку рівно на секції, заголовок опинявся на нульовій
   позначці, тобто просто під шапкою: "Новобудови Одеси" не було видно.

   scroll-margin - для переходів за якорем, padding - для звичайної
   прокрутки: разом заголовок завжди лишається нижче шапки. */
.tabsec{ scroll-margin-top:96px; }
.tabsec .h-sec{ scroll-margin-top:96px; }

@media (max-width:700px){
  .tabsec{ scroll-margin-top:76px; }
}

/* Прихована панель має бути прихованою. `hidden` вимикає показ правилом
   браузера, а воно слабше за наш клас: .grid4 з display:grid перебивав його,
   і на екрані стояли ВСІ набори одразу - вісім плиток у два ряди замість
   чотирьох в один. Видно це тільки очима: у розмітці атрибут стоїть, і
   будь-яка перевірка "чи прихована панель" відповідала "так". */
.row4[hidden]{ display:none; }

/* .row4 - "рівно один ряд із чотирьох плиток". Один клас на всі товарні
   блоки головної: обидві секції з вкладками і ряд ексклюзивів. На вузькому
   екрані ряд не розсипається в стовпчик на чотири екрани, а гортається
   вбік - як вкладки над ним.

   Ексклюзиви цього спершу не мали: вони лежать поза .tabsec, і правило
   їх не діставало. Ряд ставав стовпчиком у 1607 пікселів. */
.row4{
  grid-template-columns:repeat(4, minmax(210px, 1fr));
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
  padding-bottom:4px;
}
.row4::-webkit-scrollbar{ display:none; }
.row4 > *{ scroll-snap-align:start; }

.tabsec__tabs{ display:flex; gap:22px; margin:0 0 22px; overflow-x:auto; scrollbar-width:none; }
.tabsec__tabs::-webkit-scrollbar{ display:none; }
.tabsec__tab{
  flex:none; padding:0 0 8px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:var(--fs-base); line-height:1.2; color:var(--dark);
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.tabsec__tab:hover{ color:var(--navy); }
.tabsec__tab.is-on{ color:var(--navy); font-weight:600; border-bottom-color:var(--gold); }
.tabsec__tab:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

/* ПОЛЕ ВВОДУ НА ТЕЛЕФОНІ - 16 px, І ЦЕ НЕ ПРО ТИПОГРАФІКУ (402).

   Safari на iPhone САМ збільшує сторінку, коли фокус іде в поле з кеглем
   меншим за 16 px. Після цього все ширше за екран: заголовок підбирача
   обрізаний зліва, назви впираються в край, сторінку доводиться совати
   вбік. Виглядає як зламана верстка, а насправді це зум браузера, і в
   емуляції його не видно взагалі - тільки на самому телефоні.

   У нас такі були всі поля: 13-15 px. Тому правило спільне, а не для
   одного підбирача: вилікувати його й лишити ту саму пастку в ціні й у
   пошуку за кодом означало б лікувати скріншот, а не причину. */
@media (max-width:700px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select{ font-size:16px; }
}

@media (max-width:700px){
  .tabsec__tabs{ gap:16px; margin-bottom:16px; padding-bottom:2px; }
  .tabsec__tab{ font-size:var(--fs-md); }

  /* Стрічка гортається вбік, і сказати про це має вона сама: правий край
     розчиняється, тобто ряд не закінчується там, де закінчився екран.
     28 px вистачає, щоб це прочиталось, і замало, щоб заважати дивитись
     на останню картку, коли догортали до кінця. */
  /* Колір у масці значення не має - працює лише прозорість, тому й
     записано через rgba: видно, що це не фарба, а альфа. */
  .row4{
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,1) calc(100% - 28px), rgba(0,0,0,0));
    mask-image:linear-gradient(to right, rgba(0,0,0,1) calc(100% - 28px), rgba(0,0,0,0));
  }

  /* Вкладка й "Дивитись всі" - рядки тексту 16-26 px заввишки, а пальцю
     треба 44. Смуга дотику росте пседоелементом: на розмітку це не
     впливає, рядок стоїть там само, просто промах угору чи вниз тепер
     влучає. Обидва стоять у своєму рядку, тож чужого дотику не перехоплять. */
  .tabsec__tab, .see-all{ position:relative; }
  .tabsec__tab::after, .see-all::after{
    content:''; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
}

/* Підпис лише для читалки. Поле з плейсхолдером виглядає підписаним, але
   плейсхолдер зникає при вводі й читалці не належить: без цього класу
   людина з екранним читачем чує "поле вводу" і все. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Крихти на вузькому екрані.

   Рядок із шести ланок не вміщається й переносився на два-три рядки,
   забираючи пів екрана перед заголовком. До 520 px середина ховається за
   "...": видно перший крок, передостанній і поточний. Тап розгортає повний
   список - ланки нікуди не зникають, вони просто не займають місця, поки
   їх не спитали. */
.cat-crumbs .crumb-more{
  display:none; padding:0 4px; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--ink-40); line-height:1;
}

@media (max-width:520px){
  .cat-crumbs{ flex-wrap:nowrap; overflow:hidden; }
  .cat-crumbs .crumb-more{ display:inline-block; }
  .cat-crumbs .crumb-more[hidden]{ display:none; }

  /* Сховане - середина. Перший крок і два останні лишаються завжди. */
  .cat-crumbs.is-short > :not(.crumb-home):not(.crumb-more):not(.cur):not(.sep:last-of-type){ display:none; }
  .cat-crumbs.is-short > a:not(.crumb-home){ display:none; }
  .cat-crumbs.is-short > .cur{ display:inline; }
}

/* =====================================================================
   СМУГА НАД ПІДВАЛОМ (partials/footer-tools.blade.php)

   Підвал із самих посилань - це кінець сторінки, куди людина доїжджає,
   нічого не знайшовши. Тут три дії в один ряд: ввести код, який
   продиктували в слухавці; підписатись на нові обʼєкти; побачити, чи ми
   на звʼязку зараз.

   Ряд світлий, підвал темний - смуга читається як частина сторінки, а не
   як початок футера.
   ===================================================================== */
.ftools{ background:var(--soft); border-top:1px solid var(--line); }

.ftools__in{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding-top:20px; padding-bottom:20px;
}

.ftools__code{ position:relative; display:flex; gap:8px; flex:1 1 320px; min-width:0; }
.ftools__code input{
  flex:1 1 auto; min-width:0; height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-field);
  background:var(--white); font:inherit; font-size:var(--fs-base); color:var(--dark);
}
.ftools__code input:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; }
.ftools__code button{
  flex:none; height:44px; padding:0 20px; border:0; border-radius:var(--r-field);
  background:var(--navy); color:var(--white); font:inherit; font-size:var(--fs-base); cursor:pointer;
}
.ftools__code button:hover{ background:var(--navy-82); }

/* Не знайшли - кажемо про це під полем, а не мовчимо. */
.ftools__miss{
  position:absolute; top:100%; left:0; right:0; margin:6px 0 0;
  font-size:var(--fs-sm); color:var(--danger);
}

.ftools__tg{ display:inline-flex; align-items:center; gap:10px; color:var(--navy); }
.ftools__tg svg{ flex:none; }
.ftools__tg b{ display:block; font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.ftools__tg .t-note{ display:block; font-size:var(--fs-sm); color:var(--ink-70); }
.ftools__tg:hover b{ text-decoration:underline; text-underline-offset:3px; }

.ftools__live{ margin:0; margin-left:auto; display:flex; align-items:center; gap:14px; font-size:var(--fs-sm); }
.ftools__num{ font-weight:var(--fw-semibold); color:var(--navy); }
.ftools__hours{ color:var(--ink-70); }

/* Крапка стану - CSS, а не символ у тексті: колір каже те саме швидше. */
.ftools__state{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-70); }
.ftools__state::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--ink-28);
}
.ftools__state.is-open{ color:var(--navy); }
.ftools__state.is-open::before{ background:var(--ok); }

@media (max-width:900px){
  .ftools__in{ gap:14px; padding-top:16px; padding-bottom:16px; }
  .ftools__live{ margin-left:0; width:100%; flex-wrap:wrap; gap:8px 14px; }
}

/* Пропустити навігацію: посилання видно лише під фокусом.

   Людина з клавіатури проходила всю шапку - логотип, пʼять розділів,
   телефон, обране, мову й валюту, - перш ніж дійти до сторінки. Для
   решти нічого не змінюється: поза фокусом посилання не займає місця. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  text-decoration: none;
}

.skip-link:focus-visible,
.skip-link:focus {
  left: 0;
}

/* =====================================================================
   FAKTOR - .card · ЕТАЛОННА картка об'єкта (єдиний компонент для всього сайту)
   Джерело дизайну 1:1: design_handoff_favorites/ ("Обране").
   Використовується в: favorites.html (сітка + стрічка), catalog.html
   (сітка лістингу), property.html / zhk.html (стрічки "Дивіться також").

   Структура:
     .card
       .card__media            фото 16/11, гострий кут; <img> або bg-заглушка
         .card__badge          бейдж типу (navy 82%) зверху-ліворуч  [опц.]
         .card__year           рік новобудови (білий бейдж)          [опц.]
         .card__dev            забудовник: лого+назва знизу-ліворуч  [опц.]
       .card__body
         .card__top            ряд ціни + серце
           .card__price        21px / bold / dark
           (.card__from        "від" + ціна - для новобудови)
           .card__heart        серце-кнопка (обране)                 [опц.]
         .card__title          назва, 1 рядок ellipsis
         .card__addr           адреса, 2 рядки clamp, фікс. висота
         .card__stats          стат-рядок (золоті іконки)   - звичайні
         .card__nbfoot         "Перший внесок" - новобудова
         .card__drows          інфо-рядки (рік/місто/комплекси) - забудовник
         .card__devfoot        роздільник + "Детальніше ›"     - забудовник

   Модифікатори:
     .card--strip   фіксована ширина для горизонтальних стрічок (280px)

   Розміри - px-точні з прототипу; кольори/радіуси - через css/tokens.css.
   ===================================================================== */
.card{display:flex;flex-direction:column;cursor:pointer;transition:opacity .3s ease,transform .3s ease;color:inherit;}
.card.is-removing{opacity:0;transform:scale(.95);}

/* фото 16/11 - <img> накладається поверх bg-заглушки */
.card__media{position:relative;aspect-ratio:16/11;background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;border-radius:var(--r-card);overflow:hidden;transition:opacity .18s;}
/* color:transparent - про биті фото.

   Коли картинка не завантажилась, браузер малює на її місці текст alt.
   Поверх нашого ескізу-заглушки виходив напис "TIMES - Одеса, Хаджибейський"
   упоперек картки. Прибирати alt не можна: його читає читалка екрана й
   бачить пошук. Тому лишаємо текст, але робимо його невидимим - на місці
   фото лишається чистий ескіз. */
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;color:transparent;font-size:0;}
.card:hover .card__media{opacity:.9;}

/* бейдж типу - navy 82%, дрібний, гострий кут */
/* Бейдж - один рядок і не ширший за дві третини фото. Довгий тип із CRM
   ("земля сільськогосподарського призначення") розтягував його майже на всю
   картку і переносив у два рядки: замість позначки виходила плашка. */
.card__badge{position:absolute;top:10px;left:10px;z-index:2;max-width:calc(100% - 20px);display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-card);background:var(--glass-dark);color:var(--white);font-size:var(--fs-xs);line-height:1;letter-spacing:.02em;font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* рік новобудови - білий бейдж зверху-ліворуч (альтернатива .card__badge).
   Фон - спільний токен --white-73 із плашкою забудовника: обидва оверлеї на
   одному фото мають бути однаково прозорі. */
.card__year{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-card);background:var(--glass);color:var(--navy);font-size:var(--fs-xs);line-height:1;font-weight:var(--fw-bold);}

/* лого/назва забудовника - біла плашка знизу-ліворуч фото (для новобудов):
   кругле лого + назва в один рядок. Кут - var(--r-card), як у сусідніх
   оверлеях (.card__badge / .card__year), щоб три бейджі на одному фото були
   в одній мові форм. Фон - спільний токен --white-73, той самий, що в
   .card__year. */
.card__dev{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px);min-height:26px;padding:4px 8px;box-sizing:border-box;border-radius:var(--r-ctrl);background:var(--glass);display:flex;flex-direction:row;align-items:center;gap:6px;}
/* ЛОГОТИП ЦІЛКОМ, А НЕ ВИРІЗАНИЙ У КОЛО.
   position:static - скидаємо absolute від ширшого .card__media img.

   Коло "вирівнювало логотипи до одного вигляду" рівно доти, доки логотип
   не ширший за коло: Kadorr, Heritage, Будова й ZEZMAN перетворювались на
   нечитабельний фрагмент - вирізану середину слова. Логотип забудовника
   існує, щоб його впізнали, тож показуємо його повністю: висота 20,
   ширина за пропорцією до 88 пікселів, кут 0 - як у решти плашок. */
.card__dev img{position:static;inset:auto;width:auto;max-width:72px;height:16px;flex:none;display:block;border-radius:0;object-fit:contain;background:transparent;}
/* назва - один рядок; довге ім'я забудовника обрізаємо трикрапкою,
   плашка не має розповзатися на пів-фото. */
/* НАЗВУ ЗАБУДОВНИКА НЕ РІЖЕМО (383 §4д).

   Раніше довге імʼя обрізалось трикрапкою: "Whale Develop...". Плашка існує,
   щоб забудовника впізнали, а недописана назва цього не дає - і логотип
   поруч не рятує, бо його теж читають разом із назвою.

   Тому довга назва переноситься на другий рядок усередині тієї самої
   скляної плашки: висота росте тільки там, де це справді потрібно, а
   коротким назвам лишається та сама висота 26 px. Ширину плашка має до
   краю фото й далі не лізе. */
.card__dev b{display:block;min-width:0;font-size:var(--fs-xs);line-height:var(--lh-tight,1.15);letter-spacing:var(--ls-sm);font-weight:var(--fw-semibold);color:var(--navy);white-space:normal;overflow-wrap:anywhere;}

/* ============================================================
   СКЛО ПОВЕРХ ФОТО - одна підкладка на всі плашки (383 §4б, §4в)

   Було три різні стилі на одній картці: щільний білий прямокутник із роком,
   щільний navy з типом угоди й напівпрозоре скло під сердечком. Виглядало
   як три наліпки з різних наборів.

   Тепер плашка з роком, плашка забудовника, тип угоди й сердечко - це одне
   й те саме скло: напівпрозоре, з розмиттям фону, тонкою світлою межею й
   легкою тінню. Розмиття тут не прикраса: саме воно робить цифру читабельною
   і на світлому небі, і на темному фасаді, - без нього довелось би робити
   підкладку щільною й закривати фото.

   ЗАПАСНИЙ ВАРІАНТ. Там, де backdrop-filter не працює, підкладка стає
   напівпрозорою ТЕМНОЮ зі світлим текстом, а не білим прямокутником: біле
   без розмиття зливається з небом, і цифри не видно зовсім.
   ============================================================ */
.card__year,
.card__badge,
.card__gov,
.card__dev,
.card__media .card__heart{
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shade);
}

/* ТЕМНЕ СКЛО НА ОБʼЄКТАХ, СВІТЛЕ НА КОМПЛЕКСАХ (383 §4е).

   Плашка типу угоди ("Продаж квартири") лежить на фотографії кімнати, а
   кімнати знімають при світлі: на світлій стіні темний текст по світлому
   склу зникав. Рік і забудовник лежать на фасаді й небі, там світле скло
   читається добре.

   Тому механіка та сама - напівпрозоре скло з розмиттям, - а колір
   підкладки різний: на обʼєктах темний із білим текстом, бо білий на
   темному читається на будь-якому фото, а темний на світлому - ні. */
.card__badge,
.card__gov{border-color:var(--glass-edge);}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .card__year,
  .card__badge,
  .card__gov,
  .card__dev,
  .card__media .card__heart{
    background:var(--glass-dark);
    border-color:var(--glass-edge);
    color:var(--white);
  }
  .card__dev b{color:var(--white);}
  .card__heart img,
  .card__heart .card__heart-ic{color:var(--white);}
}

/* ---- .card--dev: картка забудовника ----
   Фото в забудовника немає, є ЛОГО - і воно в круглій медальйон-подачі, тій
   самій, що плашка забудовника на фото новобудови (.card__dev img). Картка -
   світла панель із тонкою рамкою: коло-лого зверху по центру, під ним назва
   й інфо-рядки, знизу відбита лінією кількість комплексів.
   Композиція центрована - коло по центру вимагає симетрії, інакше "висить". */
.card--dev{box-sizing:border-box;padding:18px 14px 14px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;}
/* Ховер-ефектів немає навмисно: картка не підіймається, не змінює рамку й не
   приглушується - єдиний відгук на наведення це курсор-рука (базовий .card).
   Тому нижче гасимо й успадковане .card:hover .card__media{opacity:.9}. */

/* медіа-блок = коло-медальйон під лого. Розмір задає --logo (перевизначається
   в каруселі головної, де картка вдвічі вужча). Тло БІЛЕ, не сіре: сіра
   плитка "бруднила" кольорові лого; сірим лишається тільки коло-заглушка
   (див. :has нижче) - щоб порожній стан читався як порожній. */
.card--dev{--logo:82px;}
.card--dev .card__media{aspect-ratio:1;width:var(--logo);margin:0 auto;box-sizing:border-box;
  background:var(--white);border:1px solid var(--line);border-radius:50%;}
/* Логотип показуємо ЦІЛКОМ (Вадим 08.09: "фото це логотип"). Заповнення від
   краю до краю робило з нього медальйон, але зрізало те, заради чого логотип
   і існує - назву компанії. Поле невидиме: тло кола теж біле. */
.card--dev .card__media img{box-sizing:border-box;object-fit:contain;padding:14%;}
/* лого на білому/прозорому тлі (KADORR Group, вордмарки): заповнення зрізало б
   назву компанії, тож вписуємо цілком, із полем. Поле невидиме - тло кола теж
   біле. Клас ставить сервер (LogoFit за пікселями картинки), запобіжник для
   широких вордмарків - onload у card.js. */
.card--dev .card__media img.card__logo--fit{object-fit:contain;padding:12%;}
/* Квадратне коло під лого - але сама рамка кола лишається: вона тримає ряд
   карток однаковим, коли лого різної форми (вордмарк проти значка). */
/* Заглушка (лого в CRM не заповнене / посилання недоступне) - навмисно дрібна
   й приглушена, щоб її не читали як логотип компанії. Розмір у % від кола,
   не в px: та сама картка живе і в сітці /developers (~285px), і в каруселі
   головної. inset:auto + top/left - центруємо, перебиваючи inset:0 від
   .card__media img. Селектор із img обов'язковий, щоб виграти за
   специфічністю в правила вище (клас + елемент). */
.card--dev .card__media img.card__logo--stub{inset:auto;top:32%;left:32%;width:36%;height:36%;opacity:.3;padding:0;}
/* сіре коло - ЛИШЕ під заглушкою; :has не підтримано, тоді лишиться біле, що теж коректно */
.card--dev .card__media:has(img.card__logo--stub){background:var(--soft);}
/* лого не приглушуємо на hover - це не фото (гасимо .card:hover .card__media) */
.card--dev:hover .card__media{opacity:1;}

/* текст під колом - по центру; назва велика й жирна (головне в картці), може
   займати два рядки, тож знімаємо nowrap-обрізання від базового .card__title. */
.card--dev .card__body{padding-top:13px;text-align:center;}
.card--dev .card__title{justify-content:center;white-space:normal;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--navy);}
.card--dev .card__title>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card--dev .card__drows{flex:none;margin-top:7px;gap:6px;}
.card--dev .card__drow{justify-content:center;}

/* підвал - два лічильники ЖК ("Будується | Здано"), розділені вертикальною
   лінією, як у картці-референсі. Притиснутий донизу (margin-top:auto), тож
   ряди карток вирівняні попри різну довжину назв. */
.card__devstats{margin-top:auto;padding-top:11px;display:flex;align-items:stretch;}
.card__devstat{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 9px;}
.card__devstat+.card__devstat{border-left:1px solid var(--line);}
.card__devstat-lbl{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);line-height:1.2;color:var(--secondary);white-space:nowrap;}
.card__devstat-ic{flex:none;display:block;width:13px;height:13px;}
.card__devstat-val{font-size:var(--fs-base);line-height:1.1;font-weight:var(--fw-bold);color:var(--navy);}
/* фолбек-підвал (у забудовника немає ЖК із роком здачі) - один рядок
   "N комплексів", без колонок і роздільника */
.card__devstats--one .card__devstat{flex-direction:row;justify-content:center;}
.card__devstats--one .card__devstat-lbl{gap:6px;font-size:var(--fs-sm);color:var(--secondary);}
.card__devstats--one b{font-weight:var(--fw-semibold);color:var(--navy);}

/* тіло */
.card__body{flex:1;display:flex;flex-direction:column;padding-top:15px;}

/* ряд ціни + серце */
.card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card__price{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-0.01em;font-weight:var(--fw-bold);color:var(--dark);white-space:nowrap;}

/* "від" перед ціною новобудови */
.card__from{display:flex;align-items:baseline;gap:6px;}
.card__from-lbl{font-size:var(--fs-sm);color:var(--secondary);margin-right:4px;}
/* Крапка-роздільник між ціною й ціною метра: без неї два числа читались як
   одне довге ("від $45 253 $1 300 / м²"). */
.card__priceline .card__pricem::before{content:'· ';color:var(--secondary);}

/* ціна + ціна за м² в один ряд (новобудова): ціна зліва, "/ м²" поруч muted.
   align-items:baseline дає спільну базову лінію, висота ряду не росте. */
.card__priceline{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;}
/* ціна за м² - тим самим muted-кольором, що й адреса; обрізається за потреби */
.card__pricem{font-size:var(--fs-sm);line-height:1.2;color:var(--addr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* серце-кнопка - системні іконки img/icons/fav.svg (контур) / like.svg
   (залите, в обраному). Кнопка без власного фону: like.svg несе пігулку. */
.card__heart{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border:none;background:none;cursor:pointer;color:var(--navy);padding:0;margin:-4px -6px -4px 0;transition:transform .15s;}

/* Серце ПОВЕРХ ФОТО - скляне. Те саме серце в тілі картки (на білому)
   лишається без скла: розмивати білий нема сенсу, видно тільки те, що
   контур став гіршим. */
.card__media .card__heart{width:30px;height:30px;border-radius:50%;background:var(--glass);}
.card__media .card__heart:hover{background:rgba(255,255,255,.85);}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card__media .card__heart{background:rgba(255,255,255,.9);}
}
.card__heart:hover{transform:scale(1.1);}
/* Обведення - тим, хто ходить клавіатурою, а не тим, хто клікнув мишею
   (409 §6). Було видно синю рамку, яка лишалась на картці після кліку. */
.card__heart:focus{outline:none;}
.card__heart:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.card__heart img,
.card__heart .card__heart-ic{display:block;width:28px;height:28px;color:var(--navy);}

/* назва - 1 рядок ellipsis */
.card__title{margin-top:9px;font-size:var(--fs-base);line-height:1.3;font-weight:var(--fw-semibold);color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* назва ЖК (новобудова) - іконка будинків перед текстом як маркер житлового
   комплексу; іконка фіксована, обрізається лише текст назви. */
.card__title--zhk{display:flex;align-items:center;gap:6px;}
.card__title--zhk .card__zhk-ic{flex:none;display:block;width:16px;height:16px;color:var(--gold);}
.card__title--zhk>span{overflow:hidden;text-overflow:ellipsis;}

/* адреса - пін + текст (2 рядки clamp), фікс. висота під вирівнювання рядів.
   Пін не масштабується (flex-shrink:0), текст клемпиться у власному span. */
.card__addr{margin-top:6px;font-size:var(--fs-sm);line-height:1.45;color:var(--addr);height:38px;display:flex;gap:5px;overflow:hidden;}
.card__addr-ic{flex:0 0 auto;width:14px;height:14px;margin-top:2px;color:var(--gold);opacity:.85;}
.card__addr>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* стат-рядок - в один рядок, притиснутий донизу. Іконки: системні <img>
   (кімнати, площа) + inline-гліфи золотим (поверх, ділянка). */
.card__stats{margin-top:auto;padding-top:13px;display:flex;gap:12px;white-space:nowrap;}
.card__stat{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--dark);}
.card__stat svg,.card__stat img{flex:none;}
/* КОЛІР ЗНАЧКІВ - ТОКЕНАМИ, І ЗАДАНИЙ ТУТ, А НЕ УСПАДКОВАНИЙ.

   Значки малюються currentColor, тож без цих рядків вони брали колір
   тексту картки й виходили чорними.

   Правило (Вадим 07.09): усі значки картки - золоті, бо золото в нас і є
   акцентом для значків; navy лишається текстові, діям і серцю. У
   шістнадцяти пікселях на білому navy читається просто як чорний, і сенс
   акценту зникає. */
.card__ic{flex:none;display:block;color:var(--gold);}
.card__ic-img{flex:none;display:block;width:18px;height:18px;color:var(--gold);}

/* Код обʼєкта. Третій план: він не сперечається ні з ціною, ні з адресою,
   але його видно з видачі - саме його називають, коли телефонують.
   Хвіст жирнішим і темнішим, бо уголос диктують лише останні цифри. */
.card__code{margin-top:8px;font-size:var(--fs-xs);line-height:1;color:var(--addr);}
.card__code b{font-weight:var(--fw-bold);color:var(--dark);}

/* підвал новобудови - "Перший внесок" + "Детальніше ›" */
.card__nbfoot{margin-top:auto;padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card__pay{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gold-deep);white-space:nowrap;}

/* картка забудовника - інфо-рядки; останній (к-сть комплексів) несе праворуч
   "Детальніше ›" в один рядок. Преміальна ієрархія: золоті іконки, підпис
   muted, значення navy/600. Рядок-підвал притиснутий донизу (margin-top:auto),
   тож ряди карток вирівняні попри різну довжину назв. */
.card__drows{margin-top:13px;flex:1;display:flex;flex-direction:column;gap:9px;}
.card__drow{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);line-height:1.3;color:var(--secondary);}
.card__drow b{font-weight:var(--fw-semibold);color:var(--navy);}
.card__dval{font-weight:var(--fw-semibold);color:var(--navy);}
.card__dic{flex:none;color:var(--gold);}
/* останній інфо-рядок: ліворуч "N комплексів", праворуч "Детальніше ›" */
.card__drow--foot{margin-top:auto;justify-content:space-between;}
.card__drow-main{display:inline-flex;align-items:center;gap:10px;}

/* модифікатор: картка в горизонтальній стрічці */
.card--strip{flex:0 0 280px;scroll-snap-align:start;}

/* --- телефон: футер/стат-рядок картки без верхнього відступу.
   Правило тут (а не в style.css), бо card.css підключається ПІСЛЯ style.css -
   інакше базовий padding-top:13px перебивав би переозначення за порядком. --- */
@media (max-width:900px){
  .card__nbfoot,.card__stats{padding-top:0;}
}


/* ---------- фірмові кольори: рівно там, де сказано (020 §12) ----------
   navy - структура, gold - акцент. Золотого тексту на світлому немає:
   контраст 1.9:1, його не видно. Золото на білому - тільки лінії й значки. */

/* 3. Ціна на картці - navy: головне число картки має читатись як головне. */
.card__price{ color:var(--navy); }

/* 4. Бейдж "Комісія 0%" - єдиний золотий текст на сайті, і той на navy. */
.card__badge{ letter-spacing:.04em; }
.card--commission .card__badge,
/* Без капсу (167 п.5): бейдж і так помітний кольором, а капс на
   картці читається як крик. */
.card__badge--commission{ background:var(--navy); color:var(--gold); border-radius:0; }

/* "Перший внесок" у картці новобудови - navy замість другого золота
   (--gold-deep тепер вказує на navy, правило лишається на місці). */



/* "ДЕРЖПРОГРАМИ": СЛОВО, А НЕ ЩИТ (435).

   Було коло 24 px зі щитом усередині. Символ 14 px не розшифровується:
   людина бачила значок і не мала способу дізнатись, що він означає.
   Пояснення жило в `title`, а на телефоні `title` не існує - наведення
   миші там немає, і саме з телефона до нас приходить більшість.

   Друге, що не працювало: золота підкладка напівпрозора. На світлому
   знімку вона зливалась із фотографією, і позначка читалась як частина
   кадру. Тепер фон щільний - той самий navy, що під "Комісія 0", і те
   саме золото на ньому. Це готові змінні теми, а не новий відтінок.

   Місце - верхній ряд, поруч із типом угоди. Ряд загорнутий у
   .card__badges, щоб дві плашки стояли поруч, а не одна на одній. */
.card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

/* Усередині обгортки плашки стають у ряд, а не кожна у свій кут. */
.card__badges .card__badge,
.card__badges .card__year {
  position: static;
  top: auto;
  left: auto;
  max-width: 100%;
}

/* Плашка "Держпрограми" - ТА САМА, ЩО "Продаж квартири": та сама висота,
   те саме скло, та сама прозорість, той самий синій. Відрізняється тільки
   текст - золотий замість білого, бо це інша річ, а не інший стиль.

   Було: щільний navy проти напівпрозорого скла поруч. Два сині різної
   густини в одному ряду читаються як помилка верстки. */
.card__gov {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--r-card);
  background: var(--glass-dark);
  color: var(--gold);
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: .02em;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.card__gov:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Пояснення. Лежить не всередині плашки, а сусідом у медіа-блоці: воно
   ширше за неї й займає картку по ширині, інакше на вузькому екрані текст
   різався б об край. */
.card__govpop {
  position: absolute;
  top: 44px;
  left: 10px;
  right: 10px;
  z-index: 4;
  padding: 8px 10px;
  border-radius: var(--r-card);
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-xs);
  line-height: 1.35;
  font-weight: var(--fw-regular);
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 29, 75, .28);
}

/* Плашка без логотипа лишається порожньою (ТЗ 143: "без лого - лише назва").
   Ані іконки, ані ініціалів: і те, і те виглядає як логотип, якого немає.
   Коло при цьому не зникає - воно тримає ряд карток однакової висоти. */
.card--dev .card__media:not(:has(img)){background:var(--soft);}

/* Підвал картки ЖК: умови оплати ліворуч, кількість активних обʼєктів
   праворуч. Друге число - відповідь на "а є що дивитись?": ЖК із трьома
   квартирами і ЖК із трьомастами виглядали в списку однаково. */
.card__nbfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card__objs{flex:none;font-size:var(--fs-xs);color:var(--secondary);white-space:nowrap;}
/* Чіп "Здано" - на зданих ЖК спокійніший за "Здача": це вже факт, а не план. */
.card__year--done{background:var(--white);color:var(--navy);}

/* Чотири числа в підвалі картки забудовника (ЖК · Здано · Будується ·
   Обʼєкти) на вузькій картці не стають у ряд - дозволяємо два ряди по два. */
.card__devstats{flex-wrap:wrap;row-gap:10px;}
.card__devstat{flex:1 1 40%;}
.card__devstat:nth-child(3){border-left:0;}

/* ЗАПАС ДЛЯ БРАУЗЕРІВ БЕЗ aspect-ratio (Safari до 15).

   Висоту блока з фото тримає ТІЛЬКИ aspect-ratio: своєї висоти в нього
   немає, а <img> усередині лежить absolute і теж нічого не додає. Браузер,
   який про aspect-ratio не знає, робить блок заввишки нуль - фото зникає
   зовсім, текст підтягується вгору.

   Саме це Вадим і зняв 18.09 на iPad у Safari: картки з ціною, назвою й
   метрами, і жодного знімка. У Chrome на тих самих ширинах (1440, 1024,
   820, 768, 390) битих зображень нуль - різниця не в даних, а в движку.

   aspect-ratio зʼявився в Safari 15 (вересень 2021). Нижче - класичний
   запас через padding-top: висота = ширина × (висота/ширина пропорції).
   Сучасні браузери цього блока навіть не читають.
   .card__media - 16/11
   .card--dev .card__media - 1/1
 */
@supports not (aspect-ratio: 16 / 11) {
  .card__media{padding-top:68.75%;}
  .card--dev .card__media{padding-top:100.0%;}
}

/* =====================================================================
   FAKTOR - ШАПКА КАТАЛОГУ (.ff-block)

   Оболонка блоку над лістингом: крихти, далі H1, далі (де є) панель фільтрів.
   Тут же локальні токени --ff-* хендофу "Каталог новобудов" - з них беруть
   кольори/висоти всі контроли панелі, тож css/catalog-filters.css без цього
   файлу не працює й підключається лише разом із ним.

   Окремо від панелі, бо тег-сторінці (/estate/c/{type}/{deal}/{tag}) потрібна
   САМЕ шапка: фільтрів там свідомо немає, а тягнути заради H1 усі 20 КіБ
   панелі - це 19 КіБ стилів, які нікуди не застосуються.
   ===================================================================== */

.ff-block{
  /* Палітра БЛОКУ ФІЛЬТРІВ. Була скопійована з хендофу власними числами -
     і саме так на сайті зʼявляються "майже такі самі" відтінки: два золоті
     на одній сторінці, два navy в сусідніх блоках. Бренд-кольори тепер
     тільки з tokens.css; локальними лишаються ті значення, яких у токенах
     немає (межі полів, підкладки цього блоку). */
  --ff-navy:var(--navy);
  --ff-ink:var(--dark);
  --ff-muted:rgba(20,20,20,.66);         /* вторинний текст, активні крихти */
  --ff-faint:rgba(20,20,20,.40);         /* плейсхолдери, лейбли полів, breadcrumb */
  --ff-field:#fff;            /* у макеті всі поля БІЛІ */
  --ff-fieldline:rgba(20,20,20,.15);     /* межа полів */
  --ff-line:rgba(20,20,20,.06);          /* розділювач над панеллю "Фільтри" */
  --ff-border:rgba(20,20,20,.15);        /* межа кнопки "Фільтри" */
  --ff-chip:rgba(20,20,20,.09);          /* неактивний чип (кімнати / особливості) */
  --ff-sep:rgba(20,20,20,.24);           /* › у breadcrumb */
  /* Гострий кут на всьому прямокутному (167 п.4): двопіксельний радіус
     не читається як заокруглення, а лише розмиває межу панелі. Пігулки
     лишаються пігулками - у них свій токен. */
  --ff-r:var(--r-field);
  --ff-pill:999px;            /* кругла пігулка - чипи / обрані фільтри */
  /* Висота контролів - зі спільного ряду 40/48/56 (167 п.5). 52 не з
     цього ряду: рядок фільтрів стояв вище за кнопки в решті сайту. */
  --ff-h:48px;
  --ff-fborder:1px solid var(--ff-fieldline);
  color:var(--ff-navy); font-family:var(--font-base); padding:8px 0 4px;
}
.ff-block *{ box-sizing:border-box; }
.ff-block__inner{ width:var(--content); margin:0 auto; }

/* Хлібні крихти блоку - спільний сайтовий компонент .cat-crumbs
   (partials/crumbs.blade.php + css/style.css), власних стилів не потребує. */
/* Заголовок сторінки - брендовим шрифтом, як на головній.

   Було: Inter вагою 800 і трекінг у пікселях. На 1440 різниця майже не
   видна, на 390 - видно все: чужий шрифт, найважча вага, а поверх неї ще
   й синтетичний жирний, бо 800 в Inter добирається програмно. Звідси
   "занадто товсті літери, що злипаються" (Вадим 01:27).

   Тепер те саме, що в hero головної: NAMU, вага 700, трекінг ВІДНОСНИЙ
   (-.015em) - він сам меншає разом із кеглем і не злипається на 28 px. */
.ff-h1{ margin:0 0 24px; font-family:var(--font-brand); font-size:var(--fs-display); font-weight:var(--fw-bold); letter-spacing:-.015em; text-align:center; }

/* ── МОБІЛЬНИЙ (≤900px) ─────────────────────────────────────────────── */
@media (max-width:900px){
  .ff-block{ padding:4px 0; }
  .ff-block__inner{ width:100%; padding:0 16px; }

  .ff-h1{ line-height:1.15; margin-bottom:18px; text-align:left; }
}


/* Перемикач ринку: первинка / вторинка. Той самий ритм, що в чипів
   фільтра - 34px, радіус 10, активний стан кольором бренду. */
.cat-market { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-market__btn {
    display: inline-flex;
    align-items: center;
    /* Висоти контролів - 40/48/56 (167 п.5): 34 випадали з ряду, і
       перемикач ринку стояв нижче за сусідні кнопки. */
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ink-12);
    border-radius: var(--r-ctrl);
    background: var(--white);
    color: var(--dark);
    font-size:var(--fs-md);
    text-decoration: none;
    white-space: nowrap;
}
.cat-market__btn:hover { border-color: var(--navy); }
.cat-market__btn.is-on { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }


/* Назви ринків повні ("Первинна нерухомість"), тож на вузькому екрані
   ряд гортається вбік, а не ламає сітку. */
@media (max-width: 640px) {
    .cat-market { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cat-market::-webkit-scrollbar { display: none; }
}

/* ---------- перемикач "Списком / На мапі" ----------
   Стоїть у рядку результатів в обох режимах, тому й живе тут, а не у
   стилях карти: у списку карта не підключається, і перемикач лишався
   голим текстом, а в режимі карти встигав блимнути неоформленим. */
.cat-view{ display:inline-flex; gap:0; }
.cat-view__btn{
  display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 16px; font-size:var(--fs-md); font-weight:600;
  color:var(--navy); background:transparent;
  border:1px solid var(--ink-12); border-radius:0;
  text-decoration:none; transition:background .16s ease, border-color .16s ease;
}
.cat-view__btn + .cat-view__btn{ border-left:0; }
.cat-view__btn:hover{ background:var(--ink-05); }
.cat-view__btn.is-on{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.cat-view__btn svg{ flex:none; }


/* "Зберегти пошук". Той самий ритм, що в перемикача "списком / на мапі",
   але тихіший: це дія на майбутнє, а не спосіб подивитись зараз. */
.cat-savesearch{
  display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 16px; font-size:var(--fs-md); font-weight:600;
  color:var(--navy); background:transparent; cursor:pointer;
  border:1px solid var(--ink-12); border-radius:0;
  transition:background .16s ease, border-color .16s ease;
}
.cat-savesearch:hover{ background:var(--ink-05); }
.cat-savesearch:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.cat-savesearch[disabled]{ cursor:default; }
/* Збережено - кажемо словами, а не самим лише кольором: людині, яка не
   розрізняє відтінки, зелена кнопка нічого не повідомляє. */
.cat-savesearch.is-done{ color:var(--white); background:var(--navy); border-color:var(--navy); }
.cat-savesearch svg{ flex:none; }

/* Порожня оренда: запит замість порожнечі.

   Лід-форма прийшла із сайдбара сторінки обʼєкта, де в неї своя ширина.
   Посеред каталогу вона розтягувалась на всі 1200 px і читалась як
   анкета, а не як "скажіть, що шукаєте". */
.cat-empty--rent {
  max-width: 560px;
  margin: 40px auto 56px;
  text-align: center;
}

.cat-empty--rent .t18 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 8px;
}

.cat-empty--rent .t15 {
  color: var(--muted);
  margin-bottom: 24px;
}

.cat-empty--rent .pp-form {
  text-align: left;
}

.cat-empty__back {
  margin-top: 20px;
}


/* =====================================================================
   FAKTOR - ПІКЕР ЛОКАЦІЙ (.fk-*) і поля, на яких він стоїть

   Спільний компонент: рядок пошуку на головній, панель фільтрів каталогу
   (.ff-block), фільтри новобудов і забудовників. Розмітку будує
   js/loc-picker.js (FLoc), кольори/висоти під свій контекст підганяють
   css/catalog-filters.css та css/developers.css.

   Підключають рівно ті сторінки, де пікер справді є (головна, каталог,
   новобудови, забудовники) - тег-сторінці й картці об'єкта він не потрібен.
   ===================================================================== */

/* спільна "оболонка" контролю: поле/селект/ціна */
.fk-field{height:44px;background:var(--field);border:1px solid var(--border-field);border-radius:var(--r-field);
  transition:border-color .15s,box-shadow .15s;}
.fk-field:focus-within,.fk-field.is-open{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08);}

.fk-in{border:none;background:transparent;font-family:var(--font-base);font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);outline:none;}
.fk-in::placeholder{color:var(--muted);}
.fk-ic-cd{color:var(--muted);flex:none;}

/* 1. ЛОКАЦІЯ */
.fk-loc{position:relative;flex:2.4 1 360px;min-width:0;}
.fk-loc__field{display:flex;align-items:center;gap:8px;padding:0 14px;cursor:text;overflow:hidden;}
.fk-ic-pin{color:var(--muted);flex:none;}
.fk-loc__in{flex:1;min-width:90px;}
.fk-chips{display:inline-flex;align-items:center;gap:6px;flex:none;}
.fk-chip{display:inline-flex;align-items:center;background:var(--navy);overflow:hidden;white-space:nowrap;flex:none;}
.fk-chip__kind{font-size:9px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--white-60);background:var(--white-06);padding:6px 8px;}
.fk-chip__label{color:var(--white);font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:0 6px 0 8px;}
.fk-chip__x{border:none;background:var(--white-22);color:var(--white);cursor:pointer;margin-left:3px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.fk-chip__x:hover{background:var(--white-55);}
.fk-chip-more{display:inline-flex;align-items:center;background:var(--chip-bg);color:var(--dark);font-size:var(--fs-sm);font-weight:var(--fw-bold);padding:7px 10px;white-space:nowrap;cursor:pointer;flex:none;}

/* дропдаун пікера */
.fk-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;background:var(--white);border:1px solid var(--line);border-radius:var(--r-field);box-shadow:0 16px 40px var(--ink-14);padding:10px;}
.fk-pop[hidden]{display:none;}
/* мобільна шапка/футер попапа локацій - лише на телефоні (моб. блок нижче їх показує) */
.fk-loc__mhead,.fk-loc__mfoot{display:none;}
.fk-tabs{display:flex;gap:8px;margin-bottom:10px;}
.fk-tab{flex:1;height:36px;border:1px solid var(--border-field);border-radius:var(--r-field);background:var(--white);color:var(--dark);font-family:var(--font-base);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;}
.fk-tab.is-on{background:var(--navy);color:var(--white);border-color:var(--navy);}
.fk-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.fk-cats[hidden]{display:none;}
.fk-cat{cursor:pointer;font-family:var(--font-base);font-size:var(--fs-sm);font-weight:var(--fw-semibold);border:none;padding:8px 15px;border-radius:var(--r-pill);background:var(--pick-cat);color:var(--muted);transition:background .15s,color .15s;}
.fk-cat.is-on{background:var(--navy);color:var(--white);}
.fk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px;}
.fk-crumbs[hidden]{display:none;}
.fk-crumb{font-size:var(--fs-sm);color:var(--muted);text-decoration:none;font-weight:var(--fw-semibold);cursor:pointer;}
.fk-crumb-sep{color:var(--ink-28);font-size:var(--fs-sm);}
.fk-list{max-height:340px;overflow:auto;margin:0 -4px;}
.fk-loc-head{padding:12px 10px 5px;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.fk-locrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-field);cursor:pointer;}
.fk-locrow:hover{background:var(--soft);}
.fk-box{width:18px;height:18px;border-radius:var(--r-field);flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--ink-28);}
.fk-box.is-checked{background:var(--navy);border-color:var(--navy);}
.fk-box svg{color:var(--white);}
.fk-box img{display:block;}
.fk-locrow__label{flex:1;font-size:var(--fs-md);color:var(--dark);font-weight:var(--fw-semibold);}
.fk-locrow__label .hl{background:var(--hl-bg);color:var(--hl-fg);border-radius:var(--r-field);padding:0 1px;}
.fk-locrow__label .sub{color:var(--muted);font-weight:var(--fw-regular);}
.fk-locrow__count{font-size:var(--fs-sm);color:var(--muted);}
.fk-locrow__drill{color:var(--muted);flex:none;}
/* ---------------------------------------------------------------------
   МОБІЛЬНИЙ РЕЖИМ (≤900px) - частина спільного медіазапиту зі style.css
   (там знімається zoom і фрейм стає гумовим; тут - блоки цього файлу).
   --------------------------------------------------------------------- */
@media (max-width:900px){

  .fk-field{height:52px;}

  /* блокування скролу сторінки, поки відкрито повноекранний пікер локації */
  body.loc-lock{overflow:hidden;}

  /* --- пікер локації: на телефоні - повний екран (fixed), а не дропдаун --- */
  .fk-loc__pop{position:fixed;inset:0;left:0;right:0;top:0;z-index:130;
    border:none;border-radius:0;box-shadow:none;padding:0;
    display:flex;flex-direction:column;}
  /* шапка попапа: заголовок + хрестик (базово display:none - тут вмикаємо) */
  .fk-loc__mhead{display:flex;align-items:center;justify-content:space-between;
    padding:16px 16px 12px;border-bottom:1px solid var(--line);flex:none;}
  .fk-loc__mfoot{display:block;}
  .fk-loc__mtitle{font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--dark);}
  .fk-loc__mclose{border:none;background:transparent;font-size:32px;line-height:1;
    color:var(--dark);cursor:pointer;width:40px;height:40px;display:grid;place-items:center;margin-right:-6px;}
  /* вкладки/категорії/крихти - зі своїми полями (padding попапа зняли) */
  .fk-loc__pop .fk-tabs{margin:14px 16px 10px;}
  .fk-loc__pop .fk-cats{margin:0 16px 10px;}
  .fk-loc__pop .fk-crumbs{margin:0 16px 10px;}
  /* список займає весь вільний простір і скролиться сам */
  .fk-loc__pop .fk-list{flex:1;max-height:none;overflow:auto;margin:0;padding:0 12px 8px;}
  .fk-loc__pop .fk-locrow{padding:12px 10px;}

  /* ПАНЕЛЬ НЕ ШИРША ЗА ЕКРАН, І ЦЕ НЕ ПОБАЖАННЯ (402).

     inset:0 уже тримає ширину, але тільки доки ніхто зсередини не
     розіпхне: довга назва в рядку ("Northern Cyprus", "Великобритания")
     має право переноситись, а не відсувати число за край. Тому підпис
     стискається (min-width:0), а не диктує ширину, і панель ріже все, що
     все-таки вилізло. */
  .fk-loc__pop{max-width:100%;overflow-x:hidden;}
  .fk-loc__pop .fk-locrow__label{min-width:0;overflow-wrap:anywhere;}
  .fk-loc__pop .fk-locrow__count{flex:none;white-space:nowrap;}
  /* липкий футер із кнопкою "Готово" */
  .fk-loc__mfoot{flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);background:var(--white);}
  .fk-loc__done{width:100%;height:52px;}
}

/* =====================================================================
   FAKTOR - ФІЛЬТРИ КАТАЛОГУ (динамічні, за категоріями)
   Самодостатній компонент .ff-block (breadcrumb, далі H1, далі головний рядок
   фільтрів, далі панель "Фільтри", далі обрані чипи, далі популярні підбірки).
   Розмітку рендерить js/catalog-filters.js.

   Головний рядок (в один ряд, з переносом): тип угоди · категорія ·
   ЛОКАЦІЯ (пікер .fk-loc - стилі спільні з головною у style.css) ·
   ВАЛЮТА + ціна від/до · "Фільтри" · "Знайти".

   Кольори/межі/радіуси тягнуться з css/tokens.css через локальні --ff-*,
   тож блок виглядає як решта сайту (navy, поля фільтрів, гострі кути).
   Самі --ff-* оголошені на .ff-block у css/catalog-head.css - його треба
   підключати ПЕРЕД цим файлом.
   ===================================================================== */

/* ── ГОЛОВНИЙ РЯДОК ───────────────────────────────────────────────── */
.ff-mainrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* сегмент-селект (тип угоди / категорія / валюта) */
.ff-seg{ position:relative; min-width:0; height:var(--ff-h); background:var(--ff-field); border:var(--ff-fborder); border-radius:var(--ff-r); }
.ff-seg--deal{ flex:0 0 116px; }
.ff-seg--cat{ flex:1 1 120px; }
.ff-seg select{ appearance:none; -webkit-appearance:none; width:100%; height:100%; border:none; background:transparent; font-family:var(--font-base); font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--ff-navy); padding:0 30px 0 16px; cursor:pointer; }
.ff-seg .ff-chev{ position:absolute; right:11px; top:50%; transform:translateY(-50%); pointer-events:none; }

/* пікер локацій - підгонка спільних .fk-* до висоти/палітри хендофу */
.ff-mainrow .fk-loc{ flex:2 1 150px; min-width:0; }
.ff-mainrow .fk-field{ height:var(--ff-h); background:var(--ff-field); border:var(--ff-fborder); border-radius:var(--ff-r); }
.ff-mainrow .fk-field:focus-within,.ff-mainrow .fk-field.is-open{ border-color:var(--ff-fieldline); box-shadow:none; }
.ff-mainrow .fk-in{ font-size:var(--fs-md); color:var(--ff-navy); }
.ff-mainrow .fk-in::placeholder{ color:var(--ff-faint); }
.ff-mainrow .fk-loc__in{ min-width:50px; }

/* блок ціни: валюта + два поля */
.ff-price{ flex:1 1 180px; min-width:0; display:flex; align-items:center; height:var(--ff-h); background:var(--ff-field); border:var(--ff-fborder); border-radius:var(--ff-r); }
.ff-price .ff-seg--cur{ flex:0 0 72px; height:100%; border:none; background:transparent; }
.ff-price .ff-seg--cur select{ padding:0 24px 0 14px; }
.ff-price .ff-seg--cur .ff-chev{ right:8px; }
.ff-price-div{ width:1px; height:24px; background:var(--ff-fieldline); flex:none; }
.ff-price .ff-in{ width:0; flex:1; min-width:0; padding:0 10px; font-size:var(--fs-sm); color:var(--ff-navy); }

.ff-in{ flex:1; min-width:0; border:none; background:transparent; font-family:var(--font-base); font-size:var(--fs-md); color:var(--ff-navy); }
.ff-in::placeholder{ color:var(--ff-faint); }
.ff-in:focus{ outline:none; }
.ff-dash{ color:rgba(20,20,20,.60); }

/* "Фільтри" + "Знайти" - обидві кнопки з гострими кутами (radius 2px), як у макеті */
.ff-more{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; height:var(--ff-h); padding:0 14px; border:1px solid var(--ff-border); border-radius:var(--ff-r); background:#fff; color:var(--ff-navy); font-family:var(--font-base); font-size:var(--fs-md); font-weight:var(--fw-semibold); cursor:pointer; transition:border-color .15s,background .15s; }
.ff-more:hover{ border-color:rgba(20,20,20,.25); background:rgba(20,20,20,.02); }
.ff-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--ff-navy); color:#fff; font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.ff-search{ flex:0 0 auto; height:var(--ff-h); padding:0 24px; border:none; border-radius:var(--ff-r); background:var(--ff-navy); color:#fff; font-family:var(--font-base); font-size:var(--fs-md); font-weight:var(--fw-bold); cursor:pointer; transition:background .15s; }
.ff-search:hover{ background:var(--navy); }

/* "ЗНАЙТИ" СВІТИТЬСЯ, ДОКИ ВИБІР НЕ ЗАСТОСОВАНО (382 §0).

   Панель показувала вибір так, ніби він уже діє: чип країни стоїть у полі,
   галочки стоять у фільтрах, а список під ними той самий, що був. Людина
   має бачити різницю між "вибрано" і "показано".

   Обручка кольором акценту, а не інша кнопка: кнопка лишається тією самою,
   просто просить уваги. Клас ставить сама панель, звіряючи адресу, яку
   побудувала б кнопка, з адресою сторінки. */
.ff-search.is-dirty{ box-shadow:0 0 0 3px var(--gold); }
.ff-search.is-dirty:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.ff-reset{ margin-left:auto; border:none; background:none; color:var(--ff-navy); font-family:var(--font-base); font-size:var(--fs-md); font-weight:var(--fw-bold); cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; position:relative; }
/* Рядок тексту 16 px заввишки - пальцю мало. Смуга дотику 44 px росте
   псевдоелементом, тобто розмітка лишається тією самою: кнопка стоїть на
   тому ж місці, просто промах угору чи вниз тепер влучає в неї. */
.ff-reset::after{ content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
.ff-reset:hover{ color:var(--ff-muted); }

/* ── ПАНЕЛЬ "ФІЛЬТРИ" (розкривна) ─────────────────────────────────── */
.ff-add{ max-height:0; overflow:hidden; opacity:0; transition:max-height .34s ease, opacity .25s ease, margin-top .25s ease; }
.ff-add.open{ max-height:3000px; opacity:1; margin-top:14px; overflow:visible; }
.ff-add-inner{ border-top:1px solid var(--ff-line); padding-top:24px; padding-bottom:4px; }
.ff-addgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 22px; align-items:end; }
.ff-add-field{ min-width:0; }   /* без цього inputs у range-полях розпирають колонку, і грід вилазить за макет */
.ff-field-span2{ grid-column:span 2; }
.ff-field-full{ grid-column:1 / -1; }
.ff-fieldlabel{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--ff-faint); margin-bottom:9px; }
.ff-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ff-chip{ cursor:pointer; display:inline-flex; align-items:center; height:40px; font-family:var(--font-base); font-size:var(--fs-sm); font-weight:var(--fw-semibold); padding:0 16px; transition:.15s; background:var(--ff-chip); color:var(--ff-muted); border:none; border-radius:999px; }
.ff-chip.active{ background:var(--ff-navy); color:#fff; }

/* діапазон "від / до" */
.ff-num{ display:flex; align-items:center; gap:6px; height:50px; background:var(--ff-field); border:var(--ff-fborder); border-radius:var(--ff-r); padding:0 14px; }

/* мультиселект-дропдаун */
.ff-ms{ position:relative; }
/* поки селект відкрито - підняти його КОМІРКУ над сусідніми у гріді, інакше
   панель (position:absolute) лягає під поля, що йдуть далі за DOM-порядком */
.ff-add-field:has(.ff-ms.is-open){ position:relative; z-index:40; }
.ff-ms.is-open{ z-index:40; }
.ff-ms-btn{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:48px; border:var(--ff-fborder); border-radius:var(--ff-r); background:var(--ff-field); font-family:var(--font-base); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ff-faint); padding:0 14px; cursor:pointer; text-align:left; transition:border-color .15s; }
.ff-ms-btn:hover{ border-color:rgba(20,20,20,.25); }
.ff-ms-btn.has-val{ color:var(--ff-navy); }
.ff-ms-btn > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ff-ms-panel{ position:absolute; left:0; right:0; top:54px; z-index:30; background:#fff; border:1px solid rgba(20,20,20,.09); border-radius:var(--ff-r); box-shadow:0 12px 30px rgba(0,29,75,.14); padding:6px; max-height:260px; overflow:auto; }
.ff-ms-opt{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--ff-r); cursor:pointer; font-size:var(--fs-sm); color:var(--ff-navy); }
.ff-ms-opt:hover{ background:rgba(20,20,20,.04); }
.ff-ms-box{ width:16px; height:16px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--ff-r); background:#fff; border:1px solid rgba(20,20,20,.24); }
.ff-ms-opt.on .ff-ms-box{ background:var(--ff-navy); border-color:var(--ff-navy); }

/* ── ОБРАНІ ФІЛЬТРИ ───────────────────────────────────────────────── */
.ff-selected{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
.ff-selected-label{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ff-muted); }
.ff-selchip{ display:inline-flex; align-items:center; gap:7px; background:var(--ff-navy); color:#fff; border-radius:999px; padding:7px 12px 7px 14px; font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.ff-selchip button{ display:inline-flex; align-items:center; border:none; background:none; color:rgba(255,255,255,.8); cursor:pointer; padding:0; }
/* close.svg має зашитий темний stroke (#001D4B) і на navy-фоні чипа зливається -
   інвертуємо у білий (той самий прийом, що й .arrow-circle.filled у style.css). */
.ff-selchip button img{ filter:brightness(0) invert(1); opacity:.75; transition:opacity .15s; }
.ff-selchip button:hover img{ opacity:1; }

/* ── РЯД "СКИНУТИ ВСІ ФІЛЬТРИ" (під головним рядком, притиснутий праворуч) ──
   1:1 із хендофом: окремий ряд, кнопка-текст вирівняна вправо. */
.ff-controls{ display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; margin-top:16px; }

/* ── ПОПУЛЯРНІ ПІДБІРКИ (SEO-перелінки) ───────────────────────────────
   1:1 із хендофом: заголовок навмисно navy/bold, нижче - світло-сірі
   чипи-пігулки з тонкою межею; hover темнішає до navy. */
.ff-il{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:16px; }
.ff-il-title{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ff-navy); white-space:nowrap; }
.ff-il a{ color:var(--ff-muted); font-size:var(--fs-md); font-weight:var(--fw-semibold); text-decoration:none; transition:color .15s; }
.ff-il a:hover{ color:var(--ff-navy); }
.ff-il a.is-on{ color:var(--ff-navy); }

/* ── ПІКЕР ЛОКАЦІЙ - точкові оверрайди під палітру хендофу ──────────────
   Базові .fk-* лежать у style.css і СПІЛЬНІ з головною (там навбар-пошук).
   Тут лише доводимо колір/радіус до макета новобудов (navy var(--navy), гострі
   кути), не чіпаючи головну. */
.ff-block .fk-pop{ top:56px; border:1px solid rgba(20,20,20,.09); border-radius:var(--ff-r); box-shadow:0 16px 40px rgba(0,29,75,.16); }
.ff-block .fk-tab{ border-radius:var(--ff-r); border-color:var(--ff-fieldline); }
.ff-block .fk-tab.is-on{ background:var(--ff-navy); border-color:var(--ff-navy); }
.ff-block .fk-cat{ background:var(--ff-chip); color:var(--ff-muted); }
.ff-block .fk-cat.is-on{ background:var(--ff-navy); color:#fff; }
.ff-block .fk-chip{ background:var(--ff-navy); border-radius:0; }
.ff-block .fk-chip__kind{ color:rgba(0,29,75,.33); background:rgba(255,255,255,.10); }
.ff-block .fk-chip-more{ background:var(--ff-chip); color:var(--ff-navy); }
.ff-block .fk-box{ border-radius:var(--ff-r); border:1.5px solid rgba(20,20,20,.24); }
.ff-block .fk-box.is-checked{ background:var(--ff-navy); border-color:var(--ff-navy); }
.ff-block .fk-locrow{ border-radius:var(--ff-r); }
.ff-block .fk-locrow:hover{ background:rgba(20,20,20,.04); }
.ff-block .fk-locrow__label .hl{ background:var(--hl-bg); color:var(--hl-fg); }

/* Від 901px і вище блок тримає десктоп-розкладку (4 колонки): весь .frame
   пропорційно стискає zoom-система style.css, брейкпоінтів тут не треба.
   Мобільне переверстання (≤900px) - у самому кінці файлу. */

/* ── МОБІЛЬНИЙ РЕЖИМ (≤900px) ─────────────────────────────────────────
   Умова - сторінка віддає адаптивний viewport (@section('viewport') у
   catalog/index.blade.php дає width=device-width), тоді style.css вимикає zoom
   і скидає .frame у гумову колонку. Тут переверстуємо сам блок фільтрів:
   inner стає гумовим (десктопне width:--content=900px інакше вилазить за
   екран і обрізається overflow-x:clip), головний рядок - гнучка сітка
   (тип+категорія в один ряд, локація/ціна на всю ширину, "Фільтри"+"Знайти"
   останнім рядом), розкривна панель - в одну колонку.
   Пікер локацій лишається INLINE-дропдауном (не повноекранним, як на
   головній): catalog-filters.js не рендерить мобільну шапку/футер із
   кнопкою "Закрити/Готово", тож повний екран без виходу став би пасткою -
   переозначаємо глобальне fixed-правило .fk-loc__pop зі style.css у .ff-block. */
@media (max-width:900px){

  /* головний рядок як гнучка сітка з переносом */
  .ff-mainrow{ gap:10px; }
  .ff-seg--deal,.ff-seg--cat{ flex:1 1 calc(50% - 5px); }
  .ff-mainrow .fk-loc{ flex:1 1 100%; }
  .ff-price{ flex:1 1 100%; }
  .ff-more{ flex:1 1 calc(50% - 5px); justify-content:center; }
  .ff-search{ flex:1 1 calc(50% - 5px); justify-content:center; text-align:center; padding:0 12px; }

  .ff-controls{ margin-top:12px; }

  /* панель "Фільтри" в одну колонку */
  .ff-addgrid{ grid-template-columns:1fr; gap:18px; }
  .ff-field-span2,.ff-field-full{ grid-column:auto; }

  /* пікер локацій: inline-дропдаун (перебиваємо глобальне fixed зі style.css) */
  .ff-block .fk-loc__pop{ position:absolute; inset:auto; left:0; right:0; top:56px;
    width:auto; height:auto; max-height:min(70vh,420px); overflow:auto;
    border:1px solid rgba(20,20,20,.09); border-radius:var(--ff-r);
    box-shadow:0 16px 40px rgba(0,29,75,.16); padding:10px; display:block; }
  /* мобільні шапка/футер попапа в каталозі не рендеряться - глушимо про всяк */
  .ff-block .fk-loc__mhead,.ff-block .fk-loc__mfoot{ display:none; }

  .ff-selected{ margin-top:16px; }
  .ff-il{ gap:12px 14px; margin-top:14px; }
}

/* =====================================================================
   FIX: сегменти-селекти фільтр-панелі, покращені js/fk-select.js.
   fk-select.js обгортає КОЖЕН <select> у .fks (прихований нативний select
   + .fks__trigger[label+caret] + .fks__pop). Селекти deal/cat/cur НЕ мають
   класу fk-cur, тому НЕ отримують .fks--compact, тож застосовується дефолтний
   .fks__trigger зі style.css (border:1px, height:44px, padding:0 14px,
   gap:10px + власна каретка .fks__caret). Наслідки в .ff-seg (52px) і
   .ff-seg--cur (72px):
     • подвійна рамка (рамка тригера поверх рамки .ff-seg);
     • неспівпадіння висоти 44px ≠ 52px, тобто вертикальний зсув;
     • ДВІ стрілки - .fks__caret у тригері + окремий <img class="ff-chev">,
       який catalog-filters.js додає СИБЛІНГОМ після select у .ff-seg;
     • лейбл затиснутий (padding+gap+caret), тому "USD" ріжеться до "U..".
   Правимо: нейтралізуємо власну "оправу" тригера у межах .ff-seg (як
   .fk-sel-wrap робить на головній), тригер заповнює сегмент 1:1, ховаємо
   ВЛАСНУ .fks__caret і лишаємо ту саму абсолютну .ff-chev, під яку макет
   уже зверстаний (right:11px / cur right:8px), а padding тригера повторює
   старі правила .ff-seg select, тож лейбл знову вміщується повністю.
   Скоуп СУВОРО .ff-seg/.ff-price, а nav (.nav__lang .fks--compact),
   пошук-бар (.fk-sel-wrap--cur), футер (.dark__switch .fks) не зачеплені. */
.ff-seg .fks{ width:100%; height:100%; }
.ff-seg .fks__trigger{
  height:100%;
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  gap:0;
  padding:0 30px 0 16px;
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  color:var(--ff-navy);
}
.ff-seg .fks__trigger:hover,
.ff-seg .fks__trigger:focus-visible,
.ff-seg .fks.is-open .fks__trigger{ border:none; box-shadow:none; }
/* .ff-seg вже малює свою абсолютну .ff-chev - ховаємо вбудовану каретку
   віджета, щоб лишилась ОДНА стрілка й лейбл повернув повну ширину */
.ff-seg .fks__caret{ display:none; }
.ff-seg .fks__label{ flex:1; min-width:0; }

/* Валюта: тісніший padding, що дзеркалить старе .ff-seg--cur select
   (0 24px 0 14px); .ff-chev тут стоїть на right:8px, тож 24px справа
   лишають місце під повний "USD"/"EUR"/"UAH". Попап трохи ширший за
   72px-сегмент, щоб опції дихали (як .fks--compact .fks__pop). */
.ff-price .ff-seg--cur .fks__trigger{ padding:0 24px 0 14px; }
.ff-price .ff-seg--cur .fks__pop{ left:0; right:auto; min-width:120px; }

/* ============================================================
   NAV - спільна навігація (шапка-пігулка).
   Самодостатній компонент: розмітка у resources/views/partials/nav.blade.php,
   стилі тут. Файл підключається автоматично самим партіалом через @push('styles').

   --nav-counter = 1/zoom (фолбек 1 - у tokens.css на :root). scale(1/zoom)
   нейтралізує zoom фрейма, тож навбар рендериться 1:1. top теж множимо на
   counter, щоб 24px лишались справжніми 24px від краю після множення zoom-ом.
   width задаємо у frame-просторі, але рендер = width × zoom × counter = width
   (zoom і counter скорочуються). Саме тому ширину контейнера сюди не можна
   підставити як є: .container рендериться --content × zoom, а навбар - рівно
   стільки, скільки написано. Щоб вийшла та сама ширина, ділимо на counter
   (тобто множимо на zoom) - див. width нижче.
   (Самі значення --nav-counter по брейкпойнтах - у style.css, бо це частина
   глобальної zoom-системи фрейму.)
   ============================================================ */
/* МАТОВЕ СКЛО В ШАПЦІ.

   Шапка висить над сторінкою, і під нею їде контент - здебільшого фото.
   Суцільна біла пігулка в цей момент виглядає наклейкою; напівпрозора з
   розмиттям читається як шар над сторінкою, а не поверх неї.

   Ледь помітно, без "ефекту": 72% білизни, розмиття 14, трохи насиченості -
   щоб колір під склом не сірів. Жодних відблисків і градієнтів.

   Де скла немає - там, де під ним білий фон: розмивати білий нема сенсу,
   видно лише те, що текст став гіршим. */
/* ШИРИНА ОСТРОВА = ШИРИНА КОНТЕНТУ, ПОКИ КОНТЕНТ ШИРШИЙ.

   Було рівно 890px на будь-якому вікні. Заміряно 18.09 на проді
   (.nav проти .container, обидва в реальних пікселях):

     вікно 1600: контейнер 1280, навбар 890   (по 195px з боку повз шапку)
     вікно 1440: контейнер 1200, навбар 890   (по 155px)
     вікно 1366: контейнер  992, навбар 890   (по  51px)
     вікно 1280: контейнер  886, навбар 890   (збіг)
     вікно 1024: контейнер  650, навбар 890   (острів ширший за контент)

   Тобто на великих вікнах повз шапку їхали чужі картки: адреси й ціни
   стояли на одному рівні з меню, лише збоку. Робимо ширину контейнера,
   але не вужче за сьогоднішні 890: інакше на 1024 острів став би 650px,
   і пункти меню туди просто не влізли б.

   Ділення на --nav-counter - це множення на zoom фрейма (див. шапку
   файлу). Без нього на 13" вийшло б 1140 замість 992, тобто острів
   виліз би за контент замість збігтися з ним.

   Нижче 900px діє окреме правило в @media - width:calc(100% - 32px),
   і воно лишається як було.

   Z-INDEX ЛИШАЄТЬСЯ 5, І ЦЕ НАВМИСНО.

   Підняття до 100 перевірено 18.09 на проді, elementFromPoint у центрі
   шапки:

     карта на весь екран (.cat-split__map, z-index 60)
       z-index 5: під курсором DIV.fk-cluster, шапка знизу
       z-index 100: під курсором A.nav, шапка накрила карту
     шторка фільтрів над картою на телефоні (.cat-ffback, z-index 44)
       z-index 5: під курсором DIV.cat-ffback, шапка знизу
       z-index 100: під курсором A.nav__icon, шапка стирчить крізь затемнення

   Плюс body.loc-lock .searchbar (home.css) навмисно піднятий до 6, щоб
   випадалка локації не різалась шапкою. Усе, що вище за 5, стоїть вище
   свідомо; 5 тут не "замало", а рівно стільки, скільки треба. */
.nav{position:fixed;top:calc(24px * var(--nav-counter));left:50%;transform:translateX(-50%) scale(var(--nav-counter));transform-origin:top center;width:min(max(890px, calc(var(--content) / var(--nav-counter))), calc(100vw - 40px));height:56px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(0,29,75,.08);border-radius:var(--r-nav);display:flex;align-items:center;padding:0 18px;gap:16px;box-shadow:0 4px 20px rgba(0,29,75,.10);z-index:5;}

/* Прокручена сторінка - щільніше скло.

   Угорі, над фото hero, шапка навмисно майже прозора: вона там частина
   кадру. Але щойно під нею починає їхати вміст, прозорість перетворюється
   на накладання: рядок пошуку просвічує крізь меню, і текст двоїться.

   Тому в прокрутці - біле скло 85 % з розмиттям і тонкою лінією знизу.
   Клас вішає nav.js за позицією прокрутки.

   85 % ПЕРЕВІРЕНО І ЗАЛИШАЄТЬСЯ. У ТЗ 18.09 стояло, що крізь скло видно
   чужі адреси й ціни. Зняв смугу самої шапки (її rect, масштаб 3:1) на
   проді, вікно 1600, каталог квартир, прокрутка 200 / 420 / 600 / 800 /
   1100 - під склом іде і текст карток, і фото: жодного разу нічого не
   читається, лише ледь помітний сірий градієнт. Адреси карток справді
   стоять на одному рівні з меню (їх rect 17-55 проти шапки 24-80), але
   збоку від неї, а не під нею - це лікується шириною, не склом. Тож скло
   тут не міняємо. */
.nav.is-stuck{
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid rgba(0,29,75,.12);
  box-shadow:0 6px 24px rgba(0,29,75,.12);
}

/* Браузер без скла (старий Firefox, режим економії) отримує щільний білий:
   напівпрозорий фон без розмиття - це просто погано читаний текст. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav{background:rgba(255,255,255,.95);}
  .nav.is-stuck{background:#fff;}
}
.nav__logo{display:flex;align-items:center;flex:none;}
/* max-width:none - знімаємо глобальний img{max-width:100%}, що стискав широкий
   горизонтальний логотип (viewBox 96×16) до кількох пікселів у flex-навбарі */
.nav__logo img{height:16px;width:auto;max-width:none;display:block;}
.nav__links{display:flex;gap:16px;margin-left:14px;}
.nav__links a{font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--slate);transition:color .18s ease;}
.nav__links a:hover{color:var(--navy);}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.nav__icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--navy);transition:background .18s ease,transform .18s ease;}
.nav__icon:hover{background:var(--soft);transform:translateY(-1px);}
.nav__icon img{transition:opacity .18s ease;}
.nav__icon:hover img{opacity:.85;}

/* Обране: бейдж-лічильник у куті іконки. Ставить FFav (js/favorites-store.js)
   з localStorage; поки обраного немає - [hidden]. */
.nav__fav{position:relative;}
.nav__fav-n{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:var(--r-pill);background:var(--navy);color:var(--white);
  font-size:10px;line-height:1;font-weight:var(--fw-bold);letter-spacing:0;pointer-events:none;}
.nav__fav-n[hidden]{display:none;}
.nav__logo img{transition:opacity .18s ease;}
.nav__logo a:hover img{opacity:.7;}

/* бургер - показуємо на всіх ширинах (і на ПК поруч із меню-рядком) */
.nav__burger{display:grid;border:none;background:transparent;padding:0;}

/* ============================================================
   МЕНЮ-ПАНЕЛЬ - відкривається бургером на будь-якій ширині.
   Одна розмітка (partials/nav-drawer.blade.php) на ПК і на телефон:
   на ПК - панель 360px справа на всю висоту, на телефоні - на весь екран.
   Нічого не ховається медіазапитом: склад пунктів однаковий скрізь.
   ============================================================ */
.nav-drawer{display:block;position:fixed;inset:0;z-index:120;}
.nav-drawer[hidden]{display:none;}
.nav-drawer__backdrop{position:absolute;inset:0;background:rgba(0,29,75,.55);
  opacity:0;transition:opacity .25s ease;}
.nav-drawer.is-open .nav-drawer__backdrop{opacity:1;}

/* Панель: navy-скло, виїжджає справа.

   Скло, а не суцільна заливка: під меню лишається видно сторінку, з якої
   людина його відкрила, і зрозуміло, що вона нікуди не пішла. Так само
   зроблені шапка при прокрутці й лаунчер - більше ніде на сайті скла
   немає (118/146).

   Без підтримки backdrop-filter - суцільний navy: напівпрозорий фон без
   розмиття дав би нечитабельний текст поверх фотографій. */
.nav-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(360px, 100vw);
  background:var(--navy);display:flex;flex-direction:column;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  transform:translateX(16px);opacity:0;transition:transform .28s ease,opacity .28s ease;}
.nav-drawer.is-open .nav-drawer__panel{transform:none;opacity:1;}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-drawer__panel{
    background:rgba(0,29,75,.94);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
}

/* Лаунчер лежить вище за меню (z-index 150 проти 120) і накривав собою
   правий нижній кут панелі. Поки меню відкрите, його немає: одна кнопка
   зв'язку поверх іншого способу зв'язатись - це не вибір, а перешкода. */
body.fk-lock .cl{ display:none; }

.nav-drawer__top{display:flex;align-items:center;justify-content:space-between;
  flex:none;padding-bottom:8px;}
.nav-drawer__top .nav__logo img{height:18px;filter:brightness(0) invert(1);}
.nav-drawer__close{border:none;background:transparent;font-size:30px;line-height:1;
  color:var(--white);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;
  margin-right:-10px;border-radius:var(--r-field);}
.nav-drawer__close:hover{background:rgba(255,255,255,.10);}
.nav-drawer__close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* Гортається саме цей блок, а не сторінка під ним.

   На iOS панель на всю висоту без власного overflow-y не гортається
   взагалі: body заблокований, а всередині панелі прокрутки немає - меню
   виглядає завислим, і половини пунктів не видно. */
.nav-drawer__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:8px;}

/* Підпис секції: 12px, не капс - у меню з чотирнадцяти пунктів він
   потрібен як межа між групами, а не як окремий заголовок. */
.nav-drawer__cap{margin:16px 0 4px;font-size:12px;line-height:1.2;
  font-weight:var(--fw-regular);color:rgba(255,255,255,.55);}
.nav-drawer__scroll > .nav-drawer__cap:first-child{margin-top:4px;}

.nav-drawer__links{display:flex;flex-direction:column;}
.nav-drawer__links a{display:flex;align-items:center;gap:8px;
  padding:11px 0;font-size:var(--fs-base);font-weight:var(--fw-medium);
  color:var(--white);border-bottom:1px solid rgba(255,255,255,.14);}
.nav-drawer__links a:last-child{border-bottom:none;}
/* display:flex вище перебивав атрибут hidden, і "Кабінет клієнта" бачили
   всі, а не тільки ті, у кого він є. */
.nav-drawer__links a[hidden]{display:none;}
.nav-drawer__links a:hover{color:var(--gold);}
.nav-drawer__links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.nav-drawer__links a:active{opacity:.6;}
/* Де людина зараз: золота смужка зліва, без зміни кегля й ваги. */
.nav-drawer__links a.is-here{color:var(--gold);box-shadow:inset 3px 0 0 var(--gold);padding-left:10px;}
.nav-drawer__n{position:static;margin-left:auto;background:var(--gold);color:var(--navy);}

/* МОВА Й ВАЛЮТА - ЧІПАМИ.

   Випадайка в панелі 360px відкривалась поверх телефону й виглядала
   системним елементом; трьох значень вона й не варта. Чіпи однакові за
   розміром, активний - золотою заливкою по navy-склу. */
.nav-drawer__set{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.nav-drawer__chips{display:flex;gap:8px;}
.nav-chip{flex:1 1 0;min-width:0;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-field);
  background:transparent;color:var(--white);cursor:pointer;
  font-family:inherit;font-size:var(--fs-base);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-base);transition:background .18s ease,border-color .18s ease,color .18s ease;}
.nav-chip:hover{border-color:var(--gold);color:var(--gold);}
.nav-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.nav-chip.is-on,.nav-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.nav-chip[hidden]{display:none;}

/* МОВА, ВАЛЮТА І ЗВʼЯЗОК - завжди внизу панелі, поза прокруткою.

   Спершу мова стояла в загальному списку, і на екрані 900 пікселів чіпи
   опинялись нижче краю: людина бачила чотирнадцять розділів і жодної
   мови - рівно та скарга, з якої почалась переробка. Тепер список
   гортається сам по собі, а мова, валюта й телефон закріплені. */
.nav-drawer__foot{flex:none;margin-top:auto;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;gap:10px;}
.nav-drawer__foot .nav-drawer__cap{margin:0;}
.nav-drawer__row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nav-drawer__phone{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--white);white-space:nowrap;}
.nav-drawer__phone:hover{color:var(--gold);}
.nav-drawer__msg{display:flex;gap:8px;}
.nav-drawer__msg-ic{width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;color:var(--gold);border:1px solid rgba(255,255,255,.22);
  transition:background .18s ease,border-color .18s ease;}
.nav-drawer__msg-ic:hover{background:rgba(255,255,255,.10);border-color:var(--gold);}
.nav-drawer__msg-ic:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* На телефоні панель - на весь екран (100dvh: адресний рядок Safari
   інакше зʼїдає низ), із запасом під безпечну зону. */
@media (max-width:900px){
  .nav-drawer__panel{width:100vw;height:100dvh;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    transform:translateY(-12px);}
  .nav-drawer__foot{flex-wrap:wrap;}

  .nav{width:calc(100% - 32px);gap:12px;padding:0 16px;height:52px;}
  .nav__links{display:none;}

  /* Значок на око лишається 32 px, а пальцю дістається 44: дотик ловить не
     коло, а прозорий прямокутник навколо нього (норма дотику - 44). Розмір
     і вигляд не змінились, тож шапка виглядає так само.

     Проміжок 12 замість 8 - щоб області сусідніх значків торкались, а не
     налазили: 32 + 6 + 6 = 44, і між ними лишається рівно нуль. Інакше
     тап біля краю відкривав би не те, у що людина цілилась. */
  .nav__right{gap:12px;}
  .nav__icon{position:relative;}
  .nav__icon::after{content:'';position:absolute;inset:-6px;border-radius:50%;}
}

/* Прокрутку під панеллю тримає спільний замок FLock (body.fk-lock у
   style.css) - той самий, що в галереях і шторках. Свого класу в меню
   більше немає: два різні замки знімали один одного. */

/* "ЗБЕРЕГТИ ПОШУК": чіп і вікно.

   Розмітка - resources/views/partials/save-search.blade.php, партіал сам
   підтягує цей файл.

   ПРАВИЛО Б-9. Вікно не заганяє в кут: хрестик 44 px, Esc, клік поза
   ним. Помилка - текстом під полем, і вікно при цьому лишається
   відкритим: закрити вікно у відповідь на помилку означає змусити
   людину починати спочатку.

   На вузькому екрані це шторка знизу, а не вікно посеред екрана: у
   центрі воно ховається під клавіатурою, і кнопки не видно. */

/* Значок дзвіночка в чіпі - золотий, як решта значків у списках
   (167 п.7). Після збереження чіп стає navy, і значок білішає з текстом. */
.ssm-chip{
  height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-ctrl);
  background:var(--white); color:var(--dark); cursor:pointer;
  font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-medium); line-height:1;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.ssm-chip:hover{ border-color:var(--navy); }
.ssm-chip:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.ssm-chip__ic{ color:var(--gold); flex:none; }
.ssm-chip__ic--done{ display:none; }
.ssm-chip.is-done .ssm-chip__ic--bell{ display:none; }
.ssm-chip.is-done .ssm-chip__ic--done{ display:block; }
.ssm-chip.is-done{ background:var(--navy); border-color:var(--navy); color:var(--white); cursor:default; }
.ssm-chip.is-done .ssm-chip__ic{ color:var(--white); }

.ssm{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:16px; }
.ssm[hidden]{ display:none; }
.ssm__backdrop{ position:absolute; inset:0; background:rgba(0,29,75,.45); }

.ssm__box{
  position:relative; width:100%; max-width:440px; padding:24px;
  background:var(--white); border:1px solid var(--ink-12);
  box-shadow:0 18px 48px var(--ink-08);
  max-height:calc(100dvh - 32px); overflow-y:auto;
}

/* 44 px - розмір, у який палець потрапляє з першого разу. Хрестик на 32
   промазують, і людина закриває вікно кліком по підкладці, тобто
   випадково. */
.ssm__close{
  position:absolute; top:6px; right:6px; width:44px; height:44px;
  display:grid; place-items:center;
  border:0; background:none; color:var(--muted);
  font-size:26px; line-height:1; cursor:pointer; border-radius:var(--r-ctrl);
}
.ssm__close:hover{ background:var(--soft); color:var(--dark); }
.ssm__close:focus-visible{ outline:2px solid var(--navy); outline-offset:-2px; }

.ssm__title{ margin:0 6px 6px 0; font-size:var(--fs-h4); font-weight:var(--fw-bold); }
.ssm__note{ margin:0 0 16px; font-size:var(--fs-md); color:var(--ink-70); }

.ssm__form{ display:block; }
.ssm__label{ display:block; margin:0 0 6px; font-size:var(--fs-md); color:var(--ink-70); }
.ssm__input{
  width:100%; height:48px; padding:0 14px;
  border:1px solid var(--border-soft); border-radius:var(--r-field);
  background:var(--white); color:var(--dark);
  font-family:inherit; font-size:var(--fs-base); line-height:1;
}
.ssm__input::placeholder{ color:var(--ink-40); }
.ssm__input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-08); }
.ssm__input.is-bad{ border-color:var(--danger); }

/* Помилка живе під полем і не рухає кнопку: людина читає причину там,
   де дивиться, а не в системному вікні поверх сторінки. */
.ssm__err{ margin:8px 0 0; font-size:var(--fs-md); color:var(--danger); }
.ssm__err[hidden]{ display:none; }

.ssm__check{ display:flex; align-items:center; gap:8px; margin:16px 0; font-size:var(--fs-md); cursor:pointer; }
.ssm__check input{ width:18px; height:18px; flex:none; accent-color:var(--navy); }

.ssm__btn{
  width:100%; height:48px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 20px; border:0; border-radius:var(--r-ctrl);
  background:var(--navy); color:var(--white); cursor:pointer;
  font-family:inherit; font-size:var(--fs-base); font-weight:var(--fw-medium); line-height:1;
  transition:background .18s ease;
}
.ssm__btn:hover{ background:var(--navy-hover); }
.ssm__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.ssm__btn[disabled]{ opacity:.6; cursor:default; }
.ssm__btn--ghost{ background:transparent; color:var(--navy); border:1px solid var(--navy); }
.ssm__btn--ghost:hover{ background:var(--soft); }

.ssm__acts{ margin-top:4px; }
.ssm__msg{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.ssm__msg[hidden]{ display:none; }

/* На телефоні - шторка знизу. Вікно посеред екрана ховається під
   клавіатурою, щойно людина торкається поля, і кнопки не видно взагалі. */
@media (max-width:700px){
  .ssm{ align-items:flex-end; padding:0; }
  .ssm__box{
    max-width:none; border-radius:0; border-left:0; border-right:0; border-bottom:0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height:88dvh;
  }
}

/* Сторінка "Мої пошуки". Живе тут, а не в catalog-head: вона про
   збережений пошук, а не про шапку каталогу. */
.ss-list { display: grid; gap: 12px; margin-top: 24px; }
.ss-item { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--ink-12); }
.ss-item__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--navy); }
.ss-item__meta { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.ss-item__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ss-note { margin: 16px 0 0; padding: 12px 16px; background: var(--gold-soft); font-size: var(--fs-md); }
.ss-empty { margin-top: 24px; color: var(--muted); }

/* =====================================================================
   КАРТА (partials/map.blade.php)

   Один блок на три сторінки: картка обʼєкта, сторінка ЖК, сторінка офісу.
   Стилі лежали всередині property.css, який сторінка офісу не підключає, -
   і карта там показувалась без них: смуга OpenStreetMap лізла поверх мапи,
   а замість значка "i" у кутку в тексті стояли самотні трикутник і літера.

   Тому файл окремий і його підключає сам блок карти: хто вставив карту,
   той отримав і стилі, без окремої згадки на кожній сторінці.
   ===================================================================== */

/* ---------- карта обʼєкта і ЖК ----------
   Вбудований перегляд OpenStreetMap приносить власну смугу внизу з
   авторством, посиланням "повідомити про проблему" і проханням підтримати
   проєкт. На телефоні вона займає третину висоти й закриває саме те, заради
   чого карту відкривають.

   Смугу ховаємо: кадр робимо вищим за видиму частину рівно на її висоту.
   Авторство при цьому не зникає - воно своє, дрібним рядком у нижньому
   кутку, з обома обовʼязковими посиланнями. */
.fk-map{
  position:relative;
  /* `clip`, а не тільки `hidden`. `hidden` робить блок прокручуваним - і
     браузер справді прокручує його сам, коли кадр усередині отримує фокус:
     карта зʼїжджає на 52 пікселі вгору, а підпис авторства повисає над
     нижнім краєм. `clip` просто відрізає зайве й прокрутки не створює.
     Рядок із `hidden` лишаємо запасним для старих браузерів. */
  overflow:hidden;
  overflow:clip;
}
.fk-map__frame{
  position:absolute; left:0; top:0; width:100%;
  /* Кадр вищий за видиму частину рівно на висоту смуги OpenStreetMap -
     так вона опиняється за нижнім краєм.

     52px, а не 26: смуга не має сталої висоти. На вужчому екрані її текст
     ("Повідомити про проблему | © Учасники OpenStreetMap ❤ Підтримайте
     проєкт. Умови користування") переноситься на другий рядок, і половина
     смуги знову лізе на карту. Беремо висоту двох рядків - тоді сховано в
     будь-якому разі. */
  height:calc(100% + 52px); border:0;
}
/* Фільтр плиток (saturate/brightness/contrast) тут був і його прибрано.
   Кольори він приглушував правильно, але ціна виявилась зависокою: фільтр
   на цілий шар змушує браузер перемальовувати КОЖНУ плитку на кожен рух
   карти, і перетягування починає смикатись. Стриманіші кольори варті того,
   щоб зробити їх у самих плитках (векторний стиль, крок 2 у 134 п.9), а не
   поверх готових. */

/* Авторство карти. За ліцензією ODbL його прибирати не можна, а рядком
   через пів карти воно з'їдає той самий кадр, заради якого карту й
   відкрили. Тому значок "i" у кутку, що розкривається під курсором,
   дотиком або з клавіатури - ліцензія такий згорнутий вигляд дозволяє,
   поки сам значок видно.

   Без скрипта навмисно: та сама розмітка стоїть у партіалі карти й у
   карті каталогу, і поведінка, написана двічі, розійдеться. */
.fk-map__attr{
  position:absolute; right:6px; bottom:6px; z-index:2; margin:0;
  display:flex; align-items:flex-end; gap:6px; flex-direction:row-reverse;
}
.fk-map__attr-i{
  flex:none; width:20px; height:20px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.8); color:var(--navy);
  font:700 12px/20px var(--font-ui, inherit); cursor:pointer;
}
.fk-map__attr-i:hover{ background:#fff; }
.fk-map__attr-i:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.fk-map__attr-txt{
  display:none; margin:0; padding:2px 7px; border-radius:2px;
  background:rgba(255,255,255,.9);
  font-size:var(--fs-xs); line-height:1.5; color:rgba(20,20,20,.55); white-space:nowrap;
}
.fk-map__attr:hover .fk-map__attr-txt,
.fk-map__attr:focus-within .fk-map__attr-txt{ display:block; }
.fk-map__attr a{ color:inherit; text-decoration:none; }
.fk-map__attr a:hover{ text-decoration:underline; }
.fk-map__attr a:focus-visible{ outline:2px solid var(--dark); outline-offset:2px; }

/* Мітка. Стоїть у центрі кадру вістрям на точку: зсуваємо на пів ширини
   вбік і на всю висоту вгору, щоб у точку впиралось саме вістря, а не
   середина краплі. filter замість box-shadow - тінь має повторювати
   форму краплі, а не її прямокутник. */
.fk-map__pin{
  position:absolute; left:50%; z-index:2; pointer-events:none;
  /* Не 50%, а на 26 пікселів нижче. Кадр карти на 52 пікселі вищий за
     видиму частину (там ховається смуга OpenStreetMap), і сама точка
     припадає на центр КАДРУ, тобто на половину цих 52 нижче за центр
     видимого прямокутника. Без цієї поправки мітка стоїть поруч із
     будинком, а не на ньому. */
  top:calc(50% + 26px);
  transform:translate(-50%, -100%);
  filter:drop-shadow(0 2px 3px rgba(0,29,75,.35));
}

/* ---------------------------------------------------------------
   КАРТА В ПОТОЦІ НЕ ЗАБИРАЄ ЖЕСТ (074 21:12).

   На телефоні палець потрапляв на кадр карти, кадр забирав дотик собі -
   і не горталось нічого: ні сторінка, ні карта. Тому в потоці карта не
   інтерактивна взагалі, а над нею кнопка "Відкрити мапу": на весь екран
   жести доречні, бо гортати там уже нічого.

   На ПК миша нічого не "застрягає", тож там карта лишається живою і
   кнопки немає.
   --------------------------------------------------------------- */
.fk-map__open{ display:none; }
.fk-map__close{ display:none; }

@media (max-width:768px){
  /* Не вище за 45 відсотків екрана: карта - довідка, а не сторінка. */
  .fk-map[data-map-embed]{ height:min(45dvh, 340px) !important; touch-action:pan-y; }
  .fk-map[data-map-embed] .fk-map__frame{ pointer-events:none; }

  .fk-map__open{
    position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
    display:inline-flex; align-items:center; height:40px; padding:0 16px;
    border:1px solid var(--ink-12); border-radius:var(--r-ctrl);
    background:var(--white); color:var(--navy); cursor:pointer;
    font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-bold);
    box-shadow:0 2px 8px rgba(0,29,75,.20);
  }
  .fk-map__open[hidden]{ display:none; }

  /* Повний екран: карта живе, сторінка під нею заблокована (FLock). */
  .fk-map[data-map-embed].is-full{
    position:fixed; inset:0; z-index:140; height:100dvh !important;
    margin:0; touch-action:none;
  }
  .fk-map[data-map-embed].is-full .fk-map__frame{ pointer-events:auto; }

  .fk-map__close{
    position:absolute; top:12px; right:12px; z-index:4;
    width:44px; height:44px; display:grid; place-items:center;
    border:1px solid var(--ink-12); border-radius:var(--r-ctrl);
    background:var(--white); color:var(--navy);
    font-family:inherit; font-size:26px; line-height:1; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,29,75,.20);
  }
  .fk-map__close[hidden]{ display:none; }
}

/* =====================================================================
   КАТАЛОГ: РЕЖИМ КАРТИ (?view=map)

   Карта ліворуч, картки праворуч - той самий компонент картки, що й у
   списку. Ніякої другої верстки картки тут немає й бути не може: список і
   карта показують одне й те саме, і розійтись вони не мають.

   Оформлення - сайту, не бібліотеки: кластери й пігулки цін малюємо самі
   через divIcon, тому вони підкоряються токенам, як решта сторінки.
   ===================================================================== */

/* Перемикач "Списком / На мапі" живе в catalog-head.css: він стоїть у
   рядку результатів в обох режимах, і його стилі мають приїжджати
   разом зі сторінкою, а не разом із картою. */

/* Сплит. Карта тримається на місці, поки список гортається - інакше на
   довгому списку карта їде вгору й людина гортає порожнечу. */
/* Половина на половину. Спершу карті було 55 відсотків, і картка праворуч
   виходила 260 пікселів завширшки - вужчою, ніж у списку, через що назва
   обрізалась, а характеристики налазили одна на одну. Тепер картка тут така
   сама, як у каталозі. */
/* minmax(0,1fr), а не 1fr: колонка з 1fr не має права стиснутись менше за
   свій вміст, і на масштабі браузера 125-150 % список вилазив праворуч за
   край екрана разом із горизонтальною прокруткою сторінки. */
.cat-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
/* Шапка сайту - fixed, її низ на 80-му пікселі. Липка карта з відступом
   16px залазила під неї разом із кнопками масштабу: людина тиснула "+", а
   потрапляла в шапку. Тепер карта починається під шапкою. */
.cat-split__map{ position:sticky; top:96px; height:calc(100vh - 112px); min-width:0; }
.cat-split__list{ min-width:0; }
/* Дві картки в ряд, а не чотири: праворуч лишається менша половина екрана,
   і в чотири колонки картка стискається так, що назва обрізається на
   третьому слові, а характеристики налазять одна на одну. Клас сітки той
   самий, що в списку (.cat-grid), - міняємо лише кількість колонок. */
.cat-split__list .cat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

#cat-map{ width:100%; height:100%; }
/* Щипок пальцями має масштабувати карту, а не сторінку: без цього рядка
   браузер забирає жест собі, і на телефоні "наближається сайт". */
#cat-map, #cat-map .leaflet-container{ touch-action:none; }
#cat-map .leaflet-container{ font:inherit; background:var(--ink-05); }

/* Кластер: коло navy з кількістю. Розмір - за кількістю, три кроки:
   більше градацій людина все одно не розрізняє. */
.fk-cluster{
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--white);
  border-radius:50%; font-weight:700; font-size:var(--fs-sm);
  box-shadow:0 2px 6px rgba(0,29,75,.35);
}
.fk-cluster--m{ font-size:var(--fs-md); }
.fk-cluster--l{ font-size:var(--fs-base); }

/* Пігулка з ціною - на великому наближенні замість кластерів. */
.fk-pricepin{
  display:inline-flex; align-items:center; height:26px; padding:0 9px;
  background:var(--white); color:var(--navy);
  border:1px solid var(--navy); border-radius:var(--r-ctrl);
  font-size:var(--fs-sm); font-weight:700; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,29,75,.25);
}
.fk-pricepin.is-on{ background:var(--navy); color:var(--white); }

/* ---------- картка обʼєкта на самій карті ----------
   Це та сама картка, що праворуч у списку (спільний FCard і card.css), -
   тут лише прибрано оздоблення спливаючого вікна бібліотеки, щоб картка
   стояла в ньому без чужої рамки й відступів. */
.fk-mpop .leaflet-popup-content-wrapper{ padding:0; border-radius:var(--r-ctrl); overflow:hidden; box-shadow:0 10px 30px rgba(0,29,75,.22); }
.fk-mpop .leaflet-popup-content{ margin:0; width:auto !important; }
.fk-mpop .leaflet-popup-tip{ background:var(--white); }
/* Ширину задаємо картці, а не вікну: бібліотека рахує розмір по вмісту, а
   картка сама по собі тягнеться до нуля - на карті вона виходила вдвічі
   вужчою за ту саму картку в списку. На вузькому екрані не даємо їй
   вилізти за межі карти. */
.fk-mpop .card{ width:min(300px, 76vw); background:var(--white); }

/* Картка під курсором у списку - підсвічена й на карті, і навпаки. */
.card.is-hi{ outline:2px solid var(--navy); outline-offset:2px; }

/* Скільки з них має точку. Рядок під картою - тиха довідка, а не тривога. */
.cat-map__note{
  margin-top:8px; font-size:var(--fs-sm); color:var(--muted);
}

@media (max-width:1100px){
  /* Одна колонка: карта зверху, список під нею. Карта при цьому лишається
     липкою - людина гортає список і весь час бачить, де ці обʼєкти. Було
     `static`, і карта просто їхала вгору з першим же рухом: гортаєш список
     - карти вже немає, а вона тут головна. */
  .cat-split{ grid-template-columns:minmax(0,1fr); }
  .cat-split__map{ position:sticky; top:96px; height:55vh; z-index:1; }
  .cat-split__list .cat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Ручка шторки й смуга керування над картою - тільки на телефоні.
   Оголошені ДО медіазапиту: інакше вони перебивали б його правила. */
.cat-sheet__grip{ display:none; }
.cat-mtop{ display:none; }

/* =====================================================================
   ТЕЛЕФОН: ДВА РЕЖИМИ, А НЕ ПІВТОРА (074 21:12-21:14)

   Було: розкладку "мапа + список" із ПК перенесли на 390 без адаптації.
   Липка карта висіла поверх стрічки карток, заголовки й фото заходили
   під неї, рядок "Ще N без точки" був перекритий, палець потрапляв на
   карту - і не горталось нічого: ні сторінка, ні карта.

   Стало: у режимі "На мапі" карта займає екран під шапкою, список -
   шторка знизу, яку тягнеш пальцем. Стану, де контент їде під картою,
   немає взагалі. У режимі "Списком" карти немає в розмітці зовсім -
   ані шару, ані плиток.
   ===================================================================== */
@media (max-width:768px){
  .cat-split__list .cat-grid{ grid-template-columns:1fr; }

  /* Увесь режим - один шар під шапкою. Липкості немає ніде: саме вона
     й давала "все застрягло". */
  .cat-split{
    position:fixed; left:0; right:0; top:76px; bottom:0; z-index:30;
    display:block; gap:0;
  }

  .cat-split__map{
    position:absolute; inset:0; top:0; height:auto; z-index:1;
  }

  /* Власний контекст накладання: без нього шари Leaflet (400 і 1000)
     рахуються нарівні зі смугою керування, і вона ховається під картою. */
  #cat-map{ height:100%; position:relative; z-index:0; }

  /* Довідкові рядки під картою на телефоні їхали б за екран - вони
     переїжджають у шторку, до списку. */
  .cat-split__map .cat-map__note,
  .cat-split__map .cat-map__count{ display:none; }

  /* Смуга керування поверх карти: повернутись до списку й відкрити
     фільтри - обидва входи там, де людина зараз. */
  .cat-mtop{
    position:absolute; top:8px; left:8px; right:8px; z-index:3;
    display:flex; gap:8px;
  }

  .cat-mtop__btn{
    flex:1 1 0; height:40px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:0 12px; border:1px solid var(--ink-12); border-radius:var(--r-ctrl);
    background:var(--white); color:var(--navy); cursor:pointer;
    font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-bold);
    text-decoration:none; box-shadow:0 2px 8px rgba(0,29,75,.16);
  }

  /* ШТОРКА СПИСКУ.

     Висота - у змінній: її рухає палець (js/catalog-map.js), і те саме
     число потрібне і рамці, і внутрішній прокрутці. */
  .cat-split__list{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    height:var(--sheet-h, 38dvh);
    display:flex; flex-direction:column;
    padding:0 12px calc(8px + env(safe-area-inset-bottom));
    background:var(--white);
    border-top:1px solid var(--ink-12);
    box-shadow:0 -8px 28px rgba(0,29,75,.16);
  }

  /* Гортається сам список, а не сторінка під ним: overscroll-behavior
     не пускає рух далі шторки. */
  .cat-split__list .cat-grid{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }

  .cat-sheet__grip{
    flex:none; display:block; width:100%; height:26px;
    border:0; background:none; padding:0; cursor:grab;
    touch-action:none;
  }
  .cat-sheet__grip .cat-sheet__grip-line{
    display:block; width:44px; height:4px; margin:11px auto;
    background:var(--ink-28); border-radius:2px;
  }
  .cat-sheet__grip:focus-visible{ outline:2px solid var(--navy); outline-offset:-4px; }
}


/* ---------- інструменти карти ----------
   Вертикальна панель праворуч: білі плитки в стилі сайту, а не кнопки
   бібліотеки. Увімкнений інструмент - navy, як активна вкладка. */
.fk-mtools{
  display:flex; flex-direction:column; gap:6px;
  margin:10px 10px 0 0;
}
.fk-mtool{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--navy);
  border:1px solid var(--ink-12); border-radius:var(--r-ctrl); cursor:pointer; padding:0;
  box-shadow:0 1px 3px rgba(0,29,75,.14);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.fk-mtool:hover{ border-color:var(--navy); }
.fk-mtool:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.fk-mtool.is-on{ background:var(--navy); border-color:var(--navy); color:var(--white); }

/* Поки вибирають центр радіуса - курсор каже, що чекають клік по карті. */
#cat-map.is-picking{ cursor:crosshair; }

/* Leaflet ставить контрол у свій кут із власними відступами - прибираємо
   їх, щоб значок ліг у сам куток карти, як на картці обʼєкта. Решта
   вигляду - зі спільного css/map.css, другої копії тут немає. */
.fk-map__attr--leaflet{ position:static; margin:0; }

/* Скільки залишилось у вибраній області - рядок під картою. */
.cat-map__count{ margin-top:6px; font-size:var(--fs-sm); color:var(--navy); font-weight:600; }

/* Повний екран: карта займає вікно, список ховається. */
.cat-split.is-full{ display:block; }
.cat-split.is-full .cat-split__list{ display:none; }
.cat-split.is-full .cat-split__map{
  position:fixed; inset:0; z-index:60; height:100vh; padding:0; margin:0;
}
body.map-full{ overflow:hidden; }

/* ---------------------------------------------------------------
   ФІЛЬТРИ ПОВЕРХ КАРТИ (телефон).

   Панель лишається тією самою, що на сторінці, - другої копії немає.
   Кнопка "Фільтри" піднімає її шторкою поверх карти й повертає назад.
   --------------------------------------------------------------- */
.cat-ffback{ position:fixed; inset:0; z-index:44; background:rgba(0,29,75,.45); }
.cat-ffback[hidden]{ display:none; }

@media (max-width:768px){
  body.map-filters #ff-catalog-filters,
  body.map-filters #ff-novobudovy-filters{
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    max-height:86dvh; overflow-y:auto; overscroll-behavior:contain;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    background:var(--white);
    border-top:1px solid var(--ink-12);
    box-shadow:0 -8px 28px rgba(0,29,75,.20);
  }
}

@media (min-width:769px){
  .cat-ffback{ display:none; }
}

/* ---------------------------------------------------------------
   Кнопки карти на телефоні - лише масштаб і "де я".

   "На весь екран", "шукати в цій області" і обидва радіуси забирали
   третину екрана, а на дотик не потрібні: повний екран там і так,
   область - це видима частина, радіус пальцем не малюють.

   "Де я" (радіус навколо себе) теж ховаємо: він малює той самий радіус,
   який ми щойно прибрали, а поруч стоїть "моє місцезнаходження" з майже
   таким самим значком - два однакові кола підряд людина читає як
   помилку, а не як вибір.

   Правило стоїть у кінці файла навмисно: базове .fk-mtool оголошене
   нижче за медіазапит режиму мапи, і звідти воно перебивало б це
   приховування.
   --------------------------------------------------------------- */
@media (max-width:768px){
  .fk-mtools{ margin:0 8px 0 0; }

  /* Масштаб "+/−" стоїть у лівому верхньому куті - рівно там, де тепер
     смуга "Списком / Фільтри". Опускаємо контроли нижче за неї, інакше
     "плюс" натиснути неможливо. */
  #cat-map .leaflet-top .leaflet-control{ margin-top:56px; }
  .fk-mtool--full,
  .fk-mtool--radius,
  .fk-mtool--here,
  .fk-mtool--area{ display:none; }
}

/* Хрестик над затемненням: третій спосіб закрити фільтри (Б-9). */
.cat-ffclose{
  position:fixed; top:12px; right:12px; z-index:46;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--ink-12); border-radius:var(--r-ctrl);
  background:var(--white); color:var(--navy);
  font-family:inherit; font-size:26px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,29,75,.20);
}
.cat-ffclose[hidden]{ display:none; }
.cat-ffclose:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

@media (min-width:769px){
  .cat-ffclose{ display:none; }
}

/* Смуга згоди. Fixed - тож нічого не зсуває; на телефоні стає стовпчиком і
   лишає місце під системну смугу (safe-area). Z-index вищий за плаваючу
   кнопку дзвінка (.cl, 150) - згода має бути зверху й перекривати її. */
.fk-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:160;
  background:var(--navy); color:var(--white);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -6px 24px rgba(0,29,75,.18);
}
.fk-consent__in{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:20px;
  flex-wrap:wrap; justify-content:space-between;
}
.fk-consent__txt{margin:0; font-size:var(--fs-sm); line-height:1.5; max-width:760px;}
.fk-consent__txt a{color:var(--gold); text-decoration:underline;}
.fk-consent__acts{display:flex; gap:10px; flex:none;}
.fk-consent__btn{
  height:40px; padding:0 20px; border:1px solid var(--gold); background:var(--gold);
  color:var(--navy); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-bold);
  cursor:pointer;
}
.fk-consent__btn:hover{filter:brightness(1.06);}
.fk-consent__btn--ghost{background:transparent; border-color:rgba(255,255,255,.45); color:var(--white);}
.fk-consent__btn--ghost:hover{border-color:var(--white); filter:none;}
.fk-consent__btn:focus-visible{outline:2px solid var(--white); outline-offset:2px;}

/* На телефоні смуга займала майже чверть екрана (152 px із 667 на iPhone SE)
   і закривала те, заради чого людина прийшла. Тому тут вона компактна:
   дрібніший кегль, тісніші відступи. Текст лишається повністю - ховати або
   різати його не можна, це згода; місце віддає оформлення, а не зміст.
   Кнопки при цьому не меншають, а ростуть до 44 px: їх треба натиснути. */
@media (max-width:700px){
  .fk-consent{padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));}
  .fk-consent__in{flex-direction:column; align-items:stretch; gap:10px;}
  .fk-consent__txt{font-size:var(--fs-xs); line-height:1.4;}
  .fk-consent__acts{width:100%; gap:8px;}
  .fk-consent__btn{flex:1; height:44px; padding:0 12px;}
}

/* Пункт "Куки" в підвалі. Кнопка, бо нікуди не веде, але виглядати має
   як сусідні посилання: людина шукає його очима серед них (360 §1). */
.dark__cookies{ background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-decoration:none; }
.dark__cookies:hover{ text-decoration:underline; }