/*!
 * KristinaHouse — /market/market.css — дизайн-система маркетплейса (A2).
 * Подключается билдерами маркета (server.ts, MKT_LINK) поверх site.css;
 * базовые .mkt-* из site.css остаются рабочим фолбэком, здесь — надстройка.
 * Токены: var(--primary), var(--border-color), радиусы 12–16px, без теней-шума.
 */

/* ============ ⭐V: полоса отделов доски (/board и /market, /bazaar, /gigs, /jobs) ============
 * Отдел — фильтрованный указатель над теми же разделами, поэтому полоса выглядит переключателем
 * вида, а не меню: одна строка, текущий пункт залит. Корень («Вся доска») всегда первый и
 * всегда есть — иначе из отдела некуда выйти. */
.bd-depts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.bd-dept { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border: 1px solid var(--border-color); border-radius: 999px; background: #fff;
    color: var(--text-main); text-decoration: none; font-size: 13.5px; font-weight: 600;
    transition: border-color .15s, background .15s, color .15s; }
.bd-dept:hover { border-color: var(--primary); color: var(--primary); }
.bd-dept.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.bd-dept.on:hover { color: #fff; }
.bd-dept-i { font-size: 15px; line-height: 1; }
.bd-dept-about { margin: -6px 0 14px; max-width: 68ch; }

/* ============ E-5: переключатель вида раздела (специальный ↔ обычный) ============
 * Живёт ЗДЕСЬ, а не в THEMED_CSS, потому что кнопка нужна на ОБОИХ видах: и тематическая
 * витрина, и обычный каталог, и карточка лота подключают market.css одинаково (MKT_LINK),
 * а THEMED_CSS приезжает только с тематической. Разведи мы стили по двум местам — вторая
 * копия разошлась бы с первой ровно как `.mkt-cat` и `.kh-sect-tile` до ⭐U2.
 *
 * Вид — СЕГМЕНТЫ, а не одна кнопка «переключить»: текущий сегмент залит и не кликается, то
 * есть страница сама говорит, в каком она режиме. Тумблером это делать нельзя — за ним
 * стоит переход по адресу, а не состояние формы. */
.bd-viewsw { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
    border: 1px solid var(--border-color); background: #f4f5f7; }
.bd-vw { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none;
    white-space: nowrap; color: var(--text-muted); transition: color .15s, background .15s; }
.bd-vw:hover { color: var(--text-main); background: #e9ebef; }
.bd-vw.on { background: #fff; color: var(--text-main); cursor: default;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.bd-vw.on:hover { background: #fff; }
/* Своя строка под переключателем в каталоге и в карточке: втиснутый в крошки, он читался
   как ещё один элемент навигации, а не как выбор режима страницы. */
.mkt-viewsw-row { margin: 4px 0 14px; }
/* На узком экране полоса не рвётся по одному сегменту, а растягивается целиком: разорванный
   переключатель читается как два не связанных между собой чипа. */
@media (max-width: 480px) {
  .bd-viewsw { display: flex; }
  .bd-vw { flex: 1; justify-content: center; padding: 7px 8px; }
}

/* ============ hero закреплённого продавца (витрина /market) ============ */
.mkt-hero { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--border-color); border-radius: 16px;
    padding: 16px 18px; margin: 0 0 16px; }
.mkt-hero-ava { width: 54px; height: 54px; border-radius: 50%; background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; flex-shrink: 0; }
.mkt-hero-b { flex: 1; min-width: 200px; }
.mkt-hero-nm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-size: 17px; font-weight: 800; }
.mkt-hero-badge { font-size: 11px; font-weight: 700; background: #eff6ff; color: var(--primary);
    border-radius: 999px; padding: 2px 10px; }
.mkt-hero-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mkt-hero-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mkt-hero-acts a { display: inline-block; padding: 8px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--border-color);
    color: var(--text-main); background: #fff; transition: border-color .15s, background .15s; }
.mkt-hero-acts a:hover { border-color: var(--primary); color: var(--primary); }
.mkt-hero-acts a.pri { background: var(--primary); border-color: var(--primary); color: #fff; }
.mkt-hero-acts a.pri:hover { background: var(--primary-hover); color: #fff; }

/* ============ категории: карточки с иконкой и счётчиком ============ */
.mkt-cats { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mkt-cat { display: flex; flex-direction: column; border-radius: 14px; padding: 14px 16px;
    transition: border-color .15s, transform .15s; }
.mkt-cat:hover { border-color: var(--primary); }
.mkt-cat-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.mkt-cat-ico { width: 40px; height: 40px; border-radius: 12px; background: #eef2f8;
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.mkt-cat-h { margin: 0; font-size: 14.5px; }
.mkt-cat-n { font-size: 11.5px; color: var(--text-muted); font-weight: 400; display: block; }

/* ============ плитка объявления ============ */
.mkt-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mkt-tile { border-radius: 14px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.mkt-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .07); }
.mkt-tile-ph { position: relative; overflow: hidden; }
.mkt-tile-ph2 { position: absolute; inset: 0; background: center/cover no-repeat;
    opacity: 0; transition: opacity .25s; }
.mkt-tile:hover .mkt-tile-ph2 { opacity: 1; } /* второй кадр при наведении */
.mkt-tile-bs { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 2; }
.mkt-b { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
    letter-spacing: .3px; }
.mkt-b-new { background: #dcfce7; color: #166534; }
.mkt-b-up { background: #fef3c7; color: #92400e; }
.mkt-b-ver { background: #e0f2fe; color: #075985; }
.mkt-b-auc { background: #fde68a; color: #713f12; }   /* торги: цену назовут ставки */
.mkt-tile-p { font-size: 15.5px; }
.mkt-tile-m { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* пустое состояние выдачи */
.mkt-empty { text-align: center; padding: 44px 16px; color: var(--text-muted);
    background: #fff; border: 1px dashed var(--border-color); border-radius: 16px; }
.mkt-empty .e { font-size: 40px; display: block; margin-bottom: 8px; }

/* ============ каталог: фасеты + сортировка ============ */
.mkt-fdet { flex: 0 0 250px; position: sticky; top: 12px; }
.mkt-fdet > summary { display: none; cursor: pointer; list-style: none;
    background: var(--primary); color: #fff; border-radius: 10px; padding: 10px 14px;
    font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.mkt-fdet > summary::-webkit-details-marker { display: none; }
.mkt-filters { background: #fff; border: 1px solid var(--border-color); border-radius: 14px;
    padding: 14px; }
.mkt-filters .mkt-f-lb { display: block; font-size: 11.5px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px; }
.mkt-filters .mkt-f-lb:first-child { margin-top: 0; }
/* ⭐FASTPATH §9 работа 4: ряд уличных лендингов на странице города. Подпись берёт тот же вид, что
   у заголовков фильтров, — но своим правилом: селектор выше живёт ВНУТРИ `.mkt-filters`, и ряд,
   стоящий над формой, получил бы от него ровно ничего. */
.mkt-streets { margin: 0 0 14px; }
.mkt-streets > .mkt-f-lb { display: block; font-size: 11.5px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; }
.mkt-streets .mkt-kids { margin-bottom: 0; }
.mkt-sortbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px;
    font-size: 13px; color: var(--text-muted); }
.mkt-sortbar b { color: var(--text-main); }

/* ⭐CAT: ВАЛЮТА ГРАНИЦ ЦЕНЫ. Радиокнопки, а не кнопки со скриптом: фильтр — обычная форма
   методом GET, и валюта обязана уехать вместе с числами. Сам кружок прячем — щёлкают по
   таблетке целиком, — но `:focus-visible` оставляем: без него выбор недоступен с клавиатуры. */
.mkt-f-cur { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 0; }
.mkt-f-cur label { display: inline-flex; align-items: center; padding: 5px 11px; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 999px; background: #fff;
    font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* ⚠ Заливка ЛИТЕРАЛОМ `#eff6ff`, а не `var(--primary-light)`: на публичном сайте такой
   переменной НЕТ (она из темы панели), и выбранная таблетка осталась бы прозрачной — то есть
   выбор валюты не был бы виден вовсе. То же соглашение уже у `.st-tool.on` и `.kh-cal-c`. */
.mkt-f-cur label.on { border-color: var(--primary, #2563eb); background: #eff6ff;
    color: var(--primary, #2563eb); }
.mkt-f-cur input { position: absolute; opacity: 0; width: 0; height: 0; }
.mkt-f-cur label:has(input:focus-visible) { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.mkt-f-cur-note { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }

/* ⭐CAT: ПРИМЕНЁННЫЕ ФИЛЬТРЫ. Форма свёрнута в `<details>`, поэтому пришедший по чужой ссылке
   не видел, чем сужена выдача: «ничего не найдено» читалось как «этого нет на площадке». */
.mkt-applied { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.mkt-applied a { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px;
    border-radius: 999px; background: #eff6ff; color: var(--primary, #2563eb);
    font-size: 12.5px; font-weight: 600; text-decoration: none; }
.mkt-applied a i { font-style: normal; opacity: .6; }
.mkt-applied a:hover i { opacity: 1; }
.mkt-applied .mkt-applied-off { background: none; color: var(--text-muted); font-weight: 400; }

/* ⭐CAT: число откликов на плитке. Ноль не рисуется вовсе — разбор у `mktTileHtml`. */
.mkt-tile-bid { color: var(--primary, #2563eb); font-weight: 700; }

/* переключатель вида плитка/список (A2) */
.mkt-view-tog { margin-left: auto; display: inline-flex; border: 1px solid var(--border-color);
    border-radius: 8px; overflow: hidden; }
.mkt-view-tog button { border: none; background: #fff; padding: 5px 11px; cursor: pointer;
    font-size: 15px; line-height: 1; color: var(--text-muted); }
.mkt-view-tog button + button { border-left: 1px solid var(--border-color); }
.mkt-view-tog button.on { background: var(--primary); color: #fff; }

/* режим «список»: горизонтальные строки (фото слева, инфо справа) */
.mkt-grid.list { grid-template-columns: 1fr; gap: 10px; }
.mkt-grid.list .mkt-tile { display: grid; grid-template-columns: 168px 1fr;
    grid-template-rows: auto auto 1fr; }
.mkt-grid.list .mkt-tile-ph { grid-column: 1; grid-row: 1 / 4; aspect-ratio: auto; min-height: 124px; }
.mkt-grid.list .mkt-tile-t { grid-column: 2; grid-row: 1; padding-top: 12px; font-size: 15px; }
.mkt-grid.list .mkt-tile-p { grid-column: 2; grid-row: 2; }
.mkt-grid.list .mkt-tile-m { grid-column: 2; grid-row: 3; align-self: end; }
@media (max-width: 560px) {
    .mkt-grid.list .mkt-tile { grid-template-columns: 112px 1fr; }
    .mkt-grid.list .mkt-tile-ph { min-height: 96px; }
}

/* хлебные крошки и чипы подкатегорий */
.mkt-kids a { background: #fff; transition: border-color .15s, color .15s; }

/* пейджер-пилюли */
.mkt-pager a, .mkt-pager b { border-radius: 999px; min-width: 38px; text-align: center; }
.mkt-pager a:hover { border-color: var(--primary); color: var(--primary); }

/* ============ страница объявления ============ */
.mkt-item-l h1 { font-size: 24px; margin: 12px 0 2px; }
.mkt-item-price { font-size: 28px; }
.mkt-attrs { width: 100%; background: #fff; border: 1px solid var(--border-color);
    border-radius: 12px; overflow: hidden; }
.mkt-attrs td { padding: 8px 14px; border-bottom: 1px solid var(--border-color); }
.mkt-attrs tr:last-child td { border-bottom: none; }
.mkt-attrs td:first-child { width: 42%; }
/* ⭐U: аренда и покупка у одного лота — таблица идёт сразу под витринной ценой, поэтому
   ей нужен свой отступ, а числа держим тем же кеглем, что цена в плитке */
.mkt-deals { margin: 10px 0 4px; }
.mkt-deals b { font-size: 16px; }
.mkt-seller { border-radius: 14px; }
.mkt-seller-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.mkt-seller-ava { width: 42px; height: 42px; border-radius: 50%; background: #eef2f8;
    color: var(--primary); display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; flex-shrink: 0; }
.mkt-seller-head b { font-size: 15px; display: block; }
.mkt-seller-head .kh-note { font-size: 11.5px; }
.mkt-seller .mkt-shop-btn { display: block; text-align: center; padding: 9px 14px;
    border: 1px solid var(--border-color); border-radius: 10px; text-decoration: none;
    font-size: 13px; font-weight: 600; color: var(--text-main); }
.mkt-seller .mkt-shop-btn:hover { border-color: var(--primary); color: var(--primary); }
/* ⭐H: у застройщика на месте кружка с инициалами бывает ЛОГОТИП. Класс тот же (кружок один на
   оба блока — иначе у продавца и застройщика разъехались бы размеры в одной колонке), но
   картинке нужно кадрирование: без `object-fit` логотип 16:9 растянулся бы в овал. */
img.mkt-seller-ava { object-fit: cover; }

/* ── ⭐H: ДОМА ОБЪЕКТА (`lot.buildings`) ─────────────────────────────────────────────
 * Таблица, а не плитки: у корпуса три числа (сдача · этажность · остаток), и сравнивают их
 * СТОЛБЦАМИ — «какой сдают раньше», «где ещё есть выбор». Плитки заставили бы бегать глазом
 * по карточкам, чтобы сложить тот же столбец в голове.
 *
 * ⚠ ШАПКА У `.mkt-attrs` НЕ ОПИСАНА — таблица атрибутов её не имеет вовсе (там пары «ключ —
 * значение»). Здесь столбцов три и они разнородные, поэтому шапка своя. */
.mkt-blocks { margin: 10px 0; }
.mkt-blocks-h { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mkt-blocks-t th { padding: 7px 14px; text-align: left; font-size: 11.5px; font-weight: 600;
    color: var(--text-muted); border-bottom: 1px solid var(--border-color); background: #f8fafc; }
.mkt-blocks-t td:first-child { width: auto; font-weight: 600; }
/* Корпус этой квартиры подсвечен фоном, а не только значком: значок читается, когда его уже
   нашли, а фон отвечает «где я» до чтения. */
.mkt-blocks-t tr.on td { background: var(--primary-light, #eff6ff); }

/* ── ⭐J: ПРИМЕРНЫЙ ПЛАТЁЖ (`lot.mortgage`) ──────────────────────────────────────────
 * Платёж набран крупно — за ним и приходят; цена целиком уже стои́т выше. Оговорка идёт СРАЗУ
 * под числом и того же веса, что подписи таблицы: спрячь её мельче — и число читалось бы как
 * предложение банка, которым оно не является. */
.mkt-loan-h { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mkt-loan-sum { font-size: 26px; font-weight: 700; line-height: 1.1; margin-bottom: 8px; }
.mkt-loan-sum span { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-left: 3px; }
.mkt-loan-t td { padding: 6px 10px; font-size: 12.5px; }
.mkt-loan-note { margin-top: 8px; font-size: 11.5px; line-height: 1.4; }

/* ── ⭐K: БЛИЖАЙШИЕ ВЫЕЗДЫ (`lot.departures`) ────────────────────────────────────────
 * Распроданный выезд ПРИГЛУШЁН, но НЕ УБРАН: он показывает, что маршрут ходит и что места
 * разбирают. Убери его — соседняя дата читалась бы как «единственная», а не как «ближайшая
 * свободная». Зачёркивания нет намеренно: выезд состоится, просто мест на него не осталось. */
.mkt-deps { margin: 10px 0; }
.mkt-deps-t td { padding: 7px 12px; font-size: 12.5px; }
.mkt-deps-t td:first-child { width: auto; font-weight: 600; }
.mkt-deps-t td:last-child { text-align: right; white-space: nowrap; }
.mkt-deps-t tr.off td { opacity: .55; }
.mkt-contact button { width: 100%; }
.mkt-fav { border-radius: 10px; }

/* лицо продавца (⭐U, поверхность `seller`): разбивка «сдаётся/продаётся» и марки в наличии —
   таблетки одного вида, потому что читаются одинаково: «чего и сколько у этого продавца» */
.mkt-slr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.mkt-slr-chips span { border: 1px solid var(--border-color); border-radius: 999px;
    padding: 3px 11px; font-size: 12.5px; color: var(--text-muted); }
.mkt-slr-chips b { color: var(--text-main); }

/* галерея товара (site-слайдер kh-slider): рамка и миниатюры-точки крупнее */
.mkt-item-l .kh-slider-frame { border-radius: 14px; overflow: hidden; }
.mkt-item-l .kh-sl-dots span { width: 9px; height: 9px; }

/* ============ строки «мои objявления» и чаты ============ */
.mkt-row { background: #fff; border: 1px solid var(--border-color); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px; }
.mkt-row:hover { border-color: var(--primary); }

/* ============ профиль продавца (A3): тема через --sp-* переменные ============ */
.sp-page { background: var(--sp-bg); color: var(--sp-text); border-radius: 16px;
    padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.sp-page a { color: var(--sp-acc); }
.sp-hero { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    background: var(--sp-acc) center/cover no-repeat; color: #fff;
    border-radius: var(--sp-rad); padding: 26px 20px; }
.sp-ava { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92);
    color: var(--sp-acc); display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; flex-shrink: 0; object-fit: cover; }
.sp-hero-nm { font-size: 20px; font-weight: 800; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-badge { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.22); color: #fff;
    border-radius: 999px; padding: 2px 10px; }
.sp-hero-tg { font-size: 13.5px; opacity: .92; margin-top: 3px; }
.sp-card, .sp-sec { background: var(--sp-card); border-radius: var(--sp-rad); padding: 16px 18px; }
.sp-sec { background: transparent; padding: 0; }
.sp-h { font-size: 15px; font-weight: 800; margin-bottom: 10px; color: var(--sp-text); }
.sp-md { color: var(--sp-text); line-height: 1.65; font-size: 14px; }
.sp-md a { color: var(--sp-acc); }
.sp-grid { display: grid; grid-template-columns: repeat(var(--sp-cols, 4), 1fr); gap: 10px; }
.sp-tile { display: flex; flex-direction: column; gap: 4px; background: var(--sp-card);
    border-radius: calc(var(--sp-rad) * 0.8); overflow: hidden; text-decoration: none;
    color: var(--sp-text); padding-bottom: 8px; transition: transform .15s; }
.sp-tile:hover { transform: translateY(-2px); }
.sp-tile-ph { display: block; aspect-ratio: 4 / 3; background: rgba(128,128,128,.15) center/cover no-repeat; }
.sp-tile b { font-size: 14px; padding: 4px 10px 0; color: var(--sp-text); }
.sp-tile span { font-size: 12px; padding: 0 10px; color: var(--sp-mut); line-height: 1.35; }
.sp-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
    text-decoration: none; }
.sp-banner { border-radius: var(--sp-rad); background: var(--sp-acc); color: #fff;
    padding: 14px 18px; font-size: 14px; font-weight: 600; }
.sp-banner a { color: #fff; text-decoration: none; display: flex; gap: 10px; align-items: center; }
.sp-banner img { max-height: 60px; border-radius: 8px; }
.sp-gal { display: grid; grid-template-columns: repeat(var(--sp-cols, 3), 1fr); gap: 8px; }
.sp-gal img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--sp-rad) * 0.6); }
.sp-contact { font-size: 15px; font-weight: 700; color: var(--sp-text); }

/* ⭐FASTPATH H1 §2: блоки, приехавшие с запасного вида (доверие, разбивка, марки, карта).
 *
 * Раньше они рисовались ВНЕ темы — на портальном фоне, — и своих цветов им хватало. Теперь
 * рендер один и они попадают внутрь .sp-page, где фон задаёт тема лица. Без этих правил
 * «Бутик» (тёмный) показал бы тёмный портальный текст на тёмном фоне: страница формально
 * работает, а прочесть её нельзя. Правила ЗАПЕРТЫ в .sp-page — вне витрины блоки выглядят
 * ровно как выглядели. */
/* ⭐FASTPATH H2: меню лица. Рисуется на каждой его странице, включая витрину. */
.sp-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-nav-i { display: inline-block; padding: 7px 13px; border-radius: var(--sp-rad);
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    color: var(--sp-mut); background: var(--sp-card); }
.sp-nav-i:hover { color: var(--sp-text); }
.sp-nav-i.on { color: #fff; background: var(--sp-acc); }
/* форма заявки внутри темы: портальные поля на тёмном «Бутике» были бы нечитаемы */
.sp-lead { background: transparent; padding: 0; border: 0; margin-top: 8px; }
.sp-lead input, .sp-lead textarea { background: var(--sp-bg); color: var(--sp-text);
    border: 1px solid rgba(128, 128, 128, .35); border-radius: calc(var(--sp-rad) * 0.6); }
.sp-lead button { background: var(--sp-acc); color: #fff; border: 0;
    border-radius: calc(var(--sp-rad) * 0.6); }

.sp-note { color: var(--sp-mut); font-size: 13px; line-height: 1.5; margin: 0; }
.sp-note li { margin: 2px 0; }
/* нейтральный серый, а не производный от темы: `color-mix` новее всего остального в этом файле,
 * а невалидное объявление оставило бы портальный --border-color — ровно ту невидимость, от
 * которой правило и написано */
.sp-page .mkt-slr-chips span { border-color: rgba(128, 128, 128, .35);
    color: var(--sp-mut); background: var(--sp-card); }
.sp-page .mkt-slr-chips b { color: var(--sp-text); }
.sp-page .mkt-slr-map .kh-btn { background: var(--sp-acc); color: #fff; border-color: transparent; }

@media (max-width: 640px) {
    .sp-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .sp-gal { grid-template-columns: repeat(2, 1fr) !important; }
    .sp-hero { padding: 18px 14px; }
}

/* редактор профиля (/market/profile) */
.spe-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.spe-frame { position: sticky; top: 12px; border: 1px solid var(--border-color); border-radius: 14px;
    overflow: hidden; background: #fff; }
.spe-frame iframe { width: 100%; height: 74vh; border: none; display: block; }
.spe-blk { border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.spe-blk summary { cursor: pointer; font-weight: 700; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.spe-blk summary .t { flex: 1; }
.spe-blk .spe-acts button { font-size: 11px; padding: 2px 8px; }
.spe-blk label { display: block; font-size: 12px; font-weight: 600; margin: 8px 0 3px; }
.spe-blk input, .spe-blk select, .spe-blk textarea { width: 100%; box-sizing: border-box; margin: 0; }

/* ============ B2: кабинет продавца — мини-учёт (/market/sales) ============ */
.mkt-dash { margin: 4px 0 22px; }
.mkt-dash-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mkt-dash-bar select, .mkt-dash-bar a.kh-btn, .mkt-dash-bar button { font-size: 13px; }
.mkt-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mkt-kpi { background: #fff; border: 1px solid var(--border-color); border-radius: 12px;
    padding: 10px 14px; font-size: 12px; color: var(--text-muted); min-width: 108px; }
.mkt-kpi b { display: block; font-size: 20px; font-weight: 800; color: var(--text-main); margin-top: 2px; }
.mkt-kpi.rev { background: linear-gradient(135deg, #6d28d9, #4f46e5); border-color: transparent; color: #ffffffcc; }
.mkt-kpi.rev b { color: #fff; }
.mkt-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.mkt-card { background: #fff; border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; }
.mkt-card h3 { font-size: 13px; margin: 0 0 10px; font-weight: 700; }
.mkt-chart { width: 100%; height: 120px; display: block; }
.mkt-chart-lgd { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.mkt-chart-lgd i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.mkt-toplist { list-style: none; margin: 0; padding: 0; }
.mkt-toplist li { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.mkt-toplist li:last-child { border-bottom: none; }
.mkt-toplist a { flex: 1; text-decoration: none; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-toplist .v { font-weight: 700; color: var(--text-muted); }
.mkt-toks { margin: 0; padding: 0; list-style: none; }
.mkt-toks li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--border-color); font-size: 12.5px; }
.mkt-toks li:last-child { border-bottom: none; }
.mkt-toks .nm { font-weight: 600; }
.mkt-toks .u { color: var(--text-muted); word-break: break-all; flex: 1; min-width: 160px; }
.mkt-toks .u a { color: var(--primary); text-decoration: none; }
@media (max-width: 640px) { .mkt-kpi { flex: 1 1 44%; min-width: 0; } }
@media (max-width: 900px) { .spe-wrap { grid-template-columns: 1fr; } .spe-frame { position: static; } .spe-frame iframe { height: 46vh; } }

/* ============ §10.5: визуальный конструктор главной (/market/landing) ============ */
.lb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.lb-controls { display: flex; flex-direction: column; gap: 12px; }
.lb-preview { position: sticky; top: 12px; }
/* переключатель ширины превью: узкая ширина iframe включает мобильные медиа-запросы site.css */
.lb-pv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.lb-pv-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.lb-pv-seg button { border: 0; border-right: 1px solid var(--border-color); background: #fff; padding: 4px 10px; cursor: pointer; font-size: 14px; line-height: 1; }
.lb-pv-seg button:last-child { border-right: 0; }
.lb-pv-seg button.on { background: var(--primary, #2563eb); color: #fff; }
.lb-pv-wrap { border: 1px solid var(--border-color); border-radius: 14px; background: #f1f5f9; overflow: auto; display: flex; justify-content: center; padding: 10px; }
.lb-pv-wrap iframe { width: 100%; height: 72vh; border: 0; border-radius: 10px; background: #fff; display: block; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); transition: width .18s ease; flex: 0 0 auto; }
.lb-blocks-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-draft { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.lb-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lb-block { border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.lb-b-h { display: flex; align-items: center; gap: 8px; }
.lb-b-h b { flex: 1; font-size: 13.5px; }
.lb-b-acts { display: inline-flex; gap: 4px; }
.lb-b-acts button { border: 1px solid var(--border-color); background: #fff; border-radius: 7px; padding: 2px 9px; cursor: pointer; font-size: 13px; color: var(--text-main); }
.lb-b-acts button:disabled { opacity: .35; cursor: default; }
.lb-b-acts button.no { color: #b91c1c; }
.lb-b-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.lb-f { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 3px; }
.lb-f input { width: 92px; margin: 0; }
/* ⭐S §2 — пикер официальных продавцов раздела (режим аудитории «Выбранные»).
   Чип-переключатель: аватар/монограмма + имя, отмеченный — залит акцентом. */
.lb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-color); background: #fff; border-radius: 999px; padding: 3px 10px 3px 4px; cursor: pointer; font-size: 12.5px; color: var(--text-main); line-height: 1.2; }
.lb-chip img, .lb-mono { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.lb-mono { display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #475569; font-size: 11px; font-weight: 600; }
.lb-chip.on { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.lb-chip.on .lb-mono { background: rgba(255, 255, 255, .25); color: #fff; }
@media (max-width: 900px) { .lb-wrap { grid-template-columns: 1fr; } .lb-preview { position: static; } .lb-pv-wrap iframe { height: 52vh; } }

/* ============ занятость и брони (⭐U волна U3) ============
 * Сетку рисует сервер (`lotCalendarHtml`), здесь только вид. Состояния суток отличаются
 * ЦВЕТОМ И ФАКТУРОЙ, а не одним цветом: «занято» и «закрыто хозяином» — разные новости для
 * гостя, и различать их на глаз обязано быть возможно, в том числе при дальтонизме. */
.kh-cal { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0; }
.kh-cal-m { flex: 0 0 auto; min-width: 236px; }
.kh-cal-h { font-weight: 600; text-transform: capitalize; margin-bottom: 6px; }
.kh-cal-w, .kh-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kh-cal-w span { font-size: 11px; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.kh-cal-c { min-height: 34px; border: 1px solid var(--border-color); border-radius: 6px; display: flex;
    flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; background: #fff; }
.kh-cal-c b { font-weight: 500; line-height: 1.1; }
.kh-cal-c i { font-style: normal; font-size: 9.5px; color: var(--text-muted); line-height: 1; }
.kh-cal-pad { border: 0; background: transparent; }
.kh-cal-c.past { color: #cbd5e1; border-color: #f1f5f9; }
.kh-cal-c.free { cursor: pointer; }
.kh-cal-c.free:hover { border-color: var(--primary, #2563eb); background: #eff6ff; }
.kh-cal-c.busy { background: #fee2e2; border-color: #fca5a5; color: #991b1b; text-decoration: line-through; }
.kh-cal-c.blocked { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 3px, #e2e8f0 3px, #e2e8f0 6px);
    border-color: #cbd5e1; color: #64748b; }
.kh-cal-lg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.kh-cal-k { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-color); display: inline-block; margin-left: 10px; }
.kh-cal-k.free { background: #fff; }
.kh-cal-k.busy { background: #fee2e2; border-color: #fca5a5; }
.kh-cal-k.blocked { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 3px, #e2e8f0 3px, #e2e8f0 6px); }

.mkt-book { display: flex; flex-direction: column; gap: 6px; }
.mkt-book label { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted); gap: 2px; }
.mkt-book input, .mkt-book textarea { margin: 0; }
.mkt-book-q { min-height: 18px; }
.mkt-book-q b { font-size: 15px; color: var(--text-main); }
.mkt-book-no { color: #b91c1c; font-size: 13px; }
.mkt-book-dis { color: #15803d; }

/* очередь заявок в инструментах продавца */
.st-bk { border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.st-bk-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-bk-h b { flex: 1; }
.st-bk-st { font-size: 12px; border-radius: 20px; padding: 1px 9px; border: 1px solid var(--border-color); }
.st-bk-st.pending { background: #fef9c3; border-color: #fde047; }
.st-bk-st.confirmed { background: #dcfce7; border-color: #86efac; }
.st-bk-st.declined, .st-bk-st.cancelled { background: #f1f5f9; color: var(--text-muted); }
.st-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.st-tool { border: 1px solid var(--border-color); border-radius: 10px; padding: 6px 12px; background: #fff; cursor: pointer; }
.st-tool.on { border-color: var(--primary, #2563eb); background: #eff6ff; }
.st-tool .n { background: #ef4444; color: #fff; border-radius: 20px; padding: 0 6px; font-size: 11px; margin-left: 6px; }

/* ============ ⭐S §7.1/§8: медиа-группы ============
 * Обложка помечена рамкой, а не подписью «первая»: продавец узнаёт её тем же, чем узнает
 * покупатель — видом, а не чтением. */
.mkt-media-card { margin: 0; border: 1px solid var(--border-color); border-radius: 12px;
    overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.mkt-media-card.cover { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 1px var(--primary, #2563eb); }
.mkt-media-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.mkt-media-card figcaption { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; }
.mkt-media-card figcaption > span { display: flex; gap: 5px; }
.mkt-media-card .kh-btn { padding: 2px 8px; font-size: 12px; }
.mkt-media-card select, .mkt-media-card input { margin: 0; font-size: 13px; }
#mf-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 8px 0; }

/* режим «сетка миниатюр» — альтернатива карусели (настройка блока lot.gallery) */
.mkt-grid-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.mkt-grid-photos figure { margin: 0; }
.mkt-grid-photos img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; display: block; }

/* альбомы на карточке лота: заголовок папки + своя карусель */
.mkt-album { margin: 0 0 14px; }
.mkt-album > .mkt-f-lb { display: block; margin: 0 0 6px; }
.mkt-album .kh-slide figcaption { font-size: 13px; padding: 4px 8px; }

/* ============ адрес и дом на карточке (E3, backlog-estate §5.5) ============
 * Мини-карта — четыре НАШИХ тайла картинками, без Leaflet: карточку открывают по одной и
 * чаще с телефона, а точка дома не двигается. Сетка 2×2 сдвинута на полтайла, поэтому дом
 * всегда около центра окна; всё, что за окном, режет overflow. */
.mkt-addr { margin: 0 0 14px; }
.mkt-addr-line { font-size: 15px; margin-bottom: 6px; }
.mkt-addr-map { position: relative; display: block; width: 100%; max-width: 420px; height: 220px;
    overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); background: #eef3f7; }
.mkt-addr-tiles { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px;
    margin: -256px 0 0 -256px; display: grid; grid-template-columns: 256px 256px; }
.mkt-addr-tiles img { display: block; width: 256px; height: 256px; }
.mkt-addr-pin { position: absolute; left: 50%; top: 50%; margin: -256px 0 0 -256px;
    transform: translate(-50%, -100%); font-size: 22px; line-height: 1; pointer-events: none; }
.mkt-addr-more { position: absolute; right: 8px; bottom: 8px; background: rgba(255, 255, 255, .9);
    border-radius: 8px; padding: 3px 8px; font-size: 12px; }

/* шаг адреса в форме подачи. Подсказки улиц — список кнопок, а не datalist: тот молчит,
 * когда вариантов нет вовсе, а объяснить пустой справочник обязательно (§10 «ловушки»). */
.mkt-addr-hits { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mkt-addr-hits button { border: 1px solid var(--border-color); background: #fff; border-radius: 999px;
    padding: 3px 10px; font-size: 13px; cursor: pointer; }
.mkt-addr-hits button.on { background: #2563eb; color: #fff; border-color: transparent; }

/* ============ мобильная вёрстка ============ */
@media (max-width: 780px) {
    .mkt-hero { padding: 12px 14px; }
    .mkt-hero-acts { width: 100%; }
    .mkt-hero-acts a { flex: 1; text-align: center; }
    .mkt-fdet { position: static; flex: none; width: 100%; }
    .mkt-fdet > summary { display: block; } /* фильтры сворачиваются в кнопку */
    .mkt-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .mkt-item-l h1 { font-size: 20px; }
    .mkt-item-price { font-size: 24px; }
}