/* =====================================================================
   МОБИЛЬНАЯ ВЕРСИЯ: ТЕЛЕФОН (до 600 px) и ПЛАНШЕТ (601–1024 px). Переписано 8 ноября 2026.
   Подключается в layout.ejs только на экранах до 1024 px и не на страницах админки.
   Цвета, шрифты, радиусы — те же токены, что в styles.css (тёплый светлый фон, Nunito, Source Serif 4).
   Правила: DESIGN_RULES_PHONE.md (телефон) и DESIGN_RULES_TABLET.md (планшет).
   Порядок: 0) общее устройство, 1) телефон, 2) планшет, 3) отдельные случаи по ширине.
   ===================================================================== */


/* =====================================================================
   0. ОБЩЕЕ ДЛЯ ТЕЛЕФОНА И ПЛАНШЕТА: масштаб, шапка, меню справа, отклик на нажатие
   ===================================================================== */
@media (max-width: 1024px) {
  /* масштаб страницы не уменьшаем: размеры заданы настоящие */
  :root { --page-zoom: 1; --radius: 12px; --radius-lg: 16px; --drawer-w: 320px; }
  html { zoom: 1; scrollbar-gutter: auto; -webkit-tap-highlight-color: transparent; }
  /* страницу нельзя увеличить пальцами; увеличивать можно только фото в окне на весь экран */
  body > *:not(.lightbox) { touch-action: pan-x pan-y; }
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
  body { line-height: 1.45; }
  /* длинные названия категорий переносятся по слогам, а не вылезают из плитки */
  .category-tile { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }

  /* шапка: логотип, город, значок сообщений, три полоски */
  .site-header { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__inner { flex-wrap: nowrap; gap: 8px; }
  .logo { flex-shrink: 0; white-space: nowrap; }
  .city-btn { display: inline-flex; flex: 0 1 auto; min-width: 0; max-width: 46vw; border: 0; background: none; color: var(--color-text-muted); font-weight: 500; }
  .city-btn svg { color: var(--color-text-muted); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: 0; border-radius: var(--radius); }
  .header-msg { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: 0; border-radius: var(--radius); color: var(--color-text); }
  .header-msg:hover { text-decoration: none; }
  .header-msg .badge-count { position: absolute; top: 1px; right: -1px; margin: 0; padding: 2px 5px; font-size: 10px; }
  .header-msg + .nav-toggle { margin-left: 0; }

  /* меню выезжает справа */
  .main-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    width: min(var(--drawer-w), 86vw); max-height: none; margin: 0; padding: 0 0 18px; order: 0;
    border: 0; background: var(--color-surface); box-shadow: -12px 0 36px rgba(31, 30, 29, 0.16);
    overflow-y: auto;
    transform: translateX(105%); visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .main-nav.is-open { max-height: none; transform: none; visibility: visible; transition: transform 0.22s ease; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 65; display: block; background: rgba(31, 30, 29, 0.38); opacity: 0; visibility: hidden; transition: opacity 0.2s; }
  .main-nav.is-open ~ .nav-backdrop { opacity: 1; visibility: visible; }
  body:has(.main-nav.is-open) { overflow: hidden; }

  /* верх меню: логотип и крестик в одной строке, под ними карточка профиля на всю ширину */
  .drawer-top { order: -4; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 4px 6px 2px 12px; }
  .drawer-top > .drawer-close { order: -1; margin-left: auto; }
  .drawer-brand { order: -2; display: inline-flex; align-items: center; gap: 7px; padding: 0 2px; color: var(--color-primary-dark); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
  .drawer-brand img { width: 26px; height: 26px; }
  .drawer-brand:hover { text-decoration: none; }
  .drawer-top > .drawer-profile, .drawer-top > .drawer-auth { flex: 1 0 100%; margin-right: 6px; }
  .drawer-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: var(--radius); background: none; color: var(--color-text); cursor: pointer; }
  .drawer-profile { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text); font-weight: 600; }
  .drawer-profile .avatar { background: var(--color-accent-soft); }
  .drawer-profile:hover { text-decoration: none; }
  .drawer-profile__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .drawer-profile__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drawer-profile__hint { color: var(--color-text-muted); font-size: 12px; font-weight: 400; }
  .drawer-profile__chev { flex: none; margin-left: auto; color: var(--color-text-muted); }
  .drawer-top ~ .main-nav__link:first-of-type { margin-top: 0; }
  .drawer-auth { flex: 1; display: flex; gap: 8px; padding: 8px 8px 8px 18px; }
  .drawer-auth .btn { flex: 1; }

  .main-nav__link, .drawer-account a, .drawer-account .nav-link {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; padding: 0 18px; border-radius: 0;
    color: var(--color-text); font-weight: 600;
  }
  .main-nav__link:hover, .drawer-account a:hover, .drawer-account .nav-link:hover { background: none; text-decoration: none; }
  .main-nav .nav-cta { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; margin: 0; padding: 0 18px; border: 0; border-radius: 0; background: none; color: var(--color-text) !important; font-weight: 600; }
  .main-nav .nav-cta:hover { background: none; text-decoration: none; }
  .main-nav__login { display: none; }
  .main-nav .icon-link { display: none; }
  .user-menu { display: none; }
  /* Техподдержка и «Выйти» прижаты к низу меню */
  .drawer-account { display: flex; flex-direction: column; margin: auto 14px 0; padding-top: 6px; border-top: 1px solid var(--color-border); }
  .drawer-account a, .drawer-account .nav-link { padding: 0 4px; color: var(--color-text-muted); text-decoration: none; }
  .drawer-account svg { flex: none; }
  .drawer-account form { margin: 0; }
  .drawer-sep { display: none; }

  /* нажатия: hover после касания «залипает», поэтому он отключён, вместо него отклик на нажатие */
  .btn:hover { background: var(--color-primary); }
  .btn-secondary:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
  .btn-outline:hover { background: transparent; }
  .btn-danger:hover { background: var(--color-danger); }
  .btn-success:hover { background: var(--color-accent); }
  .btn:active { background: var(--color-primary-dark); transform: none; }
  .btn-secondary:active { background: var(--color-subtle); }
  .btn-danger:active { background: var(--color-danger-dark); }
  .btn-success:active { background: var(--color-accent-text); }
  .tab:hover { color: var(--color-text-muted); }
  .tab.active:hover { color: var(--color-text); }
  .side-nav a:hover { background: var(--color-surface); }
  .city-btn:hover, .header-msg:hover, .nav-toggle:hover { background: none; }
  .conversation-item:hover { background: none; }
  .category-tile:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
  .listing-card:hover { transform: none; border-color: var(--color-border); box-shadow: var(--shadow); }
  .listing-card:hover .listing-card__image img { transform: none; }
  .main-nav__link:active, .main-nav .nav-cta:active, .drawer-account a:active, .drawer-account .nav-link:active, .drawer-profile:active,
  .category-tile:active, .listing-card:active, .side-nav a:active, .conversation-item:active, .header-msg:active, .nav-toggle:active { background: var(--color-subtle); }

  /* общая мелочь */
  .form-row { margin-bottom: 14px; }
  /* в ряду, где последнее поле спрятано, у видимого поля нижний отступ не удваивается */
  .form-row:has(> .form-group[hidden]:last-child) > .form-group:nth-last-child(2) { margin-bottom: 0; }
  .form-row--pair .form-group { min-width: 0 !important; }
  .form-section + .form-actions { margin-top: -4px; }
  .listing-comments form .form-group { margin-bottom: 8px; }

  /* фото объявления: без стрелок, листаются пальцем с плавной прокруткой (ленту строит app.js) */
  .listing-gallery__main > .gallery-arrow { display: none; }
  .gallery-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; cursor: zoom-in; }
  .listing-gallery__main.has-track > #main-image { display: none; }
  .photo-drop svg { width: 32px; height: 32px; }
}

