/*
 * R-ONE Property Market, Phase 2 — спільний стиль публічного порталу.
 * Обслуговує /m, /m/properties, /m/:token, public/marketplace-unavailable —
 * усі чотири публічні сторінки мають виглядати як ОДИН сучасний портал
 * нерухомості, а не розрізнені CRM-екрани. Винесено з inline <style>
 * Phase 1 (src/views/public/marketplace-listing.ejs) сюди ж, щоб той
 * самий вигляд не дублювався в кожному новому публічному файлі.
 */
/*
 * 24.09.2026, R-ONE Market — pixel-close redesign за reference:
 * design-токени нижче ЗАМІНЕНО на нову палітру (глибокий navy + cyan neon-
 * акцент замість плаского синього), радіус збільшено, додано токени для
 * glow/тіней. :root лишається DARK-палітрою за замовчуванням (як і в
 * internal CRM header.ejs: <html data-theme="dark"> за замовчуванням).
 *
 * 24.09.2026, Крок Light-theme: додано [data-theme="light"] override нижче —
 * ОДИН HTML/EJS layout для обох тем, різниця виключно через ці CSS-змінні
 * (та theme-aware hero-картинку, див. marketplace-home.ejs). Кожен колір,
 * який раніше був "зашитий" напряму в правило (не через var(--m-...)),
 * винесено в токен саме для того, щоб Light міг його перевизначити —
 * жодних нових класів чи дубльованої розмітки для Light не додано.
 */
:root {
  --m-bg: #050b18;
  --m-bg-elevated: #081426;
  --m-surface: #0e1a30;
  --m-surface-hover: #142544;
  --m-border: #1e2f4d;
  --m-border-strong: rgba(56, 189, 248, 0.4);
  --m-text: #eef2fb;
  --m-muted: #8ea0c4;
  --m-accent: #22d3ee;
  --m-accent-2: #5b8cff;
  --m-accent-strong: #0ea5c7;
  --m-accent-gradient: linear-gradient(135deg, #22d3ee, #4c8bff);
  --m-radius: 18px;
  --m-glow-border: 0 0 0 1px rgba(34, 211, 238, 0.35);
  --m-glow-soft: 0 12px 40px -16px rgba(34, 211, 238, 0.35);
  --m-glow-card-hover: 0 0 0 1px rgba(34, 211, 238, 0.45), 0 16px 40px -14px rgba(34, 211, 238, 0.4);
  /* Раніше hardcoded по місцю використання — тепер токени, щоб Light міг
     їх перевизначити без зміни самих правил нижче. */
  --m-page-glow:
    radial-gradient(120% 46% at 18% -12%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(80% 40% at 88% 0%, rgba(91, 140, 255, 0.12), transparent 55%);
  --m-header-bg: rgba(5, 11, 24, 0.86);
  --m-glass-bg: rgba(14, 26, 48, 0.5);
  --m-glass-border: rgba(94, 137, 191, 0.28);
  --m-shadow-ambient: rgba(0, 0, 0, 0.5);
  --m-shadow-card: rgba(0, 0, 0, 0.3);
  --m-hero-fade-mid: rgba(5, 11, 24, 0.55);
  --m-hero-glow: rgba(34, 211, 238, 0.22);
}
/*
 * Light: "світлий R-ONE CRM" — НЕ pure white, а ice-blue (#F3F7FC/#EDF4FB/
 * #EAF2FA-родина); текст — темний navy, а не чорний; тіні — м'які blue-gray/
 * cyan, без важкого чорного. Layout, розміри, радіуси, градієнт акценту —
 * ІДЕНТИЧНІ Dark (жодне з .m-hero/.m-search-form/.m-categories/.m-card
 * правил тут не перевизначається — лише токени кольору/тіні).
 */
html[data-theme="light"] {
  /* 24.09.2026, Light — фінальний polish (4-та правка користувача): фон
     трохи виразніший blue-gray/ice-blue (не сірий, не темніший загалом),
     border card/categories/search — чіткіший pale-blue/cyan, search-панель
     трохи виразніша через м'яку синю тінь/glow. Dark-блок (:root) вище —
     НЕ чіпається. */
  --m-bg: #e6eef8;
  --m-bg-elevated: #d9e6f4;
  --m-surface: rgba(255, 255, 255, 0.82);
  --m-surface-hover: rgba(255, 255, 255, 0.96);
  --m-border: rgba(20, 130, 180, 0.24);
  --m-border-strong: rgba(14, 165, 204, 0.42);
  --m-text: #0e2038;
  --m-muted: #5c7699;
  --m-accent: #0891b2;
  --m-accent-2: #3b6fe0;
  --m-accent-strong: #0ea5c7;
  --m-accent-gradient: linear-gradient(135deg, #22d3ee, #3b6fe0);
  --m-glow-border: 0 0 0 1px rgba(8, 145, 178, 0.3);
  --m-glow-soft: 0 12px 32px -18px rgba(56, 122, 179, 0.36);
  --m-glow-card-hover: 0 0 0 1px rgba(8, 145, 178, 0.36), 0 16px 36px -16px rgba(56, 122, 179, 0.3);
  --m-page-glow:
    radial-gradient(120% 46% at 18% -12%, rgba(34, 211, 238, 0.17), transparent 60%),
    radial-gradient(80% 40% at 88% 0%, rgba(91, 140, 255, 0.14), transparent 55%);
  --m-header-bg: rgba(255, 255, 255, 0.72);
  --m-glass-bg: rgba(255, 255, 255, 0.62);
  --m-glass-border: rgba(8, 145, 178, 0.34);
  --m-shadow-ambient: rgba(56, 122, 179, 0.28);
  --m-shadow-card: rgba(56, 122, 179, 0.16);
  /* Hero: слабший light-overlay (менша непрозорість, той самий градієнт-
     форма) — skyline/будівлі мають лишатись контрастними, не "пересвіченими"
     по центру; лівий mask-fade (в img, нижче) окремий і не чіпається. */
  --m-hero-fade-mid: rgba(230, 238, 248, 0.32);
  --m-hero-glow: rgba(34, 211, 238, 0.1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.m-page {
  background: var(--m-page-glow), var(--m-bg);
  background-attachment: fixed;
  color: var(--m-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.m-shell { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---- Header / footer (спільні для всього порталу) ---- */
.m-header {
  border-bottom: 1px solid var(--m-border);
  position: sticky; top: 0; z-index: 20;
  background: var(--m-header-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(34, 211, 238, 0.12);
}
.m-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
.m-logo { font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.01em; }
.m-logo-main { color: inherit; }
.m-logo-main > span { color: var(--m-accent); }
/* Logo lockup «R-ONE Market / Нерухомість в одному місці» — the same on every
   Market page (it used to be styled for the homepage only). */
.m-logo { display: grid; justify-items: start; gap: 4px; white-space: nowrap; }
.m-logo-tagline {
  display: block; font-size: .56rem; font-weight: 800; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase;
  color: var(--m-accent);
  background: var(--m-accent-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 7px rgba(34,211,238,.16));
}
.m-nav { display: flex; gap: 20px; font-size: 0.92rem; }
.m-nav a { text-decoration: none; color: var(--m-muted); padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.m-nav a.active, .m-nav a:hover { color: var(--m-text); border-color: var(--m-accent); }
.m-footer { border-top: 1px solid var(--m-border); margin-top: 48px; padding: 28px 20px; color: var(--m-muted); font-size: 0.85rem; text-align: center; }

/* 23.09.2026, R-ONE Market UI Integration: тонка стрічка над .m-header,
   видима ЛИШЕ залогіненому в CRM рієлтору (crmSession, market-header.ejs) —
   свідомо окремо від .m-nav (звичайний публічний перелік Головна/
   Каталог/Обране/Увійти), щоб Market для будь-кого іншого виглядав рівно
   так само, як і був — жодного натяку на CRM. */
.m-crm-ribbon { background: rgba(91, 140, 255, 0.14); border-bottom: 1px solid var(--m-border); }
.m-crm-ribbon-inner { display: flex; align-items: center; gap: 12px; padding: 7px 20px; font-size: 0.78rem; }
.m-crm-return { color: var(--m-accent); text-decoration: none; font-weight: 700; }
.m-crm-return:hover { text-decoration: underline; }
.m-crm-ribbon-note { color: var(--m-muted); }
@media (max-width: 480px) { .m-crm-ribbon-note { display: none; } }

/* ---- Hero (головна) ----
 * 24.09.2026, pixel-close redesign: двоколонковий hero (текст зліва,
 * преміальний real-estate візуал справа), акцентне слово в заголовку
 * кольором. Візуал — ассет користувача /assets/market-hero-dark.webp
 * (не наш вибір/генерація — просто підключення готового файлу).
 *
 * 24.09.2026, друга правка користувача: композиція мала виглядати як ОДНЕ
 * ціле, а не "текстова колонка + окрема картка справа". Тепер: text/search
 * ~48%, visual ~52% (grid-template-columns: 48fr 52fr); візуал накладається
 * на текстову колонку негативним відступом (bleed) і БЕЗ overflow:hidden
 * на зовнішньому контейнері — сам img обрізається/маскується всередині,
 * а розмитий glow-шар навколо нього вільно "витікає" під центральну
 * частину hero. Великий border-radius/рамка/окрема тінь картки прибрані —
 * лишається лише плавне згасання лівого краю в темряву (маска) і легке
 * округлення тільки праворуч (де фото впирається у зовнішній край hero,
 * а не "плаває" окремою карткою).
 */
.m-hero { padding: 56px 0 36px; overflow: hidden; }
.m-hero-grid { display: grid; grid-template-columns: 48fr 52fr; gap: 0; align-items: center; position: relative; }
.m-hero-copy { text-align: left; position: relative; z-index: 1; padding-right: 28px; }
.m-hero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; margin: 0 0 14px; text-wrap: balance; letter-spacing: -0.01em; font-weight: 800; }
.m-hero h1 .m-accent-text { color: var(--m-accent); }
.m-hero p.m-sub { color: var(--m-muted); margin: 0 0 32px; font-size: 1.06rem; max-width: 480px; line-height: 1.55; }
.m-hero-visual {
  position: relative; z-index: 0; min-height: 440px;
  /* 24.09.2026, за проханням користувача: "картинка і тут повинна бути,
   * де затемнена сторона" — з margin-left:-140px фото фізично НЕ сягало
   * більшої частини текстової колонки (на ширині ~1280px починалося
   * лише за ~476px), тож усе лівіше було просто суцільним фоном сторінки
   * (--m-bg), а не фото з маскою — жодне налаштування mask-image це не
   * виправило б, бо там немає пікселів фото взагалі. Збільшено bleed до
   * -340px, щоб фото реально продовжувалось під більшою частиною тексту;
   * пом'якшена маска (5%→34%, попередня правка) тепер відповідає за
   * плавний перехід у ЦІЙ ширшій зоні. */
  margin-left: -340px;
  border-radius: 0; /* 24.09.2026, 3-тя правка: заокруглені кути читались
    як "окрема картка" — прибрано повністю, блендинг тепер лише через
    маски/градієнти нижче, без жодної рамки чи форми плитки. */
  overflow: hidden;
}
.m-hero-visual::before {
  /* розмитий ambient-glow ЗА фото — не рамка, а світлова пляма, яка й дає
     відчуття "витікання" композиції під центр hero */
  content: ''; position: absolute; inset: -20% -10% -20% -25%; z-index: -1;
  background: radial-gradient(55% 55% at 60% 45%, var(--m-hero-glow), transparent 70%);
  filter: blur(60px);
}
/* 24.09.2026, Light-theme: hero-картинка теж theme-aware — два <img> в
   одній розмітці (marketplace-home.ejs), CSS лише показує/ховає потрібний,
   щоб не дублювати layout/маски для іншої теми. */
.m-hero-visual .m-hero-img-light { display: none; }
html[data-theme="light"] .m-hero-visual .m-hero-img-dark { display: none; }
html[data-theme="light"] .m-hero-visual .m-hero-img-light { display: block; }
/* 24.09.2026, 3-тя правка користувача: сильніший blend лівого ТА нижнього
 * краю фото в фон (правий край і архітектура — чіткі, без затемнення).
 * Лівий фейд — трохи ширший/сильніший (маска на img), нижній —
 * окремий вертикальний градієнт (::after), що "розчиняє" низ фото в
 * --m-bg. Верх і право свідомо НЕ займаємо, як просив користувач. */
.m-hero-visual img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center right;
  /* 24.09.2026, за проханням користувача (desktop hero): "сильно
   * затемнена і засвітлена картинка там де напис" — попередня маска
   * (transparent до 20%, повна непрозорість лише з 48%) ховала фото
   * майже повністю під усією текстовою колонкою. Звужено перехід (5%→34%
   * замість 20%→48%) — фото проступає раніше й помітніше саме в зоні
   * напису, напис і далі читається (текст лежить у верхній/лівій частині
   * колонки, де фото найтемніше/найсвітліше від природи — там усе ще
   * достатньо контрасту). */
  -webkit-mask-image: linear-gradient(90deg, transparent, transparent 5%, #000 34%);
  mask-image: linear-gradient(90deg, transparent, transparent 5%, #000 34%);
}
/* Нижній край — окремий (не-masked) overlay, що майже повністю зливається
 * з --m-bg біля самого низу фото; верх і право лишаються чіткими. */
.m-hero-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, var(--m-hero-fade-mid) 82%, var(--m-bg) 100%);
}
/* Поки користувач не додав /assets/market-hero-dark.webp (onerror у
 * marketplace-home.ejs) — м'який абстрактний градієнт-заглушка замість
 * зламаної картинки чи вигаданого фото. */
.m-hero-visual-fallback img { display: none; }
.m-hero-visual-fallback {
  background:
    radial-gradient(65% 55% at 78% 35%, rgba(34, 211, 238, 0.22), transparent 60%),
    radial-gradient(55% 50% at 40% 80%, rgba(91, 140, 255, 0.16), transparent 65%),
    linear-gradient(160deg, var(--m-bg-elevated), var(--m-surface));
}

/* ---- Deal toggle (Купити/Орендувати), окремо над search-панеллю ---- */
.m-deal-toggle-row { display: flex; justify-content: flex-start; margin-bottom: 14px; }

/* ---- Пошук / фільтри (форма, спільна для hero і каталогу) ---- */
/* 24.09.2026, 3-тя правка: тепер full-width (під hero-grid, не в 48%-
 * колонці) — 5 явних колонок в один ряд на десктопі: Місто/Тип/Кімнати/
 * Ціна діляться порівну, "Знайти" — по контенту. auto-fit більше не
 * потрібен, ширини вистачає. */
.m-search-form {
  background: var(--m-glass-bg);
  border: 1px solid var(--m-glass-border);
  border-radius: var(--m-radius);
  padding: 16px 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
  align-items: end;
  text-align: left;
  margin-top: 20px;
  box-shadow: var(--m-glow-border), 0 20px 50px -20px var(--m-shadow-ambient);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.m-search-form .m-field { display: flex; flex-direction: column; gap: 4px; }
.m-search-form label { font-size: 0.75rem; color: var(--m-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.m-search-form input, .m-search-form select {
  background: var(--m-bg); border: 1px solid var(--m-border); border-radius: 10px;
  padding: 10px 12px; color: var(--m-text); font-size: 0.92rem; width: 100%;
}
.m-search-form input:focus, .m-search-form select:focus { outline: 2px solid var(--m-accent); outline-offset: 1px; }
.m-deal-toggle { display: inline-flex; gap: 6px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 999px; padding: 4px; }
.m-deal-toggle label { flex: 1; text-align: center; padding: 8px 20px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--m-muted); text-transform: none; letter-spacing: 0; transition: background 0.15s ease, color 0.15s ease; }
.m-deal-toggle input { display: none; }
.m-deal-toggle input:checked + span { display: block; }
.m-deal-toggle label:has(input:checked) { background: var(--m-accent-gradient); color: #04141f; }
.m-search-submit {
  background: var(--m-accent-gradient); color: #04141f; border: none; border-radius: 10px;
  padding: 12px 22px; font-weight: 700; font-size: 0.92rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(34, 211, 238, 0.4);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.m-search-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---- Категорії (нові, Крок 3 специфікації) ----
 * 24.09.2026: 4 картки з РЕАЛЬНИХ значень PROPERTY_CATEGORY_GROUPS
 * (Квартира, Будинок, Комерційна нерухомість, Земельні ділянки) — без
 * п'ятої картки "Новобудови" з reference: такого поля/фільтра в даних
 * немає (жодного project/new-building флагу в схемі), а вигадувати
 * нефункціональну категорію — не "реальні дані". */
.m-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 4px; }
.m-category-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 16px;
  padding: 18px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* 24.09.2026, 3-тя правка: hover був занадто виразним — тепер тонка cyan-
 * обводка + дуже м'яке світіння (не той самий, сильніший --m-glow-card-hover,
 * що на property-картках), translateY у межах 1-2px. */
.m-category-card:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.22), 0 8px 20px -14px rgba(34, 211, 238, 0.25); }
.m-category-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(34, 211, 238, 0.12); color: var(--m-accent);
}
.m-category-icon svg { width: 22px; height: 22px; }
.m-category-card strong { font-size: 0.98rem; }
.m-category-card span { color: var(--m-muted); font-size: 0.8rem; }

/* ---- Тизери на головній ---- */
.m-section { padding: 26px 0; position: relative; }
/* 24.09.2026, 3-тя правка: майже непомітний ambient cyan/blue glow і на
 * початку списку оголошень (не лише за hero) — той самий прийом, що й
 * .m-hero-visual::before, але значно слабший і ширший, суто для відчуття
 * єдиного освітлення сторінки, а не окремого "плаского" блоку. */
.m-section:first-of-type::before {
  content: ''; position: absolute; top: -40px; left: 10%; right: 10%; height: 260px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(34, 211, 238, 0.05), transparent 75%);
  pointer-events: none;
}
.m-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.m-section-head h2 { font-size: 1.3rem; margin: 0; }
.m-section-head a { color: var(--m-accent); text-decoration: none; font-size: 0.88rem; }

/* ---- Сітка карток ---- */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.m-card {
  display: flex; flex-direction: column; color: inherit; position: relative;
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius);
  overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* 24.09.2026, за правкою користувача: hover-glow був занадто сильним/завжди
 * помітним — пом'якшено (менша непрозорість, без постійного світіння в
 * стані спокою, воно й не було, але межу зробили тонкою cyan-обводкою). */
.m-card:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, 0.55); background: var(--m-surface-hover); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 14px 32px -16px rgba(34, 211, 238, 0.28); }
.m-card-selection { display: block; margin: 0 16px 14px; padding: 10px 12px; border: 1px solid var(--m-border); border-radius: 12px; color: var(--m-accent); text-align: center; font-size: .84rem; font-weight: 800; text-decoration: none; background: var(--m-bg-elevated); }
.m-card-selection:hover { border-color: var(--m-accent); }
.m-card-compare { display:block; width:calc(100% - 32px); margin:-6px 16px 14px; padding:9px 12px; border:1px solid transparent; border-radius:12px; color:var(--m-muted); background:transparent; font:inherit; font-size:.82rem; font-weight:750; cursor:pointer; }
.m-card-compare:hover,.m-card-compare.is-active { color:var(--m-accent); border-color:var(--m-border); background:var(--m-bg-elevated); }
.m-card-compare,.m-listing-compare { display:block; width:calc(100% - 32px); margin:0 16px 14px; padding:10px 12px; border:1px solid var(--m-border); border-radius:12px; color:var(--m-text); background:transparent; font:inherit; font-size:.84rem; font-weight:800; cursor:pointer; }
.m-card-compare:hover,.m-listing-compare:hover,.m-card-compare.is-active,.m-listing-compare.is-active { border-color:var(--m-accent); color:var(--m-accent); background:rgba(34,211,238,.08); }
.m-listing-compare { width:auto; min-width:180px; margin:0 0 20px; }
.m-card-link { display: block; color: inherit; text-decoration: none; }
/* ~57% висоти картки — фото; решта — компактний текстовий блок (за
 * правкою користувача: фото приблизно 55-60% висоти, ціна сильніша в
 * ієрархії, специфікації/адреса — другорядні). */
.m-card-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--m-bg-elevated); display: block; }
.m-card-photo-empty { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--m-muted); background: var(--m-bg-elevated); font-size: 0.82rem; }
.m-card-photo-empty[hidden] { display: none; }
/* 10.2026: onerror ховає биту картинку атрибутом hidden, але display:block
   вище повертав її — було видно і биту іконку, і «Фото недоступне». */
