/* Мобильный слой Автомака (С26.1).
   Макеты-эталоны рисовались под десктоп: на телефоне у них мелкие тач-цели,
   текст ниже 11px, поля с кеглем <16px (iOS зумит страницу при фокусе) и
   переполнение на узких экранах (320–360px). Здесь — только правки под
   телефон; десктоп остаётся в точности как в прототипах, поэтому весь файл
   живёт внутри медиазапросов. Подключается последним, после CSS страницы. */

@media (max-width: 760px) {

  /* ===== 1. Поля ввода: iOS зумит вьюпорт, если кегль меньше 16px,
     и обратно не отдаляет — на телефоне все поля 16px ===== */
  input, select, textarea, button,
  .field, .fbar select.field, #m-calc .field {
    font-size: 16px;
  }
  /* Кнопки-пилюли кегль держат свой — 16px нужен именно полям ввода */
  .btn, .chip, .cta, button.btn, .m-close, .lb-btn, .send-btn, .tgl { font-size: revert; }
  .fbar select.field { max-width: none; }
  .fbar .mob-open { flex-wrap: wrap; }
  .fbar .mob-open .btn, .fbar .mob-open select.field { min-width: 0; }

  .ai-line input { font-size: 16px; }   /* у поля был font:inherit — правило ниже по весу */

  /* ===== 2. Тач-цели: минимум 44px по короткой стороне (HIG/WCAG 2.5.8) =====
     Каркаса два: эталонный (nav.top) и сайтовый (header.top) — правила парные,
     иначе половина экранов остаётся с мелкими целями (С30). */
  nav.top .tgl, header.top .tgl { width: 44px; height: 44px; }
  nav.top .cta, header.top .cta { padding: 11px 18px; }
  nav.top .brand, header.top .brand { display: inline-flex; align-items: center; min-height: 44px; }
  nav.top .bell, header.top .bell { width: 44px; height: 44px; }
  /* Ссылки-строки внутри карточек и списков: 24px по короткой стороне — минимум
     WCAG 2.5.8; крупнее делать нельзя, иначе списки разъезжаются (урок футера). */
  .panel a:not(.btn):not(.chip):not(.mdl), .kpi a, .req a, .tl a, .nlist a,
  .srow a, .foot a, .legal a, .an a { min-height: 24px; }
  /* Мелочь, которая осталась на экранах сайтового каркаса: ссылка-возврат в
     шапке раздела, имя авто в списке, чип чата и крестик удаления чата. */
  .hello .right a, .page-head .right a { display: inline-flex; align-items: center; min-height: 32px; }
  .car .name a, .name > a { display: inline-flex; align-items: center; min-height: 24px; }
  .ai-chip > a { min-height: 24px; }
  .ai-chip form button, .chats form button { min-width: 24px; min-height: 24px; }
  .car .ph .fav { width: 44px; height: 44px; top: 8px; right: 8px; }
  .car .ph .fav svg { width: 18px; height: 18px; }
  .car .more { padding: 8px 0; }
  /* Тач-цель футера была 12px паддинга сверху и снизу: при кегле 12.5px ссылки
     разъезжались на 46px друг от друга и футер визуально рассыпался.
     9px даёт 33px по высоте — палец попадает (WCAG 2.5.8 просит 24), а список
     снова читается списком. */
  footer.rich a { padding: 9px 0; margin-top: 2px; }
  footer.rich .foot-grid > div > a { display: block; }
  .crumbs a { display: inline-block; padding: 11px 0; }
  .btn-shield { padding: 12px 20px; }
  .lb-btn { min-width: 46px; }
  .chip { padding: 10px 16px; }
  .yr-chips .chip { padding: 11px 16px; }
  .actchips .ac { padding: 8px 8px 8px 13px; }
  .actchips .ac i { width: 20px; height: 20px; }
  .cat { padding: 4px 0; }
  /* Ссылки внутри текста: 40px по высоте — без разрежения абзаца в разы */
  p a, .muted a, .an a, .sub a { display: inline-block; padding: 10px 0; }
  input[type="range"], input[type=range].bslider { height: 44px; }
  /* «весь каталог с фильтрами →» и подобные — отдельной строкой и с высотой пальца */
  a.muted { display: inline-block; padding: 10px 0; }
  .safe-cta a, .shield ~ a, a.btn-line { padding-block: 12px; }

  /* ===== 3. Читаемость: нижние ступени шкалы кегля подняты на телефоне ===== */
  .eyebrow { font-size: 11.5px; letter-spacing: .2em; }
  .badge { font-size: 11.5px; }
  .car .meta { font-size: 12px; }
  .car .price small { font-size: 11.5px; }
  .car .foot .badge { font-size: 11.5px; }
  .buy .cd span, .countdown span { font-size: 11px; }
  .bud .val small, .bud small { font-size: 11.5px; }
  /* Подписи миниатюр — декоративные заглушки (уступят место фото), держим их
     мелкими и в пределах плитки, иначе слово вылезает за край. */
  .lot-thumbs .ph::before, .gal .thumbs .ph::before { font-size: 9.5px; padding: 3px; overflow: hidden; }
  /* Имя авто на плейсхолдере не должно уезжать под сердечко */
  .car .ph::before { padding: 10px 50px 10px 12px; }
  .scen .lbl { font-size: 11px; }
  .buybar .p small { font-size: 11px; }
  footer.rich h5 { font-size: 11.5px; }
  .stats span { font-size: 11.5px; letter-spacing: .08em; }
  .g-list span, .why span, .steps-m li { font-size: 12.5px; }
  .rail .mini .t .price, .cars-rail small { font-size: 11.5px; }
  .scen .muted, .cb-note, .calc-note, .assist-note, .dep { font-size: 12px; }
  .muted { font-size: inherit; }
  .chat-head .t span { font-size: 12px; }
  .lot-meta { font-size: 13.5px; }
  .spec { font-size: 14px; }
  .arow { font-size: 13.5px; }

  /* ===== 4. Липкая панель фильтров не должна нырять под навигацию ===== */
  .fbar { top: 80px; }

  /* ===== 4.1. Просвет над плавающей панелью (14px) показывал прокручиваемый
     контент нарезанным пополам. Матовая полоса размывает то, что проходит под
     ней: панель остаётся парящей, а строки текста не режутся. Цвета своего у
     полосы нет — она берёт фон страницы, поэтому шва нет ни в одной теме.
     Живёт на main::before: у body оба псевдослоя заняты фоном, а внутри самой
     панели backdrop-filter не сработал бы — она сама его источник. ===== */
  main::before {
    content: ''; position: fixed; left: 0; right: 0; top: 0; height: 40px;
    z-index: 39; pointer-events: none;                    /* панель выше: z-index 40 */
    /* Плотно до 14px (ровно просвет над панелью), дальше растворяется на 26px —
       на такой длине переход не читается швом даже поверх аур фона. */
    background: linear-gradient(to bottom, var(--amb-1) 0 35%, rgba(0,0,0,0));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }

  /* ===== Кабинет: панели в одну колонку не должны распирать сетку ===== */
  .row2 > *, .row2 .panel { min-width: 0; }
  .srow { flex-wrap: wrap; }
  .srow a { display: inline-block; padding: 8px 0; }
  .srow .chip { padding: 9px 14px; }
  .deal .side .paid small { font-size: 11px; }
  .deal .stage { font-size: 11.5px; }
  /* В макете бейдж льготы на карточке сделки срезался верхней кромкой фото */
  .deal .ph .tag { position: absolute; top: 12px; left: 12px; z-index: 2;
    background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(7,16,30,.3); }

  /* Элемент грида по умолчанию не уже своего содержимого: длинное имя модели
     («SUZUKI WAGON R») распирало колонку и выносило страницу за экран на 33px. */
  .grid-cat > *, .grid3 > *, .row2 > * { min-width: 0; }
  .mdl .nm, .mdl .st, .car .name { overflow-wrap: break-word; }

  /* ===== 4.2. Каталог на телефоне (С31) =====
     Эталонная двухколоночная сетка рисовалась под десктоп: на 390px карточка
     выходила 342px, треть её — пустой блок под фото (живых фото нет до Б3),
     цена и характеристики переносились, и ни одна карточка не влезала в экран
     целиком. На телефоне сетка становится списком-строкой: 8 лотов в экране.
     Разметка та же — меняется только раскладка, поэтому избранное, быстрый
     просмотр и бесконечная прокрутка работают как работали. ===== */
  #grid.grid-cat { grid-template-columns: 1fr; gap: 9px; }
  #grid .car { flex-direction: row; align-items: stretch; gap: 11px; padding: 9px;
    border-radius: 18px; position: relative; }
  #grid .car .ph { width: 82px; height: 66px; flex: none; border-radius: 12px; }
  #grid .car .ph::before { font-size: 0; padding: 0; }          /* имя авто уже в строке */
  #grid .car .ph img { border-radius: 12px; }
  #grid .car .ph .tag { position: absolute; left: 9px; bottom: 9px; font-size: 9px;
    padding: 2px 6px; z-index: 2; }
  #grid .car .ph .fav { width: 30px; height: 30px; top: 3px; right: 3px; }
  #grid .car .ph .fav svg { width: 15px; height: 15px; }
  #grid .car .b { flex: 1; min-width: 0; padding: 1px 0 0; display: flex;
    flex-direction: column; gap: 1px; }
  #grid .car .name { font-size: 15px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  #grid .car .meta.num { font-size: 11.5px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; margin: 0; }
  #grid .car .b > .meta:not(.num) { display: none; }            /* площадка — в карточке лота */
  #grid .car .price { font-size: 17px; margin: 0; line-height: 1.25; white-space: nowrap; }
  #grid .car .price small { font-size: 11px; }
  #grid .car .foot { margin-top: auto; padding-top: 2px; border-top: 0; gap: 8px; }
  #grid .car .foot .badge { font-size: 10.5px; padding: 2px 8px; }
  #grid .car .more { padding: 0; font-size: 12px; }
  #grid .car:hover { transform: none; }                          /* на тач-экране незачем */

  /* Полки витрины: горизонтальные ленты со снапом (тот же приём, что у ленты
     результатов подборщика). Карточка в ленте — компактная, как в сетке. */
  .shelf { margin-bottom: 18px; }
  .shelf .sh-head { display: flex; align-items: baseline; gap: 8px; width: 100%;
    background: none; border: 0; padding: 0 0 9px; text-align: left; color: inherit;
    font-family: var(--font); cursor: pointer; }
  .shelf .sh-head b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
  .shelf .sh-head span { font-size: 11px; color: var(--ink-faint); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shelf .sh-head i { font-style: normal; color: var(--accent); font-size: 15px; }
  .shelf .rail { display: flex; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -22px; padding: 2px 22px 10px; -webkit-overflow-scrolling: touch; }
  .shelf .rail::-webkit-scrollbar { display: none; }
  .shelf .rail .car { flex: none; width: 150px; scroll-snap-align: start;
    flex-direction: column; padding: 0; border-radius: 16px; }
  .shelf .rail .car .ph { width: auto; height: 84px; border-radius: 0; }
  .shelf .rail .car .ph::before { font-size: 0; padding: 0; }   /* имя авто уже под фото */
  .shelf .rail .car .b { padding: 8px 10px 10px; display: block; }
  .shelf .rail .car .name,
  .shelf .rail .car .meta.num,
  .shelf .rail .car .price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shelf .rail .car .name { font-size: 13.5px; }
  .shelf .rail .car .meta.num { font-size: 10.5px; margin: 2px 0 0; }
  .shelf .rail .car .b > .meta:not(.num) { display: none; }   /* площадка — в карточке лота */
  .shelf .rail .car .price { font-size: 15px; margin: 4px 0 0; }
  .shelf .rail .car .price small { display: none; }           /* «под ключ» — в заголовке полки */
  .shelf .rail .car .foot { display: none; }
  .shelf .sh-all { flex: none; width: 110px; scroll-snap-align: start; border-radius: 16px;
    border: 1px dashed rgba(var(--line-c), .35); background: none; color: var(--accent);
    font-family: var(--font); font-size: 12.5px; line-height: 1.5; cursor: pointer; }

  /* Пояснение про оценку цены занимает строку рядом с переключателем и рвётся
     на четыре строки — на телефоне оно живёт в карточке лота, здесь лишнее. */
  #scaleNote { display: none; }

  /* Переключатель вида */
  .viewsw { margin-left: auto; display: inline-flex; background: var(--srf-mid);
    border: 1px solid var(--glass-line); border-radius: 40px; padding: 2px; flex: none; }
  .viewsw button { border: 0; background: none; border-radius: 40px; padding: 7px 12px;
    font-family: var(--font); font-size: 12px; color: var(--ink-soft); cursor: pointer; }
  .viewsw button.on { background: var(--accent-deep); color: #fff; }

  /* ===== 5. Модалки-шторки: скролл только внутри тела, футер всегда виден ===== */
  .modal .m-body { -webkit-overflow-scrolling: touch; }
  .modal .m-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ===== 6. Узкие экраны (320–380px): ничто не должно уезжать за край ===== */
@media (max-width: 380px) {
  nav.top, header.top { padding: 7px 8px 7px 14px; gap: 2px; }
  nav.top .brand, header.top .brand { font-size: 12px; letter-spacing: .18em; margin-right: 6px; }
  nav.top .cta, header.top .cta { padding: 10px 14px; font-size: 12.5px; }
  nav.top .tgl, header.top .tgl { width: 40px; height: 40px; margin-left: auto; }
  /* Сайтовая шапка держит ещё кнопку «Выйти» — на 320px группа не влезала */
  nav.top .bell, header.top .bell { width: 40px; height: 40px; }
  header.top .right { gap: 4px; }
  header.top .right form .btn { padding: 8px 11px; font-size: 12.5px; }
  /* На 320px иконки и кнопка почти слипались (зазор 2px) — разводим */
  nav.top .tgl + .cta, header.top .tgl + .cta { margin-left: 8px; }
  nav.top .bell + .tgl, header.top .bell + .tgl { margin-left: 6px; }

  /* .wrap здесь НЕ трогаем: ленты .rail выходят за поля отрицательным margin
     -22px и рассчитаны ровно на эталонный отступ 22px. */
  /* Длинные пилюли переносят строку, а не выталкивают страницу за экран */
  .btn, .chip, .btn-shield { max-width: 100%; white-space: normal; }
  #foundBadge { flex: none; }
  .chip { text-align: center; }
  .buybar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .buybar .p { font-size: 17px; }
  .buybar .btn { padding: 12px 14px; font-size: 13px; }
  .grid-cat { gap: 8px; }
  .cats { gap: 10px; }
}