/* Меню кабинета на узких экранах (планшет 601–860): ряд кнопок с прокруткой; шире 860 остаётся колонка слева */
@media (max-width: 860px) {
  .two-col { gap: 12px; }
  .side-nav { margin: 0 -14px; padding: 2px 14px 4px; gap: 6px; border: 0; border-radius: 0; background: none; box-shadow: none; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a { padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font-size: 13.5px; }
  .side-nav a.active, .side-nav a.active:hover { border-color: var(--color-text); background: var(--color-text); color: #fff; box-shadow: none; }
  .side-nav .badge-count { margin-left: 4px; }
}


/* =====================================================================
   1. ТЕЛЕФОН (до 600 px): компактно и плотно
   ===================================================================== */
@media (max-width: 600px) {
  :root {
    --font-size-xs: 11.5px;
    --font-size-sm: 13px;
    --font-size-base: 14.5px;
    --font-size-md: 14.5px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 22px;
    --control-height: 42px;
    --page-top: 14px;
    --page-top-detail: 12px;
  }
  .container { padding: 0 14px; }
  .section { padding: 20px 0; }
  .section__head { margin-bottom: 12px; }
  .section__head h2, h2 { font-size: 18px; }
  .page-title, h1.page-title { margin-bottom: 12px; font-size: 22px; line-height: 1.25; }
  .two-col > * { min-width: 0; }

  /* ---------- Шапка и меню ---------- */
  .site-header__inner { min-height: 48px; gap: 6px; padding: 6px 8px 6px 12px; }
  .logo { gap: 6px; font-size: 18px; }
  .logo__mark { width: 28px; height: 28px; }
  .city-btn { position: relative; top: 1px; gap: 3px; min-height: 28px; padding: 0 6px; font-size: 11px; font-weight: 500; }
  .city-btn svg { width: 12px; height: 12px; }
  .nav-toggle, .header-msg { width: 36px; height: 36px; }
  .nav-toggle svg, .header-msg svg { width: 21px; height: 21px; }
  .header-msg + .nav-toggle { margin-left: -4px; }
  .main-nav { font-size: 15px; }
  .main-nav__link, .main-nav .nav-cta, .drawer-account a, .drawer-account .nav-link { min-height: 46px; font-size: 15px; }

  /* ---------- Кнопки и поля ---------- */
  .btn { min-height: 42px; padding: 7px 18px; font-size: 14.5px; }
  .btn-small { min-height: 36px; padding: 5px 14px; font-size: 13.5px; }
  .btn-compact { min-height: 40px; padding: 6px 16px; font-size: 14px; }
  .btn-lg { min-height: 46px; padding: 9px 22px; font-size: 15.5px; }
  .btn-xs { min-height: 32px; padding: 4px 12px; font-size: 13px; gap: 5px; }
  .form-control, select.form-control, .cselect .cselect__btn { min-height: 42px; padding-top: 8px; padding-bottom: 8px; font-size: 14.5px; }
  textarea.form-control { min-height: 96px; }
  .form-group { margin-bottom: 14px; }
  .form-group label, .form-label { margin-bottom: 5px; font-size: 13px; }
  .form-row .form-group { min-width: 100%; }
  .form-hint { font-size: 12.5px; }
  .alert { padding: 10px 12px; font-size: 13.5px; }
  /* iPhone приближает страницу, если в поле шрифт меньше 16 px: только там поля 16 px */
  @supports (-webkit-touch-callout: none) {
    .form-control, .hero-search input[type="search"], .search-row .form-control, .chat-input-row textarea.form-control { font-size: 16px; }
  }

  /* ---------- Вкладки раздела: одна строка на всю ширину, как переключатель ---------- */
  .tabs { flex-wrap: nowrap; gap: 2px; margin-bottom: 12px; padding: 3px; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-subtle); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 auto; justify-content: center; margin: 0; padding: 6px 5px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text-muted); font-size: 12.5px; white-space: nowrap; }
  .tab.active, .tab.active:hover { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(31, 30, 29, 0.12); }
  .tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(31, 30, 29, 0.07); color: var(--color-text-muted); font-size: 10.5px; font-weight: 600; line-height: 1; }
  .tab.active .tab__count { background: var(--color-primary-soft); color: var(--color-primary-dark); }
  .tab__count.is-zero { display: none; }
  /* черновики: значок-карандаш первым сегментом внутри того же переключателя (есть только когда есть черновики) */
  .tabs-bar { display: block; margin-bottom: 12px; border: 0; }
  .tabs-bar .tabs { display: flex; margin-bottom: 0; }
  .tabs .tab--draft { flex: none; width: 34px; padding: 6px 0; }
  .tabs .tab--draft .tab__txt, .tabs .tab--draft .tab__count { display: none; }
  .tabs .tab--draft .tab__ic { display: block; width: 16px; height: 16px; }
  .tab-caption { margin: -2px 2px 12px; font-size: 17px; }

  /* ---------- Окна и списки выезжают снизу экрана ---------- */
  .support-dialog { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; padding: 16px; border: 0; border-radius: 16px 16px 0 0; }
  #city-dialog { width: 100%; }
  .support-dialog__header h2 { font-size: 17px; }
  .city-dialog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 52vh; }
  .city-dialog__list a, .city-dialog__all { padding: 9px 12px; font-size: 14px; }
  .city-dialog__hint { font-size: 13px; }
  .cselect__panel { position: fixed; top: auto; right: 0 !important; bottom: 0; left: 0 !important; z-index: 80; width: auto; min-width: 0; max-width: none; padding-bottom: 8px; border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 0 0 100vmax rgba(31, 30, 29, 0.38); }
  .cselect__list { max-height: 55vh; }
  /* Шторка с поиском (города, районы, категории): постоянной высоты от верха экрана, поле «Найти…» наверху,
     найденное сразу под ним. Раньше шторка при поиске сжималась вниз и пряталась под клавиатурой. */
  .cselect__panel:has(.cselect__search) { top: 30vh; display: flex; flex-direction: column; }
  .cselect__panel:has(.cselect__search) .cselect__top { flex: none; }
  /* «язычок» над шторкой: торчит сверху по центру, нажатие закрывает шторку; места внутри шторки не занимает */
  .cselect__panel { overflow: visible; }
  .cselect__top:not(:has(.cselect__search)) { height: 0; }
  .cselect__close { position: absolute; top: -26px; left: 50%; display: inline-flex; width: 60px; height: 27px; margin: 0; border-radius: 14px 14px 0 0; background: var(--color-surface); color: var(--color-text-muted); transform: translateX(-50%); box-shadow: 0 -4px 10px rgba(31, 30, 29, 0.08); }
  /* «Показать на карте» — в строку с городом, если не помещается — с начала следующей строки; окно с картой почти квадратное */
  .map-link { gap: 5px; padding: 2px 8px 2px 6px; font-size: 11.6px; }
  .map-box--dialog { height: min(440px, 62vh); }
  .map-box--pick { height: 170px; }
  .cselect__panel:has(.cselect__search) .cselect__list { flex: 1; min-height: 0; max-height: none; }
  .cselect__opt { padding: 12px 14px; font-size: 15px; }
  .cselect .cselect__search { margin-top: 12px; }
  /* поле поиска в шторке спокойное; у открытого и только что выбранного фильтра оранжевая рамка, но без тени-свечения */
  .cselect .cselect__search:focus { border-color: var(--color-border-strong); box-shadow: none; }
  .cselect.is-open .cselect__btn, .form-control:focus, .cselect .cselect__btn:focus { border-color: var(--color-primary); box-shadow: none; }

  /* ---------- Главная: картинка сверху, белая шторка с заголовком и поиском заезжает на её низ ---------- */
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 0; border: 0; background: none; }
  .hero picture { order: -1; display: block; }
  .hero__art { display: none; }
  .hero__panorama { position: static; display: block; width: 100%; height: clamp(150px, 45.6vw, 280px); object-fit: cover; object-position: center 30%; -webkit-mask-image: none; mask-image: none; }
  .hero__content { position: relative; z-index: 1; display: block; width: 100%; max-width: none; margin: -24px 0 0; padding: 16px 14px 14px; border-radius: 20px 20px 0 0; background: var(--color-bg); box-shadow: 0 -6px 18px rgba(31, 30, 29, 0.08); }
  .hero h1 { margin: 0; font-size: clamp(19px, 5.3vw, 24px); line-height: 1.2; text-align: center; }
  .hero p { display: none; }
  .hero-search { width: auto; max-width: none; gap: 6px; margin: 12px 0 0; padding: 3px 3px 3px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); box-shadow: none; }
  .hero-search > svg { display: none; }
  .hero-search input[type="search"] { padding: 7px 2px; font-size: 14px; }
  .hero-search .btn { min-height: 36px; padding: 7px 18px; font-size: 14.5px; border-radius: var(--radius-pill); }

  .category-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .category-tile { gap: 4px; padding: 9px 3px 8px; border-radius: var(--radius); box-shadow: none; font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center; }
  .category-tile__icon { width: 34px; height: 34px; font-size: 17px; }

  /* ---------- Карточки объявлений: по две в ряд ---------- */
  .listing-grid, .listing-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .listing-card { overflow: hidden; border-radius: var(--radius-lg); }
  .listing-card__image { aspect-ratio: 6 / 5; border-radius: 0; }
  .listing-card__body { gap: 2px; padding: 8px 10px 10px; }
  .listing-card__title { font-size: 14px; line-height: 1.3; }
  .listing-card__meta--place { align-items: center; margin-top: auto; padding-top: 4px; font-size: 12px; white-space: nowrap; }
  .listing-card__place-text { display: block; -webkit-line-clamp: unset; overflow: hidden; text-overflow: ellipsis; }
  .listing-card__meta--place svg { width: 12px; height: 12px; margin-top: 0; }
  .listing-card__favorite { top: 7px; right: 7px; width: 30px; height: 30px; }
  .listing-card__favorite svg { width: 16px; height: 16px; }
  .listing-card__tag { top: 7px; left: 7px; padding: 2px 7px; font-size: 11px; }

  /* ---------- Каталог: поиск и кнопка «Фильтры», сами фильтры раскрываются ---------- */
  .page-head { gap: 4px 12px; margin-bottom: 10px; }
  .results-count { margin: 0; font-size: 12.5px; }
  .filters-bar { margin-bottom: 12px; padding: 10px; }
  .filters-bar form { gap: 8px; }
  .search-row .form-control { min-height: 38px; padding-left: 12px; font-size: 14px; }
  .search-row .btn { min-height: 38px; padding: 4px 14px; font-size: 14px; }
  .filters-toggle { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .filters-bar.is-open .filters-toggle { border-color: var(--color-primary); background: var(--color-surface); color: var(--color-primary-dark); }
  .filters-row { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filters-bar.is-open .filters-row { display: grid; }
  .filter-field > label { margin: 0 0 4px 2px; font-size: 12.5px; }
  .filter-chips { gap: 6px; margin-bottom: 10px; }

  /* ---------- Подвал ---------- */
  .site-footer { margin-top: 24px; padding: 18px 0 14px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__brand { gap: 10px; }
  .site-footer__brand img { width: 34px; height: 34px; }
  .site-footer__brand strong { font-size: 15px; }
  .site-footer__brand div { font-size: 12.5px; }
  .site-footer__links { gap: 6px 16px; font-size: 13px; }
  .site-footer__copy { margin-top: 12px; padding-top: 10px; font-size: 12px; }

  /* ---------- Страница объявления ---------- */
  .back-link { margin: 0 0 6px; font-size: 13.5px; }
  .listing-detail { gap: 12px; margin-top: 4px; }
  .listing-gallery__main { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
  .listing-gallery__thumbs { flex-wrap: nowrap; gap: 6px; margin-top: 6px; overflow-x: auto; }
  .listing-gallery__thumbs img { flex-shrink: 0; width: 54px; height: 54px; border-radius: 10px; }
  .gallery-arrow { width: 32px; height: 32px; }
  .gallery-arrow--prev { left: 8px; }
  .gallery-arrow--next { right: 8px; }
  .listing-summary, .listing-comments, .listing-seller, .owner-card { padding: 14px; }
  .listing-title, .listing-titlebar .listing-title { font-size: 19px; line-height: 1.25; }
  .listing-titlebar { margin-bottom: 10px; }
  .listing-titlebar .fav-btn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .listing-edit-btn svg { width: 14px; height: 14px; }
  .listing-facts { gap: 10px; }
  .listing-fact dt { margin-bottom: 1px; font-size: 12px; }
  .listing-fact dd, .listing-fact dd.listing-description { font-size: 14.5px; line-height: 1.5; }
  .listing-views-row { margin-top: 12px; padding-top: 10px; }
  .listing-views { font-size: 12px; }
  .listing-owner .avatar, .listing-seller .avatar { width: 36px; height: 36px; font-size: 14px; }
  .report-details summary { font-size: calc(var(--font-size-sm) * 0.85); }
  .listing-comments h2 { font-size: 17px; }
  .listing-comments__head h2 { margin-bottom: 10px; }
  .listing-comments form.mt-4 { margin-top: 0; }
  .comment { gap: 8px; padding: 10px 0; }
  .comment__name, .comment__name:hover { font-size: 14px; }
  .listing-comments .comment-body { font-size: 14px; }
  .handover-note { padding: 10px 12px; font-size: 13.5px; }
  /* плашки над названием: надпись по центру, кнопка «Да» / «Сделать активным» под ней на всю ширину */
  .promise-box:has(.promise-box__actions) { flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 12px; padding: 8px 10px 10px; text-align: center; }
  .promise-box:has(.promise-box__actions) > strong { color: var(--color-text); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
  .promise-box__actions { flex-wrap: nowrap; justify-content: stretch; gap: 8px; }
  .promise-box__actions form { flex: 1; }
  .promise-box__actions .btn { width: 100%; }
  .handover .handover__q, .promise-box.handover > .handover__q { display: block; flex: 0 0 100%; margin: 0; text-align: center; font-size: 12.5px; line-height: 1.25; }
  .handover .promise-box__actions { display: grid; grid-template-columns: 1fr; gap: 6px 8px; }
  .handover form { min-width: 0; }

  /* ---------- Формы ---------- */
  .form-section { margin-bottom: 12px; padding: 14px; }
  .form-section__title { gap: 10px; margin-bottom: 12px; font-size: 16.5px; }
  .form-section__num { width: 26px; height: 26px; font-size: 12.5px; }
  .photo-drop { gap: 6px; padding: 22px 12px; }
  .photo-drop strong { font-size: 15px; }
  .photo-drop__chips { gap: 6px; }
  .photo-drop__chips span, .photo-drop span { padding: 3px 8px; font-size: 12px; }
  .photo-manager { gap: 8px; }
  .choice-group { gap: 8px; }
  .form-actions { gap: 8px; }
  /* «Опубликовать» сверху, «Сохранить черновик» под ней (в разметке порядок прежний, чтобы Enter не публиковал) */
  .form-actions .btn[value="publish"] { order: -1; }
  /* редактирование: «Сохранить изменения» сверху, «Удалить объявление» под ней */
  .form-actions--split { flex-direction: column; align-items: stretch; }

  /* ---------- Кабинет: главная со списком разделов, в разделе стрелка «назад» вместо ряда вкладок ---------- */
  .side-nav { display: none; }
  .two-col { position: relative; }
  .cab-back { position: absolute; top: 0; left: 14px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); color: var(--color-text); }
  .cab-back svg { display: block; width: 18px; height: 18px; }
  .cab-back:hover { text-decoration: none; }
  .cab-back:active { background: var(--color-subtle); }
  .two-col:has(.cab-back) .page-title { display: flex; align-items: center; min-height: 32px; margin-top: 0; padding-left: 42px; }
  .two-col:has(.chat-card) .cab-back { display: none; }
  .dashboard-header-card:not(.profile-head), .stat-grid, .cab-cta { display: none; }
  .cab-hub { display: block; }
  .cab-list { display: block; overflow: hidden; }
  .cab-card { margin-bottom: 10px; padding: 12px 14px; }
  .cab-card .edit-link { display: none; }
  .cab-card__id { gap: 0; }
  .cab-card__top { gap: 12px; }
  .cab-card__top .avatar { width: 44px; height: 44px; font-size: 18px; }
  .cab-card__name { min-width: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .cab-card__meta { font-size: 11.5px; }
  .cab-card__stats { margin-top: 12px; padding-top: 12px; }
  .cab-card__stats div { padding: 0 4px; }
  .cab-card__stats strong { font-size: 20px; }
  .cab-card__stats span { font-size: 11.5px; line-height: 1.2; }
  .cab-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--color-text); font-size: 14.5px; font-weight: 700; }
  .cab-row + .cab-row { border-top: 1px solid var(--color-border); }
  .cab-row:hover { text-decoration: none; }
  .cab-row:active { background: var(--color-subtle); }
  .cab-row__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 12px; background: var(--color-subtle); color: var(--color-text); }
  .cab-row__t { flex: 1; min-width: 0; }
  .cab-row__go { flex: none; color: var(--color-text-muted); }
  .cab-row .badge-count { margin: 0; }

  .dashboard-header-card, .manage-card { margin-bottom: 12px; padding: 10px 14px; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .stat-card { padding: 10px 4px; }
  .stat-card strong { font-size: 20px; }
  .stat-card span { display: block; font-size: 11.5px; line-height: 1.2; }
  .profile-avatar-card { gap: 8px; padding: 14px; }
  .profile-avatar-card .avatar-lg, .avatar-lg { width: 72px; height: 72px; font-size: 28px; }
  .profile-data-card, .profile-card, .password-card { padding: 14px; }
  .empty-state { padding: 22px 14px; font-size: 14px; }
  .conversation-row, .notification-item { gap: 10px; padding: 10px 12px; }
  .conversation-row__text p { font-size: 13px; }
  .notification-item__icon { width: 34px; height: 34px; }
  .notification-item__text { font-size: 14px; }

  /* ---------- Переписка: на весь экран, как мессенджер ---------- */
  /* Высота ровно по видимой части экрана (dvh): иначе клавиатура прокручивала страницу и шапка с именем уезжала под верх сайта */
  html:has(.chat-card), html:has(.forum-app) { height: 100%; overflow: hidden; }
  /* --app-h ставит app.js по реальной видимой высоте (visualViewport); min-height: 0 — иначе общее правило body «100vh» растягивало страницу */
  body:has(.chat-card), body:has(.forum-app) { height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); min-height: 0; overflow: hidden; }
  .chat-card, .forum-card { min-height: 0 !important; }
  main > .container:first-child + .section:has(.chat-card):not(.forum-page) { padding: 0; }
  .section:has(.chat-card):not(.forum-page) > .container.two-col { grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0; }
  .two-col .chat-card { border: 0; border-radius: 0; box-shadow: none; }
  .chat-card { min-height: 0; }
  .chat-head { flex-wrap: wrap; gap: 8px; padding: 6px 10px; }
  .chat-head .avatar { width: 34px; height: 34px; font-size: 14px; }
  .chat-head__name, .chat-head__name:hover { font-size: 15px; }
  .chat-head__listing { font-size: 12.5px; }
  .chat-window { gap: 6px; padding: 10px 12px; }
  .chat-bubble { max-width: 84%; padding: 8px 11px; border-radius: 16px; font-size: 14.5px; }
  .chat-bubble time { margin-top: 2px; font-size: 11px; }
  .chat-input-row { padding: 6px 8px; }
  .forum-msg { max-width: 90%; }
  .forum-msg__bubble { padding: 7px 11px; font-size: 14.5px; }
  /* «Обещанные вещи»: список раскрывается на всю ширину шапки, слова «Передали?» скрыты */
  .chat-head .promised { position: static; }
  .promised summary { padding: 5px 10px; font-size: 12.5px; }
  .promised__list { top: calc(100% + 4px); right: 10px; left: 10px; width: auto; padding: 2px 12px; }
  .promised__q { display: none; }

  /* ---------- Вход, регистрация, справочные страницы ---------- */
  .container.container-narrow { padding: 0 14px; }
  .auth-card { padding: 18px 14px; }
  .auth-card .page-title { font-size: 21px; }
  .auth-lead { margin-bottom: 14px; font-size: 14px; }
  .auth-alt { margin-top: 14px; font-size: 13.5px; }
  .prose, .page-text, .container-medium, .container-wide { font-size: 14.5px; line-height: 1.55; }
  .container-medium h1, .container-wide h1, .container-medium .page-title { font-size: 21px; }
  .container-medium h2, .container-wide h2 { margin-top: 18px; font-size: 17px; }
  details > summary { font-size: 14.5px; }
  .card-padded, .card-padded-sm { padding: 14px; }
  .card-padded h2, .card-padded-sm h2 { margin: 14px 0 6px; font-size: 16px; line-height: 1.3; }
  .card-padded h2:first-child { margin-top: 0; }
  .card-padded p, .card-padded li { font-size: 14px; line-height: 1.5; }
  .card-padded p { margin: 0 0 10px; }
  .card-padded ul { margin: 0 0 10px; padding-left: 20px; }
}

/* узкие телефоны (до 389 px): вкладки плотнее, чтобы всё равно помещались в одну строку */
@media (max-width: 389px) {
  .tab { padding: 6px 3px; font-size: 12px; }
  .tab__count { min-width: 15px; height: 15px; margin-left: 3px; padding: 0 3px; font-size: 10px; }
  .tabs .tab--draft { width: 30px; }
}


/* =====================================================================
   2. ПЛАНШЕТ (601–1024 px): просторнее телефона, но без размеров компьютера
   ===================================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --font-size-xs: 12px;
    --font-size-sm: 13.5px;
    --font-size-base: 15px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 19px;
    --font-size-2xl: 26px;
    --font-size-3xl: 26px;
    --control-height: 44px;
    --page-top: 18px;
    --page-top-detail: 14px;
    --drawer-w: 360px;
  }
  .container { padding: 0 24px; }
  .section { padding: 28px 0; }
  .section__head { margin-bottom: 16px; }
  .section__head h2, h2 { font-size: 20px; }
  .page-title, h1.page-title { margin-bottom: 16px; font-size: 26px; line-height: 1.25; }

  /* ---------- Шапка и меню ---------- */
  .site-header__inner { min-height: 58px; padding: 8px 24px; }
  .logo { gap: 8px; font-size: 21px; }
  .logo__mark { width: 36px; height: 36px; }
  .city-btn { gap: 6px; min-height: 36px; margin-left: 4px; padding: 0 10px; font-size: 13.5px; }
  .city-btn svg { width: 16px; height: 16px; }
  .nav-toggle, .header-msg { width: 42px; height: 42px; }
  .nav-toggle svg, .header-msg svg { width: 23px; height: 23px; }
  .main-nav { font-size: 16px; }
  .main-nav__link, .main-nav .nav-cta, .drawer-account a, .drawer-account .nav-link { min-height: 50px; font-size: 16px; }
  /* iPad приближает страницу, если в поле шрифт меньше 16 px: только там поля 16 px */
  @supports (-webkit-touch-callout: none) {
    .form-control, .hero-search input[type="search"], .search-row .form-control, .chat-input-row textarea.form-control { font-size: 16px; }
  }

  /* ---------- Кнопки и поля ---------- */
  .btn { min-height: 44px; padding: 8px 20px; font-size: 15px; }
  .btn-small { min-height: 38px; padding: 6px 16px; font-size: 14px; }
  .btn-compact { min-height: 42px; padding: 7px 18px; font-size: 14.5px; }
  .btn-lg { min-height: 50px; padding: 10px 26px; font-size: 16px; }
  .btn-xs { min-height: 34px; padding: 4px 13px; font-size: 13.5px; gap: 6px; }
  .form-control, select.form-control, .cselect .cselect__btn { min-height: 44px; font-size: 15px; }
  .form-group label, .form-label { font-size: 14px; }
  .tab { padding: 9px 14px; font-size: 15px; }

  /* ---------- Главная: как на компьютере, картинки по бокам, текст посередине ---------- */
  .hero { padding: 46px 0 76px; }
  .hero__content { width: 60%; max-width: 920px; }
  .hero__art { top: 0; bottom: 0; height: auto; max-width: none; width: clamp(200px, 31vw, 560px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 76%, rgba(0, 0, 0, 0.75) 84%, rgba(0, 0, 0, 0.4) 91%, rgba(0, 0, 0, 0.12) 96%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 76%, rgba(0, 0, 0, 0.75) 84%, rgba(0, 0, 0, 0.4) 91%, rgba(0, 0, 0, 0.12) 96%, transparent); }
  .hero__art--left { left: -12px; }
  .hero__art--right { right: -12px; }
  .hero h1 { margin-bottom: 18px; }
  .hero p { margin-bottom: 28px; }

  .category-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .category-tile { gap: 6px; padding: 12px 6px 10px; font-size: 12.5px; line-height: 1.25; text-align: center; }
  .category-tile__icon { width: 40px; height: 40px; font-size: 20px; }

  /* ---------- Карточки: три в ряд (до 860 px) и четыре ---------- */
  .listing-grid, .listing-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .listing-card__body { padding: 10px 12px 12px; }
  .listing-card__title { font-size: 15px; }
  .listing-card__meta--place { font-size: 12.5px; }

  /* ---------- Каталог: все фильтры видны, кнопки «Фильтры» нет ---------- */
  .filters-bar { padding: 14px; }
  .filters-row { display: grid; }

  /* ---------- Страница объявления ---------- */
  .back-link { margin: 0 0 8px; }
  .listing-gallery__thumbs img { width: 64px; height: 64px; }
  .listing-title, .listing-titlebar .listing-title { font-size: 22px; }
  .listing-summary, .listing-comments, .listing-seller, .owner-card { padding: 18px; }
  .listing-fact dd, .listing-fact dd.listing-description { font-size: 15px; }

  /* ---------- Подвал ---------- */
  .site-footer { margin-top: 32px; padding: 24px 0 18px; }
  .site-footer__brand img { width: 42px; height: 42px; }

  /* ---------- Кабинет, переписка ---------- */
  .stat-card strong { font-size: 24px; }
  .chat-bubble { max-width: 72%; font-size: 15px; }
  .conversation-row, .notification-item { padding: 14px 18px; }
  .auth-card { padding: 28px 24px; }
}