.m-card-photo[hidden] { display: none; }
.m-card-body { padding: 14px 16px 12px; }
.m-card-price { font-size: 1.34rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.015em; }
.m-card-title { margin: 0 0 6px; font-size: .98rem; line-height: 1.35; font-weight: 750; color: var(--m-text); }
.m-card-specs { font-size: 0.8rem; color: var(--m-muted); margin: 0 0 3px; }
.m-card-location { font-size: 0.78rem; color: var(--m-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card-badge {
  display: inline-block; background: rgba(34, 211, 238, 0.15); color: var(--m-accent);
  border-radius: 999px; padding: 3px 10px; font-size: 0.72rem; font-weight: 600; margin-bottom: 8px;
}
.m-card-badge--deal { background: #ecfdf3; color: #16834b; border: 1px solid #b7efd0; }
/* 24.09.2026: нижній рядок картки — РЕАЛЬНЕ поле publishedAt (уже було в
 * buildPublicListingCardDTO, просто не рендерилось). Навмисно БЕЗ "Власник/
 * Агентство/Рієлтор" з reference — такого поля (seller_type) немає в даних
 * (див. коментар "свідомо без seller_type" у services/marketplace.js), і
 * додавати його тут означало б вигадати дані або змінювати бекенд/схему. */
.m-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--m-border); font-size: 0.76rem; color: var(--m-muted); }
.m-empty { text-align: center; color: var(--m-muted); padding: 48px 16px; }
.m-favorite-form { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 2; }
.m-favorite-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(11,15,26,.78); color: #fff; font-size: 1.45rem; cursor: pointer;
  backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0,0,0,.25);
  display:grid; place-items:center; line-height:1; transition:transform .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.m-favorite-btn:hover { transform:scale(1.04); background:#fff; color:#ef476f; border-color:#fff; }
.m-favorite-btn.active { background:#fff; color:#ef476f; border-color:#fff; }
.m-favorite-btn:focus-visible,.m-listing-favorite:focus-visible,.m-listing-compare:focus-visible,.m-card-compare:focus-visible,.m-compare-remove:focus-visible { outline:3px solid rgba(22,200,232,.38); outline-offset:3px; }
.m-listing-favorite-form { margin: 16px 0 0; }
.m-listing-favorite {
  border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text);
  border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer;
}
.m-listing-favorite.active { color:#be123c; border-color:#fb7185; background:#fff1f2; }
.m-property-favorite-icon.active,.m-property-mobile-bar button.active { color:#e11d48; background:#fff1f2; border-color:#fda4af; }
.m-listing-compare { margin-top:10px; border:1px solid var(--m-border); background:transparent; color:var(--m-muted); border-radius:999px; padding:10px 16px; font:inherit; font-weight:700; cursor:pointer; }
.m-listing-compare:hover,.m-listing-compare.is-active { color:var(--m-accent); border-color:var(--m-accent); }
.m-inline-button { display: inline-block; text-decoration: none; margin-top: 10px; }

/* ---- Buyer alerts / saved search ---- */
.m-alert-box {
  margin: 22px 0; padding: 18px; border: 1px solid rgba(91,140,255,.45);
  border-radius: var(--m-radius); background: linear-gradient(135deg, rgba(91,140,255,.14), rgba(19,26,43,.92));
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1fr); gap: 18px; align-items: center;
}
.m-alert-box h2 { margin: 0 0 6px; font-size: 1.08rem; }
.m-alert-box p { margin: 0; color: var(--m-muted); font-size: .88rem; line-height: 1.5; }
.m-alert-form { display: flex; gap: 8px; }
.m-alert-form input {
  min-width: 0; flex: 1; background: var(--m-bg); border: 1px solid var(--m-border);
  border-radius: 9px; padding: 11px 12px; color: var(--m-text); font-size: .92rem;
}
.m-status-card { max-width: 620px; margin: 80px auto; text-align: center; padding: 38px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.m-status-card h1 { margin: 12px 0; }
.m-status-card p { color: var(--m-muted); line-height: 1.55; }
.m-status-icon { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; background: rgba(91,140,255,.18); color: var(--m-accent); }
.m-unsubscribe-form { margin-top: 24px; }
.m-unsubscribe-form button { border: 0; background: transparent; color: var(--m-muted); text-decoration: underline; cursor: pointer; }

/* ---- Buyer login and account ---- */
.m-buyer-login { min-height: calc(100vh - 180px); display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-top: 60px; padding-bottom: 60px; }
.m-buyer-login-copy h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin: 14px 0 18px; max-width: 720px; }
.m-buyer-login-copy > p { color: var(--m-muted); font-size: 1.08rem; line-height: 1.65; max-width: 650px; }
.m-buyer-login-copy ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.m-buyer-login-copy li::before { content: '✓'; color: var(--m-accent); font-weight: 800; margin-right: 10px; }
.m-buyer-login-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 22px; padding: 28px; box-shadow: 0 28px 80px var(--m-shadow-card); }
.m-buyer-login-card h2 { margin: 0 0 20px; font-size: 1.25rem; }
.m-buyer-login-form { display: grid; gap: 10px; }
.m-buyer-login-form label { color: var(--m-muted); font-size: .82rem; }
.m-buyer-login-form input { background: var(--m-bg); border: 1px solid var(--m-border); border-radius: 10px; padding: 13px; color: var(--m-text); font-size: 1rem; }
.m-privacy-note { color: var(--m-muted); font-size: .75rem; line-height: 1.45; margin: 14px 0 0; }
.m-account { padding-top: 34px; }
.m-account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px; border: 1px solid var(--m-border); border-radius: var(--m-radius); background: linear-gradient(135deg, rgba(91,140,255,.14), var(--m-surface)); }
.m-account-head h1 { margin: 8px 0 6px; font-size: clamp(1.3rem, 3vw, 2rem); overflow-wrap: anywhere; }
.m-account-head p { margin: 0; color: var(--m-muted); }
.m-account-section { padding: 36px 0 12px; }
.m-collection-create { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 16px 0; }
.m-collection-create label { display: grid; gap: 6px; color: var(--m-muted); font-size: .82rem; font-weight: 700; }
.m-collection-create input, .m-share-ready input, .m-feedback-panel input, .m-feedback-panel textarea { box-sizing: border-box; width: 100%; padding: 12px 13px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-bg-elevated); color: var(--m-text); font: inherit; }
.m-collection-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 12px; margin-top: 16px; }
.m-collection-tile { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 18px; border: 1px solid var(--m-border); border-radius: 16px; background: var(--m-surface); color: var(--m-text); text-decoration: none; }
.m-collection-tile:hover { border-color: var(--m-accent); }
.m-collection-tile strong, .m-collection-tile small { display: block; }
.m-collection-tile small { margin-top: 5px; color: var(--m-muted); }
.m-collection-page { padding-top: 34px; padding-bottom: 84px; }
.m-collection-add-layout { display: grid; grid-template-columns: minmax(260px,420px) 1fr; gap: 28px; margin-top: 18px; align-items: start; }
.m-collection-panel, .m-feedback-panel, .m-share-ready { padding: 22px; border: 1px solid var(--m-border); border-radius: 20px; background: var(--m-surface); }
.m-collection-choices { display: grid; gap: 10px; }
.m-collection-choices button { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--m-border); border-radius: 14px; background: var(--m-bg-elevated); color: var(--m-text); text-align: left; cursor: pointer; }
.m-collection-choices span, .m-collection-choices small { display: block; }
.m-collection-choices small { margin-top: 4px; color: var(--m-muted); }
.m-collection-choices b { color: var(--m-accent); }
.m-collection-create--stacked { display: grid; grid-template-columns: 1fr; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--m-border); }
.m-collection-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 18px 0 24px; padding: 24px; border: 1px solid var(--m-border); border-radius: 22px; background: var(--m-surface); }
.m-collection-head h1 { margin: 7px 0; }
.m-collection-head p, .m-collection-head small { color: var(--m-muted); }
.m-share-ready { margin-bottom: 20px; display: grid; gap: 8px; }
.m-share-ready small { color: var(--m-muted); }
.m-collection-properties { display: grid; gap: 22px; }
.m-collection-property { display: grid; grid-template-columns: minmax(250px,380px) 1fr; gap: 18px; align-items: start; }
.m-feedback-panel form { display: grid; gap: 12px; }
.m-feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.m-feedback-actions button { padding: 9px 11px; border: 1px solid var(--m-border); border-radius: 999px; background: var(--m-bg-elevated); color: var(--m-text); cursor: pointer; }
.m-feedback-actions button.active { border-color: var(--m-accent); background: rgba(34,211,238,.12); }
.m-feedback-panel label { display: grid; gap: 7px; font-weight: 700; }
.m-feedback-panel textarea { min-height: 84px; resize: vertical; }
.m-inquiry-compact { margin: 16px 0; border-top: 1px solid var(--m-border); padding-top: 14px; }
.m-inquiry-compact summary { cursor: pointer; font-weight: 800; color: var(--m-accent); }
.m-inquiry-compact form { margin-top: 12px; }
.m-honeypot { position: absolute!important; left: -9999px!important; width: 1px!important; height: 1px!important; }
.m-account-list { display: grid; gap: 10px; }
.m-account-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-surface); padding: 16px; }
.m-account-row strong { display: block; margin-bottom: 5px; }
.m-account-row small, .m-muted-label { color: var(--m-muted); font-size: .8rem; }
.m-account-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.m-account-actions form { margin: 0; }
.m-secondary-button { display: inline-block; text-decoration: none; border: 1px solid var(--m-border); background: var(--m-bg); color: var(--m-text); border-radius: 9px; padding: 9px 13px; cursor: pointer; white-space: nowrap; }
.m-danger-link { border: 0; background: transparent; color: #ff7895; text-decoration: underline; cursor: pointer; padding: 8px; }
.m-account-empty { color: var(--m-muted); padding: 18px; border: 1px dashed var(--m-border); border-radius: 12px; }
.m-account-password { margin: 38px 0 0; border-top: 1px solid var(--m-border); padding-top: 20px; }
.m-account-password summary { cursor: pointer; font-weight: 700; color: var(--m-text); }
.m-account-password .m-muted { color: var(--m-muted); font-size: .88rem; }
.m-password-form { display: grid; gap: 10px; max-width: 420px; }
.m-password-form label { display: grid; gap: 6px; font-size: .86rem; font-weight: 700; color: var(--m-text); }
.m-password-form input { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--m-border); background: var(--m-surface, #fff); color: var(--m-text); font: inherit; }
.m-password-form button { justify-self: start; }
.m-account-danger { margin: 38px 0; border-top: 1px solid var(--m-border); padding-top: 20px; color: var(--m-muted); font-size: .82rem; }
.m-account-danger summary { cursor: pointer; }
.m-account-add { text-decoration: none; padding: 10px 16px; }
.m-owner-listings { display: grid; gap: 18px; }
.m-owner-listing { overflow: hidden; border: 1px solid var(--m-border); border-radius: 22px; background: var(--m-surface); box-shadow: var(--m-glow-soft); }
.m-owner-listing-main { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px; }
.m-owner-cover { width: 100%; height: 176px; border-radius: 16px; object-fit: cover; background: var(--m-bg-elevated); }
.m-owner-cover-empty { display: grid; place-items: center; color: var(--m-muted); text-align: center; padding: 14px; box-sizing: border-box; }
.m-owner-listing-info { min-width: 0; }
.m-owner-listing-info h3 { margin: 8px 0; font-size: 1.18rem; }
.m-owner-listing-info p { margin: 7px 0; color: var(--m-muted); }
.m-owner-listing-info > small { display: block; margin: 8px 0 12px; color: var(--m-muted); }
.m-owner-listing-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.m-owner-listing-top .m-sell-status-pill, .m-owner-listing-top .m-listing-badge { margin: 0; }
.m-owner-actions { justify-content: flex-start; margin-top: 12px; }
.m-owner-reject-note { color: #e05b6f !important; }
.m-owner-inquiries { border-top: 1px solid var(--m-border); padding: 15px 18px; }
.m-owner-inquiries summary { cursor: pointer; font-weight: 800; }
.m-owner-inquiries[disabled] summary { cursor: default; color: var(--m-muted); }
.m-owner-inquiry-list { display: grid; gap: 10px; margin-top: 14px; }
.m-owner-inquiry { border: 1px solid var(--m-border); border-radius: 14px; padding: 14px; background: var(--m-bg-elevated); }
.m-owner-inquiry > div { display: flex; justify-content: space-between; gap: 10px; }
.m-owner-inquiry small { color: var(--m-muted); }
.m-owner-inquiry p { margin: 8px 0; }
.m-owner-inquiry select { margin-left: 6px; border: 1px solid var(--m-border); border-radius: 9px; padding: 7px 9px; background: var(--m-surface); color: var(--m-text); }
.m-owner-empty { text-align: center; padding: 36px 20px; }
.m-owner-empty h3 { color: var(--m-text); margin: 0 0 6px; }
.m-owner-empty p { margin: 0 0 20px; }

/* ---- Пагінація ---- */
.m-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.m-pagination a, .m-pagination span {
  min-width: 36px; text-align: center; padding: 8px 10px; border-radius: 8px; text-decoration: none;
  font-size: 0.88rem; border: 1px solid var(--m-border); color: var(--m-text);
}
.m-pagination a:hover { border-color: var(--m-accent); }
.m-pagination .current { background: var(--m-accent); color: #fff; border-color: var(--m-accent); }

/* ---- Каталог: заголовок + результати ---- */
.m-catalog-head { padding: 28px 0 8px; }
.m-catalog-head h1 { font-size: 1.5rem; margin: 0 0 4px; }
.m-catalog-count { color: var(--m-muted); font-size: 0.9rem; }
.m-sort-row { display: flex; justify-content: flex-end; margin: 16px 0; }
.m-sort-row select { background: var(--m-surface); border: 1px solid var(--m-border); color: var(--m-text); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }

/* ---- Одна картка об'єкта (Phase 1, перенесено сюди без змін вигляду) ---- */
.m-listing-wrap { max-width: 780px; margin: 0 auto; padding: 24px 20px 64px; }
.m-gallery { display: flex; gap: 8px; overflow-x: auto; border-radius: var(--m-radius); margin-bottom: 20px; scroll-snap-type: x mandatory; }
.m-gallery img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--m-radius); flex: 0 0 100%; scroll-snap-align: start; }
.m-no-photo { height: 240px; border-radius: var(--m-radius); background: var(--m-surface); border: 1px solid var(--m-border); display: flex; align-items: center; justify-content: center; color: var(--m-muted); margin-bottom: 20px; }
.m-listing-price { font-size: 2rem; font-weight: 700; margin: 0 0 4px; }
.m-listing-title { margin: .35rem 0 .5rem; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.18; }
.m-map-preview-title { display: block; margin-bottom: .25rem; line-height: 1.25; color: var(--m-text, #10213b); }
.m-listing-location { color: var(--m-muted); margin: 0 0 18px; }
.m-listing-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 22px; }
.m-listing-spec { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 10px; padding: 10px 12px; }
.m-listing-spec strong { display: block; font-size: 1.05rem; }
.m-listing-spec span { color: var(--m-muted); font-size: 0.82rem; }
.m-listing-description { line-height: 1.6; white-space: pre-wrap; margin-bottom: 26px; }
.m-cta { display: flex; flex-wrap: wrap; gap: 10px; position: sticky; bottom: 0; background: linear-gradient(0deg, var(--m-bg) 60%, transparent); padding: 16px 0 8px; }
.m-cta a { flex: 1 1 160px; text-align: center; padding: 14px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.m-cta .m-primary { background: var(--m-accent); color: #fff; }
.m-cta .m-secondary { background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-border); }
.m-listing-badge { display: inline-block; background: var(--m-surface); border: 1px solid var(--m-border); color: var(--m-muted); border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; margin-bottom: 14px; }

/* ---- R-ONE Property Market, Phase 3 (Market -> CRM Lead) ---- */
.m-inquiry-banner { border-radius: var(--m-radius); padding: 14px 16px; margin-bottom: 20px; font-weight: 600; }
.m-inquiry-banner-success { background: rgba(91, 140, 255, 0.14); border: 1px solid var(--m-accent); color: var(--m-text); }
.m-inquiry-banner-error { background: rgba(255, 92, 92, 0.12); border: 1px solid #ff5c5c; color: var(--m-text); }
.m-inquiry { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); padding: 22px 20px; margin-bottom: 26px; }
.m-inquiry-title { margin: 0 0 16px; font-size: 1.15rem; }
.m-inquiry-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.m-inquiry-type-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.m-inquiry-type-btn {
  display: inline-block; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--m-border); color: var(--m-muted); font-size: 0.86rem; font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.m-inquiry-type-input:checked + .m-inquiry-type-btn { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
.m-inquiry-type-input:focus-visible + .m-inquiry-type-btn { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.m-inquiry-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.m-inquiry-field label { font-size: 0.82rem; color: var(--m-muted); }
.m-inquiry-field input, .m-inquiry-field textarea {
  background: var(--m-bg); border: 1px solid var(--m-border); border-radius: 10px;
  padding: 11px 12px; color: var(--m-text); font: inherit; resize: vertical;
}
.m-inquiry-field input:focus, .m-inquiry-field textarea:focus { outline: 2px solid var(--m-accent); outline-offset: 1px; }
/* Honeypot — офскрін, а не display:none: боти, що перевіряють CSS-видимість
   через display/visibility, усе одно можуть його заповнити; зсув за межі
   екрана надійніший і однаково невидимий для людини. */
.m-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.m-inquiry-submit {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: none;
  background: var(--m-accent); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background 0.15s ease;
}
.m-inquiry-submit:hover { background: var(--m-accent-strong); }

/* ---- Недоступне оголошення ---- */
.m-unavailable-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.m-unavailable-wrap h1 { font-size: 1.4rem; }
.m-unavailable-wrap p { color: var(--m-muted); }

/* 24.09.2026: проміжна ширина (планшет/вузький десктоп) — той самий
 * fallback, що й раніше (2-колонковий hero складається в 1, категорії —
 * 2×2), лишається чинним і для мобільної фази нижче: справжня мобільна
 * (Крок 6) перебудова живе в @media (max-width: 640px) далі. */
@media (max-width: 900px) {
  .m-hero-grid { grid-template-columns: 1fr; }
  .m-hero-visual { order: -1; max-height: 260px; min-height: 0; margin-left: 0; border-radius: 20px; }
  .m-hero-visual img { -webkit-mask-image: none; mask-image: none; }
  .m-categories { grid-template-columns: repeat(2, 1fr); }
}

/*
 * 24.09.2026, Крок 6 специфікації — Mobile (Dark + Light, ті самі токени/
 * компоненти, що й десктоп, але ОКРЕМА адаптація структури, а не просто
 * стиснутий десктоп):
 *  - header: логотип + theme-toggle + hamburger (Купити/Орендувати/Каталог/
 *    Обране/Увійти/CTA згорнуті у випадний список — .m-header-actions і
 *    .m-hamburger нижче за замовчуванням display:none, вмикаються лише в
 *    цьому breakpoint, тож на десктопі НІЧОГО не зсувається — це нові,
 *    додаткові елементи, а не переміщення наявних);
 *  - hero: headline → visual → Купити/Орендувати (порядок змінено через
 *    grid-template-areas + display:contents на .m-hero-copy, без зміни
 *    розмітки/backend);
 *  - search: вертикальні поля в один стовпець, кнопка на всю ширину;
 *  - categories: 2×2 (успадковано з 900px-блоку вище);
 *  - listings: 1 картка в рядок (поріг з 420px піднято до 480px, щоб
 *    покрити типові ширини телефонів на кшталт 414/428/430px);
 *  - bottom nav: див. окремий блок .m-bottom-nav нижче.
 */
/* .m-mobile-view-all за замовчуванням (десктоп) невидима — кнопка потрібна
   лише на mobile (@media нижче вмикає display:block), де "Нові оголошення"
   обрізано до 3 карток. Правило винесене ПЕРЕД @media навмисно: інакше
   пізніше в джерелі, поза @media, воно б переважало над mobile-версією
   при однаковій специфічності незалежно від ширини вікна. */
.m-mobile-view-all { display: none; }
@media (max-width: 640px) {
  .m-shell { padding: 0 16px; }
  .m-header-inner { padding: 12px 16px; }
  /* 24.09.2026, за проханням користувача: логотип на mobile виглядав як
   * звичайний плоский текст (щойно виправлений inline-padding-бага дав
   * лише відступ від краю, самого стилю це не торкалося) — той самий
   * accent-градієнт, що вже й так використовується на кнопках/toggle
   * (--m-accent-gradient), тепер і на слові "Market" через
   * background-clip:text — узгоджено зі стилем проєкту, а не вигадана
   * нова палітра. Лише mobile: десктопний .m-logo (MASTER DESIGN) не
   * чіпали. */
  .m-logo { letter-spacing: -0.005em; }
  .m-logo-main > span {
    background: var(--m-accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* --- Hero: headline → visual → Купити/Орендувати ---
   * .m-hero-copy стає display:contents — h1/p/toggle-row перестають бути
   * "вкладеними" й беруть участь у grid-template-areas самого .m-hero-grid
   * поруч із .m-hero-visual, тому visual можна вставити МІЖ текстом і
   * toggle без зміни розмітки/backend — 4 окремі area (кожен елемент —
   * своя area), щоб уникнути накладання (спільна area для двох елементів
   * лише накладає їх один на одного, а не ставить у стовпчик). */
  /* 24.09.2026, за проханням користувача: "текст сильно близько до краю" —
   * .m-hero навмисно має padding:0 по боках (як і на десктопі, де фото
   * "затікає" під текст негативним margin) — .m-shell{padding:0 16px}
   * тому НІКОЛИ не міг дати тексту відступ (той самий shorthand-конфлікт,
   * що вже був у market-header.ejs, лише тут — між двома класами в CSS,
   * а не інлайн-стилем). Правильний за задумом спосіб — інсет саме на
   * .m-hero-grid (тому й фото окремо), а .m-hero-visual компенсує його
   * від'ємними margin, щоб лишитись на всю ширину екрана (bleed), як і
   * було. */
  .m-hero { padding: 20px 0 18px; }
  .m-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "headline" "sub" "visual" "toggle";
    gap: 12px;
    padding: 0 16px;
  }
  .m-hero-copy { display: contents; padding-right: 0; }
  .m-hero h1 {
    grid-area: headline; margin-bottom: 0; font-size: clamp(1.7rem, 7vw, 2.1rem);
    /* за проханням користувача: "верхній ряд наче лежить на нижньому" —
       десктопний line-height:1.1 (успадкований) занадто тісний для двох
       <br />-рядків жирного накресення на mobile-розмірі шрифту. */
    line-height: 1.22;
  }
  .m-hero p.m-sub { grid-area: sub; margin: 0; max-width: none; }
  .m-deal-toggle-row { grid-area: toggle; margin-bottom: 0; margin-top: 4px; }
  .m-hero-visual { grid-area: visual; order: 0; max-height: 176px; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }
  .m-hero-visual img { object-position: center 35%; }
  .m-hero-visual::before, .m-hero-visual::after { display: none; }
  /* 24.09.2026, за проханням користувача: "на темному фоні картинка сильно
   * затемнена зліва" — це не CSS-маска (::before/::after і mask-image на
   * img вище й так вимкнені для mobile), а сам файл market-hero-dark.webp:
   * лівих ~35–40% фото — навмисний глибокий fade-в-чорне, зроблений САМЕ
   * під десктопну композицію (там photo "затікає" під текстову колонку
   * негативним margin, .m-hero-visual margin-left:-140px, і цю темну зону
   * ще й додатково ховає mask-image). На mobile текстової колонки поруч
   * немає (візуал на всю ширину), тож той самий темний клин просто голо
   * висів зліва як "зіпсована" картинка. Фото не редагували (не наш
   * ассет) — замість цього ЛИШЕ mobile-версія dark-зображення масштабується
   * (scale, anchor праворуч-знизу) так, щоб у кадр потрапляла освітлена
   * права частина; light-фото рівномірно світле по всій ширині й такого
   * fade не має, тому світлу версію не чіпали.
   *
   * 24.09.2026, за прямою правкою користувача: попередній scale(1.6) з
   * anchor "right center" був занадто сильним — тераса/лаунж-зона (правий
   * НИЖНІЙ кут оригінального фото) майже повністю виїжджала за кадр разом
   * із рівномірним збільшенням. Зменшено до 1.32 (крадемо суттєво менше
   * зліва) і anchor змінено на "right bottom" — фіксує саме правий-нижній
   * кут (де тераса/диван), тож зайвий crop від масштабування йде переважно
   * зверху (небо/хмари) й зліва (темна зона), а не знизу. */
  .m-hero-visual .m-hero-img-dark {
    transform: scale(1.32);
    transform-origin: right bottom;
  }

  /* --- Search: один стовпець, кнопка на всю ширину --- */
  .m-search-form { grid-template-columns: 1fr; gap: 10px; padding: 14px; margin-top: 16px; }
  .m-search-submit { width: 100%; padding: 13px 16px; }

  /*
   * 24.09.2026, mobile-оптимізація головної (за правкою користувача):
   * трохи щільніші вертикальні відступи Hero→Search→Categories→Listings
   * (~15–20%, без надмірного стиснення) — лише mobile, desktop через ці
   * ж класи не зачіпається (правила поза @media лишились як були).
   */
  .m-categories { margin: 16px 0 4px; gap: 10px; }
  .m-category-card { padding: 12px; gap: 6px; }
  .m-category-icon { width: 32px; height: 32px; border-radius: 10px; }
  .m-category-icon svg { width: 18px; height: 18px; }
  .m-category-card strong { font-size: 0.92rem; }
  .m-category-card span { font-size: 0.76rem; }
  .m-section { padding: 16px 0; }
  .m-section-head { margin-bottom: 10px; }

  .m-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .m-alert-box { grid-template-columns: 1fr; }
  .m-alert-form { flex-direction: column; }
  .m-buyer-login { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; }
  .m-account-head, .m-account-row { flex-direction: column; align-items: stretch; }
  .m-account-actions { justify-content: flex-start; }

  /*
   * 24.09.2026, mobile-оптимізація головної (за правкою користувача):
   * головна сторінка на mobile була надто довгою вертикально.
   * 1) "Нові оголошення" — максимум 3 картки (4+ приховано CSS-ом, дані з
   *    сервера ті самі; desktop через .m-grid-newest не зачіпається, бо цей
   *    селектор існує лише в mobile-блоці) + кнопка "Переглянути всі...".
   * 2) "Ще пропозиції" — повністю прихована на mobile, лишається на
   *    desktop без змін (секція та ж сама, просто display:none тут).
   */
  .m-grid-newest > .m-card:nth-child(n + 4) { display: none; }
  .m-mobile-view-all {
    display: block; text-align: center; text-decoration: none; font-weight: 700;
    color: var(--m-accent); background: var(--m-surface); border: 1px solid var(--m-border);
    border-radius: 12px; padding: 12px 16px; margin-top: 4px;
  }
  .m-section-more-offers { display: none; }

  /* New-listing cards keep the desktop card data and actions, but use a
     property-first image on phones instead of squeezing it into a strip. */
  .m-grid-newest { gap: 10px; }
  .m-grid-newest .m-card { border-radius: 14px; }
  .m-grid-newest .m-card-link { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
  .m-grid-newest .m-card-photo,
  .m-grid-newest .m-card-photo-empty {
    flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  }
  .m-grid-newest .m-card-body { flex: 1 1 auto; min-width: 0; padding: 12px 14px; }
  .m-grid-newest .m-card-badge { margin-bottom: 3px; }
  .m-grid-newest .m-card-price { margin-bottom: 1px; }
  .m-grid-newest .m-card-specs, .m-grid-newest .m-card-location { line-height: 1.2; }
  .m-grid-newest .m-card-specs { margin-bottom: 1px; }
  .m-grid-newest .m-card-meta { margin-top: 3px; padding-top: 3px; }
  .m-grid-newest .m-favorite-btn { width: 28px; height: 28px; font-size: 1rem; }
  .m-grid-newest .m-favorite-form { top: 6px; right: 6px; }
}

/* Market home wide pass: scoped to /m so catalog, listing, account and
   seller layouts retain their established widths and behavior. */
.m-market-home { overflow-x: clip; }
.m-market-home .m-shell { max-width: 1440px; padding-left: 28px; padding-right: 28px; }
.m-market-home .m-header-inner,
.m-market-home .m-crm-ribbon-inner { max-width: 1440px !important; }
.m-market-home .m-hero { padding-top: 44px; }
.m-market-home .m-hero-grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.m-market-home .m-hero h1 { font-size: clamp(2.5rem, 4vw, 4rem); max-width: 650px; }
.m-market-home .m-hero-visual {
  min-height: 480px;
  margin-left: -220px;
  width: calc(100% + 220px);
}
.m-market-home .m-search-form {
  grid-template-columns: minmax(170px, 1.35fr) minmax(160px, 1.1fr) minmax(108px, .7fr) minmax(150px, 1fr) minmax(98px, .64fr) auto;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  box-shadow: 0 14px 34px -24px var(--m-shadow-ambient);
}
.m-market-home .m-categories { gap: 18px; margin-top: 30px; }
.m-market-home .m-category-card { padding: 0; gap: 0; overflow: hidden; }
.m-market-home .m-category-preview { position: relative; display: block; height: 132px; overflow: hidden; background: var(--m-bg-elevated); }
.m-market-home .m-category-preview > img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.m-market-home .m-category-card:hover .m-category-preview > img { transform: scale(1.025); }
.m-market-home .m-category-preview .m-category-icon {
  position: absolute; left: 14px; bottom: 12px; color: #dffaff;
  background: rgba(5, 18, 36, .76); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}
.m-market-home .m-category-copy { display: grid; gap: 5px; padding: 15px 17px 17px; }
.m-market-home .m-category-copy strong { font-size: 1.02rem; }
.m-market-home .m-category-copy > span { color: var(--m-muted); font-size: .8rem; }
.m-market-home .m-section { padding: 32px 0; }
.m-market-home .m-section-head h2 { font-size: 1.45rem; }
.m-market-home .m-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.m-market-home .m-card-body { padding-left: 14px; padding-right: 14px; }
.m-market-home .m-card-price { font-size: 1.18rem; }
.m-seller-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin: 34px 0 22px; padding: 36px 42px; border: 1px solid var(--m-border-strong); border-radius: 26px;
  background: linear-gradient(120deg, rgba(34, 211, 238, .12), rgba(91, 140, 255, .08)), var(--m-surface);
  box-shadow: 0 14px 34px -28px var(--m-shadow-ambient);
}
.m-seller-banner h2 { margin: 7px 0 0; font-size: clamp(1.55rem, 2.5vw, 2.35rem); letter-spacing: -.025em; }
.m-seller-banner .m-search-submit { text-decoration: none; padding: 14px 24px; }
.m-market-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 22px; }
.m-market-benefits article { display: flex; gap: 13px; padding: 20px; border: 1px solid var(--m-border); border-radius: 18px; background: var(--m-surface); }
.m-market-benefits article > span { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--m-accent); background: rgba(34, 211, 238, .1); font-size: 1.1rem; font-weight: 800; }
.m-market-benefits strong { display: block; margin-bottom: 5px; }
.m-market-benefits p { margin: 0; color: var(--m-muted); font-size: .84rem; line-height: 1.5; }
.m-market-home .m-radar-cta { background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(91, 140, 255, .07)), var(--m-surface); box-shadow: none; }

@media (min-width: 901px) {
  .m-market-home .m-hero-copy { padding-left: clamp(22px, 2.2vw, 34px); }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .m-market-home .m-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .m-market-home .m-card-price { font-size: 1.28rem; }
}

@media (min-width: 901px) and (max-width: 1279px) {
  .m-market-home .m-shell { padding-left: 24px; padding-right: 24px; }
  .m-market-home .m-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-market-home .m-search-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-market-home .m-search-submit { min-height: 42px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .m-market-home .m-shell { padding-left: 22px; padding-right: 22px; }
  .m-market-home .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-market-home .m-search-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-market-home .m-market-benefits { grid-template-columns: 1fr 1fr; }
  .m-market-home .m-market-benefits article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .m-market-home .m-hero-visual { width: 100%; margin-left: 0; min-height: 0; }
}

@media (max-width: 640px) {
  .m-market-home .m-shell { padding-left: 16px; padding-right: 16px; }
  .m-market-home .m-hero { padding-top: 20px; }
  .m-market-home .m-hero h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .m-market-home .m-hero-visual { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; }
  .m-market-home .m-search-form,
  .m-market-home .m-grid,
  .m-market-home .m-market-benefits { grid-template-columns: 1fr; }
  .m-market-home .m-market-shelf .m-grid { display: grid; overflow: visible; padding-bottom: 0; }
  .m-market-home .m-market-shelf .m-card { flex: initial; }
  .m-market-home .m-category-preview { height: 104px; }
  .m-market-home .m-section { padding: 18px 0; }
  .m-seller-banner,
  .m-market-home .m-radar-cta { flex-direction: column; align-items: stretch; padding: 24px 20px; }
  .m-seller-banner .m-search-submit { text-align: center; }
  .m-market-benefits article { padding: 16px; }
}

/* Buyer AI Match + Radar: additive public-Market UI only. */
.m-ai-shell,.m-radar-detail{padding-top:34px;padding-bottom:72px}.m-ai-hero{max-width:920px;margin:0 auto 26px;padding:34px;border:1px solid var(--m-border);border-radius:28px;background:linear-gradient(145deg,var(--m-surface),rgba(124,58,237,.07));box-shadow:var(--m-shadow)}.m-ai-hero h1{font-size:clamp(2rem,5vw,3.6rem);margin:8px 0}.m-ai-hero>p{color:var(--m-muted);font-size:1.05rem}.m-ai-query{display:grid;gap:12px;margin-top:24px}.m-ai-query label,.m-ai-form label{font-weight:700}.m-ai-query textarea{min-height:118px;resize:vertical}.m-ai-query textarea,.m-ai-form input,.m-ai-form select{width:100%;box-sizing:border-box;border:1px solid var(--m-border);border-radius:14px;background:var(--m-bg-elevated);color:var(--m-text);font:inherit;padding:13px 14px}.m-ai-alert,.m-ai-success{padding:14px 16px;border-radius:14px;margin:18px 0}.m-ai-alert{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.28);color:#e11d48}.m-ai-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#15803d}.m-ai-criteria,.m-ai-results{margin:26px 0;padding:28px;border:1px solid var(--m-border);border-radius:24px;background:var(--m-surface)}.m-ai-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.m-ai-form label{display:grid;gap:7px}.m-ai-wide{grid-column:1/-1}.m-ai-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px;font-weight:650!important}.m-ai-check input{width:18px;height:18px}.m-ai-result{display:grid;gap:10px}.m-ai-why{margin:0;padding:0 4px 8px;color:var(--m-muted);font-size:.88rem;line-height:1.45}.m-ai-radar-save{margin-top:30px;display:grid;grid-template-columns:1fr minmax(250px,380px);gap:24px;align-items:center;padding:26px;border-radius:22px;background:linear-gradient(135deg,rgba(34,211,238,.12),rgba(124,58,237,.11));border:1px solid var(--m-border)}.m-ai-radar-save h2{margin:6px 0}.m-ai-radar-save p{color:var(--m-muted)}.m-ai-radar-save form{display:grid;gap:12px}.m-radar-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:28px;margin-bottom:26px;border:1px solid var(--m-border);border-radius:24px;background:var(--m-surface)}.m-radar-detail-head h1{margin:8px 0}.m-radar-detail-head p,.m-radar-detail-head small{color:var(--m-muted)}.m-radar-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-weight:800;font-size:.78rem;background:var(--m-bg-elevated)}.m-radar-status--active{color:#15803d}.m-radar-status--paused{color:#b45309}.m-radar-status--expired{color:var(--m-muted)}.m-account-row--unread{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.05)}.m-account-subtitle{margin:24px 0 10px;color:var(--m-muted);font-size:.95rem}
@media(max-width:768px){.m-ai-form{grid-template-columns:repeat(2,minmax(0,1fr))}.m-ai-radar-save{grid-template-columns:1fr}.m-ai-hero,.m-ai-criteria,.m-ai-results{padding:22px}.m-radar-detail-head{padding:20px}}
.m-saved-searches-page{padding-top:34px;padding-bottom:76px}.m-saved-search-row{align-items:flex-start}.m-saved-search-copy{min-width:0;flex:1}.m-saved-search-copy p{margin:4px 0 9px;color:var(--m-muted);line-height:1.45}.m-saved-search-controls{display:grid;gap:10px;min-width:min(100%,440px)}.m-saved-search-edit{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;gap:8px}.m-saved-search-edit input,.m-saved-search-edit select{min-width:0;border:1px solid var(--m-border);border-radius:10px;background:var(--m-bg-elevated);color:var(--m-text);padding:9px 11px;font:inherit}.m-alert-form select{border:1px solid var(--m-border);border-radius:12px;background:var(--m-bg-elevated);color:var(--m-text);padding:11px;font:inherit}
.m-result-state-badges{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}.m-result-state-badges span{padding:5px 9px;border-radius:999px;background:rgba(34,211,238,.12);color:var(--m-accent-strong);font-size:.75rem;font-weight:800}
@media(max-width:768px){.m-saved-search-row{display:grid}.m-saved-search-controls{min-width:0;width:100%}.m-saved-search-edit{grid-template-columns:1fr}.m-saved-search-edit .m-secondary-button{width:100%}.m-saved-searches-page{padding-top:18px}.m-alert-form{grid-template-columns:1fr!important}}
@media(max-width:768px){.m-collection-create{grid-template-columns:1fr}.m-collection-add-layout,.m-collection-property{grid-template-columns:1fr}.m-collection-head{display:grid}.m-collection-property>.m-card{width:100%}}

/* Market compare is an anonymous client-side selection; the server page only
   renders public DTO fields for the selected opaque tokens. */
.m-compare-tray { position:fixed; z-index:80; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; min-height:42px; max-width:calc(100vw - 24px); padding:6px 7px 6px 13px; border:1px solid rgba(34,211,238,.5); border-radius:14px; background:color-mix(in srgb,var(--m-surface) 94%,transparent); box-shadow:0 12px 34px rgba(2,8,23,.24); backdrop-filter:blur(14px); }
.m-compare-tray[hidden] { display:none; }
.m-compare-tray strong { white-space:nowrap; font-size:.82rem; }
.m-compare-tray a,.m-compare-tray button { border:0; border-radius:9px; min-height:34px; padding:7px 10px; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; text-decoration:none; }
.m-compare-tray a { color:#04111f; background:linear-gradient(135deg,var(--m-accent),#60a5fa); }
.m-compare-tray button { color:var(--m-muted); background:transparent; }
.m-compare-tray small { display:none; color:#fb7185; }
.m-compare-tray.is-limit small { display:inline; }
.m-compare-shell { padding-top:36px; padding-bottom:80px; }
.m-compare-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.m-compare-heading h1 { margin:5px 0 6px; font-size:clamp(1.8rem,4vw,3rem); }
.m-compare-heading p,.m-muted-copy { color:var(--m-muted); }
.m-secondary-link { color:var(--m-accent); font-weight:800; text-decoration:none; }
.m-compare-notice { padding:12px 14px; border:1px solid #f59e0b66; border-radius:12px; color:#fbbf24; }
.m-compare-empty { padding:48px 24px; text-align:center; border:1px dashed var(--m-border); border-radius:20px; }
.m-compare-scroll { overflow-x:auto; padding-bottom:12px; scrollbar-color:var(--m-accent) transparent; }
.m-compare-grid { display:grid; grid-template-columns:minmax(150px,.72fr) repeat(var(--compare-count),minmax(230px,1fr)); min-width:calc(150px + var(--compare-count) * 230px); border:1px solid var(--m-border); border-radius:20px; overflow:hidden; background:var(--m-surface); }
.m-compare-label,.m-compare-value,.m-compare-property { padding:16px; border-right:1px solid var(--m-border); border-bottom:1px solid var(--m-border); }
.m-compare-label { color:var(--m-muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:var(--m-bg-elevated); }
.m-compare-value { display:flex; flex-direction:column; gap:5px; min-height:62px; }
.m-compare-value small { color:var(--m-muted); }
.m-compare-value span { width:max-content; padding:4px 7px; border-radius:999px; color:#047857; background:#d1fae5; font-size:.69rem; font-weight:800; }
.m-compare-value.is-highlight { background:rgba(16,185,129,.07); }
.m-compare-property img,.m-compare-property .m-card-photo-empty { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.m-compare-property a { display:block; margin:10px 0; color:var(--m-text); font-weight:800; text-decoration:none; }
.m-compare-property-price { margin:11px 0 0; color:var(--m-text); font-size:1.05rem; font-weight:850; }
.m-compare-property button { border:0; padding:0; color:var(--m-muted); background:none; cursor:pointer; }
.m-compare-remove { display:inline-flex; align-items:center; gap:5px; min-height:36px; font:inherit; font-size:.78rem; font-weight:800; }
.m-compare-remove:hover { color:#e11d48; }
.m-price-history { margin:28px 0; padding:22px; border:1px solid var(--m-border); border-radius:18px; background:var(--m-surface); }
.m-price-history h2 { margin:0 0 14px; }
.m-price-history ol { list-style:none; margin:0; padding:0; }
.m-price-history li { display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid var(--m-border); }
.m-price-history time { color:var(--m-muted); }
.m-price-history-total { font-weight:800; }
.is-down { color:#10b981; }.is-up { color:#f59e0b; }
@media(max-width:640px){
  .m-compare-tray { left:10px; right:10px; bottom:calc(76px + env(safe-area-inset-bottom)); max-width:none; transform:none; justify-content:center; gap:5px; padding:6px 7px; }
  .m-compare-tray strong { font-size:.72rem; }
  .m-compare-tray a,.m-compare-tray button { padding:7px 8px; }
  .m-compare-heading { align-items:start; flex-direction:column; }
  .m-compare-scroll { margin-right:-16px; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; }
  .m-compare-grid { grid-template-columns:112px repeat(var(--compare-count),minmax(210px,78vw)); min-width:calc(112px + var(--compare-count) * 210px); }
  .m-compare-property { scroll-snap-align:start; }
  .m-compare-sticky { position:sticky; left:0; z-index:2; box-shadow:5px 0 12px rgba(2,8,23,.08); }
  .m-compare-label,.m-compare-value,.m-compare-property { padding:12px; }
}

/* Favorites and compare share the catalogue's card language without adding a
   third card component or changing the existing storage/auth contracts. */
.m-favorites-shell { padding-top:36px; padding-bottom:82px; }
.m-favorites-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.m-favorites-head h1 { margin:5px 0 6px; color:var(--m-text); font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.035em; }
.m-favorites-head p { margin:0; color:var(--m-muted); }
.m-favorites-head p strong { color:var(--m-text); }
.m-favorites-grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); align-items:stretch; }
.m-favorites-grid .m-card { height:100%; border-radius:18px; box-shadow:0 16px 34px -30px rgba(7,26,49,.72); }
.m-favorites-grid .m-card-link { flex:1 1 auto; }
.m-favorites-grid .m-card-photo,.m-favorites-grid .m-card-photo-empty { aspect-ratio:16/10; }
.m-favorites-grid .m-card-title { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-height:2.7em; }
.m-favorites-grid .m-card-open { background:linear-gradient(135deg,var(--m-accent),#1677ff); }
.m-favorites-empty { min-height:430px; display:grid; place-content:center; justify-items:center; padding:42px 20px; text-align:center; border:1px dashed #b9cee4; border-radius:24px; background:linear-gradient(145deg,var(--m-surface),var(--m-bg-elevated)); }
.m-favorites-empty-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; color:#fff; background:linear-gradient(135deg,#16c8e8,#1677ff); font-size:2rem; box-shadow:0 18px 34px -22px #1677ff; }
.m-favorites-empty h2 { margin:20px 0 8px; color:var(--m-text); font-size:1.45rem; }
.m-favorites-empty p { max-width:500px; margin:0; color:var(--m-muted); line-height:1.55; }
.m-favorites-empty > div { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px; }
.m-favorites-empty .m-search-submit,.m-favorites-empty .m-secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:12px; text-decoration:none; }
@media(max-width:640px){
  .m-favorites-shell { padding-top:20px; padding-bottom:32px; }
  .m-favorites-head { align-items:flex-start; flex-direction:column; gap:10px; margin-bottom:18px; }
  .m-favorites-grid { grid-template-columns:1fr; }
  .m-favorites-grid .m-card-photo,.m-favorites-grid .m-card-photo-empty { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
  .m-favorites-empty { min-height:360px; padding:34px 18px; }
  .m-favorites-empty > div { display:grid; width:100%; max-width:280px; }
  .m-compare-shell { padding-top:20px; padding-bottom:32px; }
}
@media(max-width:430px){.m-ai-shell,.m-radar-detail{padding-top:16px}.m-ai-hero,.m-ai-criteria,.m-ai-results{border-radius:18px;padding:17px}.m-ai-form{grid-template-columns:1fr}.m-ai-wide{grid-column:auto}.m-ai-radar-save{padding:18px}.m-radar-detail-head{display:grid}.m-ai-hero h1{font-size:2rem}}

/* Market v2 — buyer-first public product pass. */
.m-card-badges, .m-listing-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.m-card-badges .m-card-badge, .m-listing-badges .m-listing-badge { margin-bottom: 8px; }
.m-seller-badge { background: rgba(91, 140, 255, .12); color: #4b6fc6; }
.m-freshness-badge--active { background: rgba(22, 163, 74, .12); color: #15803d; }
.m-freshness-badge--unverified { background: rgba(245, 158, 11, .13); color: #a16207; }
.m-freshness-badge--unavailable { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.m-card-type, .m-listing-type { color: var(--m-muted); font-size: .76rem; margin: 6px 0 0; }
.m-eyebrow { color: var(--m-accent-strong); font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.m-radar-cta {
  margin: 32px 0 14px; padding: 28px; border: 1px solid var(--m-border-strong); border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(223,236,255,.82));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--m-glow-soft);
}
.m-radar-cta h2 { margin: 6px 0; font-size: 1.45rem; }
.m-radar-cta p { margin: 0; color: var(--m-muted); }
.m-radar-cta .m-search-submit { text-decoration: none; }
.m-catalog-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-mobile-filter-button { display: none; }

.m-gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(210px, 1fr); gap: 10px; overflow: visible; }
.m-gallery-primary { display: block; min-height: 470px; border-radius: 22px; overflow: hidden; }
.m-gallery-primary img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
.m-gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-gallery-thumbs a { position: relative; min-height: 225px; overflow: hidden; border-radius: 18px; }
.m-gallery-thumbs img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
.m-gallery-thumbs span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,18,35,.55); color: #fff; font-size: 1.6rem; font-weight: 800; }
.m-similar { margin-top: 28px; }

@media (max-width: 768px) {
  .m-catalog-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-gallery { grid-template-columns: 1fr; }
  .m-gallery-primary { min-height: 360px; }
  .m-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .m-gallery-thumbs a { min-height: 100px; }
}

@media (max-width: 640px) {
  .m-mobile-filter-button {
    display: flex; position: sticky; top: 72px; z-index: 12; align-items: center; justify-content: center; gap: 8px;
    margin: 8px 0 12px; padding: 13px 16px; border-radius: 999px; text-decoration: none; font-weight: 800;
    background: var(--m-accent-gradient); color: #04141f; box-shadow: 0 12px 28px rgba(56,122,179,.24);
  }
  .m-mobile-filter-button span { background: rgba(255,255,255,.55); border-radius: 999px; padding: 2px 8px; font-size: .75rem; }
  .m-catalog-filters { grid-template-columns: 1fr; scroll-margin-top: 126px; }
  .m-radar-cta { flex-direction: column; align-items: stretch; padding: 22px; }
  .m-radar-cta .m-search-submit { text-align: center; }
  .m-market-shelf .m-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .m-market-shelf .m-card { flex: 0 0 82%; scroll-snap-align: start; }
  .m-listing-wrap { padding-left: 14px; padding-right: 14px; }
  .m-gallery-primary { min-height: 300px; }
  .m-gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .m-gallery-thumbs a { min-height: 82px; }
  .m-gallery-thumbs a:nth-child(n + 4) { display: none; }
}
@media (max-width: 480px) {
  /* 1 картка в рядок — велике фото (Крок 6, п. Listings); поріг підняли з
     420 до 480px, щоб охопити типові ширини телефонів (390–430px). */
  .m-grid { grid-template-columns: 1fr; }
}

/* 19.09.2026, R-ONE Property Market, Phase 4: CTA "Продати нерухомість" у
   шапці — виділяємо кнопкою серед звичайних текстових пунктів меню. */
.m-nav-cta {
  background: var(--m-accent-gradient); color: #04141f !important; padding: 8px 16px !important;
  border-radius: 999px; border-bottom: none !important; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(34, 211, 238, 0.6);
}
.m-nav-cta:hover { filter: brightness(1.08); border-color: transparent !important; }

/* Public owner intake: intentionally uses the same Market tokens, while the
   form itself remains a small mobile-first wizard rather than a CRM screen. */
.m-sell-shell { max-width: 900px; padding-top: 38px; padding-bottom: 80px; }
.m-sell-back { color: var(--m-muted); text-decoration: none; font-weight: 700; }
.m-sell-intro { margin: 24px 0; }
.m-sell-intro h1 { margin: 8px 0; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.04em; }
.m-sell-intro p { color: var(--m-muted); max-width: 650px; line-height: 1.6; }
.m-sell-kicker { color: var(--m-accent); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.m-sell-progress { list-style: none; display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; padding: 0; margin: 24px 0; }
.m-sell-progress li { display: flex; align-items: center; gap: 8px; color: var(--m-muted); font-size: .75rem; min-width: 0; }
.m-sell-progress li span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--m-border); border-radius: 50%; flex: 0 0 auto; }
.m-sell-progress li.active,.m-sell-progress li.done { color: var(--m-text); }
.m-sell-progress li.active span,.m-sell-progress li.done span { color: #04141f; border-color: transparent; background: var(--m-accent-gradient); }
.m-sell-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 28px; padding: clamp(22px,5vw,46px); box-shadow: var(--m-glow-soft); }
.m-sell-form { display: grid; gap: 22px; }
.m-sell-form h2 { margin: 0; font-size: 1.35rem; }
.m-sell-form label { display: grid; gap: 8px; font-weight: 700; }
.m-sell-form input:not([type=radio]):not([type=checkbox]),.m-sell-form select,.m-sell-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--m-border); border-radius: 13px; background: var(--m-bg-elevated); color: var(--m-text); padding: 13px 14px; font: inherit; }
.m-sell-form input:focus,.m-sell-form select:focus,.m-sell-form textarea:focus { outline: 3px solid rgba(34,211,238,.18); border-color: var(--m-accent); }
.m-sell-grid { display: grid; gap: 16px; }.m-sell-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.m-sell-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-sell-choice { display: grid; gap: 10px; }.m-sell-choice.two{grid-template-columns:repeat(2,1fr)}.m-sell-choice.four{grid-template-columns:repeat(4,1fr)}
.m-sell-choice label { display:block }.m-sell-choice input{position:absolute;opacity:0;pointer-events:none}.m-sell-choice span{display:grid;place-items:center;min-height:64px;padding:8px;border:1px solid var(--m-border);border-radius:15px;background:var(--m-bg-elevated);cursor:pointer;text-align:center}.m-sell-choice input:checked+span{border-color:var(--m-accent);box-shadow:var(--m-glow-border);color:var(--m-accent)}
.m-sell-check { display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px!important;font-weight:600!important }.m-sell-check input{margin-top:3px;width:18px;height:18px}
.m-sell-primary { border:0; border-radius:14px; padding:14px 20px; background:var(--m-accent-gradient); color:#04141f; font:inherit; font-weight:800; cursor:pointer; text-align:center; }
.m-sell-primary.as-link { display:block; text-decoration:none; }
.m-sell-help,.m-sell-form small,.m-optional { color:var(--m-muted);font-size:.86rem;line-height:1.5 }.m-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
.m-sell-alert { padding:14px 16px;border-radius:14px;margin:18px 0 }.m-sell-alert.error{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.35);color:#fb7185}.m-sell-alert.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);color:#22c55e}
.m-sell-upload { border:2px dashed var(--m-border);border-radius:18px;padding:34px;display:grid!important;place-items:center;cursor:pointer;text-align:center }.m-sell-upload input{margin-top:14px}
.m-sell-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.m-sell-photos article{border:1px solid var(--m-border);border-radius:15px;overflow:hidden;background:var(--m-bg-elevated)}.m-sell-photos img{width:100%;aspect-ratio:4/3;object-fit:cover}.m-sell-photos article>div{display:flex;gap:5px;align-items:center;flex-wrap:wrap;padding:8px}.m-sell-photos form{display:inline}.m-sell-photos button{border:1px solid var(--m-border);background:var(--m-surface);color:var(--m-text);border-radius:8px;padding:6px;cursor:pointer}.m-sell-photos button.danger{color:#fb7185}
.m-sell-preview{display:grid;grid-template-columns:minmax(160px,280px) 1fr;gap:22px;align-items:center;padding:16px;border:1px solid var(--m-border);border-radius:18px;background:var(--m-bg-elevated)}.m-sell-preview img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.m-sell-preview h3{margin:8px 0}.m-sell-preview span,.m-sell-preview p{color:var(--m-muted)}
.m-sell-status{text-align:center;display:grid;gap:18px;justify-items:center}.m-sell-status h1{margin:0}.m-sell-status>p{color:var(--m-muted);max-width:620px}.m-sell-status .m-sell-preview{width:min(100%,620px);text-align:left}.m-sell-status-pill{padding:8px 14px;border-radius:999px;background:var(--m-bg-elevated);font-weight:800}.m-sell-status-pill.pending_review{color:#f59e0b}.m-sell-status-pill.approved{color:#22c55e}.m-sell-status-pill.rejected,.m-sell-status-pill.removed{color:#fb7185}
@media(max-width:700px){.m-sell-shell{padding:22px 14px 64px}.m-sell-progress{overflow-x:auto;grid-template-columns:repeat(6,86px);padding-bottom:6px}.m-sell-progress li{display:grid;text-align:center;justify-items:center}.m-sell-progress li b{font-size:.65rem}.m-sell-card{border-radius:20px;padding:20px 16px}.m-sell-grid.two,.m-sell-grid.three{grid-template-columns:1fr}.m-sell-choice.four{grid-template-columns:repeat(2,1fr)}.m-sell-photos{grid-template-columns:repeat(2,minmax(0,1fr))}.m-sell-preview{grid-template-columns:1fr}.m-sell-preview img{width:100%}}
@media(max-width:700px){.m-owner-listing-main{grid-template-columns:1fr;padding:14px}.m-owner-cover{height:auto;aspect-ratio:16/10}.m-owner-inquiry>div{display:grid}.m-section-head{align-items:flex-start}.m-account-add{white-space:nowrap}}

/* Seller Analytics v1: Market-account only, no CRM dashboard selectors. */
.m-seller-analytics { max-width: 1120px; padding-bottom: 64px; }
.m-back-link { display: inline-block; margin-bottom: 18px; color: var(--m-accent-strong); text-decoration: none; font-weight: 700; }
.m-analytics-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 28px; border: 1px solid var(--m-border); border-radius: 24px; background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(91,140,255,.08)), var(--m-surface); }
.m-analytics-head h1 { margin: 10px 0 6px; font-size: clamp(1.45rem, 3vw, 2.3rem); }
.m-analytics-head p { margin: 0; color: var(--m-muted); }
.m-analytics-section { padding-top: 34px; }
.m-analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.m-analytics-grid article, .m-price-insight > div { padding: 20px; border: 1px solid var(--m-border); border-radius: 18px; background: var(--m-surface); }
.m-analytics-grid span, .m-price-insight span { display: block; color: var(--m-muted); font-size: .8rem; }
.m-analytics-grid strong { display: block; margin: 8px 0 5px; font-size: 2rem; }
.m-analytics-grid small, .m-analytics-muted, .m-analytics-dates { color: var(--m-muted); }
.m-analytics-note { margin: 14px 0 0; color: var(--m-muted); }
.m-price-insight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.m-price-insight strong { display: block; margin-top: 8px; font-size: 1.08rem; }
.m-price-recommendation { display: inline-flex; margin: 16px 0 10px; padding: 9px 13px; border-radius: 999px; background: rgba(34,211,238,.1); color: var(--m-accent-strong); font-weight: 800; }
.m-analytics-dates { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--m-border); font-size: .82rem; }
@media(max-width:768px){.m-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.m-price-insight{grid-template-columns:1fr}.m-analytics-head{display:grid;padding:22px}}
@media(max-width:430px){.m-analytics-grid{grid-template-columns:1fr 1fr;gap:10px}.m-analytics-grid article{padding:15px}.m-analytics-grid strong{font-size:1.55rem}}

/* Public property AI assistant: a Market-only on-demand panel. No request is
   made until the visitor explicitly submits a question. */
.m-listing-ai-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-left: 8px; padding: 10px 16px; border: 1px solid rgba(34,211,238,.45);
  border-radius: 999px; background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(99,102,241,.12));
  color: var(--m-text); font: inherit; font-weight: 800; cursor: pointer;
}
.m-listing-ai-button:hover { border-color: var(--m-accent); box-shadow: var(--m-glow-soft); }
.m-property-ai {
  width: min(480px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px));
  margin: 16px 16px 16px auto; padding: 0; border: 1px solid var(--m-border); border-radius: 24px;
  background: var(--m-surface); color: var(--m-text); box-shadow: 0 24px 80px rgba(2,8,23,.32);
}
.m-property-ai::backdrop { background: rgba(2,8,23,.55); backdrop-filter: blur(4px); }
.m-property-ai[open] { display: grid; gap: 18px; align-content: start; padding: 24px; box-sizing: border-box; overflow-y: auto; }
.m-property-ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.m-property-ai-head span { color: var(--m-accent-strong); font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.m-property-ai-head h2 { margin: 5px 0 0; font-size: 1.45rem; }
.m-property-ai-close { width: 38px; height: 38px; border: 1px solid var(--m-border); border-radius: 50%; background: var(--m-bg-elevated); color: var(--m-text); font-size: 1.55rem; cursor: pointer; }
.m-property-ai-intro { margin: 0; color: var(--m-muted); line-height: 1.55; }
.m-property-ai-prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.m-property-ai-prompts button { padding: 9px 11px; border: 1px solid var(--m-border); border-radius: 999px; background: var(--m-bg-elevated); color: var(--m-text); font: inherit; font-size: .82rem; cursor: pointer; }
.m-property-ai-prompts button:hover { border-color: var(--m-accent); color: var(--m-accent-strong); }
.m-property-ai-answer { padding: 16px; border: 1px solid rgba(34,211,238,.32); border-radius: 16px; background: rgba(34,211,238,.07); white-space: pre-wrap; line-height: 1.6; }
.m-property-ai-answer.is-error { border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.08); color: #e11d48; }
.m-property-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-property-ai-chips span { padding: 7px 10px; border-radius: 999px; background: var(--m-bg-elevated); color: var(--m-muted); font-size: .78rem; font-weight: 700; }
.m-property-ai-form { display: grid; gap: 10px; }
.m-property-ai-form label { font-weight: 800; }
.m-property-ai-form textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--m-border); border-radius: 14px; background: var(--m-bg-elevated); color: var(--m-text); padding: 13px; font: inherit; }
.m-property-ai-form textarea:focus { outline: 3px solid rgba(34,211,238,.15); border-color: var(--m-accent); }
.m-property-ai-form button { border: 0; border-radius: 13px; padding: 13px 18px; background: var(--m-accent-gradient); color: #04141f; font: inherit; font-weight: 900; cursor: pointer; }
.m-property-ai-form button:disabled { opacity: .65; cursor: wait; }
.m-property-ai > small { color: var(--m-muted); line-height: 1.45; }
@media(max-width:640px) {
  .m-listing-ai-button { margin: 10px 0 0; width: 100%; }
  .m-property-ai { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .m-property-ai[open] { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
}

/* 23.09.2026, R-ONE Market UX restructuring: праворуч від .m-nav —
   окрема група "Увійти"/"Мій кабінет" + CTA "Продати нерухомість"
   (раніше CTA була просто останнім пунктом у спільному списку .m-nav;
   тепер відокремлена, щоб .m-nav лишався суто каталожною навігацією:
   Купити/Орендувати/Каталог/Обране). */
.m-nav-account { display: flex; align-items: center; gap: 16px; font-size: 0.92rem; }
.m-nav-account > a:not(.m-nav-cta) { text-decoration: none; color: var(--m-muted); padding: 6px 0; border-bottom: 2px solid transparent; }
.m-nav-account > a.active:not(.m-nav-cta), .m-nav-account > a:not(.m-nav-cta):hover { color: var(--m-text); border-color: var(--m-accent); }

/* 24.09.2026, Light-theme: компактний icon-only перемикач теми в шапці —
   той самий localStorage-ключ rone-theme і [data-theme-toggle]/theme.js,
   що вже керує темою в internal CRM (header.ejs) і на /auth-сторінках, тож
   вибір теми зберігається між усіма сторінками R-ONE, не лише Market. */
.m-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-muted);
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.m-theme-toggle:hover { color: var(--m-accent); border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18); }
.m-theme-icon { width: 17px; height: 17px; display: block; }
.m-theme-icon-moon { display: none; }
html[data-theme="light"] .m-theme-icon-sun { display: none; }
html[data-theme="light"] .m-theme-icon-moon { display: block; }

/*
 * 24.09.2026, Крок 6 (Mobile): hamburger + окрема "мобільна" копія
 * theme-toggle-кнопки (theme.js через [data-theme-toggle] однаково керує
 * ОБОМА кнопками — той самий прийом, що вже є в internal CRM header.ejs,
 * де є .theme-toggle і .auth-theme-toggle одночасно). За замовчуванням
 * (десктоп) — display:none, тому НІЧОГО в затвердженому Dark/Light
 * desktop-макеті не зсувається: це нові елементи, не переміщення наявних
 * .m-nav/.m-nav-account, і вони не займають місця в flex-розкладці шапки,
 * поки не увімкнені в @media (max-width: 640px) вище. */
.m-header-actions { display: none; align-items: center; gap: 8px; flex: 0 0 auto; }
.m-hamburger {
  display: none; width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text);
  cursor: pointer;
}
.m-hamburger-icon { width: 20px; height: 20px; }
.m-hamburger-close-icon { display: none; width: 20px; height: 20px; }
.m-header.m-mobile-menu-open .m-hamburger-icon { display: none; }
.m-header.m-mobile-menu-open .m-hamburger-close-icon { display: block; }

/* 24.09.2026, Крок 6 (Mobile) — саме приховування .m-nav/.m-nav-account і
 * розкриття hamburger-меню винесено СЮДИ (а не в перший @media(max-width:
 * 640px) вище), бо базові .m-nav/.m-nav-account { display:flex... }
 * оголошені нижче за файлом, ніж той перший блок — при однаковій
 * специфічності пізніше правило в джерелі переважає НЕЗАЛЕЖНО від
 * @media, тож display:none там просто ігнорувався. Тут це правило вже
 * після базового — коректно переважає. */
@media (max-width: 640px) {
  .m-nav, .m-nav-account { display: none; }
  .m-header-actions { display: flex; }
  .m-hamburger { display: inline-flex; }
  .m-header.m-mobile-menu-open .m-header-inner { flex-wrap: wrap; row-gap: 2px; }
  .m-header.m-mobile-menu-open .m-nav {
    display: flex; flex-direction: column; gap: 2px; flex-basis: 100%;
    order: 5; border-top: 1px solid var(--m-border); margin-top: 10px; padding-top: 8px;
  }
  .m-header.m-mobile-menu-open .m-nav a { padding: 10px 2px; border-bottom: none; }
  .m-header.m-mobile-menu-open .m-nav-account {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-basis: 100%;
    order: 6; padding: 4px 0 10px;
  }
  .m-header.m-mobile-menu-open .m-nav-account > a:not(.m-nav-cta) { padding: 8px 2px; border-bottom: none; }
  .m-header.m-mobile-menu-open .m-nav-account > a.m-nav-cta { text-align: center; }
  /* Десктопна theme-toggle-кнопка (перша дитина .m-nav-account) — у
     випадному мобільному меню зайва: .m-header-actions вище вже показує
     свою власну, завжди видиму. Ховаємо лише ЇЇ, лишаючи Увійти/CTA. */
  .m-header.m-mobile-menu-open .m-nav-account > .m-theme-toggle { display: none; }
}

/*
 * 24.09.2026, Крок 6 (Mobile): fixed bottom navigation — Головна/Пошук/
 * Обране/Заявки/Кабінет. Усі 5 посилань ведуть на РЕАЛЬНІ наявні маршрути
 * (/m, /m/properties, /m/favorites, /m/account#inquiries — та сама секція
 * "Мої заявки", що вже є в marketplace-buyer-account.ejs, /m/account або
 * /m/account/login) — жодного нового backend/роута. Glass/frosted через
 * той самий --m-header-bg токен, що й шапка; safe-area — інспект для
 * iPhone home indicator. Видима лише на мобільних (за замовчуванням
 * display:none — не впливає на desktop-макет). */
.m-bottom-nav { display: none; }
@media (max-width: 640px) {
  .m-bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--m-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--m-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .m-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: var(--m-muted); font-size: 0.66rem; padding: 4px 2px;
    border-radius: 10px; transition: color 0.15s ease;
  }
  .m-bottom-nav a svg { width: 21px; height: 21px; }
  .m-bottom-nav a.active, .m-bottom-nav a:hover { color: var(--m-accent); }
  /* Місце під фіксовану панель знизу, щоб футер/останні картки НІКОЛИ не
     ховались під нею — лише на сторінках, де є .m-bottom-nav. Запас (72px
     проти фактичних ~54px висоти .m-bottom-nav) навмисно з невеликим
     буфером — за правкою користувача. */
body.m-page:has(.m-bottom-nav) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* Market listing: verified nearby context and on-demand commute. */
.m-neighborhood {
  margin: 28px 0;
  padding: 26px;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  background: linear-gradient(145deg, var(--m-surface), var(--m-glass-bg));
  box-shadow: var(--m-glow-soft);
}
.m-neighborhood-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.m-neighborhood-heading h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.m-neighborhood-eyebrow {
  margin: 0 0 5px;
  color: var(--m-accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.m-neighborhood-distance-note {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--m-border);
  border-radius: 999px;
  color: var(--m-muted);
  font-size: .78rem;
}
.m-neighborhood-status {
  padding: 20px;
  border: 1px dashed var(--m-border);
  border-radius: 14px;
  color: var(--m-muted);
  text-align: center;
}
.m-neighborhood-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.m-neighborhood-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--m-border);
  border-radius: 15px;
  background: var(--m-bg-elevated);
}
.m-neighborhood-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: .96rem;
}
.m-neighborhood-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(34, 211, 238, .12);
  color: var(--m-accent);
  font-size: .78rem;
  font-weight: 900;
}
.m-neighborhood-card ul { list-style: none; margin: 0; padding: 0; }
.m-neighborhood-card li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--m-border);
  font-size: .84rem;
}
.m-neighborhood-card li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-neighborhood-card li strong { flex: 0 0 auto; color: var(--m-accent); font-size: .78rem; }
.m-neighborhood-empty { margin: 0; color: var(--m-muted); font-size: .82rem; line-height: 1.45; }
.m-commute {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--m-border);
}
.m-commute-copy h3 { margin: 0 0 5px; font-size: 1.18rem; }
.m-commute-copy p { margin: 0 0 14px; color: var(--m-muted); }
.m-commute-form label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 700; }
.m-commute-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.m-commute-row input {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--m-border);
  border-radius: 12px;
  outline: none;
  background: var(--m-bg-elevated);
  color: var(--m-text);
}
.m-commute-row input:focus { border-color: var(--m-accent); box-shadow: var(--m-glow-border); }
.m-commute-row button {
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--m-accent-gradient);
  color: #04101d;
  font-weight: 800;
  cursor: pointer;
}
.m-commute-row button:disabled { cursor: wait; opacity: .55; }
.m-commute-result { margin-top: 14px; }
.m-commute-result.is-loading, .m-commute-result.is-error { color: var(--m-muted); }
.m-commute-destination { margin: 0 0 10px; font-weight: 700; }
.m-commute-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-commute-mode {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--m-border);
  border-radius: 12px;
  background: var(--m-bg-elevated);
}
.m-commute-mode span { color: var(--m-muted); font-size: .76rem; }
.m-commute-mode strong { font-size: .9rem; }

