/* СудиСам — общий CSS сайта (тема «Кофе» + каркас). Вынесен из base.twig
   2026-10-12: прод на Timeweb отдаёт статику с Cache-Control на год,
   версия в ?v= — mtime файла (глобал css_v). Править стили ЗДЕСЬ,
   а не в base.twig. На каждой странице остался только маленький
   страничный <style> (см. {% block styles %} шаблонов).
   Заглушки 404/503/гейт входа — самодостаточные, этот файл НЕ используют. */


/* ---------- 1. ТОКЕНЫ (тема «Кофе») ---------- */
:root {
    /* Акцент: тёплая сепия */
    --accent-h: 26;
    --accent-s: 44%;
    --accent-l: 36%;
    --soft-l: 96%;                /* светлота мягких акцентных подложек */
    --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-hover: hsl(var(--accent-h), calc(var(--accent-s) + 3%), calc(var(--accent-l) - 10%));
    /* Текстовый акцент темнее акцентного фона: цены и ссылки читаются
       на белом даже в светлых темах (важно для старшего возраста) */
    --accent-text: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 15%));
    --accent-soft: hsl(var(--accent-h), calc(var(--accent-s) * 0.6), var(--soft-l));
    --accent-line: hsl(var(--accent-h), calc(var(--accent-s) * 0.45), calc(var(--soft-l) - 9%));
    --on-accent: #fff;
    --ring: 0 0 0 3px hsl(var(--accent-h), calc(var(--accent-s) * 0.85), 87%);

    /* Нейтраль: tint — «температура» серого у каждой темы */
    --tint-h: 34;
    --tint-s: 28%;
    --bg: hsl(var(--tint-h), calc(var(--tint-s) * 0.85), 96.4%);
    --bg-glow: hsl(var(--accent-h), calc(var(--accent-s) * 0.7), 93%);
    --surface: #fff;
    --surface-glass: rgba(255, 255, 255, .87);
    --surface-2: hsl(var(--tint-h), calc(var(--tint-s) * 0.75), 95%);
    --surface-3: hsl(var(--tint-h), calc(var(--tint-s) * 0.75), 91.5%);
    --border: hsl(var(--tint-h), calc(var(--tint-s) * 0.55), 89%);
    --border-strong: hsl(var(--tint-h), calc(var(--tint-s) * 0.5), 77%);
    --text: #1c1c24;
    --text-soft: #474753;
    --text-muted: #6a6a75;
    --placeholder: #9a9aa6;

    /* Смысловые цвета (статусы, предупреждения) */
    --danger: #b3261e;  --danger-bg: #fdecea;  --danger-line: #f3c6c3;
    --ok: #1b6b39;      --ok-bg: #e9f6ed;      --ok-line: #c0e3cb;
    --warn: #8f5307;    --warn-bg: #fff4e3;    --warn-line: #f4d8ad;
    --info: #17569c;    --info-bg: #eaf2fd;    --info-line: #c3daf6;

    /* Цена — «чистый чёрный» (решение владельца 2026-10-12): главное число
       объявления не зависит от акцента темы и читается на белом максимально
       контрастно. Один токен на все места: карточки, страница объявления,
       кабинет */
    --price: #000;

    /* Тени */
    --shadow-1: 0 1px 2px rgba(22, 22, 32, .05), 0 1px 3px rgba(22, 22, 32, .06);
    --shadow-2: 0 2px 5px rgba(22, 22, 32, .06), 0 10px 24px rgba(22, 22, 32, .09);
    --shadow-3: 0 18px 50px rgba(22, 22, 32, .24);
    --shadow-page: 0 0 70px rgba(22, 22, 32, .07);

    /* Геометрия, ширина листа, масштаб шрифта (html font-size × --ui-scale) */
    --radius: 14px;
    --radius-xs: calc(var(--radius) * 0.45);
    --radius-sm: calc(var(--radius) * 0.68);
    --radius-lg: calc(var(--radius) * 1.6);
    --radius-pill: 999px;
    --page-max: 1440px;
    --ui-scale: 1;
    --border-w: 1px;
    --dur: .16s;

    /* Шрифт. Только без засечек — сознательное требование проекта. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- 3. БАЗА ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: calc(16px * var(--ui-scale));
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; }
img, svg { max-width: 100%; }
/* list-style не трогаем: на статических страницах и в ошибках формы
   списки должны оставаться маркированными (юридические тексты) */
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
/* Ссылка «к содержимому» — для клавиатуры и скринридеров.
   width: max-content + nowrap: при left:50% блок сжимался до половины
   экрана, текст переносился в две строки и краешек торчал над шапкой */