/* Планшет от 700 px: на странице объявления фото слева, описание справа */
@media (min-width: 700px) and (max-width: 1024px) {
  .listing-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "gallery side" "comments comments"; column-gap: 24px; row-gap: 20px; align-items: start; }
}

/* Планшет от 861 px: четыре карточки в ряд */
@media (min-width: 861px) and (max-width: 1024px) {
  .listing-grid, .listing-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* =====================================================================
   3. ОТДЕЛЬНЫЕ СЛУЧАИ ПО ШИРИНЕ
   ===================================================================== */

/* Форум на телефоне и маленьком планшете (до 760 px): ленты чатов сверху нет (владелец: «чаты наверху — плохо»).
   Город переключается списком в шапке: «Чат города [Азов ▾]». */
@media (max-width: 760px) {
  .forum-app { flex-direction: column; }
  /* Мои чаты: кнопка «☰» слева в шапке, список выезжает слева поверх чата */
  .forum-app { position: relative; }
  .forum-chats-btn { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 2px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); cursor: pointer; }
  .forum-chats-btn:active { background: var(--color-subtle); }
  .forum-chats-btn__n { position: absolute; top: 1px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--color-subtle-strong); color: var(--color-text); font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
  .forum-app .forum-side { position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; display: flex; width: min(320px, 84%); border-right: 0; box-shadow: 8px 0 30px rgba(31, 30, 29, 0.16); transform: translateX(-105%); transition: transform 0.22s ease; }
  .forum-app.is-chats-open .forum-side { transform: none; }
  .forum-side-backdrop { position: absolute; inset: 0; z-index: 19; display: block; background: rgba(31, 30, 29, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.22s; }
  .forum-app.is-chats-open .forum-side-backdrop { opacity: 1; pointer-events: auto; }
  .forum-app .forum-side__title { display: flex; justify-content: space-between; height: 52px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--color-border); }
  .forum-side__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; }
  .forum-app .forum-head .chat-head__text { display: none; }
  .forum-app .forum-city { flex: 1; width: auto; max-width: none; }
  /* мусорка справа отдельной колонкой, не налезает на дату */
  .forum-chat-item { display: flex; align-items: center; gap: 2px; }
  .forum-chat { flex: 1; min-width: 0; }
  .forum-chat__remove { position: static; flex-shrink: 0; margin-right: 4px; opacity: 1; }
  .forum-chat__preview { padding-right: 0; }
  .forum-app .forum-card { min-height: 0; }
  .forum-app .forum-head { min-height: 48px; padding: 6px 12px; }
  .forum-head__title { font-size: 15px; }
  .forum-city { width: 170px; max-width: 55%; }
  .forum-city .form-control, .forum-city .cselect__btn { min-height: 38px; font-size: 13.5px; }
}

/* Предупреждения на телефоне */
@media (max-width: 600px) {
  .warn-bar { padding: 8px 12px; font-size: 12.5px; }
  .warn-chip > summary { padding: 2px 8px; font-size: 12px; }
  .warn-chip__pop { width: 280px; }
}