@media (max-width: 900px) {
  .m-neighborhood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .m-neighborhood { margin: 22px 0; padding: 18px 14px; }
  .m-neighborhood-heading { display: grid; gap: 10px; }
  .m-neighborhood-distance-note { justify-self: start; }
  .m-neighborhood-grid { grid-template-columns: 1fr; }
  .m-commute-row, .m-commute-modes { grid-template-columns: 1fr; }
  .m-commute-row button { width: 100%; }
}

/* Market homepage marketplace pass: a photographic, search-first landing page.
   All selectors are scoped to .m-market-home so catalogue, account, map and
   seller flows keep their existing layout and behavior. */
.m-market-home { overflow-x: clip; }
.m-market-home .m-header-inner { min-height: 66px; padding-top: 9px; padding-bottom: 9px; }
.m-market-home .m-header {
  position: absolute; inset: 0 0 auto; z-index: 40;
  border: 0; background: transparent; box-shadow: none;
  backdrop-filter: none;
}
.m-market-home.m-has-crm-ribbon .m-header { top: 33px; }
.m-market-home .m-logo {
  display: grid; justify-items: start; gap: 4px; white-space: nowrap;
  color: #fff; text-shadow: 0 2px 18px rgba(2,15,29,.42);
}
.m-market-home .m-logo-main > span,
.m-market-home .m-logo-tagline { color: #26dcf4; }
.m-market-home .m-nav { gap: 20px; }
.m-market-home .m-nav a,
.m-market-home .m-nav-account > a:not(.m-nav-cta) {
  color: rgba(255,255,255,.82); text-shadow: 0 1px 12px rgba(2,15,29,.5);
}
.m-market-home .m-nav a { font-size: .9rem; }
.m-market-home .m-nav a.active,
.m-market-home .m-nav a:hover,
.m-market-home .m-nav-account > a.active:not(.m-nav-cta),
.m-market-home .m-nav-account > a:not(.m-nav-cta):hover { color: #fff; }
.m-market-home .m-nav-account > .m-theme-toggle {
  color: #fff; border-color: rgba(255,255,255,.48);
  background: rgba(4,17,33,.2); box-shadow: none;
  backdrop-filter: blur(8px);
}
.m-market-home .m-account-trigger {
  color: #fff; border-color: rgba(255,255,255,.42);
  background: rgba(4,17,33,.2); text-shadow: 0 1px 12px rgba(2,15,29,.5);
  backdrop-filter: blur(8px);
}
.m-market-home .m-account-trigger:hover,
.m-market-home .m-account-menu[open] .m-account-trigger { border-color: #26dcf4; }
.m-market-home .m-nav-cta { padding: 9px 15px !important; }
.m-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.m-home-hero {
  position: relative; isolation: isolate; display: flex; min-height: clamp(720px, 82vh, 860px);
  overflow: hidden; color: #fff; background: #173552;
}
.m-home-hero-media, .m-home-hero-shade { position: absolute; inset: 0; }
.m-home-hero-media { z-index: -3; }
.m-home-hero-picture { position: absolute; inset: 0; display: block; }
.m-home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 54%; }
.m-home-hero-img-light { display: none; }
html[data-theme="light"] .m-home-hero-img-dark { display: none; }
html[data-theme="light"] .m-home-hero-img-light { display: block; }
.m-home-hero-shade {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 16, 30, .34) 0%, rgba(4, 16, 30, .18) 42%, rgba(4, 16, 30, .68) 100%),
    linear-gradient(90deg, rgba(4, 16, 30, .36), transparent 65%);
}
.m-market-home .m-home-hero-content {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: 100%; padding: 72px clamp(40px, 4.7vw, 72px) 174px; text-align: left;
}
.m-home-hero-copy { max-width: min(47%, 660px); text-shadow: 0 2px 24px rgba(3, 15, 29, .32); }
.m-home-hero-copy h1 {
  margin: 0; max-width: 660px; color: #fff; font-size: clamp(3.25rem, 4.8vw, 4.85rem);
  line-height: .98; letter-spacing: -.055em;
}
.m-home-hero-copy h1 > span { display: block; color: inherit; }
.m-home-hero-copy h1 > span + span { padding-top: .24em; }
.m-home-hero-copy h1 em { color: #26dcf4; font-style: normal; }
.m-home-hero-copy p {
  max-width: 590px; margin: 27px 0 0; color: rgba(255,255,255,.91);
  font-size: clamp(1rem, 1.55vw, 1.22rem); line-height: 1.55;
}
.m-home-search-panel { width: min(61vw, 880px); margin-top: 34px; }
.m-home-search-tabs {
  display: inline-flex; align-items: end; gap: 24px; max-width: 100%; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.m-home-search-tabs::-webkit-scrollbar { display: none; }
.m-home-search-tabs button {
  position: relative; flex: 0 0 auto; padding: 10px 2px 13px; border: 0; color: rgba(255,255,255,.78);
  background: transparent; font: inherit; font-weight: 800; cursor: pointer; text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.m-home-search-tabs button::after {
  content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 3px;
  border-radius: 999px; background: transparent;
}
.m-home-search-tabs button.active { color: #fff; }
.m-home-search-tabs button.active::after { background: #28c9e8; box-shadow: 0 0 16px rgba(40,201,232,.7); }
.m-home-main-search {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px; border: 1px solid rgba(255,255,255,.62); border-radius: 22px;
  background: rgba(255,255,255,.97); box-shadow: 0 22px 54px rgba(2,14,29,.3);
}
.m-home-search-input { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 14px; color: #53657b; }
.m-home-search-input svg { flex: 0 0 23px; width: 23px; height: 23px; }
.m-home-search-input input {
  min-width: 0; width: 100%; padding: 13px 0; border: 0; outline: 0; background: transparent;
  color: #0c2038; font: inherit; font-size: 1.02rem;
}
.m-home-search-input input::placeholder { color: #728198; opacity: 1; }
.m-home-search-submit, .m-home-radar-card > a, .m-home-map-banner > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px;
  border: 0; border-radius: 15px; background: linear-gradient(135deg, #12c7df, #2878ed);
  color: #fff; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 24px rgba(22,125,220,.25);
}
.m-home-search-submit:hover, .m-home-radar-card > a:hover, .m-home-map-banner > a:hover { filter: brightness(1.04); transform: translateY(-1px); }
.m-home-quick-filters { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 15px; }
.m-home-quick-filters a {
  padding: 8px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: rgba(7,25,44,.36); backdrop-filter: blur(10px); color: #fff;
  font-size: .79rem; font-weight: 700; text-decoration: none;
}
.m-home-quick-filters a:hover { background: rgba(7,25,44,.56); border-color: rgba(255,255,255,.7); }
.m-home-advanced { width: min(100%, 650px); margin: 10px 0 0; color: #fff; }
.m-home-advanced summary { width: max-content; margin: 0; cursor: pointer; font-size: .76rem; font-weight: 750; }
.m-home-advanced > div {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
  margin-top: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 16px;
  background: rgba(5,20,38,.66); backdrop-filter: blur(12px); text-align: left;
}
.m-home-advanced label { display: grid; gap: 5px; font-size: .7rem; font-weight: 700; }
.m-home-advanced select, .m-home-advanced input {
  min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px; background: #fff; color: #0c2038; font: inherit;
}
.m-home-promo {
  position: absolute; right: 0; bottom: 18px; left: 0;
}
.m-home-promo-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 28px;
  width: calc(100% - 112px); min-height: 92px; box-sizing: border-box;
  padding-top: 18px; padding-bottom: 18px; border: 1px solid rgba(105,218,241,.2);
  border-radius: 22px; background: rgba(4,17,33,.82); backdrop-filter: blur(16px);
}
.m-home-promo-item { display: grid; gap: 5px; min-width: 0; }
.m-home-promo-item + .m-home-promo-item { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.14); }
.m-home-promo-inner strong { color: #fff; font-size: 1rem; }
.m-home-promo-inner span { color: rgba(255,255,255,.76); font-size: .84rem; line-height: 1.4; }
.m-home-promo-inner > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 14px;
  background: linear-gradient(135deg, #04cbea, #176cf0); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 12px 26px rgba(12,105,221,.32);
}

.m-market-home .m-home-content { padding-top: 42px; padding-bottom: 76px; }
.m-market-home .m-home-content .m-section { padding: 34px 0; }
.m-market-home .m-section-head { align-items: end; margin-bottom: 18px; }
.m-market-home .m-section-head h2 { margin: 5px 0 0; color: var(--m-text); font-size: clamp(1.55rem, 2.2vw, 2rem); letter-spacing: -.025em; }
.m-home-listing-section .m-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m-home-radar-card, .m-home-map-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  margin: 20px 0; padding: 30px 34px; border: 1px solid rgba(64,140,220,.2); border-radius: 24px;
  background: linear-gradient(110deg, rgba(225,244,255,.94), rgba(236,233,255,.92));
  box-shadow: 0 18px 55px rgba(37,88,145,.09);
}
html[data-theme="dark"] .m-home-radar-card, html[data-theme="dark"] .m-home-map-banner {
  background: linear-gradient(120deg, rgba(18,49,78,.96), rgba(33,34,78,.94));
}
.m-home-radar-card h2, .m-home-map-banner h2 { margin: 5px 0 6px; font-size: 1.55rem; }
.m-home-radar-card p, .m-home-map-banner p { margin: 0; color: var(--m-muted); }
.m-home-map-banner {
  min-height: 185px; margin-top: 34px; overflow: hidden;
  background:
    radial-gradient(circle at 84% 42%, rgba(21,195,224,.22), transparent 29%),
    linear-gradient(110deg, rgba(229,246,255,.98), rgba(239,245,255,.94));
}
.m-home-categories-section .m-categories { margin-top: 0; }
.m-market-home .m-seller-banner p { margin: 8px 0 0; color: var(--m-muted); }

@media (min-width: 1280px) and (max-width: 1439px) {
  .m-home-hero { min-height: clamp(720px, 78vh, 810px); }
  .m-market-home .m-home-hero-content { padding-top: 64px; padding-bottom: 168px; }
  .m-home-listing-section .m-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-home-listing-section .m-card:nth-child(n + 5) { display: none; }
}
@media (max-width: 1100px) {
  .m-market-home .m-nav { gap: 12px; }
  .m-market-home .m-nav a { font-size: .84rem; }
  .m-home-hero { min-height: 720px; }
  .m-home-search-panel { width: min(68vw, 800px); }
  .m-home-listing-section .m-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .m-home-hero { min-height: 720px; }
  .m-market-home .m-home-hero-content { padding: 56px 32px 172px; }
  .m-home-search-panel { width: min(82vw, 760px); }
  .m-home-listing-section .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-home-promo-inner { gap: 18px; }
  .m-home-promo-item + .m-home-promo-item { padding-left: 18px; }
}
@media (max-width: 640px) {
  .m-market-home .m-header-inner { min-height: 60px; }
  .m-home-hero { min-height: 1080px; flex-direction: column; }
  .m-home-hero-img { object-position: center center; }
  .m-home-hero-shade {
    background:
      linear-gradient(180deg, rgba(3,17,32,.38) 0%, rgba(3,17,32,.18) 51%, rgba(3,17,32,.06) 68%, rgba(3,17,32,.58) 100%),
      linear-gradient(90deg, rgba(3,17,32,.38), rgba(3,17,32,.02) 82%);
  }
  .m-market-home .m-home-hero-content { flex: 1 0 auto; justify-content: flex-start; padding: 44px 16px 34px; text-align: left; }
  .m-home-hero-copy { max-width: 100%; }
  .m-home-hero-copy h1 { font-size: clamp(2.25rem, 10.5vw, 2.85rem); line-height: 1.01; }
  .m-home-hero-copy p { margin-top: 20px; font-size: .94rem; line-height: 1.45; }
  .m-home-search-panel { width: 100%; margin-top: 28px; }
  .m-home-search-tabs { display: flex; justify-content: flex-start; width: 100%; box-sizing: border-box; gap: 22px; padding: 0 5px; }
  .m-home-main-search { grid-template-columns: minmax(0, 1fr) auto; padding: 6px; border-radius: 18px; }
  .m-home-search-input { gap: 8px; padding-left: 8px; }
  .m-home-search-input svg { width: 20px; height: 20px; flex-basis: 20px; }
  .m-home-search-input input { padding: 11px 0; font-size: .9rem; }
  .m-home-search-submit { min-height: 46px; padding: 0 18px; border-radius: 13px; }
  .m-home-quick-filters { justify-content: flex-start; flex-wrap: wrap; gap: 10px 8px; margin-right: 0; padding-right: 0; overflow: visible; }
  .m-home-quick-filters::-webkit-scrollbar { display: none; }
  .m-home-quick-filters a { flex: 0 0 auto; background: rgba(7,25,44,.48); }
  .m-home-advanced > div { grid-template-columns: 1fr; }
  .m-home-promo { position: relative; right: auto; bottom: auto; left: auto; width: 100%; padding-bottom: 16px; }
  .m-home-promo-inner { grid-template-columns: 1fr; gap: 10px; width: calc(100% - 32px); min-height: 0; padding: 15px 16px; border-radius: 18px; }
  .m-home-promo-item { gap: 2px; }
  .m-home-promo-item + .m-home-promo-item { padding: 9px 0 0; border-top: 1px solid rgba(255,255,255,.14); border-left: 0; }
  .m-home-promo-inner span { font-size: .76rem; line-height: 1.3; }
  .m-home-promo-inner > a { min-height: 42px; width: 100%; box-sizing: border-box; font-size: .82rem; }
  .m-market-home .m-home-content { padding: 20px 16px 58px; }
  .m-market-home .m-home-content .m-section { padding: 25px 0; }
  .m-market-home .m-section-head { align-items: flex-end; gap: 12px; }
  .m-market-home .m-section-head h2 { font-size: 1.48rem; }
  .m-market-home .m-section-head > a { white-space: nowrap; font-size: .8rem; }
  .m-home-popular-grid { display: flex !important; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .m-home-popular-grid .m-card { display: block !important; flex: 0 0 84%; scroll-snap-align: start; }
  .m-home-listing-section .m-grid-newest { grid-template-columns: 1fr; }
  .m-home-listing-section .m-grid-newest .m-card:nth-child(n + 4) { display: none; }
  .m-home-radar-card, .m-home-map-banner { align-items: stretch; flex-direction: column; gap: 20px; margin: 10px 0; padding: 24px 20px; }
  .m-home-radar-card > a, .m-home-map-banner > a { width: 100%; box-sizing: border-box; }
  .m-home-map-banner { min-height: 0; }
  .m-home-categories-section .m-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m-home-categories-section .m-category-preview { height: 112px; }
  .m-home-categories-section .m-category-copy { padding: 12px; }
  .m-home-categories-section .m-category-copy > span { display: none; }
}
@media (max-width: 480px) {
  .m-home-hero {
    width: 100%; height: calc(100vw * 1.7779); min-height: 680px; max-height: 765px;
  }
  .m-home-hero-img { object-fit: cover; object-position: center center; filter: none; }
  .m-home-hero-shade { background: none; }
  .m-market-home .m-home-hero-content {
    flex: 0 0 auto; padding: 34px 16px 160px;
  }
  .m-home-hero-copy { text-shadow: 0 2px 18px rgba(2,15,29,.52); }
  .m-home-hero-copy h1 { font-size: clamp(2.05rem, 8.8vw, 2.35rem); line-height: .99; letter-spacing: -.05em; }
  .m-home-hero-copy p { max-width: 390px; margin-top: 16px; font-size: .83rem; line-height: 1.4; }
  .m-home-search-panel { margin-top: 18px; }
  .m-home-search-tabs { gap: 22px; padding: 0 4px; }
  .m-home-search-tabs button { padding: 7px 1px 10px; font-size: .82rem; }
  .m-home-main-search { gap: 5px; padding: 5px; border-radius: 17px; box-shadow: 0 14px 34px rgba(2,14,29,.24); }
  .m-home-search-input { gap: 7px; padding-left: 8px; }
  .m-home-search-input svg { width: 18px; height: 18px; flex-basis: 18px; }
  .m-home-search-input input { padding: 9px 0; font-size: .78rem; }
  .m-home-search-submit { min-height: 44px; padding: 0 17px; font-size: .84rem; }
  .m-home-quick-filters { gap: 7px 6px; margin-top: 10px; }
  .m-home-quick-filters a { padding: 6px 10px; font-size: .67rem; }
  .m-home-advanced { margin-top: 7px; }
  .m-home-advanced summary { font-size: .68rem; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
  .m-home-promo { position: absolute; right: 0; bottom: 10px; left: 0; padding-bottom: 0; }
  .m-home-promo-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px;
    width: calc(100% - 32px); padding: 13px 14px 12px; border-radius: 20px;
    background: rgba(4,17,33,.88); box-shadow: 0 16px 38px rgba(2,12,25,.3);
  }
  .m-home-promo-item { gap: 3px; }
  .m-home-promo-item + .m-home-promo-item { padding: 0 0 0 12px; border-top: 0; border-left: 1px solid rgba(255,255,255,.14); }
  .m-home-promo-inner strong { font-size: .72rem; line-height: 1.25; }
  .m-home-promo-inner span { font-size: .61rem; line-height: 1.3; }
  .m-home-promo-inner > a {
    grid-column: 1 / -1; min-height: 39px; font-size: .75rem; border-radius: 13px;
  }
}
@media (max-width: 390px) {
  .m-home-main-search { grid-template-columns: minmax(0, 1fr) 82px; }
  .m-home-search-submit { padding: 0 12px; }
  .m-home-promo-inner { gap: 9px; }
}

/* Homepage premium contrast pass. Structure and breakpoints above stay
   unchanged; these scoped overrides only strengthen hierarchy and color. */
.m-home-hero-shade {
  background:
    linear-gradient(180deg, rgba(3, 13, 27, .1) 0%, rgba(3, 13, 27, .04) 44%, rgba(3, 13, 27, .68) 100%),
    linear-gradient(90deg, rgba(3, 17, 35, .36) 0%, rgba(5, 24, 46, .18) 34%, rgba(7, 29, 52, .04) 62%, transparent 78%);
}
.m-home-hero-copy { text-shadow: 0 4px 28px rgba(0, 8, 22, .48); }
.m-home-hero-copy h1 { font-weight: 800; letter-spacing: -.06em; }
.m-home-hero-copy h1 em {
  color: #26dcf4;
  text-shadow: 0 0 28px rgba(19, 205, 236, .28), 0 4px 24px rgba(0, 8, 22, .48);
}
.m-home-hero-copy p { color: rgba(248, 251, 255, .94); font-weight: 500; }
.m-home-search-tabs button { color: rgba(255,255,255,.83); }
.m-home-search-tabs button.active::after { background: #18d8f1; box-shadow: 0 0 18px rgba(24,216,241,.88); }
.m-home-main-search {
  border: 2px solid rgba(255,255,255,.92);
  background: #fff;
  box-shadow: 0 24px 60px rgba(0,13,32,.42), 0 0 0 4px rgba(14,183,229,.12);
}
.m-home-search-input { color: #183a62; }
.m-home-search-input input { color: #071b33; font-weight: 600; }
.m-home-search-input input::placeholder { color: #526d8d; }
.m-home-search-submit, .m-home-radar-card > a, .m-home-map-banner > a {
  background: linear-gradient(135deg, #04cbea 0%, #176cf0 100%);
  box-shadow: 0 13px 28px rgba(12,105,221,.34), inset 0 1px 0 rgba(255,255,255,.26);
}
.m-home-search-submit:hover, .m-home-radar-card > a:hover, .m-home-map-banner > a:hover {
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 16px 34px rgba(12,105,221,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
.m-home-quick-filters a {
  border-color: rgba(255,255,255,.58);
  background: rgba(245,251,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  color: #f8fcff;
}
.m-home-quick-filters a:hover { background: rgba(20,205,235,.28); border-color: #64e7f8; }
.m-home-promo {
  background: transparent;
}
.m-home-promo-inner { background: linear-gradient(100deg, rgba(4,20,39,.93), rgba(9,34,61,.88), rgba(7,31,54,.84)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.m-home-promo-inner strong { color: #fff; }
.m-home-promo-inner .m-home-promo-item span { color: #c8d6e7; }
.m-home-promo-inner > a { color: #fff; }

@media (max-width: 640px) {
  .m-home-hero-shade {
    background:
      linear-gradient(180deg, rgba(3,13,27,.22) 0%, rgba(3,13,27,.08) 52%, rgba(3,13,27,.48) 100%),
      linear-gradient(90deg, rgba(3,17,35,.7) 0%, rgba(5,24,46,.48) 62%, rgba(7,29,52,.18) 100%);
  }
}

/* The supplied portrait photo is already color-graded for mobile. Keep its
   original pixels visible: no tint, overlay, brightness or saturation pass. */
@media (max-width: 480px) {
  .m-home-hero-img { filter: none; }
  .m-home-hero-shade { background: none; }
}

html[data-theme="light"] body.m-market-home {
  background:
    radial-gradient(80% 24% at 10% 17%, rgba(33,158,219,.07), transparent 64%),
    linear-gradient(180deg, #eef4f9 0%, #e8f0f7 100%);
}
html[data-theme="light"] .m-market-home .m-home-content { color: #0a1e37; }
html[data-theme="light"] .m-market-home .m-section-head h2,
html[data-theme="light"] .m-market-home .m-card-title,
html[data-theme="light"] .m-market-home .m-card-price { color: #071a31; }
html[data-theme="light"] .m-market-home .m-section-head > a { color: #126fca; font-weight: 750; }
html[data-theme="light"] .m-market-home .m-eyebrow { color: #087ea4; }
html[data-theme="light"] .m-market-home .m-card {
  border: 1px solid rgba(22,74,123,.16);
  background: #fff;
  box-shadow: 0 13px 32px rgba(27,69,111,.13), 0 2px 7px rgba(27,69,111,.06);
}
html[data-theme="light"] .m-market-home .m-card:hover {
  border-color: rgba(0,155,210,.4);
  box-shadow: 0 18px 40px rgba(24,75,127,.18), 0 0 0 1px rgba(0,178,221,.16);
}
html[data-theme="light"] .m-market-home .m-card-price { font-weight: 850; letter-spacing: -.025em; }
html[data-theme="light"] .m-market-home .m-card-title { font-weight: 780; }
html[data-theme="light"] .m-market-home .m-card-specs,
html[data-theme="light"] .m-market-home .m-card-location,
html[data-theme="light"] .m-market-home .m-card-type,
html[data-theme="light"] .m-market-home .m-card-meta { color: #58708c; }
html[data-theme="light"] .m-market-home .m-card-badge {
  border: 1px solid rgba(23,102,181,.18);
  background: #e9f3ff;
  color: #135fa7;
}
html[data-theme="light"] .m-market-home .m-seller-badge--owner {
  border-color: #a7e4c0; background: #e8f8ef; color: #137841;
}
html[data-theme="light"] .m-market-home .m-seller-badge--realtor,
html[data-theme="light"] .m-market-home .m-seller-badge--agency,
html[data-theme="light"] .m-market-home .m-source-badge {
  border-color: #a9d7f2; background: #e6f5ff; color: #0873af;
}
html[data-theme="light"] .m-market-home .m-freshness-badge--active {
  border-color: #9ee1b7; background: #e4f8eb; color: #11763d;
}
html[data-theme="light"] .m-market-home .m-freshness-badge--unverified {
  border-color: #f2d08c; background: #fff5dc; color: #9a5b07;
}
html[data-theme="light"] .m-market-home .m-card-badge--deal {
  border-color: #ffc19f; background: #fff0e8; color: #c54918;
}
html[data-theme="light"] .m-market-home .m-favorite-btn {
  border-color: rgba(20,58,98,.2); background: rgba(8,27,50,.78); color: #fff;
}
html[data-theme="light"] .m-market-home .m-card-selection { background: #e2effa; color: #0d609f; font-weight: 750; }
html[data-theme="light"] .m-market-home .m-home-radar-card {
  border-color: rgba(64,76,201,.26);
  background:
    radial-gradient(circle at 90% 20%, rgba(25,208,235,.3), transparent 30%),
    linear-gradient(120deg, #eef3ff 0%, #e8edff 52%, #dff8fc 100%);
  box-shadow: 0 20px 50px rgba(39,64,136,.17);
}
html[data-theme="light"] .m-market-home .m-home-map-banner {
  border-color: rgba(0,141,202,.26);
  background:
    radial-gradient(circle at 83% 42%, rgba(12,190,226,.35), transparent 27%),
    linear-gradient(115deg, #eaf7ff 0%, #dceeff 54%, #e8f5ff 100%);
  box-shadow: 0 20px 50px rgba(26,83,139,.16);
}
html[data-theme="light"] .m-market-home .m-seller-banner {
  border-color: rgba(14,117,196,.3);
  background:
    radial-gradient(circle at 88% 18%, rgba(17,202,231,.24), transparent 28%),
    linear-gradient(120deg, #edf7ff, #e6edff 58%, #e6faff);
  box-shadow: 0 20px 48px rgba(31,78,132,.16);
}
html[data-theme="light"] .m-market-home .m-market-benefits article {
  border-color: rgba(22,74,123,.15); background: #fff;
  box-shadow: 0 10px 28px rgba(27,69,111,.1);
}

/* Market homepage final polish: one visual rhythm, one CTA language and a
   property-first card hierarchy. Scoped to /m so catalogue/detail behavior
   and all existing search, Radar and publication contracts stay untouched. */
.m-market-home .m-logo-tagline {
  font-size: .56rem; letter-spacing: .14em;
  background: var(--m-accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 7px rgba(34,211,238,.16));
}
.m-market-home .m-home-content {
  display: flex; flex-direction: column; gap: clamp(34px, 4vw, 54px);
}
.m-market-home .m-home-content .m-section { padding: 0; }
.m-market-home .m-home-content > .m-home-radar-card,
.m-market-home .m-home-content > .m-home-map-banner,
.m-market-home .m-home-content > .m-seller-banner,
.m-market-home .m-home-content > .m-market-benefits { margin: 0; }
.m-market-home .m-eyebrow {
  font-size: .72rem; font-weight: 850; letter-spacing: .14em; line-height: 1.2;
  text-transform: uppercase;
}
.m-market-home .m-section-head h2,
.m-market-home .m-home-radar-card h2,
.m-market-home .m-home-map-banner h2 {
  color: var(--m-text); font-weight: 820; letter-spacing: -.03em;
}
.m-market-home .m-home-listing-section .m-card { min-width: 0; height: 100%; }
.m-market-home .m-home-listing-section .m-card-link { flex: 1 1 auto; min-width: 0; }
.m-market-home .m-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.m-market-home .m-card-badge { margin: 0; }
.m-market-home .m-source-badge { opacity: .82; }
.m-market-home .m-card-price {
  margin-bottom: 6px; color: var(--m-text); font-size: clamp(1.2rem, 1.5vw, 1.42rem);
  font-weight: 850; letter-spacing: -.025em;
}
.m-market-home .m-card-title {
  display: -webkit-box; min-height: 2.7em; margin-bottom: 8px; overflow: hidden;
  color: var(--m-text); font-size: 1rem; font-weight: 780; line-height: 1.35;
  letter-spacing: -.012em; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.m-market-home .m-card-specs,
.m-market-home .m-card-location,
.m-market-home .m-card-type,
.m-market-home .m-card-meta { color: color-mix(in srgb, var(--m-muted) 88%, var(--m-text)); }
.m-market-home .m-card-photo {
  background: linear-gradient(110deg, var(--m-bg-elevated) 20%, var(--m-surface-hover) 42%, var(--m-bg-elevated) 64%);
  background-size: 220% 100%;
}
.m-market-home .m-card-selection,
.m-market-home .m-home-radar-card > a,
.m-market-home .m-home-map-banner > a,
.m-market-home .m-seller-banner .m-search-submit,
.m-market-home .m-home-promo-inner > a,
.m-market-home .m-home-empty-state > a {
  border: 0; background: var(--m-accent-gradient); color: #fff;
  box-shadow: 0 12px 26px rgba(12,105,221,.26), inset 0 1px 0 rgba(255,255,255,.22);
}
.m-market-home .m-card-selection:hover,
.m-market-home .m-home-radar-card > a:hover,
.m-market-home .m-home-map-banner > a:hover,
.m-market-home .m-seller-banner .m-search-submit:hover,
.m-market-home .m-home-empty-state > a:hover { filter: saturate(1.08) brightness(1.04); }
.m-market-home .m-card-compare {
  border: 1px solid var(--m-border); color: var(--m-text); background: transparent;
}
.m-market-home .m-home-categories-section .m-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.m-home-empty-state {
  display: grid; justify-items: center; gap: 9px; min-height: 190px; padding: 34px 22px;
  border: 1px dashed var(--m-border-strong); border-radius: 22px;
  background: var(--m-surface); color: var(--m-muted); text-align: center;
}
.m-home-empty-state strong { color: var(--m-text); font-size: 1.05rem; }
.m-home-empty-state > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  margin-top: 6px; padding: 0 18px; border-radius: 12px; text-decoration: none; font-weight: 800;
}

@media (max-width: 640px) {
  .m-market-home .m-home-content { gap: 32px; }
  .m-market-home .m-home-listing-section .m-card-link {
    display: flex; flex-direction: column; align-items: stretch; min-width: 0;
  }
  .m-market-home .m-home-listing-section .m-card-photo,
  .m-market-home .m-home-listing-section .m-card-photo-empty {
    flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  }
  .m-market-home .m-card-title { min-height: 0; -webkit-line-clamp: 3; }
  .m-market-home .m-home-categories-section .m-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-market-home .m-home-categories-section .m-category-card:last-child { grid-column: 1 / -1; }
  .m-home-empty-state { min-height: 160px; padding: 28px 18px; }
}

/* Market Property Detail v2 — presentation-only layer. All data, visibility,
   contact, AI, compare and neighborhood behavior stays in the existing public
   DTO/routes; this block only gives those controls a marketplace detail UX. */
.m-property-detail-page { background: #f3f7fb; }
.m-property-detail-page .m-listing-wrap {
  display: flex; flex-direction: column; gap: 0; width: min(100%, 1440px); max-width: 1440px;
  margin: 0 auto; padding: 26px clamp(18px, 3vw, 44px) 96px;
}
.m-property-above-fold { order: 1; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .72fr); gap: 28px; align-items: start; }
.m-property-gallery-shell { position: relative; min-width: 0; }
.m-property-gallery-shell > .m-no-photo { height: 100%; min-height: 560px; margin: 0; border-radius: 24px; }
.m-property-gallery-shell .gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr); gap: 10px; margin: 0; }
.m-property-gallery-shell .gallery-main { min-height: 560px; overflow: hidden; border-radius: 24px 10px 10px 24px; cursor: zoom-in; background: #dce6ef; }
.m-property-gallery-shell .gallery-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.m-property-gallery-shell .gallery-thumb { position: relative; min-height: 275px; overflow: hidden; border-radius: 10px; cursor: zoom-in; background: #dce6ef; }
.m-property-gallery-shell .gallery-thumb:nth-child(2) { border-radius: 10px 24px 10px 10px; }
.m-property-gallery-shell .gallery-thumb:nth-child(4) { border-radius: 10px 10px 24px 10px; }
.m-property-gallery-shell .gallery-slot { position: relative; width: 100%; height: 100%; }
.m-property-gallery-shell .gallery-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease, transform .35s ease; }
.m-property-gallery-shell .gallery-img.is-loaded { opacity: 1; }
.m-property-gallery-shell [data-gallery-open]:hover .gallery-img { transform: scale(1.018); }
.m-property-gallery-shell .gallery-skeleton { position: absolute; inset: 0; background: linear-gradient(100deg,#dce6ef 25%,#edf3f8 45%,#dce6ef 65%); background-size: 220% 100%; animation: m-property-shimmer 1.3s linear infinite; }
.m-property-gallery-shell .gallery-slot.is-loaded .gallery-skeleton,.m-property-gallery-shell .gallery-slot.is-error .gallery-skeleton { display: none; }
.m-property-gallery-shell .gallery-error { position: absolute; inset: 0; display: none; place-items: center; color: #6d7d90; }
.m-property-gallery-shell .gallery-slot.is-error .gallery-error { display: grid; }
.m-property-gallery-shell .gallery-error svg { width: 34px; }
.m-property-gallery-shell .gallery-more { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(5,18,36,.58); font-size: 1.25rem; font-weight: 850; backdrop-filter: blur(2px); }
@keyframes m-property-shimmer { to { background-position: -220% 0; } }
.m-property-photo-count { position: absolute; right: 18px; bottom: 18px; z-index: 3; padding: 8px 12px; border-radius: 999px; color: #fff; background: rgba(5,18,36,.76); font-size: .78rem; font-weight: 800; backdrop-filter: blur(10px); }
.m-property-gallery-actions { position: absolute; top: 16px; right: 16px; z-index: 4; display: flex; gap: 8px; }
.m-property-gallery-actions form { margin: 0; }
.m-property-gallery-actions button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; color: #10213b; background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(7,24,44,.18); font: inherit; font-size: 1.15rem; cursor: pointer; }
.m-property-gallery-actions button:hover,.m-property-gallery-actions button:focus-visible { outline: 3px solid rgba(34,211,238,.28); color: #0879b8; }

.m-property-summary { position: sticky; top: 90px; display: flex; flex-direction: column; padding: 26px; border: 1px solid rgba(22,70,112,.12); border-radius: 24px; background: #fff; box-shadow: 0 20px 55px rgba(25,58,94,.12); }
.m-property-summary .m-listing-price { order: 1; margin: 0; color: #0b1d35; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 850; letter-spacing: -.045em; }
.m-listing-price-m2 { order: 2; margin: 5px 0 16px; color: #607089; font-weight: 700; }
.m-property-summary .m-listing-title { order: 3; margin: 0 0 12px; color: #10213b; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.025em; }
.m-property-summary .m-listing-location,.m-property-summary .m-listing-type { order: 4; margin: 0 0 7px; color: #63748b; font-size: .88rem; line-height: 1.45; }
.m-property-summary .m-listing-specs { order: 5; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 18px 0; }
.m-property-summary .m-listing-spec { min-width: 0; padding: 12px; border: 0; border-radius: 13px; background: #f1f6fa; }
.m-property-summary .m-listing-spec strong { color: #10213b; font-size: 1.05rem; }
.m-property-primary-actions { order: 6; margin-top: 2px; }
.m-property-contact-button { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 18px; border-radius: 14px; color: #041522; background: linear-gradient(135deg,#19d2ef,#287cff); box-shadow: 0 14px 30px rgba(18,139,214,.22); text-align: center; text-decoration: none; font-weight: 850; }
.m-property-summary .m-listing-favorite-form { order: 7; margin: 10px 0 0; }
.m-property-summary .m-listing-favorite,.m-property-summary .m-listing-compare,.m-property-summary .m-listing-ai-button { min-height: 44px; border: 1px solid #d8e3ec; border-radius: 12px; color: #24405f; background: #fff; font-size: .82rem; font-weight: 800; }
.m-property-summary .m-listing-favorite { width: 100%; }
.m-property-summary .m-listing-compare,.m-property-summary .m-listing-ai-button { order: 7; width: calc(50% - 5px); margin: 10px 0 0; }
.m-property-summary .m-listing-compare { align-self: flex-start; }
.m-property-summary .m-listing-ai-button { align-self: flex-end; margin-top: -44px; }
.m-property-summary .m-listing-badges { order: 8; margin-top: 18px; padding-top: 17px; border-top: 1px solid #e3ebf2; }
.m-property-summary .m-listing-badge { margin: 0; padding: 6px 9px; color: #36516f; background: #eef5fa; border-color: #d8e5ee; font-size: .72rem; }
.m-property-summary .m-freshness-badge--active { color: #11763d; background: #e5f8ec; border-color: #a8e1bd; }

.m-property-detail-page .m-property-section,.m-property-detail-page .m-price-history,.m-property-detail-page .m-inquiry,.m-property-ai-card,.m-property-similar { align-self: center; width: min(100%, 1160px); margin: 30px 0 0; padding: clamp(22px,3vw,32px); border: 1px solid rgba(22,70,112,.12); border-radius: 24px; background: #fff; box-shadow: 0 14px 38px rgba(25,58,94,.075); }
.m-property-description { order: 2; }
.m-property-source-card { order: 3; }
.m-property-market-insight { order: 4; }
.m-property-detail-page .m-price-history { order: 5; }
.m-property-location-section { order: 6; margin-top: 18px !important; }
.m-property-detail-page .m-neighborhood { order: 7; }
.m-property-detail-page .m-cta { order: 8; align-self: center; width: min(100%,1160px); position: static; margin-top: 24px; background: transparent; }
.m-property-inquiry { order: 9; }
.m-property-ai-card { order: 10; }
.m-property-similar { order: 11; }
.m-property-section h2,.m-property-ai-card h2,.m-property-similar > .m-section-head h2 { margin: 3px 0 16px; color: #10213b; font-size: clamp(1.35rem,2.4vw,2rem); letter-spacing: -.025em; }
.m-property-section-eyebrow { margin: 0; color: #078bc2; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.m-property-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.m-property-section-head > span { color: #708096; font-size: .78rem; font-weight: 700; }
.m-property-description .m-listing-description { display: -webkit-box; margin: 0; overflow: hidden; color: #344b67; line-height: 1.72; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.m-property-description .m-listing-description.is-expanded { display: block; overflow: visible; }
.m-description-toggle { min-height: 44px; margin-top: 12px; padding: 0; border: 0; color: #087bb8; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.m-description-toggle[hidden] { display: none; }
.m-market-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.m-market-metrics > div { padding: 17px; border-radius: 16px; background: #f1f6fa; }
.m-market-metrics span { display: block; margin-bottom: 7px; color: #6b7d92; font-size: .76rem; }
.m-market-metrics strong { color: #10213b; font-size: 1rem; }
.m-market-data-note { margin: 16px 0 0; color: #65778d; line-height: 1.55; }
.m-property-detail-page .m-price-history h2 { margin-bottom: 16px; }
.m-property-detail-page .m-price-history li { align-items: center; padding: 13px 0; }
.m-property-detail-page .m-price-history li:last-child { border: 0; }
.m-property-location-head { margin-bottom: 18px; }
.m-property-location-head strong { display: block; color: #10213b; font-size: 1rem; }
.m-property-location-head p { margin: 5px 0 0; color: #65778d; }
.m-property-location-actions { display: grid; justify-items: end; gap: 8px; }
.m-property-location-actions span { padding: 6px 9px; border-radius: 999px; color: #35607d; background: #edf5fa; font-size: .75rem; font-weight: 800; }
.m-property-location-actions a { color: #087bb8; text-decoration: none; font-weight: 850; }
.m-property-inline-map { width: 100%; height: 350px; overflow: hidden; border: 1px solid #d7e3ec; border-radius: 18px; background: #e8eef3; }
.m-property-inline-map .mapboxgl-ctrl-group { overflow: hidden; border: 1px solid #dbe3ea; border-radius: 11px; background: #fff; box-shadow: 0 8px 22px rgba(18,49,78,.14); }
.m-property-inline-map .mapboxgl-ctrl-group button { width: 34px; height: 34px; }
.m-property-location-fallback { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #d7e3ec; border-radius: 16px; color: #35506d; background: #f2f6f9; }
.m-property-location-fallback > span { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #087bb8; background: #dff3fa; font-size: 1.35rem; }
.m-property-location-fallback strong { display: block; color: #17314e; }
.m-property-location-fallback p { margin: 4px 0 0; color: #687b90; font-size: .84rem; line-height: 1.45; }
.m-property-nearby-preview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.m-property-nearby-preview > div { min-width: 0; padding: 11px 12px; border-radius: 13px; background: #f1f6fa; }
.m-property-nearby-preview span,.m-property-nearby-preview strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-property-nearby-preview span { margin-bottom: 4px; color: #6f8094; font-size: .7rem; font-weight: 750; }
.m-property-nearby-preview strong { color: #17314e; font-size: .8rem; }
.m-property-nearby-preview > p { grid-column: 1/-1; margin: 0; padding: 12px; color: #6f8094; text-align: center; }
.m-property-detail-page .m-neighborhood { background: #fff; }
.m-property-detail-page .m-neighborhood-heading h2 { color: #10213b; }
.m-property-detail-page .m-neighborhood-card { background: #f4f8fb; }
.m-property-detail-page .m-neighborhood-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.m-property-detail-page .m-neighborhood-card { padding: 13px; }
.m-property-detail-page .m-neighborhood-card h3 { margin-bottom: 8px; }
.m-property-detail-page .m-neighborhood-card li { padding: 6px 0; }
.m-property-ai-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; color: #fff; border: 0; background: radial-gradient(circle at 90% 10%,rgba(35,212,237,.28),transparent 30%),linear-gradient(135deg,#071a36,#123b69); box-shadow: 0 22px 45px rgba(10,40,73,.2); }
.m-property-ai-card .m-property-section-eyebrow { color: #50e4f5; }
.m-property-ai-card h2 { margin-bottom: 8px; color: #fff; }
.m-property-ai-card p:not(.m-property-section-eyebrow) { margin: 0; color: #c1d2e5; line-height: 1.55; }
.m-property-ai-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #041522; background: linear-gradient(135deg,#36e2f3,#5f9cff); font-size: 1.7rem; }
.m-property-ai-card-prompts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.m-property-ai-card-prompts span { padding: 6px 9px; border: 1px solid rgba(148,211,235,.25); border-radius: 999px; color: #d8e9f6; font-size: .7rem; }
.m-property-ai-card > button { min-height: 46px; padding: 11px 16px; border: 0; border-radius: 13px; color: #041522; background: linear-gradient(135deg,#2cdaee,#4d8cff); font: inherit; font-weight: 850; cursor: pointer; }
.m-property-detail-page .m-inquiry-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.m-property-similar { padding: 32px 0 0; border: 0; border-top: 1px solid #dce6ee; border-radius: 0; background: transparent; box-shadow: none; }
.m-property-similar .m-section-head { align-items: flex-end; }
.m-property-similar .m-section-head a { color: #087bb8; font-weight: 800; }
.m-property-similar .m-grid { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; }
.m-property-similar .m-card { height: 100%; }
.m-property-similar .m-card-link,.m-property-similar .m-card-body { min-width: 0; }
.m-property-similar .m-card-link { flex: 1; }
.m-property-similar .m-card-title { overflow-wrap: anywhere; word-break: normal; }
.m-property-mobile-bar { display: none; }

.m-property-detail-page :where(a,button,input,textarea):focus-visible {
  outline: 3px solid rgba(20,177,226,.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .m-property-detail-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.gallery-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 72px; background: rgba(2,9,22,.94); }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox-stage { position: relative; width: min(92vw,1200px); height: min(84vh,820px); }
.gallery-lightbox-stage .gallery-slot { width: 100%; height: 100%; }
.gallery-lightbox-stage .gallery-img { width: 100%; height: 100%; object-fit: contain; }
.gallery-lightbox-close,.gallery-lightbox-prev,.gallery-lightbox-next { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; color: #fff; background: rgba(5,18,36,.72); font-size: 2.15rem; line-height: 1; cursor: pointer; }
.gallery-lightbox-close { top: -58px; right: 0; }
.gallery-lightbox-prev { top: 50%; left: -62px; transform: translateY(-50%); }
.gallery-lightbox-next { top: 50%; right: -62px; transform: translateY(-50%); }
.gallery-lightbox-counter { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); color: #fff; font-weight: 800; }

@media (max-width: 1080px) {
  .m-property-above-fold { grid-template-columns: minmax(0,1.35fr) minmax(310px,.8fr); gap: 18px; }
  .m-property-gallery-shell .gallery { grid-template-columns: minmax(0,1.6fr) minmax(180px,1fr); }
  .m-property-gallery-shell .gallery-main { min-height: 480px; }
  .m-property-gallery-shell .gallery-thumb { min-height: 235px; }
  .m-property-gallery-shell > .m-no-photo { min-height: 480px; }
  .m-property-similar .m-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767px) {
  .m-property-detail-page { padding-bottom: 78px; }
  .m-property-detail-page .m-listing-wrap { padding: 0 14px 54px; }
  .m-property-detail-page .m-listing-wrap > * { order: initial; }
  .m-property-above-fold { grid-template-columns: minmax(0,1fr); gap: 0; }
  .m-property-gallery-shell { margin: 0 -14px; }
  .m-property-gallery-shell .gallery { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .m-property-gallery-shell .gallery::-webkit-scrollbar { display: none; }
  .m-property-gallery-shell .gallery-main,.m-property-gallery-shell .gallery-thumb { flex: 0 0 100%; min-height: 0; aspect-ratio: 4/3; border-radius: 0; scroll-snap-align: start; }
  .m-property-gallery-shell > .m-no-photo { min-height: 0; height: auto; aspect-ratio: 4/3; border-radius: 0; }
  .m-property-gallery-shell .gallery-thumbs { display: contents; }
  .m-property-gallery-shell .gallery-thumb:nth-child(n) { border-radius: 0; }
  .m-property-gallery-actions { top: 12px; right: 12px; }
  .m-property-photo-count { right: 14px; bottom: 14px; }
  .m-property-summary { position: static; margin: 0 -14px; padding: 22px 14px 24px; border: 0; border-radius: 0; box-shadow: none; }
  .m-property-summary .m-listing-price { font-size: 2.2rem; }
  .m-property-summary .m-listing-title { font-size: 1.35rem; }
  .m-property-summary .m-listing-specs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .m-property-summary .m-listing-favorite-form { display: none; }
  .m-property-summary .m-listing-compare,.m-property-summary .m-listing-ai-button { width: calc(50% - 5px); }
  .m-property-detail-page .m-property-section,.m-property-detail-page .m-price-history,.m-property-detail-page .m-inquiry,.m-property-ai-card,.m-property-similar { margin-top: 16px; padding: 20px 16px; border-radius: 18px; }
  .m-market-metrics { grid-template-columns: 1fr; }
  .m-property-location-section { margin-top: 10px !important; }
  .m-property-location-head { display: grid; align-items: start; gap: 12px; }
  .m-property-location-actions { justify-items: start; }
  .m-property-location-fallback { align-items: flex-start; padding: 14px; }
  .m-property-inline-map { height: 280px; margin-left: -16px; width: calc(100% + 32px); border-radius: 0; }
  .m-property-nearby-preview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .m-property-detail-page .m-neighborhood-grid { grid-template-columns: minmax(0,1fr); }
  .m-property-detail-page .m-neighborhood-card { min-width: 0; }
  .m-property-detail-page .m-neighborhood-card h3 { overflow-wrap: anywhere; }
  .m-property-ai-card { grid-template-columns: auto minmax(0,1fr); gap: 14px; }
  .m-property-ai-card > button { grid-column: 1 / -1; width: 100%; }
  .m-property-ai-card-prompts { display: none; }
  .m-property-detail-page .m-inquiry-grid { grid-template-columns: 1fr; gap: 0; }
  .m-property-similar { padding-left: 0; padding-right: 0; border-radius: 0; }
  .m-property-similar .m-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .m-property-similar .m-card { flex: 0 0 86%; scroll-snap-align: start; }
  .m-property-similar .m-card-title { font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; }
  .m-property-mobile-bar { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #d7e3ec; background: rgba(255,255,255,.94); box-shadow: 0 -10px 30px rgba(12,39,67,.12); backdrop-filter: blur(16px); }
  .m-property-mobile-bar > a,.m-property-mobile-bar button { display: grid; place-items: center; min-height: 48px; border: 0; border-radius: 13px; font: inherit; font-weight: 850; text-decoration: none; }
  .m-property-mobile-bar > a { color: #041522; background: linear-gradient(135deg,#24d5ed,#347ff4); }
  .m-property-mobile-bar form { margin: 0; }
  .m-property-mobile-bar button { width: 48px; color: #143451; background: #edf4f9; font-size: 1.25rem; }
  .gallery-lightbox { padding: 0; }
  .gallery-lightbox-stage { width: 100vw; height: 100dvh; }
  .gallery-lightbox-close { top: 18px; right: 14px; }
  .gallery-lightbox-prev { left: 10px; }
  .gallery-lightbox-next { right: 10px; }
  .gallery-lightbox-counter { bottom: 24px; }
}

/* Homepage phones keep the same continuous header/hero composition as
   desktop, while switching to compact controls and the mobile menu. Other
   Market pages keep the normal sticky header. */
@media (max-width: 640px) {
  .m-market-home .m-header-inner { min-height: 72px; padding: 14px 16px; }
  .m-market-home .m-header-actions .m-theme-toggle,
  .m-market-home .m-hamburger {
    color: #fff; border-color: rgba(255,255,255,.58);
    background: rgba(4,17,33,.18); box-shadow: none;
    backdrop-filter: blur(8px);
  }
  .m-market-home .m-header.m-mobile-menu-open {
    background: rgba(4,17,33,.92); backdrop-filter: blur(18px);
  }
  .m-market-home .m-header.m-mobile-menu-open .m-nav a,
  .m-market-home .m-header.m-mobile-menu-open .m-nav-account > a:not(.m-nav-cta) { color: #fff; }
  .m-market-home .m-home-hero-content { padding-top: 108px; }
}

@media (max-width: 480px) {
  .m-market-home .m-home-hero-content { padding-top: 94px; }
}

/* Market account menu (logged-in buyer): avatar + name, dropdown with
   cabinet, favorites, Radar and logout. Additive; the guest «Увійти» link
   keeps its existing style. */
.m-account-menu { position: relative; }
.m-account-trigger {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--m-border);
  color: var(--m-text); font-weight: 600; font-size: .88rem; background: var(--m-surface);
}
.m-account-trigger::-webkit-details-marker { display: none; }
.m-account-trigger:hover, .m-account-menu[open] .m-account-trigger { border-color: var(--m-accent); }
.m-account-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 30px;
  background: var(--m-accent-gradient); color: #04141f; font-size: .76rem; font-weight: 800; letter-spacing: .02em;
}
.m-account-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-account-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px;
  display: grid; gap: 2px; padding: 8px; border-radius: 14px;
  /* Opaque: the surface tint layered over the page background, so filters or
     cards under the open menu never show through (light theme surface is translucent). */
  background: linear-gradient(var(--m-surface), var(--m-surface)), var(--m-bg); border: 1px solid var(--m-border);
  box-shadow: 0 18px 40px -18px var(--m-shadow-ambient);
}
.m-account-dropdown-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--m-border); font-weight: 700; overflow-wrap: anywhere; }
.m-account-dropdown a, .m-account-dropdown button {
  display: block; width: 100%; text-align: left; text-decoration: none; padding: 9px 10px; border-radius: 9px;
  color: var(--m-text); font: inherit; font-size: .9rem; background: none; border: 0; cursor: pointer;
}
.m-account-dropdown a:hover, .m-account-dropdown button:hover { background: var(--m-surface-hover); }
.m-account-dropdown form { margin: 0; }
.m-account-dropdown button { color: var(--m-muted); }
@media (max-width: 640px) {
  .m-header.m-mobile-menu-open .m-account-dropdown {
    position: static; display: grid; box-shadow: none; padding: 4px 0; background: none; border: 0; backdrop-filter: none;
  }
  .m-header.m-mobile-menu-open .m-account-dropdown-head { display: none; }
  .m-market-home .m-header.m-mobile-menu-open .m-account-dropdown a,
  .m-market-home .m-header.m-mobile-menu-open .m-account-dropdown button,
  .m-market-home .m-header.m-mobile-menu-open .m-account-trigger { color: #fff; }
}

/* ── Sheets: Radar and inquiry dialogs (market-sheet.js) ─────────────────
   Centred modal on desktop, bottom sheet on phones. White card in the light
   theme, navy in the dark one. Inputs are 16px (no iOS zoom), controls ≥44px. */
html.m-sheet-open { overflow: hidden; }
.m-sheet {
  width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--m-text); overflow: visible;
}
.m-sheet::backdrop { background: rgba(6, 14, 28, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.m-sheet[open] { animation: m-sheet-in .18s ease-out; }
@keyframes m-sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.m-sheet-card {
  display: flex; flex-direction: column; max-height: inherit; margin: 0; overflow: hidden; border-radius: 20px;
  background: #0d1a31; border: 1px solid rgba(94, 137, 191, .28); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .75);
}
html[data-theme="light"] .m-sheet-card {
  background: #fff; border-color: rgba(20, 60, 110, .12);
  box-shadow: 0 24px 60px -30px rgba(15, 40, 80, .45), 0 2px 6px rgba(15, 40, 80, .06);
}
.m-sheet-handle { display: none; }
.m-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 0; }
.m-sheet-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
.m-sheet-head p { margin: 6px 0 0; color: var(--m-muted); font-size: .92rem; line-height: 1.45; }
.m-sheet-close {
  flex: 0 0 44px; width: 44px; height: 44px; margin: -8px -10px 0 0; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--m-muted); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.m-sheet-close:hover { background: rgba(127, 150, 180, .14); color: var(--m-text); }
.m-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 24px 6px; }
.m-sheet-actions {
  display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 18px;
  border-top: 1px solid var(--m-border); background: inherit;
}
.m-sheet-primary, .m-sheet-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; text-decoration: none;
}
.m-sheet-primary { border: 0; color: #04141f; background: var(--m-accent-gradient); }
.m-sheet-primary:disabled { opacity: .6; cursor: progress; }
.m-sheet-secondary { border: 1px solid var(--m-border); background: transparent; color: var(--m-text); font-weight: 700; }
html[data-theme="light"] .m-sheet-secondary { border-color: rgba(20, 60, 110, .2); }
.m-sheet :is(.m-sheet-close, .m-sheet-primary, .m-sheet-secondary, .m-sheet-link, input, select, textarea, .m-sheet-choice span):focus-visible {
  outline: 3px solid rgba(34, 211, 238, .55); outline-offset: 2px;
}
.m-sheet-field { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.m-sheet-field > label, .m-sheet-field > legend, .m-sheet-label { padding: 0; font-size: .88rem; font-weight: 700; color: var(--m-text); }
.m-sheet-field input:not([type="radio"]), .m-sheet-field textarea, .m-sheet-field select {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; font: inherit; font-size: 16px;
  background: rgba(255, 255, 255, .04); color: var(--m-text); border: 1px solid var(--m-border);
}
.m-sheet-field textarea { min-height: 96px; resize: vertical; }
html[data-theme="light"] .m-sheet-field :is(input:not([type="radio"]), textarea, select) { background: #fff; border-color: rgba(20, 60, 110, .22); }
.m-sheet-field :is(input, textarea, select):focus { outline: 0; border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .22); }
.m-sheet-optional { color: var(--m-muted); font-weight: 500; }
.m-sheet-hint { margin: 2px 0 0; color: var(--m-muted); font-size: .82rem; line-height: 1.45; }
.m-sheet-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; font-weight: 600; background: rgba(34, 211, 238, .1); color: var(--m-text); }
.m-sheet-alert { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; font-weight: 600; background: #fff1f1; border: 1px solid rgba(220, 38, 38, .3); color: #b42318; }
html:not([data-theme="light"]) .m-sheet-alert { background: rgba(255, 92, 92, .1); border-color: rgba(255, 92, 92, .45); color: #ffb4b4; }
.m-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.m-sheet-chips li { padding: 6px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; background: rgba(34, 211, 238, .12); color: var(--m-text); }
.m-sheet-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--m-accent); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.m-sheet-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.m-sheet-choice { position: relative; }
.m-sheet-choice input { position: absolute; opacity: 0; pointer-events: none; }
.m-sheet-choice span {
  display: grid; place-items: center; min-height: 44px; padding: 6px 8px; border-radius: 12px; text-align: center;
  border: 1px solid var(--m-border); font-size: .92rem; font-weight: 700; cursor: pointer;
}
html[data-theme="light"] .m-sheet-choice span { border-color: rgba(20, 60, 110, .2); }
.m-sheet-choice input:checked + span { border-color: var(--m-accent); background: rgba(34, 211, 238, .12); color: var(--m-text); box-shadow: inset 0 0 0 1px var(--m-accent); }
.m-sheet-choice input:focus-visible + span { outline: 3px solid rgba(34, 211, 238, .55); outline-offset: 2px; }
.m-sheet-state { display: grid; justify-items: center; gap: 8px; padding: 18px 0 8px; text-align: center; }
.m-sheet-state-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.6rem; color: #15803d; background: #e8f8ee; }
html:not([data-theme="light"]) .m-sheet-state-icon { color: #86efac; background: rgba(34, 197, 94, .14); }
.m-sheet-state h3 { margin: 4px 0 0; font-size: 1.2rem; }
.m-sheet-state p { margin: 0; color: var(--m-muted); line-height: 1.5; }
/* Without JS a #hash link still shows the dialog content in the page. */
dialog.m-sheet:target:not([open]) { display: block; position: static; margin: 24px auto; }

@media (max-width: 640px) {
  .m-sheet {
    width: 100%; max-width: 100%; margin: auto 0 0; bottom: var(--m-kb, 0px);
    max-height: calc(100dvh - var(--m-kb, 0px) - 12px); border-radius: 20px 20px 0 0;
  }
  .m-sheet[open] { animation-name: m-sheet-up; }
  .m-sheet-card { border-radius: 20px 20px 0 0; border-bottom: 0; }
  .m-sheet-handle { display: block; padding: 10px 0 2px; touch-action: none; }
  .m-sheet-handle::before { content: ''; display: block; width: 40px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--m-border-strong, rgba(127, 150, 180, .5)); }
  .m-sheet-head { padding: 10px 18px 0; }
  .m-sheet-body { padding: 16px 18px 4px; }
  .m-sheet-actions { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .m-sheet-actions > * { flex: 1 1 0; padding: 0 12px; white-space: nowrap; }
  .m-sheet-actions > .m-sheet-primary { flex-grow: 1.7; }
  .m-inquiry-sheet .m-inquiry-types { gap: 6px; }
  .m-inquiry-sheet .m-inquiry-types .m-sheet-choice span { padding: 0 11px; font-size: .86rem; }
  .m-sheet-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes m-sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-sheet[open] { animation: none; } }

/* ── Radar CTA bar (catalogue) ── */
.m-radar-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--m-border);
  background: var(--m-surface); box-shadow: var(--m-glow-soft, none);
}
.m-radar-bar.is-active { border-color: rgba(34, 197, 94, .45); }
.m-radar-bar-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--m-accent); background: rgba(34, 211, 238, .12); }
.m-radar-bar.is-active .m-radar-bar-icon { color: #16a34a; background: rgba(34, 197, 94, .14); }
.m-radar-bar-icon svg { width: 22px; height: 22px; }
.m-radar-bar-copy h2 { margin: 0; font-size: 1.02rem; }
.m-radar-bar-copy p { margin: 2px 0 0; color: var(--m-muted); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.m-radar-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.m-radar-bar-actions :is(a, button) { min-height: 44px; display: inline-flex; align-items: center; }
.m-radar-bar-status { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 800; color: #16a34a; }
.m-radar-bar-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.m-radar-bar-status.is-paused { color: var(--m-muted); }
.m-radar-bar .m-inquiry-banner { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) {
  .m-radar-bar { grid-template-columns: auto minmax(0, 1fr); }
  .m-radar-bar-actions { grid-column: 1 / -1; justify-content: stretch; }
  .m-radar-bar-actions :is(a, button) { flex: 1 1 auto; justify-content: center; }
}

/* ── Radar management (/m/saved-searches) ── */
.m-radar-manage-head { align-items: center; }
.m-radar-manage-head p { margin: 4px 0 0; color: var(--m-muted); }
.m-radar-list { display: grid; gap: 14px; margin-top: 18px; }
.m-radar-card { display: grid; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--m-border); background: var(--m-surface); scroll-margin-top: 90px; }
.m-radar-card:target { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
.m-radar-card.is-paused, .m-radar-card.is-expired { opacity: .88; }
.m-radar-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.m-radar-card-top h2 { margin: 0; font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.m-radar-card-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.m-radar-card-meta div { display: grid; gap: 2px; }
.m-radar-card-meta dt { color: var(--m-muted); font-size: .78rem; font-weight: 600; }
.m-radar-card-meta dd { margin: 0; font-weight: 800; }
.m-radar-new { color: #16a34a; font-weight: 800; }
.m-radar-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-radar-card-actions form { margin: 0; }
.m-radar-card-actions .m-sheet-primary, .m-radar-card-actions .m-sheet-secondary { min-height: 44px; padding: 0 16px; font-size: .92rem; }
.m-radar-card-actions .m-danger-link { min-height: 44px; margin-left: auto; }
@media (max-width: 640px) {
  .m-radar-manage-head { display: grid; gap: 12px; }
  .m-radar-card-actions > :is(a, button, form) { flex: 1 1 calc(50% - 4px); }
  .m-radar-card-actions form button { width: 100%; }
  .m-radar-card-actions .m-danger-link { margin-left: 0; }
}
.m-sheet [hidden] { display: none !important; }

/* ── Property page: one lead CTA + public contact + Radar on similar ── */
.m-property-contact-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.m-property-contact-alt a {
  display: grid; place-items: center; min-height: 44px; border-radius: 12px; border: 1px solid #c9d9eb;
  background: #fff; color: #0e2038; font-weight: 800; text-decoration: none;
}
html:not([data-theme="light"]) .m-property-contact-alt a { background: transparent; border-color: var(--m-border); color: var(--m-text); }
.m-property-contact-alt a:hover { border-color: var(--m-accent); }
.m-property-radar-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px;
  color: var(--m-accent); font-weight: 800; font-size: .92rem; text-decoration: none;
}
.m-property-radar-link svg { width: 18px; height: 18px; }
.m-inquiry-sheet .m-inquiry-types { display: flex; flex-wrap: wrap; }
.m-inquiry-sheet .m-inquiry-types .m-sheet-choice span { padding: 0 14px; }
.m-inquiry-sheet .m-inquiry-signin { margin: 0 0 14px; }
.m-inquiry-sheet .m-inquiry-signin a { color: var(--m-accent); font-weight: 800; }
@media (max-width: 767px) {
  /* The sticky «Зв’язатися» bar is shown up to 767px: keep the compare tray above it. */
  .m-property-detail-page .m-compare-tray { left: 10px; right: 10px; transform: none; max-width: none; justify-content: center; bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.m-compare-active .m-property-detail-page { padding-bottom: 136px; }
}
.m-radar-bar { scroll-margin-top: 96px; }
.m-sheet-state .m-sheet-link { justify-self: center; }

/* 06.10.2026: iOS Safari автоматично збільшує сторінку при фокусі на полі
   з font-size < 16px і не повертає масштаб після вводу. Фікс — лише через
   розмір шрифту на мобільному (viewport meta та pinch-zoom не чіпаємо).
   !important — бо багато компонентних правил задають полям менший шрифт
   з вищою специфічністю. Десктоп не зачіпається. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  textarea,
  select,
  #global-search-input {
    font-size: 16px !important;
  }
}

/* ── Entry points to realtor pages (/m/agent/:slug) ── */
.m-card-agent {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 16px 10px; padding: 0 10px;
  border-radius: 12px; border: 1px solid var(--m-border); color: var(--m-text); text-decoration: none; font-size: .86rem;
}
.m-card-agent:hover { border-color: var(--m-accent); }
.m-card-agent img, .m-card-agent span {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; object-fit: cover;
  display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #0d9488, #0e2038);
}
.m-card-agent strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-property-agent {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text); text-decoration: none;
}
.m-property-agent:hover { border-color: var(--m-accent); }
.m-property-agent img, .m-property-agent-initials {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #0d9488, #0e2038);
}
.m-property-agent-text { display: grid; gap: 1px; min-width: 0; }
.m-property-agent-text small { color: var(--m-muted); font-size: .76rem; font-weight: 600; }
.m-property-agent-text strong { overflow-wrap: anywhere; }
.m-property-agent-text em { font-style: normal; color: var(--m-accent); font-weight: 700; font-size: .86rem; }

/* «Повідомити зацікавлених»: оновлення від рієлтора по оголошенню. */
.m-listing-update { display: block; margin: 0.75rem 0; padding: 0.75rem 0.9rem; border-radius: 0.9rem; border: 1px solid var(--m-border, rgba(148, 163, 184, 0.35)); background: var(--m-surface-soft, rgba(37, 99, 235, 0.06)); color: inherit; text-decoration: none; }
.m-listing-update.is-saved { border-color: var(--m-accent, #2563eb); background: color-mix(in srgb, var(--m-accent, #2563eb) 9%, transparent); }
.m-listing-update strong { display: block; font-size: 0.92rem; }
.m-listing-update p { margin: 0.3rem 0; white-space: pre-line; }
.m-listing-update small { opacity: 0.7; }
.m-listing-update-cta { display: inline-block; margin-top: 0.35rem; font-weight: 600; }
.m-listing-updates { margin: 0 0 1.2rem; }
.m-listing-updates h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }

/* Коротка видима форма ліда на сторінці об'єкта. */
.m-quick-lead { margin-top: 0.75rem; padding: 0.85rem; border-radius: 1rem; border: 1px solid var(--m-border, rgba(148, 163, 184, 0.35)); background: var(--m-surface-soft, rgba(37, 99, 235, 0.05)); display: grid; gap: 0.5rem; }
.m-quick-lead-title { font-size: 0.95rem; }
.m-quick-lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.m-quick-lead-fields input { width: 100%; min-width: 0; padding: 0.7rem 0.8rem; border-radius: 0.75rem; border: 1px solid var(--m-border, rgba(148, 163, 184, 0.45)); font: inherit; background: var(--m-surface, #fff); color: inherit; }
.m-quick-lead-submit { padding: 0.75rem 1rem; border-radius: 0.8rem; border: 0; font: inherit; font-weight: 700; cursor: pointer; color: #fff; background: var(--m-accent, #2563eb); }
.m-quick-lead-note { opacity: 0.7; font-size: 0.78rem; }
@media (max-width: 420px) { .m-quick-lead-fields { grid-template-columns: 1fr; } }

/* 10.2026: картка оголошення на комп'ютері. Раніше фото й права панель
   стояли в одному рядку, а розділи — окремо нижче: під фото лишалось
   ~400 px порожнечі (панель із формою вища за фото), розділи мали різну
   ширину. Тепер фото й розділи — ліва колонка, панель з ціною/контактом —
   права, прилипає під час прокрутки. Мобільний порядок не змінюється. */
.m-property-gallery-shell .gallery.gallery--single { grid-template-columns: minmax(0, 1fr); }
.m-property-gallery-shell .gallery.gallery--single .gallery-main { border-radius: 24px; }
@media (min-width: 1101px) {
  .m-property-detail-page .m-listing-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, .72fr);
    column-gap: 28px;
    row-gap: 0; /* відступи — через margin: порожні рядки сітки не додають проміжків */
    align-items: start;
  }
  .m-property-detail-page .m-listing-wrap > :not(.m-property-above-fold),
  .m-property-detail-page .m-property-gallery-shell { margin-top: 0; margin-bottom: 22px; }
  .m-property-detail-page .m-property-above-fold { display: contents; }
  .m-property-detail-page .m-listing-wrap > *,
  .m-property-detail-page .m-property-gallery-shell { grid-column: 1; width: auto; max-width: none; margin-left: 0; margin-right: 0; }
  .m-property-detail-page .m-property-summary {
    grid-column: 2; grid-row: 1 / span 12; align-self: start;
    position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto;
  }
  .m-property-detail-page .m-listing-wrap > .m-similar { grid-column: 1 / -1; }
}

/* 10.2026: футер з посиланнями; кнопка «Продати / здати» без підкреслення. */
.m-nav-cta { text-decoration: none !important; }
.m-footer { text-align: left; }
.m-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
.m-footer-brand { display: grid; gap: 6px; }
.m-footer-brand strong { color: var(--m-text); font-size: .95rem; }
.m-footer-links { display: grid; gap: 8px; align-content: start; }
.m-footer-links a { color: var(--m-muted); text-decoration: none; }
.m-footer-links a:hover { color: var(--m-text); text-decoration: underline; }
.m-footer-copy { max-width: 1200px; margin: 20px auto 0; font-size: .78rem; }
@media (max-width: 720px) {
  .m-footer-inner { grid-template-columns: 1fr 1fr; }
  .m-footer-brand { grid-column: 1 / -1; }
  .m-footer { padding-bottom: 96px; } /* над нижнім меню на телефоні */
}

/* 10.2026: кабінет і майстер продавця. */
/* «+ Додати об’єкт» у заголовку розділу: правило .m-section-head a фарбувало
   текст у колір акценту поверх такого ж градієнта — кнопку майже не видно. */
.m-section-head a.m-search-submit { color: #04141f; font-weight: 800; }
/* Колонка з назвою у футері не розтягується на висоту сусідніх колонок. */
.m-footer-brand { align-content: start; }
/* «Характеристики» налазило на кружечок кроку 4. */
.m-sell-progress li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 701px) {
  .m-sell-progress { grid-template-columns: repeat(2, minmax(0, .8fr)) minmax(0, 1.25fr) repeat(3, minmax(0, .8fr)); }
}