.skip-link {
    position: absolute; left: 0; right: 0; margin: 0 auto;
    width: max-content; max-width: calc(100% - 1rem); white-space: nowrap;
    top: -6rem; z-index: 2000;
    background: var(--accent); color: var(--on-accent);
    padding: .7em 1.4em; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600; transition: top var(--dur);
}
.skip-link:focus { top: 0; }

/* ---------- 4. КНОПКИ ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; padding: .5em 1.15em;
    border-radius: var(--radius-sm);
    font-size: .9375rem; font-weight: 600; line-height: 1.25; text-align: center;
    transition: background var(--dur), color var(--dur), box-shadow var(--dur), transform var(--dur), border-color var(--dur);
}
.btn:active { transform: translateY(1px); }
.btn[hidden] { display: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-2); }
.btn--soft { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 var(--border-w) var(--border); }
.btn--soft:hover { background: var(--surface-3); color: var(--text); }
.btn--outline { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
.btn--outline:hover { background: var(--accent-soft); }
.btn--ghost { background: transparent; color: var(--accent-text); min-height: 40px; }
.btn--ghost:hover { background: var(--accent-soft); }
.btn-sm { min-height: 38px; padding: .35em .85em; font-size: .875rem; border-radius: var(--radius-xs); }
.btn-lg { min-height: 52px; padding: .6em 1.6em; font-size: 1.0625rem; }
.btn-block { width: 100%; }
/* Мелкие кнопки действий (кабинет, админка) */
.btn-approve { background: var(--ok); color: #fff; }
.btn-approve:hover { filter: brightness(.92); }
.btn-reject { background: var(--surface-2); color: var(--danger); box-shadow: inset 0 0 0 var(--border-w) var(--border); }
.btn-reject:hover { background: var(--danger-bg); }
.btn-neutral { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 var(--border-w) var(--border); }
.btn-neutral:hover { background: var(--surface-3); }

/* ---------- 5. ЧИПСЫ И МЕТКИ ---------- */
.tabs { display: flex; gap: .45rem; flex-wrap: wrap; }
.tabs__item {
    display: inline-flex; align-items: center; gap: .4em;
    min-height: 40px; padding: .35em 1em;
    border-radius: var(--radius-pill);
    font-size: .9375rem; font-weight: 500; color: var(--text-soft);
    background: var(--surface-2); box-shadow: inset 0 0 0 var(--border-w) var(--border);
    transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.tabs__item:hover { background: var(--surface-3); color: var(--text); }
.tabs__item--active, .tabs__item--active:hover {
    background: var(--accent); color: var(--on-accent); font-weight: 600;
    box-shadow: var(--shadow-1);
}

.tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.tags__item {
    display: inline-flex; align-items: center; gap: .35em;
    min-height: 36px; padding: .3em .85em;
    border-radius: var(--radius-pill);
    font-size: .875rem; font-weight: 500; color: var(--text-soft);
    background: var(--surface-2); box-shadow: inset 0 0 0 var(--border-w) var(--border);
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.tags__item:hover { background: var(--surface-3); color: var(--text); }
.tags__item--filter { background: var(--surface); color: var(--accent-text); box-shadow: inset 0 0 0 var(--border-w) var(--accent-line); }
.tags__item--filter:hover { background: var(--accent-soft); }
.tags__item--active, .tags__item--active:hover {
    background: var(--accent); color: var(--on-accent); font-weight: 600;
    box-shadow: inset 0 0 0 var(--border-w) var(--accent);
}
.tags__sep { color: var(--text-muted); align-self: center; font-weight: 700; }

.status-tag {
    display: inline-flex; align-items: center; padding: .15em .7em;
    border-radius: var(--radius-pill); font-size: .78125rem; font-weight: 600;
    background: var(--warn-bg); color: var(--warn); white-space: nowrap;
}
.status-tag--ok { background: var(--ok-bg); color: var(--ok); }
.status-tag--rejected { background: var(--danger-bg); color: var(--danger); }
.status-tag--deleted { background: var(--surface-2); color: var(--text-muted); }
.status-tag--draft { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- 6. ПАНЕЛИ И «ВЫВЕСКА» СТРАНИЦЫ ---------- */
.panel {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* ФИРМЕННЫЙ ЭЛЕМЕНТ САЙТА — коричневая «вывеска» (решение владельца
   2026-10-11): H1 всегда в одном и том же месте — на плашке, справа от
   него главное действие страницы («Дать объявление», в «Жизни» —
   «Рассказать»). Одна и та же плашка на страницах мест, лентах
   объявлений и «Жизни» — по ней сайт узнаётся.
   Разметка: .hero > .hero__text (h1 + .hero__sub) + .hero__action */
.hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: .85rem 1.25rem; flex-wrap: wrap;
    margin: 1rem 1.5rem 0; padding: 1.1rem 1.35rem 1.15rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: var(--on-accent);
    border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.hero__text { min-width: 0; }
.hero h1 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.hero__sub { font-size: .9375rem; opacity: .92; margin-top: .15rem; }
.hero__action { flex: none; }
/* Кнопка на плашке — светлая: акцент уже занят самой плашкой */
.hero .btn--soft { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-1); }
.hero .btn--soft:hover { background: var(--surface-2); color: var(--accent-text); }
/* Раскрывающийся список действий на плашке (решение владельца 2026-10-11):
   «Дать объявление» / «Рассказать о жизни» — одно место для действий вместо
   кнопок, разбросанных по странице. Устройство — <details>/<summary>:
   работает без JavaScript, закрывается при выборе пункта, доступен
   с клавиатуры; из скриптов — только закрытие по клику мимо и Esc */
.hero-menu { position: relative; }
.hero-menu > summary { list-style: none; cursor: pointer; }
.hero-menu > summary::-webkit-details-marker { display: none; }
.hero-menu__caret {
    width: .45em; height: .45em; margin-top: -.25em; margin-left: .1em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform var(--dur), margin var(--dur);
}
.hero-menu[open] .hero-menu__caret { transform: rotate(225deg); margin-top: .15em; }
.hero-menu__list {
    position: absolute; top: calc(100% + .45rem); right: 0; z-index: 80;
    min-width: 15rem; padding: .35rem;
    background: var(--surface); border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.hero-menu__list > * {
    display: block; width: 100%; text-align: left;
    padding: .6em .8em; border-radius: var(--radius-xs);
    font-size: .9375rem; font-weight: 500; color: var(--text);
    transition: background var(--dur), color var(--dur);
}
.hero-menu__list > *:hover { background: var(--surface-2); color: var(--accent-text); }
@media (max-width: 720px) {
    .hero { margin: .8rem .9rem 0; padding: 1rem 1.1rem 1.05rem; gap: .6rem; }
    .hero h1 { font-size: 1.45rem; }
    .hero__action { flex: 1 1 100%; }
    .hero__action .btn { width: 100%; }
    /* На телефоне кнопка во всю ширину плашки, поэтому и список
       раскрывается по всей её ширине (left+right 0), а не «по содержимому» */
    .hero-menu__list { left: 0; right: 0; min-width: 0; }
}

/* ---------- 7. ПОЛЯ ВВОДА (общие; форма подачи сохраняет своё) ---------- */
input[type="text"], input[type="search"], input[type="email"], input[type="number"], select, textarea {
    font-family: inherit; font-size: .9375rem; color: var(--text);
}
::placeholder { color: var(--placeholder); opacity: 1; }

/* ---------- 8. ПЕЙДЖЕР ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: 1rem 1.35rem; }
.pager__off { color: var(--text-muted); opacity: .45; font-size: .9375rem; padding: .5em 1.15em; }
.pager__nums { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.pager__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; min-height: 42px; padding: .3em .5em;
    border-radius: var(--radius-xs); color: var(--text-soft);
    font-size: .9375rem; font-weight: 500;
    box-shadow: inset 0 0 0 var(--border-w) var(--border);
    transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.pager__num:hover { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 var(--border-w) var(--border-strong); }
.pager__num.is-current { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 700; }
.pager__gap { color: var(--text-muted); padding: 0 .2em; }
/* Пейджер вне панели списка (лента «Жизни», объявления автора) —
   сам себе панель */
.pager.main-pager {
    background: var(--surface); border: var(--border-w) solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-1);
    margin: .9rem 1.5rem 1.5rem;
}
@media (max-width: 640px) {
    .pager.main-pager { margin: .7rem .9rem 1.1rem; justify-content: center; }
    .pager.main-pager .pager__nums { order: 3; flex-basis: 100%; justify-content: center; margin-top: .4rem; }
}

/* ---------- 9. СЛУЖЕБНЫЕ БЛОКИ ---------- */
.empty-feed, .empty, .place-empty, .zh-empty {
    padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); font-size: 1rem; line-height: 1.6;
}
.empty-feed a, .empty a, .place-empty a, .zh-empty a { color: var(--accent-text); font-weight: 600; }
.empty-feed a:hover, .place-empty a:hover, .zh-empty a:hover { text-decoration: underline; }

/* ---------- 9б. ЗАГЛУШКА «НЕТ ФОТО» ----------
   Чистый ахроматичный серый, БЕЗ буквы, значка и акцентной подложки —
   решение владельца 2026-10-11 (цветные пятна в списках ему мешают).
   Размеры и форма приходят из контекста: .card__image.ph, .zh-card__img.ph,
   .ad-page__image.ph, .cab-nophoto.ph. Возвращать цвет/букву не нужно. */
.ph { background: linear-gradient(140deg, #ededed, #cfcfcf); }

/* ---------- 10. КАРТОЧКИ ОБЪЯВЛЕНИЙ ----------
   Лента (/o, /user/{id}) — ПЛИТКИ В СЕТКЕ (выбор владельца 2026-10-11:
   «остановимся на... режим ленты Сетка»). Разметка одна —
   см. _ad_card.twig; вид задаёт контекст:
     .cards .card          — плитка (фото 4:3 сверху, текст под ним),
     .place-sec__list .card — строка (в узкой колонке хаба плитки тесны). */
/* Число колонок задано ЯВНО и убывает строго по мере сужения окна:
   5 → 4 → 3 → 2. Так было нельзя: auto-fill + уменьшение minmax в
   медиазапросах давали на границе больше карточек в узком окне, чем
   в широком (5→4→3→2, потом снова 4) — владелец справедливо увидел
   в этом поломку. Ширина карточки при этом держится в 200–300px. */
.cards {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem; padding: 1rem 1.5rem 1.5rem;
}
/* Границы подобраны по арифметике сетки (ширина листа − поля − промежутки),
   чтобы карточка нигде не сжималась меньше ~180px: переключение на 4 колонки
   при 1020px, на 3 — при 830px, на 2 — при 630px */
@media (max-width: 1020px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 830px)  { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 630px)  {
    /* Поля страницы даёт внешний margin (.cards в home/user_ads), у самой
       сетки их нет: раньше отступы удваивались и карточка на телефоне
       сжималась до 157px вместо ~170 */
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: 0; }
    /* В узкой плитке «глагол · категория» дублирует чипсы фильтра сверху
       и растягивает карточку на 4–6 строк — оставляем только место,
       и не больше двух строк, чтобы карточки в ряду были ровными.
       Важно: span места внутри клэмпа должен быть обычным inline —
       inline-flex не переносится по строкам, и -webkit-line-clamp его
       не режет (проверено замером) */
    .cards .card__rubric { display: none; }
    .cards .card__meta {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .cards .card__place { display: inline; }
    .cards .card__place svg { display: inline-block; vertical-align: -1px; }
}
/* Пустая лента и полосы пейджера — на всю ширину сетки, своей панелью */
.cards > .empty-feed,
.cards > .pager,
.cards > .more {
    grid-column: 1 / -1; background: var(--surface);
    border: var(--border-w) solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.cards > .more { border: 0; box-shadow: none; background: transparent; padding-top: .2rem; }

.card {
    cursor: pointer; position: relative; overflow: hidden;
    background: var(--surface); border: var(--border-w) solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur), transform var(--dur), border-color var(--dur);
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--border-strong); }
.card__image {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    background: var(--surface-2); overflow: hidden;
}
.card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__image-placeholder { position: absolute; inset: 0; }
.card__body { padding: .8rem .95rem 1.05rem; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.card__title {
    font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__title a:hover { color: var(--accent-text); }
.card__price {
    font-size: 1.25rem; font-weight: 800; color: var(--price); margin-top: .3rem;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.card__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8125rem; color: var(--text-muted); }
.card__place { display: inline-flex; align-items: center; gap: .3em; }
.card__place svg { width: 13px; height: 13px; flex: none; opacity: .75; }
.card__rubric { color: var(--text-muted); }
/* В плитке текст объявления не показываем — фотографии и цены достаточно */
.card__text { display: none; }

/* Строки — страница места (узкая колонка хаба) */
.place-sec__list .card {
    display: flex; gap: 1.1rem; align-items: stretch;
    background: transparent; border: 0; border-bottom: var(--border-w) solid var(--border);
    border-radius: 0; box-shadow: none; padding: .9rem .5rem;
    transition: background var(--dur);
}
.place-sec__list .card:last-child { border-bottom: 0; }
.place-sec__list .card:hover { background: var(--surface-2); box-shadow: none; transform: none; border-color: var(--border); }
.place-sec__list .card__image {
    flex: 0 0 124px; width: 124px; min-height: 98px; aspect-ratio: auto;
    align-self: stretch; border-radius: var(--radius-sm);
}
.place-sec__list .card__body { padding: 0; gap: .1rem; }
.place-sec__list .card__title { font-size: 1.0625rem; display: block; overflow: visible; }
.place-sec__list .card__price { font-size: 1.1875rem; margin-top: .05rem; }
.place-sec__list .card__text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: .35rem; font-size: .9375rem; line-height: 1.45; color: var(--text-soft);
}

/* Телефон: в двух колонках карточка ~170px — там и шрифт помельче */
@media (max-width: 560px) {
    .card__title { font-size: .9375rem; }
    .card__price { font-size: 1.0625rem; }
    .place-sec__list .card { gap: .8rem; padding: .75rem .4rem; }
    .place-sec__list .card__image { flex-basis: 112px; width: 112px; min-height: 92px; }
}

/* ---------- 11. КАРТОЧКИ «ЖИЗНИ» (статьи) ---------- */
.zh-card {
    display: flex; gap: 1.1rem; padding: .9rem .5rem;
    border-bottom: var(--border-w) solid var(--border); cursor: pointer;
    transition: background var(--dur);
}
.zh-card:last-child { border-bottom: 0; }
.zh-card:hover { background: var(--surface-2); }
.zh-card__img {
    flex: 0 0 148px; width: 148px; min-height: 112px; align-self: stretch;
    border-radius: var(--radius-sm); overflow: hidden; position: relative;
}
.zh-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zh-card__body { flex: 1 1 auto; min-width: 0; }
.zh-card__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.zh-card__title a:hover { color: var(--accent-text); }
.zh-card__meta { font-size: .8125rem; color: var(--text-muted); margin-top: .15rem; }
.zh-card__type {
    display: inline-block; padding: .12em .7em; margin: .35rem .3rem 0 0;
    border-radius: var(--radius-pill); font-size: .75rem; font-weight: 500;
    color: var(--accent-text); background: var(--accent-soft);
}
.zh-card__lead {
    margin-top: .4rem; font-size: .9375rem; line-height: 1.45; color: var(--text-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 560px) {
    .zh-card { gap: .8rem; padding: .75rem .4rem; }
    .zh-card__img { flex-basis: 104px; width: 104px; min-height: 92px; }
    .zh-card__title { font-size: 1rem; }
}

/* ---------- 12. СЕО-ПОДПИСИ И «ПОКАЗАТЬ ЕЩЁ» ----------
   .seo-note — приписка внизу списка (лента, «Жизнь», страница места):
   по центру, мелким серым. Один и тот же вид на всех страницах списков. */
.seo-note {
    margin: 0; padding: 1.25rem 1.5rem 2rem; font-size: .8125rem;
    line-height: 1.6; color: var(--text-muted); text-align: center;
}
.empty-seo { max-width: 34rem; margin: 1.25rem auto 0; font-size: .875rem; line-height: 1.6; color: var(--text-muted); text-align: left; }
.more { display: flex; justify-content: center; padding: 1.1rem 1rem .3rem; }
.btn--more {
    min-width: 15rem; background: var(--surface); color: var(--accent-text);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.btn--more:hover { background: var(--accent); color: var(--on-accent); }
.btn--more.is-busy { opacity: .6; pointer-events: none; }
.more__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================= 2. КАРКАС: шапка, фильтр, подвал,layout =============== */


        /* ==================== КАРКАС СТРАНИЦЫ ==================== */
        .page {
            max-width: var(--page-max); margin: 0 auto; min-height: 100vh;
            background-color: var(--bg);
            background-image: radial-gradient(1100px 420px at 50% -140px, var(--bg-glow), transparent 70%);
            background-repeat: no-repeat;
            box-shadow: var(--shadow-page);
            display: flex; flex-direction: column;
        }
        /* На широком экране колонна сайта отделена от фона тонкими линиями */
        @media (min-width: 1500px) {
            .page { border-left: var(--border-w) solid var(--border); border-right: var(--border-w) solid var(--border); }
        }

        /* ==================== ШАПКА ==================== */
        .header {
            position: sticky; top: 0; z-index: 100;
            background: var(--surface-glass);
            -webkit-backdrop-filter: saturate(1.6) blur(12px);
            backdrop-filter: saturate(1.6) blur(12px);
            border-bottom: var(--border-w) solid var(--border);
            box-shadow: 0 1px 0 rgba(0,0,0,.02), var(--shadow-1);
        }
        /* Полоса-акцент по верхнему краю — «фирменная» деталь, читается
           и в тёмной теме, и в светлой */
        .header::before {
            content: ''; display: block; height: 3px;
            background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 55%, var(--accent) 100%);
        }
        .header__inner {
            display: flex; align-items: center; gap: .9rem 1.25rem;
            padding: .7rem 1.5rem .8rem;
        }
        .header__logo { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
        .header__mark {
            width: 42px; height: 42px; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(145deg, var(--accent), var(--accent-hover));
            color: var(--on-accent); box-shadow: var(--shadow-1); flex: none;
        }
        .header__mark svg { width: 24px; height: 24px; display: block; }
        .header__wordmark { display: flex; flex-direction: column; line-height: 1.12; }
        .header__wordmark-main {
            font-size: 1.9rem; font-weight: 800; color: var(--text);
            letter-spacing: -.02em; white-space: nowrap;
        }
        .header__search { flex: 1 1 260px; min-width: 170px; max-width: 620px; }
        .header__nav { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
        .header__nav a {
            display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
            padding: .45em .8em; border-radius: var(--radius-sm);
            font-size: .9375rem; font-weight: 500; color: var(--text-soft);
            transition: background var(--dur), color var(--dur);
        }
        .header__nav a:hover { background: var(--surface-2); color: var(--text); }
        .header__user-phone { font-size: .75rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }

        /* Поиск: одно поле, белое, заметная кнопка */
        .fsearch { display: flex; align-items: stretch; gap: .45rem; width: 100%; }
        .fsearch input[type="search"] {
            flex: 1 1 auto; min-width: 0; height: 46px; padding: .5em 1.05em;
            border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-pill);
            background: var(--surface); color: var(--text); font-size: 1rem;
            transition: border-color var(--dur), box-shadow var(--dur);
        }
        .fsearch input[type="search"]:focus {
            outline: none; border-color: var(--accent); box-shadow: var(--ring);
        }
        .fsearch__btn {
            flex: none; height: 46px; padding: 0 1.4em;
            border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
            font-size: .9375rem; font-weight: 600; box-shadow: var(--shadow-1);
            transition: background var(--dur);
        }
        .fsearch__btn:hover { background: var(--accent-hover); }

        /* Поиск Яндекса (админ-настройка): их виджет построен на таблицах —
           держим в контейнере и приводим к нашим размерам */
        .ya-search { flex: 1 1 auto; min-width: 0; }
        .ya-search table { width: 100%; }
        /* !important — виджет Яндекса подгружает свои стили после наших и
           иначе возвращает полю белый фон (в тёмных темах это «дыра») */
        .ya-search input[type="search"],
        .ya-search .ya-site-form__input-text {
            width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
            height: 46px; padding: .4em 1.05em;
            color: var(--text) !important; background: var(--surface) !important;
            border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-pill) 0 0 var(--radius-pill);
            outline: none;
        }
        .ya-search input[type="search"]:focus,
        .ya-search .ya-site-form__input-text:focus { border-color: var(--accent); }
        /* Виджет Яндекса дописывает СВОИ стили после наших и с !important
           по селектору с id — перебиваем тем же приёмом (id + классы),
           иначе в тёмных темах поле остаётся белым */
        .header__search #ya-site-form0 .ya-site-form__form .ya-site-form__input-text,
        .header__search #ya-site-form0 .ya-site-form__input-text {
            background-color: var(--surface) !important;
            color: var(--text) !important;
            border-color: var(--border-strong) !important;
        }
        .header__search #ya-site-form0 .ya-site-form__input-text::placeholder { color: var(--placeholder) !important; }
        .ya-search .ya-site-form__submit,
        .ya-search #ya-site-form0 .ya-site-form__submit {
            font: inherit; font-size: .9375rem; font-weight: 600; height: 46px; padding: 0 1.4em;
            background: var(--accent) !important; color: var(--on-accent) !important;
            border: none !important; cursor: pointer;
            border-radius: 0 var(--radius-pill) var(--radius-pill) 0; white-space: nowrap;
        }
        .ya-search .ya-site-form__submit:hover { background: var(--accent-hover) !important; }

        /* ==================== ИНФО-БЛОК ПОД ШАПКОЙ ==================== */
        .site-notice {
            margin: 1rem 1.5rem 0; padding: .85rem 1.15rem;
            background: var(--warn-bg); color: var(--text);
            border: var(--border-w) solid var(--warn-line);
            border-left: 5px solid var(--warn);
            border-radius: var(--radius-sm);
            font-size: .9375rem; line-height: 1.5; text-align: center;
        }
        .maintenance-strip {
            background: var(--danger); color: #fff; text-align: center;
            font-size: .8125rem; font-weight: 600; padding: .5em 1em;
        }

        /* ==================== КРОШКИ ==================== */
        .breadcrumb {
            display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
            padding: 1rem 1.5rem .25rem; font-size: .875rem; color: var(--text-muted);
        }
        .breadcrumb__item { color: var(--text-muted); padding: .15em .1em; }
        .breadcrumb__item:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
        .breadcrumb__current {
            color: var(--text-soft); font-weight: 500;
            max-width: min(70ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .breadcrumb__sep { color: var(--border-strong); }

        /* ==================== ПАНЕЛЬ ФИЛЬТРОВ ==================== */
        .filter-bar {
            margin: 1rem 1.5rem 0; padding: 1rem 1.25rem;
            background: var(--surface);
            border: var(--border-w) solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-1);
        }
        .filter-bar__row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
        /* Селектор «~ а не +»: между строкой «Где?» и следующей лежит <script>
           партиала _geo_filter — соседний + его не перепрыгивает */
        .filter-bar__row ~ .filter-bar__row { margin-top: .7rem; }
        .filter-bar__label {
            flex: 0 0 3.6em; font-weight: 700; font-size: 1rem; color: var(--text-soft);
            line-height: 1.2;
        }
        .filter-bar__row .fcombo, .filter-bar__row .fselect { flex: 0 0 auto; }
        .filter-bar__row .tabs, .filter-bar__row .tags { flex: 1 1 0; min-width: 0; margin-top: 0; }
        @media (max-width: 640px) {
            .filter-bar__label { flex-basis: 100%; }
            .filter-bar__row .tabs--faces { flex-basis: 100%; }
        }

        /* Компактные контролы места: регион/НП (комбобокс с поиском) + радиус */
        .fcombo { position: relative; }
        .fcombo__toggle {
            min-height: 44px; padding: .4em 2.2em .4em 1em;
            border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm);
            background: var(--surface); font-size: .9375rem; font-weight: 500; color: var(--text);
            position: relative; max-width: 260px; text-align: left;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            transition: border-color var(--dur), box-shadow var(--dur);
        }
        .fcombo__toggle:hover { border-color: var(--accent-line); }
        .fcombo__toggle.is-placeholder { color: var(--text-muted); font-weight: 400; }
        .fcombo__toggle:after {
            content: ''; position: absolute; right: .9em; top: 50%;
            width: .5em; height: .5em; margin-top: -.35em;
            border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
            transform: rotate(45deg);
        }
        .fcombo__toggle:disabled { color: var(--text-muted); opacity: .6; cursor: default; }
        .fcombo__clear {
            margin-left: .5em; padding: 0 .25em; color: var(--text-muted);
            font-size: 1.125rem; line-height: 1; border-radius: var(--radius-xs);
        }
        .fcombo__clear:hover { color: var(--accent-text); background: var(--accent-soft); }
        .fcombo__pop {
            position: absolute; top: calc(100% + .35rem); left: 0; z-index: 300;
            width: 300px; background: var(--surface);
            border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
            box-shadow: var(--shadow-2); overflow: hidden;
        }
        .fcombo__search {
            width: 100%; padding: .7em .9em; border: none; border-bottom: var(--border-w) solid var(--border);
            background: var(--surface); font-size: .9375rem;
        }
        .fcombo__search:focus { outline: none; box-shadow: inset 3px 0 0 var(--accent); }
        .fcombo__list { max-height: 300px; overflow-y: auto; }
        .fcombo__item { padding: .55em .8em; font-size: .9375rem; color: var(--text); cursor: pointer; }
        .fcombo__item:hover, .fcombo__item--active { background: var(--accent-soft); color: var(--accent-text); }
        .fcombo__item--reset { color: var(--text-muted); border-bottom: var(--border-w) solid var(--border); }
        .fcombo__empty { padding: .6em .8em; font-size: .875rem; color: var(--text-muted); }
        .fcombo__letter {
            grid-column: 1 / -1; padding: .6em .5em .1em;
            font-size: 1.0625rem; font-weight: 800; color: var(--accent-text);
        }
        .fcombo--grid .fcombo__pop { width: min(660px, calc(100vw - 2rem)); }
        .fcombo__grid {
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2px; max-height: 460px; overflow-y: auto; padding: .4rem;
        }
        .fcombo__link {
            display: block; padding: .5em .7em; font-size: .9375rem; color: var(--text);
            border-radius: var(--radius-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .fcombo__link[hidden] { display: none; }
        .fcombo__link:hover, .fcombo__link--active { background: var(--accent-soft); color: var(--accent-text); }
        .fcombo__link--reset {
            display: block; margin: 0 .4rem; padding: .6em .7em;
            font-size: .9375rem; color: var(--text-muted);
            border-bottom: var(--border-w) solid var(--border);
        }
        .fcombo__link--reset:hover { color: var(--accent-text); }
        .fcombo__link--current { font-weight: 700; color: var(--accent-text); }
        @media (max-width: 900px) { .fcombo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 560px) { .fcombo__grid { grid-template-columns: minmax(0, 1fr); } }
        .fselect {
            min-height: 44px; padding: .4em 2em .4em .8em;
            border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text); font-size: .9375rem;
        }
        .fselect:disabled { opacity: .55; }
        .fselect[hidden] { display: none; }

        /* ==================== КАРКАС: КОНТЕНТ + БОКОВАЯ КОЛОНКА ==================== */
        .layout { display: block; flex: 1 0 auto; }
        /* Колонка сайдбара появляется только когда в ней есть содержимое
           (base.twig добавляет .layout--side по непустому блоку) */
        .layout--side { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 430px); align-items: start; }
        .layout__sidebar { min-height: 200px; }
        .layout--side .layout__sidebar {
            border-left: var(--border-w) solid var(--border);
            padding: 1.25rem 1.5rem 2rem; position: sticky; top: 96px;
        }
        @media (max-width: 1100px) {
            .layout--side { display: block; }
            .layout--side .layout__sidebar {
                position: static; border-left: 0; border-top: var(--border-w) solid var(--border);
                padding: 1.25rem 1.5rem 2rem;
            }
        }

        /* ==================== ФУТЕР ==================== */
        .footer {
            margin-top: auto; padding: 2rem 1.5rem 2.5rem;
            border-top: var(--border-w) solid var(--border);
            background: var(--surface);
            text-align: center; font-size: .875rem; color: var(--text-muted);
        }
        .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; margin-bottom: .9rem; }
        .footer a { color: var(--text-soft); }
        .footer a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
        .footer__legal { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--text-muted); }

        /* ==================== COOKIE-БАННЕР ==================== */
        .cookie-bar {
            position: fixed; left: 50%; transform: translateX(-50%);
            width: min(var(--page-max), 100%); bottom: 0; z-index: 1000;
            display: flex; align-items: center; gap: 1rem;
            background: var(--text); color: var(--surface);
            padding: .9rem 1.5rem; font-size: .875rem; line-height: 1.45;
            box-shadow: 0 -6px 24px rgba(0,0,0,.22);
        }
        .cookie-bar a { color: inherit; text-decoration: underline; }
        .cookie-bar__text { flex: 1; }
        .cookie-bar__ok {
            background: var(--accent); color: var(--on-accent); border: 0;
            border-radius: var(--radius-sm); padding: .6em 1.4em;
            font-size: .9375rem; font-weight: 600; white-space: nowrap;
        }
        .cookie-bar__ok:hover { background: var(--accent-hover); }
        @media (max-width: 640px) {
            .cookie-bar { flex-direction: column; gap: .6rem; text-align: center; padding: .9rem 1rem; }
            .cookie-bar__ok { width: 100%; }
        }

        /* ==================== АДАПТИВ ШАПКИ ==================== */
        @media (max-width: 980px) {
            .header__inner { flex-wrap: wrap; gap: .55rem .9rem; padding: .6rem .9rem .7rem; }
            .header__logo { order: 1; }
            .header__search { order: 3; flex: 1 1 100%; max-width: none; }
            .header__nav {
                order: 4; flex: 1 1 100%; margin-left: 0; justify-content: flex-start;
                flex-wrap: wrap; gap: .25rem .35rem;
            }
            .header__nav a { flex-direction: row; gap: .4em; padding: .45em .7em; background: var(--surface-2); }
            .header__user-phone { font-size: .8125rem; }
            .header { position: static; }   /* на телефоне шапка не съедает экран */
            .layout--side .layout__sidebar { position: static; top: auto; }
        }
        @media (max-width: 640px) {
            .breadcrumb { padding: .8rem .9rem .15rem; }
            .filter-bar { margin: .8rem .9rem 0; padding: .85rem .9rem; }
            .site-notice { margin: .8rem .9rem 0; }
            .header__mark { width: 38px; height: 38px; }
            .header__wordmark-main { font-size: 1.1875rem; }
        }