/* Общие стили SEO-страниц Rapi (каталог + карточка объявления). Источник правды — фигма. */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --bg: #FFFFFF; --card: #F7F7F8; --red: #E5001B; --red-5: rgba(229,0,27,0.05); --red-10: rgba(229,0,27,0.1);
    --text: #070C13; --gray: #96979C; --gray-20: rgba(150,151,156,0.2);
    --featured: #FEDC34; --year-blue: #3538F0; --year-bg: rgba(53,56,240,0.15);
    --footer-bg: #181A20; --footer-text: #C5C5C5;
  }
  html, body { overflow-x: hidden; overscroll-behavior-x: none; }
  body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); }
  .page { width: 100%; display: flex; flex-direction: column; gap: 10px; }
  .page-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
  img { display: block; }
  a { text-decoration: none; color: inherit; }

  /* gap = МИНИМАЛЬНЫЙ зазор между блоками; на широких экранах space-between
     распределяет остаток поверх него, поэтому раскладка 1440 из макета не меняется,
     а на узких (1025–1060) блоки не встают вплотную к переключателю языка */
  .header { width: 100%; max-width: 1440px; margin: 0 auto; padding: 22px 120px;
    display: flex; justify-content: space-between; align-items: center; gap: 24px; }
  .header .logo { width: 50px; height: 50px; border-radius: 180px; }
  /* Левый блок фиксирован 269px (фигма 15000:31886) — от него зависит позиция навигации.
     Ужимается ПЕРВЫМ, когда места мало (испанские подписи длиннее английских и на
     1025–1057px иначе выдавливали навигацию: «Mis anuncios» уезжал в две строки). */
  .header .brand { width: 269px; flex: 0 1 269px; min-width: 50px; }
  .header .logo { flex-shrink: 0; }
  /* навигация и правая группа не сжимаются — squeeze забирает на себя логотип-блок */
  .nav, .head-right { flex: 0 0 auto; }
  .head-right { display: flex; justify-content: flex-end; align-items: center; gap: 40px; }
  .nav { display: flex; align-items: flex-end; gap: 30px; }
  .nav-item, .profile { display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font-weight: 500; font-size: 18px; line-height: 20px; color: var(--gray); transition: color .15s ease; }
  .nav-item img, .profile img { width: 24px; height: 24px; transition: filter .15s ease; }
  .nav-item.active { font-weight: 600; color: var(--red); }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand-name { display: none; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--text); }
  /* переключатель языка (фигма 15007:33217): пилюля 44px с двумя флагами,
     выбранный — подложка Brand/Primary 10% с радиусом 12 */
  .lang-switch { display: flex; align-items: center; height: 44px; padding: 4px 6px;
    background: var(--card); border: 1px solid var(--gray-20); border-radius: 16px; }
  .lang-opt { display: flex; justify-content: center; align-items: center; padding: 6px 10px;
    border-radius: 12px; transition: background .15s ease; }
  .lang-opt.on { background: var(--red-10); }
  .lang-opt img { width: 19px; height: 14px; transition: transform .15s ease; }
  .burger { display: none; border: none; background: none; padding: 0; cursor: pointer; }
  .burger img { width: 24px; height: 24px; display: block; }
  .m-only { display: none; }

  /* мобильное меню (фигма Menu): полноэкранное, открывается бургером */
  .mmenu { position: fixed; inset: 0; z-index: 100; background: #FFF; overflow-y: auto;
    display: flex; flex-direction: column; gap: 50px; padding-bottom: 30px; }
  .mmenu[hidden] { display: none; }
  .mmenu-head { flex-shrink: 0; height: 70px; padding: 0 16px;
    display: flex; justify-content: space-between; align-items: center; }
  .mmenu-head .brand-name { display: inline; }
  .mmenu-head .logo { width: 32px; height: 32px; border-radius: 180px; }
  .mmenu-x { border: none; background: none; padding: 0; cursor: pointer; }
  .mmenu-x img { width: 20px; height: 20px; display: block; }
  .mmenu-group { padding: 0 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
  .mmenu-item { display: flex; align-items: center; gap: 12px; border: none; background: none; padding: 0;
    cursor: pointer; font-family: inherit; font-weight: 400; font-size: 18px; line-height: 20px; color: var(--text); }
  .mmenu-item img { width: 24px; height: 24px; filter: brightness(0); }
  .mmenu-item.active { font-weight: 600; color: var(--red); }
  .mmenu-item.active img { filter: none; }
  /* подгруппа Settings/Language/Help — свой гэп 22 (фигма 15000:32828) */
  .mmenu-sub { align-self: stretch; display: flex; flex-direction: column;
    align-items: flex-start; gap: 22px; }
  /* строка языка: слева иконка+подпись, справа переключатель (фигма 15000:32808) */
  .mmenu-lang { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
  .mmenu-lang .mmenu-item { cursor: default; }
  .mmenu-logout { color: var(--red); }
  .mmenu-logout img { filter: none; }
  .mmenu-divider { align-self: stretch; height: 1px; background: var(--gray-20); }
  .mmenu-foot { margin-top: auto; padding: 0 20px; text-align: center;
    font-size: 12px; line-height: 16px; color: var(--gray); }

  .search-block { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 324px;
    display: flex; flex-direction: column; gap: 14px; }
  .search-row { display: flex; align-items: center; gap: 16px; }
  .search-bar { flex: 1; height: 56px; padding: 10px 16px; display: flex; align-items: center; gap: 6px;
    background: var(--card); border-radius: 16px; }
  .search-bar img { width: 18px; height: 18px; }
  .search-bar input { flex: 1; border: none; background: transparent; outline: none;
    font-family: inherit; font-size: 16px; line-height: 22px; color: var(--text); }
  .search-bar input::placeholder { color: var(--gray); }

  .catalog { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 120px;
    display: flex; flex-direction: column; gap: 30px; }
  .catalog-head { display: flex; justify-content: space-between; align-items: flex-end; }
  .catalog-title { display: flex; align-items: flex-end; gap: 19px; }
  .catalog-title h1 { font-weight: 700; font-size: 24px; line-height: 28px; }
  .catalog-title .found { font-size: 16px; line-height: 22px; color: var(--gray); }
  .sort-row { display: flex; gap: 28px; align-items: center; }
  .sort-row a { font-weight: 500; font-size: 16px; line-height: 22px; color: var(--gray);
    transition: color .15s ease, background .15s ease; }
  .sort-row a.active { font-weight: 700; color: var(--red); }

  .cars-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 20px; column-gap: 24px; }

  .car-card { position: relative; display: flex; flex-direction: column; gap: 16px;
    padding: 0 0 16px; background: var(--card); border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 4px 0 rgba(150,151,156,0.15); color: inherit; }
  /* каскадное появление карточек, догруженных See More (задержка per-card из JS) */
  .card-enter { animation: card-enter .4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes card-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .card-enter { animation: none; }
  }
  .car-card.featured { border: 1.5px solid var(--featured);
    box-shadow: 0 0 11.1px 3px rgba(254,220,52,0.3); }
  /* коробка фото держит пропорцию макета (384:201) на любой ширине: с фиксированной высотой
     на планшетах она вытягивалась в ленту до 3:1 и cover оставлял от фото 17% */
  .card-media { position: relative; display: block; }
  .car-photo { width: 100%; height: auto; aspect-ratio: 384 / 201; object-fit: cover;
    border-radius: 16px 16px 0 0; background: #e8e8ea; }
  /* фото-лента карточки: нативный горизонтальный скролл со снапом (свайп без JS) */
  .card-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 16px 16px 0 0; }
  .card-slider::-webkit-scrollbar { display: none; }
  .card-slider .car-photo { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .featured .car-photo { border-radius: 14.5px 14.5px 0 0; }
  .featured-corner { position: absolute; top: 0; left: 0; width: 54px; height: 54px; }
  .featured-corner .corner-bg { position: absolute; top: 0; left: 0; width: 54px; height: 54px; }
  .featured-corner .arrow { position: absolute; top: 11px; left: 8px; width: 16px; height: 16px; }
  .fav { position: absolute; top: 11px; right: 14px; padding: 8px; display: flex; cursor: pointer;
    background: #FFF; border-radius: 50px; box-shadow: 0 0 4px 1px rgba(150,151,156,0.15);
    transition: background .15s ease; }
  .fav img { width: 18px; height: 18px; transition: transform .15s ease; }
  .photo-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
  .photo-dots i { width: 6px; height: 6px; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,0.4); border: 0.3px solid var(--gray); }
  .photo-dots i.on { background: #FFF; }

  .card-details { padding: 0 16px; display: flex; justify-content: space-between; align-items: center; }
  .card-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .card-name-row { display: flex; align-items: center; gap: 6px; }
  .card-name { font-weight: 600; font-size: 18px; line-height: 22px; }
  .year-badge { padding: 5px 8px; border-radius: 8px; background: var(--year-bg);
    font-weight: 500; font-size: 12px; line-height: 16px; color: var(--year-blue); }
  .card-meta { display: flex; align-items: center; gap: 4px; }
  .card-meta img { width: 18px; height: 18px; }
  .card-meta span { font-size: 14px; line-height: 20px; color: var(--gray); }
  .card-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .old-price { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--red); text-decoration: line-through; }
  .price { font-weight: 700; font-size: 18px; line-height: 23px; }
  .approx-price { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--gray); white-space: nowrap; }
  .card-specs { padding: 0 16px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .spec-chip { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px;
    background: var(--gray); font-weight: 500; font-size: 12px; line-height: 16px; color: #FFF; }
  .spec-chip img { width: 18px; height: 18px; }

  .empty-state { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
    padding: 30px 16px; background: var(--bg); border: 1px solid var(--gray-20); border-radius: 16px; }
  .empty-state .circle { padding: 16px; background: var(--card); border-radius: 100px; }
  .empty-state .circle img { width: 32px; height: 32px; }
  .empty-state h2 { font-weight: 700; font-size: 20px; line-height: 24px; }
  .empty-state p { font-size: 16px; line-height: 22px; color: var(--gray); }
  .btn-clear-filters { height: 50px; padding: 10px 16px; display: flex; align-items: center; justify-content: center;
    gap: 8px; background: var(--red); border-radius: 16px;
    font-weight: 600; font-size: 16px; line-height: 22px; color: #FFF; }

  .see-more { min-width: 180px; height: 50px; padding: 10px 25px; display: flex; align-items: center; justify-content: center;
    background: var(--red-5); border: 2px solid var(--red); border-radius: 20px;
    font-weight: 700; font-size: 16px; line-height: 22px; color: var(--red);
    transition: background .15s ease, color .15s ease; }

  /* Popular Searches (фигма desktop 12610:2012): чипы-перелинковка из PopularSearch */
  .popular-searches { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 120px 40px;
    display: flex; flex-direction: column; gap: 30px; }
  .popular-searches h2 { font-weight: 700; font-size: 24px; line-height: 28px; color: var(--text); }
  .ps-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
  .ps-chip { padding: 12px 20px; background: var(--gray-20); border-radius: 20px;
    font-weight: 600; font-size: 16px; line-height: 20px; color: var(--gray);
    transition: background .15s ease, color .15s ease; }
  /* ховеры — красный акцент, как у остального интерактива; только на устройствах с мышью */
  @media (hover: hover) {
    .ps-chip:hover { background: var(--red-5); color: var(--red); }
    .see-more:hover { background: var(--red); color: #FFF; }
    /* модалка фильтров: бейджи Body/Transmission/Fuel, сегмент All/Used/New, Clear All */
    .pill input:not(:checked) + label:hover { background: var(--red-5); color: var(--red); }
    .segment input:not(:checked) + label:hover { color: var(--text); }
    .clear-all:hover { color: var(--red); }
    /* чипы активных фильтров под поиском (клик = снять фильтр) */
    .chip.active:hover { background: rgba(229, 0, 27, 0.12); }
    /* хедер: пункты навигации и профиль темнеют */
    .nav-item:not(.active):hover, .profile:hover { color: var(--text); }
    .nav-item:not(.active):hover img, .profile:hover img { filter: brightness(0.3); }
    /* футер: серые ссылки и соцсети белеют на тёмном */
    .footer-col a:hover, .footer-bottom a:hover { color: #FFF; }
    .footer-socials a:hover img { filter: brightness(1.9); }
    /* сортировка каталога (десктоп — текстовые ссылки): при ховере чернеет */
    .sort-row a:not(.active):hover { color: var(--text); }
    /* карточка машины: крошки, действия, шаринг, жалоба */
    .crumbs a:hover { color: var(--red); }
    .btn-message:hover { background: #C90018; }
    .btn-contact:hover { background: var(--card); }
    .share-btn:hover { background: var(--card); }
    .share-btn:hover img { filter: brightness(0); }
    .cd-report:hover { color: var(--red); }
    .mmenu-item:not(.active):hover { color: var(--red); }
    .mmenu-lang .mmenu-item:hover { color: var(--text); }
    /* флаги: в макете ховера нет — свой сдержанный (серая подложка + лёгкий зум) */
    .lang-opt:not(.on):hover { background: var(--gray-20); }
    .lang-opt:not(.on):hover img { transform: scale(1.09); }
    .lang-opt.on:hover img { transform: scale(1.05); }
    /* стрелки галереи: полупрозрачные → белые непрозрачные */
    .gal-arrow:hover { background: #FFF; box-shadow: 0 0 6px 2px rgba(150,151,156,0.3); }
    /* сердечко (каталог и карточка): НЕпрозрачный розовый (red-5 растворялся на фото) + увеличение */
    .fav:hover { background: #FEF2F4; box-shadow: 0 0 6px 2px rgba(150,151,156,0.25); }
    .fav:hover img { transform: scale(1.12); }
    .seo-more:hover { color: #C90018; }
    .art-arrow:hover { background: var(--card); }
  }
  /* мобильная форма сортировки — пилюли (окно уже 860px, но мышь есть): темнеют, текст чёрный */
  @media (hover: hover) and (max-width: 860px) {
    .sort-row a:not(.active):hover { background: var(--gray-20); color: var(--text); }
  }

  /* Similar cars you might like (фигма: Homepage w applied/0 result filters) */
  .exact-divider { display: flex; align-items: center; gap: 10px;
    font-weight: 500; font-size: 16px; line-height: 22px; color: var(--gray); }
  .exact-divider .line { flex: 1; height: 1px; background: var(--gray-20); }
  .similar-head { display: flex; flex-direction: column; gap: 15px; }
  .similar-head h2 { font-weight: 700; font-size: 24px; line-height: 28px; }
  .similar-head p { font-size: 16px; line-height: 22px; color: var(--gray); }

  /* SEO-текст из админки (фигма 12610:2025): заголовок 24/28 + серый текст 16/22,
     хвост длинного текста свёрнут за Read more (кламп кратен строке — без резаных строк) */
  .seo-block { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 120px 40px;
    display: flex; flex-direction: column; gap: 30px; }
  .seo-title { font-weight: 700; font-size: 24px; line-height: 28px; color: var(--text); }
  .seo-body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .seo-text { font-size: 16px; line-height: 22px; color: var(--gray);
    max-height: 154px; overflow: hidden; }
  .seo-text.open { max-height: none; }
  .seo-text > * + * { margin-top: 22px; }
  .seo-text h2, .seo-text h3, .seo-text h4 { font-weight: 600; font-size: 18px; line-height: 22px; color: var(--text); }
  .seo-text a { color: var(--red); text-decoration: underline; }
  /* без gap: все строки кратны 22px, кламп режет ровно по границе строки */
  .seo-text ul, .seo-text ol { padding-left: 20px; }
  .seo-more { padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
    font-weight: 600; font-size: 16px; line-height: 20px; color: var(--red); transition: color .15s ease; }

  /* Guides & Articles (фигма 12627:2303): карточки 384, фото 280, лента со стрелками */
  .articles { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 120px 40px;
    display: flex; flex-direction: column; gap: 30px; }
  .articles-head { display: flex; justify-content: space-between; align-items: center; }
  .articles-head h2 { font-weight: 700; font-size: 24px; line-height: 28px; color: var(--text); }
  .art-arrows { display: flex; gap: 7px; }
  .art-arrow { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: #FFF; border: 1px solid var(--gray-20); border-radius: 50px; cursor: pointer;
    box-shadow: 0 0 4px 1px rgba(150,151,156,0.15); transition: background .15s ease; }
  .art-arrow img { width: 16px; height: 16px; }
  .art-arrow.prev img { transform: rotate(90deg); }
  .art-arrow.next img { transform: rotate(-90deg); }
  .art-arrow:disabled { opacity: 0.4; cursor: default; }
  .articles-row { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  .articles-row::-webkit-scrollbar { display: none; }
  .art-card { flex: 0 0 384px; display: flex; flex-direction: column; gap: 15px; scroll-snap-align: start; }
  .art-photo { width: 100%; height: 280px; border-radius: 16px; object-fit: cover; background: #e8e8ea; }
  .art-text { display: flex; flex-direction: column; gap: 8px; }
  .art-label { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--gray); text-transform: uppercase; }
  .art-title { font-weight: 600; font-size: 18px; line-height: 22px; color: var(--text); }

  .footer { width: 100%; margin-top: 20px; background: var(--footer-bg); }
  .footer-inner { max-width: 1440px; margin: 0 auto; padding: 48px 120px;
    display: flex; flex-direction: column; gap: 32px; }
  .footer-top { display: flex; justify-content: space-between; }
  .footer-brand { display: flex; flex-direction: column; gap: 15px; }
  .footer-logo-row { display: flex; align-items: center; gap: 15px; }
  .footer-logo-row img { width: 50px; height: 50px; border-radius: 180px; }
  .footer-logo-row span { font-weight: 700; font-size: 24px; line-height: 28px; color: #FFF; }
  .footer-tagline { width: 300px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--footer-text); }
  .footer-brand-body { display: flex; flex-direction: column; gap: 20px; }
  .footer-socials { display: flex; align-items: center; gap: 15px; }
  .footer-socials img { width: 20px; height: 20px; transition: filter .15s ease; }
  .footer-cols { display: flex; justify-content: flex-end; gap: 100px; }
  .footer-col { display: flex; flex-direction: column; gap: 20px; }
  .footer-col h4 { font-weight: 700; font-size: 16px; line-height: 20px; color: #FFF; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-col a { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--footer-text); transition: color .15s ease; }
  .footer-divider { width: 100%; height: 1px; background: var(--gray-20); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center;
    font-weight: 500; font-size: 12px; line-height: 16px; color: var(--footer-text); }
  .footer-bottom a { color: var(--footer-text); transition: color .15s ease; }
  .footer-legal { display: flex; align-items: center; gap: 20px; }
  .footer-legal .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--footer-text); }

  /* ---- фильтры: кнопка, чипы, модалка (значения из фигма-спеки) ---- */
  .btn-filters { height: 50px; padding: 12px 16px; display: flex; align-items: center; gap: 8px;
    background: var(--red); border-radius: 16px; border: none; cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: 16px; line-height: 22px; color: #FFF; }
  .btn-filters img { width: 24px; height: 24px; }
  .filters-count { padding: 4px 6.5px; border-radius: 50px; background: #FFF;
    font-weight: 700; font-size: 10px; line-height: 12px; color: var(--red); }
  .chips-row { position: relative; display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 10px 20px; }
  .chip.active { display: flex; align-items: center; gap: 10px; padding: 10px 25px; border-radius: 20px;
    background: var(--red-5); border: 2px solid var(--red); transition: background .15s ease;
    font-weight: 700; font-size: 16px; line-height: 22px; color: var(--red); }
  .chip.active img { width: 14px; height: 14px; }
  .clear-all { font-weight: 500; font-size: 16px; line-height: 22px; color: var(--gray); transition: color .15s ease; }
  /* свёрнутые чипы: серая пилюля «+N more» + попап (фигма: More applied filters pop up) */
  .chip.more-pill { padding: 10px 25px; border-radius: 20px; background: var(--gray); border: 2px solid #FFF;
    cursor: pointer; font-family: inherit; font-weight: 700; font-size: 16px; line-height: 22px; color: #FFF; }
  .more-popup { position: absolute; top: calc(100% + 8px); width: 330px; max-width: 100%; padding: 20px;
    display: flex; flex-direction: column; gap: 25px; background: var(--bg);
    border: 1px solid var(--gray-20); border-radius: 16px; box-shadow: 0 12px 32px rgba(7,12,19,0.14); z-index: 40; }
  .more-popup[hidden] { display: none; }
  .more-popup-title { font-weight: 600; font-size: 16px; line-height: 20px; color: var(--gray); }
  .more-popup-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
  .more-popup-grid .chip.active { justify-content: center; }
  /* быстрые фильтры под поиском (фигма Homepage: Price/Mileage/Transmission/Year) */
  .qf { position: relative; }
  .qpill { display: flex; align-items: center; gap: 10px; padding: 10px 25px; border-radius: 20px;
    background: var(--card); border: 0.3px solid var(--gray-20); cursor: pointer;
    font-family: inherit; font-size: 16px; line-height: 22px; color: var(--text); }
  .qpill .chev { width: 14px; height: 14px; }
  .qf.open .qpill .chev { transform: rotate(180deg); }
  .qpop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 321px; max-width: calc(100vw - 32px); padding: 16px 20px; display: none;
    flex-direction: column; gap: 14px; background: var(--card); border: 0.3px solid var(--gray-20);
    border-radius: 16px; box-shadow: 0 12px 32px rgba(7,12,19,0.14); z-index: 40; }
  .qf.open .qpop { display: flex; animation: qpop-in .18s ease-out; }
  /* раскрытие мини-попапа: лёгкое выплывание из-под пилюли (display-toggle -> keyframes, не transition) */
  @keyframes qpop-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.97); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }
  .qpop-head { display: flex; align-items: center; gap: 10px; min-height: 20px; }
  .qtitle { flex: 1; font-weight: 700; font-size: 16px; line-height: 22px; text-align: left; }
  .qradio { display: flex; align-items: center; gap: 4px; cursor: pointer;
    font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text); }
  .qradio input { accent-color: var(--red); width: 16px; height: 16px; margin: 0; }
  .qrow { display: flex; align-items: center; gap: 16px; }
  .qrow input { flex: 1; min-width: 0; border: none; border-bottom: 1px solid var(--gray-20);
    padding: 4px 0; background: transparent; outline: none;
    font-family: inherit; font-size: 16px; line-height: 22px; color: var(--text); }
  .qrow input::placeholder { color: var(--gray); }
  .qrow input::-webkit-outer-spin-button, .qrow input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .qrow input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  .qdash { width: 12px; height: 1px; background: var(--gray); flex-shrink: 0; }
  .qok { padding: 10px 12px; background: var(--red); border: none; border-radius: 16px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 14px; line-height: 20px; color: #FFF; }
  .qopts { display: flex; flex-direction: column; }
  .qopt { padding: 10px 4px; border: none; background: none; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 16px; line-height: 20px; color: var(--text);
    border-bottom: 1px solid var(--gray-20); }
  .qopt:last-child { border-bottom: none; }
  .qopt:hover { color: var(--red); }

  .modal-overlay { position: fixed; inset: 0; background: rgba(7,12,19,0.45); z-index: 50;
    display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
  .modal-overlay.open { display: flex; }

  /* модалка «Save your favorite cars» (фигма Pop-up / Sign In to Save) */
  .auth-overlay { background: rgba(0,0,0,0.5); align-items: center; }
  .auth-modal { width: 500px; max-width: 100%; background: #FFF; border-radius: 30px;
    padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px;
    text-align: center; }
  .auth-modal .amicon { padding: 20px; background: var(--red-5); border-radius: 600px; }
  .auth-modal h2 { font-weight: 700; font-size: 24px; line-height: 28px; }
  .auth-modal p { font-size: 16px; line-height: 22px; color: var(--gray); }
  .auth-modal .ambtns { display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
  .auth-modal .ambtns a, .auth-modal .ambtns button { display: flex; justify-content: center; align-items: center;
    padding: 16px; border-radius: 16px; font-family: inherit; font-weight: 600; font-size: 16px;
    line-height: 20px; cursor: pointer; border: none; }
  .auth-modal .ambtns .am-login { background: var(--red); color: #FFF; }
  .auth-modal .ambtns .am-later { background: #FFF; border: 1px solid var(--gray-20); color: var(--gray); }
  .fmodal { width: 792px; max-width: 100%; background: #FFF; border-radius: 20px;
    display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
  /* заголовок строго по центру (фигма): grid 1fr-auto-1fr, крестик и Clear All по краям */
  .fmodal-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 30px 20px; border-bottom: 1px solid var(--gray-20); }
  .fmodal-head h2 { font-weight: 700; font-size: 24px; line-height: 28px; }
  .fmodal-head .x { justify-self: start; width: 24px; height: 24px; cursor: pointer; border: none; background: none; padding: 0; }
  .fmodal-head .clear-all { justify-self: end; cursor: pointer; background: none; border: none; font-family: inherit;
    font-weight: 500; font-size: 16px; line-height: 22px; color: var(--gray); }
  .fmodal-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
  .segment { display: flex; padding: 4px; background: var(--card); border-radius: 14px; }
  .segment label { flex: 1; text-align: center; padding: 10px 25px; border-radius: 12px; cursor: pointer;
    font-weight: 700; font-size: 16px; line-height: 22px; color: var(--gray); border: 2px solid transparent;
    transition: color .15s ease; }
  .segment input { display: none; }
  .segment input:checked + label { background: #FFF; border-color: var(--red); color: var(--red); }
  .field-row { display: flex; gap: 20px; }
  .field { flex: 1; padding: 16px; background: #FFF; border: 1px solid var(--gray-20); border-radius: 16px;
    display: flex; flex-direction: column; gap: 14px; }
  .field label { font-weight: 400; font-size: 16px; line-height: 22px; }
  .price-label-row { display: flex; justify-content: space-between; align-items: center; }
  .price-cur { display: flex; align-items: center; gap: 10px; }
  .field input[type="number"] { border: none; border-bottom: 1px solid var(--gray-20);
    padding: 4px 0; font-family: inherit; font-size: 16px; line-height: 22px; color: var(--text);
    outline: none; background: #FFF; width: 100%; }

  /* ---- попапы Make/Model/City (фигма: Make pop up / Model pop up) ---- */
  .combo { position: relative; }
  /* плейсхолдер «All makes/models/cities» — обычным весом, конкретный выбор — жирным */
  .combo-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%;
    border: none; background: #FFF; padding: 4px 6px; cursor: pointer;
    font-family: inherit; font-weight: 400; font-size: 16px; line-height: 20px; color: var(--text); text-align: left; }
  .combo-trigger.has-value { font-weight: 700; }
  .combo-trigger:disabled { color: var(--gray); cursor: default; }
  .combo-trigger .chev { width: 18px; height: 18px; transition: transform .15s; }
  .combo.open .combo-trigger .chev { transform: rotate(180deg); }
  .popup { position: absolute; top: calc(100% + 8px); left: 0; width: min(360px, 100%); display: none;
    background: var(--bg); border: 1px solid var(--gray-20); border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(7,12,19,0.14); z-index: 30; }
  .combo.open .popup { display: block; }
  .popup-head { padding: 20px; border-bottom: 1px solid var(--gray-20); }
  .popup-search { height: 44px; padding: 10px 16px; display: flex; align-items: center; gap: 6px;
    background: var(--card); border-radius: 16px; }
  .popup-search img { width: 18px; height: 18px; }
  .popup-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    font-family: inherit; font-size: 14px; line-height: 20px; color: var(--text); }
  .popup-search input::placeholder { color: var(--gray); }
  .popup-list { max-height: 300px; overflow-y: auto; }
  .popup-section { padding: 12px 16px; background: var(--card);
    font-weight: 700; font-size: 14px; line-height: 20px; color: var(--gray); }
  .popup-item { min-height: 50px; padding: 10px 16px; display: flex; align-items: center; gap: 10px;
    font-size: 16px; line-height: 20px; color: var(--text); cursor: pointer; background: var(--bg); }
  .popup-item span { flex: 1; }
  /* глиф марки (фигма Make pop up 13042:22206): 30 в списке, 24 в поле после выбора */
  .popup-item .bicon { width: 30px; height: 30px; flex: none; }
  /* выбранная марка — глиф красится в красный (фигма: иконка Icon/Accent); svg чёрный → filter до #E5001B */
  .popup-item.is-selected .bicon { filter: invert(12%) sepia(94%) saturate(6339%) hue-rotate(350deg) brightness(92%) contrast(104%); }
  .combo-trigger { gap: 6px; }
  .combo-trigger span { flex: 1; }
  .combo-trigger .bicon { width: 24px; height: 24px; flex: none; }
  /* сброс марки → «All makes» без глифа ([hidden] перебивался display:block у img) */
  .bicon[hidden] { display: none; }
  .popup-item .tick { width: 16px; height: 16px; display: none; }
  .popup-item:hover { background: var(--card); }
  .popup-item.is-selected { background: #FEF2F4; color: var(--red); font-weight: 500; }
  .popup-item.is-selected .tick { display: block; }
  #make-rows { display: flex; flex-direction: column; gap: 20px; }
  .add-make { align-self: flex-end; padding: 0; border: none; background: none; cursor: pointer;
    font-family: inherit; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--red); }
  .make-collapsed { display: none; }
  .range-row { display: flex; align-items: center; gap: 16px; }
  .range-row .dash { width: 12px; height: 1px; background: var(--gray); flex-shrink: 0; }
  .accordion { padding: 16px; background: #FFF; border: 1px solid var(--gray-20); border-radius: 16px;
    display: flex; flex-direction: column; gap: 14px; }
  .accordion h3 { font-weight: 400; font-size: 16px; line-height: 22px; }
  .pills { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 20px; }
  .pill input { display: none; }
  .pill label { display: block; text-align: center; padding: 10px; border-radius: 8px; cursor: pointer;
    background: var(--card); border: 1px solid var(--gray-20); transition: background .15s ease, color .15s ease;
    font-size: 14px; line-height: 20px; color: var(--text); }
  .pill input:checked + label { background: var(--red-5); border: 1.5px solid var(--red);
    font-weight: 500; color: var(--red); }
  .fmodal-foot { padding: 30px 20px; border-top: 1px solid var(--gray-20); }
  .fmodal-foot button { width: 100%; height: 50px; background: var(--red); border: none; border-radius: 16px;
    cursor: pointer; font-family: inherit; font-weight: 600; font-size: 16px; line-height: 20px; color: #FFF; }

  /* десктопная раскладка модалки (фигма 12148:2802, порядок = DOM): Make/Model,
     затем пары Year+Price и City+Mileage бок о бок, аккордеоны на всю ширину */
  @media (min-width: 861px) {
    .fmodal-body { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
      padding: 35px 20px 15px; gap: 15px; }
    .fmodal-body > * { grid-column: 1 / -1; min-width: 0; }
    .fmodal-body > .field-year, .fmodal-body > .field-price,
    .fmodal-body > .city-row, .fmodal-body > .field-mileage { grid-column: auto; }
    .segment { margin-bottom: 20px; }
    .add-make { justify-self: end; margin-top: -5px; }
  }

  @media (max-width: 1280px) {
    .header, .catalog, .popular-searches, .seo-block, .articles { padding-left: 40px; padding-right: 40px; }
    .footer-inner { padding: 40px; }
    .search-block { padding: 0 120px; }
    .cars-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .catalog-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sort-row { flex-wrap: wrap; }
  }
  @media (max-width: 1024px) {
    .nav { gap: 18px; }
    .header .brand { width: auto; flex: 0 0 auto; }
    .nav-item span, .profile span { display: none; }
    .search-block { padding: 0 40px; }
  }
  /* ==== мобильная вёрстка каталога (фигма Mobile: Homepage/Menu/Filters/Make/…, 375px) ==== */
  @media (max-width: 860px) {
    .m-only { display: block; }
    .d-only { display: none; }

    /* хедер: логотип 32 + «Rapi», бургер вместо навигации */
    .page-inner { gap: 15px; }
    .page-inner > .search-block { margin-bottom: 15px; }
    .catalog-title .found { white-space: nowrap; }
    .header { height: 70px; padding: 0 16px; }
    .header .logo { width: 32px; height: 32px; }
    .brand-name { display: inline; }
    .nav, .head-right { display: none; }
    .burger { display: block; }

    /* поиск: строка 44px + красная кнопка-иконка фильтров с бейджем-счётчиком */
    .search-block { padding: 0 16px; gap: 30px; }
    .search-row { gap: 9px; }
    .search-bar { height: 44px; min-width: 0; }
    .search-bar input { min-width: 0; font-size: 14px; line-height: 20px; }
    .btn-filters { position: relative; height: 44px; padding: 10px 16px; font-size: 0; gap: 0; }
    .filters-count { position: absolute; top: -8px; right: -6px; background: #FFF;
      border: 1px solid var(--red); }

    /* заголовок + сортировка-пилюли горизонтальной прокруткой */
    .catalog { padding: 0 16px; }
    .catalog-head { flex-direction: column; align-items: stretch; gap: 16px; }
    .catalog-title { justify-content: space-between; }
    .catalog-title h1 { font-size: 20px; line-height: 26px; }
    .catalog-title .found { font-size: 12px; line-height: 16px; }
    .sort-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; gap: 6px;
      scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
    .sort-row::-webkit-scrollbar { display: none; }
    .sort-row a { flex: none; padding: 10px; border-radius: 8px; background: var(--card);
      font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text); }
    .sort-row a.active { background: var(--red); color: #FFF; font-weight: 700; }

    /* чипы активных фильтров: на мобиле живут ПОД заголовком (копия .chips-row-m в каталоге,
       фигма 12663:10121), оригинальная строка под поиском скрыта целиком */
    .search-block .chips-row { display: none; }
    .chips-row-m { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto;
      overscroll-behavior-x: contain; gap: 6px; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
    .chips-row-m::-webkit-scrollbar { display: none; }
    .chip.active { flex: none; padding: 9px 15px; font-size: 14px; line-height: 20px; }
    .chip.more-pill, .qf { display: none; }
    .clear-all { flex: none; }

    .cars-grid { grid-template-columns: 1fr; row-gap: 18px; }
    .see-more { height: 44px; min-width: 0; padding: 10px 30px; font-size: 14px; line-height: 20px; }
    /* Popular Searches mobile (фигма 12709:18591): чипы 40px, текст 14/20 Medium */
    .popular-searches { padding: 0 16px 20px; gap: 24px; }
    .popular-searches h2 { font-size: 20px; line-height: 26px; }
    .ps-chips { gap: 12px 8px; }
    .ps-chip { height: 40px; display: inline-flex; align-items: center; padding: 0 10px;
      font-weight: 500; font-size: 14px; }
    .similar-head { gap: 10px; }
    .similar-head h2 { font-size: 20px; line-height: 26px; }
    .similar-head p { font-size: 14px; line-height: 20px; }
    /* SEO-текст mobile (фигма 12663:10628): заголовок 20/26, кламп глубже — как в макете (~2 абзаца);
       margin-top добирает фигмовские 50px от чипов Popular (pb 20 + gap 15 + 15) */
    .seo-block { padding: 0 16px 20px; gap: 20px; margin-top: 15px; }
    /* Guides & Articles mobile (фигма 12693:11795): карточки 320, стрелки 32;
       лента full-bleed вправо (в фигме peek 24px до края экрана, не обрезается паддингом) */
    .articles { padding: 0 16px 20px; gap: 30px; margin-top: 15px; }
    .articles-head h2 { font-size: 20px; line-height: 26px; }
    .art-arrow { width: 32px; height: 32px; }
    .art-arrow img { width: 14px; height: 14px; }
    .articles-row { gap: 15px; margin-right: -16px; padding-right: 16px; }
    .art-card { flex-basis: 320px; }
    .art-label { font-size: 12px; line-height: 16px; }
    .art-title { font-weight: 700; font-size: 16px; line-height: 22px; }
    .seo-title { font-size: 20px; line-height: 26px; }
    .seo-text { max-height: 374px; }

    /* футер: стопкой, колонки сеткой 2×2 */
    .footer-inner { padding: 40px 16px; gap: 30px; }
    .footer-tagline { width: auto; max-width: 300px; }
    .footer-top { flex-direction: column; gap: 30px; }
    .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; }
    .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }

    /* модалка фильтров: во весь экран, ← и ↺ в шапке, поля на сером фоне */
    .modal-overlay { padding: 0; }
    .auth-overlay { padding: 16px; }
    .fmodal { width: 100%; max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; }
    .fmodal-head { padding: 20px 16px; }
    .fmodal-head h2 { font-size: 20px; line-height: 26px; }
    /* фигма 12705:14409: шапка→сегмент 30, сегмент→поля 30 (20 + gap 10), между полями 10 */
    .fmodal-body { padding: 30px 16px 20px; gap: 10px; }
    /* сегмент на мобиле — отдельные чипы-пилюли без общей подложки */
    .segment { padding: 0; background: none; border-radius: 0; gap: 10px; margin-bottom: 20px; }
    .segment label { padding: 10px 25px; border-radius: 20px; background: var(--gray-20);
      color: var(--text); font-weight: 400; }
    .segment input:checked + label { background: #FFF; border-color: var(--red); color: var(--red); font-weight: 700; }
    .field-row { flex-direction: column; gap: 10px; }
    #make-rows { gap: 10px; }
    .field, .accordion { background: var(--card); }
    .field input[type="number"] { background: transparent; }
    .combo-trigger { background: transparent; }
    .pills { grid-template-columns: repeat(2, minmax(0,1fr)); }
    /* триггер: шеврон вправо в сером кружке (переход на полноэкранный список) */
    .combo-trigger .chev { transform: rotate(-90deg); width: 14px; height: 14px;
      padding: 6px; background: var(--gray-20); border-radius: 50px; box-sizing: content-box; }
    .combo.open .combo-trigger .chev { transform: rotate(-90deg); }
    /* City — однострочный ряд (фигма 13054:23305): «City» + шеврон; выбранный город виден в строке */
    #combo-city { flex-direction: row; align-items: center; gap: 10px; }
    #combo-city label { flex: 1; }
    #combo-city .combo-trigger { width: auto; padding: 0; gap: 6px; }
    #combo-city .combo-trigger:not(.has-value) span { display: none; }
    /* аккордеоны Body/Transmission/Fuel: шеврон в кружке, тап по заголовку складывает */
    .accordion h3 { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
    .accordion h3 .chev { width: 14px; height: 14px; padding: 6px; background: var(--gray-20);
      border-radius: 50px; box-sizing: content-box; transform: rotate(180deg); transition: transform .15s; }
    .accordion.closed h3 .chev { transform: rotate(0deg); }
    .accordion.closed .pills { display: none; }
    /* модель без марки (фигма 12705:14526): серое поле «Select make first» */
    .combo-model:has(> .combo-trigger:disabled) { background: var(--gray-20); border-color: rgba(150,151,156,0.1); }
    .combo-model:has(> .combo-trigger:disabled) label { color: var(--gray); }
    .combo-trigger:disabled { color: rgba(150,151,156,0.7); font-weight: 500; }
    .combo-trigger:disabled .chev { visibility: hidden; }
    /* свёрнутый мейк (фигма 12705:14495): строка «Toyota, Corolla» жирным + шеврон в круге */
    .make-row.collapsed > .field { display: none; }
    .make-row.collapsed .make-collapsed { display: flex; }
    .make-collapsed { justify-content: space-between; align-items: center; width: 100%;
      padding: 16px; background: var(--card); border: 1px solid var(--gray-20); border-radius: 16px;
      font-family: inherit; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--text);
      cursor: pointer; text-align: left; }
    .make-collapsed .chev { transform: rotate(-90deg); width: 14px; height: 14px; padding: 6px;
      background: var(--gray-20); border-radius: 50px; box-sizing: content-box; flex: none; }
    .fmodal-foot { padding: 20px 16px; border-top: none; }
    .fmodal-foot button { height: 52px; }

    /* попапы Make/Model/City: полноэкранные списки с шапкой и sticky Apply */
    .combo.open .popup { display: flex; }
    .popup { position: fixed; inset: 0; width: auto; border-radius: 0; border: none;
      box-shadow: none; z-index: 120; flex-direction: column; }
    .popup-top { display: flex; justify-content: space-between; align-items: center;
      padding: 20px 16px; border-bottom: 1px solid var(--gray-20);
      font-weight: 700; font-size: 20px; line-height: 26px; color: var(--text); }
    .popup-top button { border: none; background: none; padding: 0; cursor: pointer; }
    .popup-top img { width: 24px; height: 24px; display: block; }
    .popup-head { padding: 20px 16px; border-bottom: none; }
    .popup-list { flex: 1; max-height: none; }
    .popup-apply { display: block; padding: 20px 16px; background: #FFF; }
    .popup-apply button { width: 100%; padding: 16px; background: var(--red); border: none;
      border-radius: 16px; cursor: pointer; font-family: inherit;
      font-weight: 600; font-size: 16px; line-height: 20px; color: #FFF; }
  }

/* ==== карточка объявления /<slug>/ (фигма: Web Redesign → Info) ==== */
/* межсекционные гэпы фигмы разные: крошки→hero 24, hero→описание 30, описание→similar 24, →popular 40 */
.car-page { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.car-page > .car-body { margin-top: 6px; }
.car-page > .popular-searches { margin-top: 16px; }
.crumbs { width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 120px;
  font-size: 16px; line-height: 22px; font-weight: 500; color: var(--gray); }
.crumbs a { color: var(--gray); transition: color .15s ease; }
.crumbs .sep { margin: 0 6px; }
.crumbs b { font-weight: 700; color: var(--text); }

.car-hero { display: flex; align-items: stretch; gap: 24px; padding: 0 120px; }
.gallery { position: relative; flex: 1; min-width: 0; height: 432px; border-radius: 16px; overflow: hidden; background: #e8e8ea; }
/* лента галереи: нативный scroll-snap (свайп на таче без JS, стрелки скроллят) */
.gallery-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
/* слайд: горизонтальное фото заполняет блок без полос (cover: у 4:3 в блоке макета уходит
   ~26% сверху/снизу на 1440, ~22% на телефоне, ~5% на узком десктопе); вертикальное/квадратное
   (класс .portrait ставит JS по naturalWidth/Height) — целиком поверх размытой копии, иначе cover
   срезал бы у него ~70%. Размеры блока — из макета */
.gallery-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always; background: #e8e8ea; }
.gallery-bg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(24px) brightness(0.9); transform: scale(1.15); }
.gallery-img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.gallery-slide.portrait .gallery-bg { display: block; }
.gallery-slide.portrait .gallery-img { object-fit: contain; }
.fav-lg { top: 19px; right: 18px; padding: 12px; }
.fav-lg img { width: 24px; height: 24px; }
.gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  background: rgba(255,255,255,0.7); border-radius: 50px; box-shadow: 0 0 4px 1px rgba(150,151,156,0.15);
  transition: background .15s ease, box-shadow .15s ease; }
.gal-arrow img { width: 16px; height: 16px; }
.gal-arrow.prev { left: 18px; }
.gal-arrow.prev img { transform: rotate(90deg); }
.gal-arrow.next { right: 18px; }
.gal-arrow.next img { transform: rotate(-90deg); }
.gal-dots { top: auto; bottom: 18px; gap: 6px; }
.gal-dots i { width: 8px; height: 8px; }

.car-details { width: 384px; flex-shrink: 0; display: flex; flex-direction: column; gap: 40px; }
.cd-top { display: flex; align-items: stretch; justify-content: space-between; }
.cd-title-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; }
.cd-title-row { display: flex; align-items: center; gap: 10px; }
.cd-title-row h1 { font-weight: 700; font-size: 24px; line-height: 28px; }
/* бейдж года на карточке крупнее карточного (фигма: 14/20 bold против 12/16 в каталоге) */
.cd-title-row .year-badge { font-weight: 700; font-size: 14px; line-height: 20px; }
.cd-meta { display: flex; flex-direction: column; gap: 8px; }
.cd-meta-row { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22px; color: var(--gray); }
.cd-meta-row img { width: 24px; height: 24px; }
.cd-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.share-btn { width: 44px; height: 44px; padding: 12px; display: flex; align-items: center; justify-content: center;
  background: #FFF; border: 1px solid var(--gray-20); border-radius: 60px; cursor: pointer;
  transition: background .15s ease; }
.share-btn img { width: 20px; height: 20px; transition: filter .15s ease; }
.share-btn.copied { border-color: var(--red); }
.cd-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cd-price { font-weight: 700; font-size: 24px; line-height: 28px; white-space: nowrap; }
.cd-approx { font-size: 16px; line-height: 22px; color: var(--gray); white-space: nowrap; }

.cd-actions { display: flex; flex-direction: column; gap: 16px; }
.btn-message { height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--red); border-radius: 16px; font-weight: 600; font-size: 18px; line-height: 22px; color: #FFF;
  transition: background .15s ease; }
.btn-message img { width: 24px; height: 24px; }
.cd-contact-row { display: flex; gap: 20px; }
.btn-contact { flex: 1; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #FFF; border: 1px solid var(--gray-20); border-radius: 16px; transition: background .15s ease;
  font-weight: 600; font-size: 18px; line-height: 22px; color: var(--text); }
.btn-contact img { width: 24px; height: 24px; }

.cd-seller { display: flex; flex-direction: column; gap: 24px; }
.seller-row { display: flex; align-items: center; gap: 10px; }
.seller-avatar { width: 48px; height: 48px; border-radius: 90px; object-fit: cover; }
.seller-avatar-ph { display: flex; align-items: center; justify-content: center; background: var(--card);
  font-weight: 700; font-size: 18px; color: var(--gray); }
.seller-info { display: flex; flex-direction: column; gap: 8px; }
.seller-name { font-weight: 600; font-size: 18px; line-height: 22px; }
.seller-since { font-size: 14px; line-height: 20px; color: var(--gray); }
.cd-report-wrap { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.cd-divider { height: 1px; background: var(--gray-20); }
.cd-report { display: flex; align-items: center; gap: 8px; border: none; background: none;
  padding: 0; cursor: pointer; font-family: inherit; transition: color .15s ease;
  font-weight: 500; font-size: 14px; line-height: 20px; color: var(--gray); }
.cd-report img { width: 18px; height: 18px; }

.car-body { display: flex; flex-direction: column; gap: 30px; padding: 0 120px 40px; }
.info-card { display: flex; flex-direction: column; gap: 24px; padding: 30px 16px;
  background: var(--bg); border: 1px solid var(--gray-20); border-radius: 16px; }
.info-card h2 { font-weight: 700; font-size: 24px; line-height: 28px; }
.desc-text { font-size: 16px; line-height: 22px; color: var(--gray); }
.specs-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 24px; }
.spec-row { display: flex; align-items: center; justify-content: space-between; padding: 10px;
  border-bottom: 1px solid var(--gray-20); }
.spec-row:nth-last-child(-n+2) { border-bottom: none; }
.spec-label { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22px; color: var(--gray); }
.spec-label img { width: 24px; height: 24px; }
.spec-value { font-size: 16px; line-height: 22px; color: var(--text); }

.car-similar { display: flex; flex-direction: column; gap: 30px; padding: 0 120px 40px; }

/* жалоба (аппка: Пожаловаться → Отправить жалобу → Жалоба отправлена) */
.report-overlay, .report-done-overlay { align-items: center; }
.report-sheet { width: 500px; max-width: 100%; padding: 20px; background: #FFF; border-radius: 20px;
  display: flex; flex-direction: column; }
.sheet-handle { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--gray-20); }
.report-sheet h3 { padding-bottom: 14px; border-bottom: 1px solid var(--gray-20);
  font-weight: 700; font-size: 20px; line-height: 26px; }
.report-prompt { padding: 16px 0 4px; font-size: 16px; line-height: 22px; color: var(--gray); }
.report-reasons { display: flex; flex-direction: column; }
.report-reasons button { padding: 16px 0; border: none; border-bottom: 1px solid var(--gray-20);
  background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 16px; line-height: 22px; color: var(--text); }
.report-reasons button.on { color: var(--red); font-weight: 600; }
.report-submit { margin-top: 20px; padding: 14px; border: none; border-radius: 16px; cursor: pointer;
  background: var(--card); font-family: inherit; font-weight: 600; font-size: 16px; line-height: 20px;
  color: var(--gray); }
.report-submit:not(:disabled) { background: var(--red); color: #FFF; }
.report-done-modal { width: 400px; max-width: 100%; padding: 40px 20px 20px; background: #FFF;
  border-radius: 30px; display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center; }
.rd-icon { display: flex; padding: 16px; background: #E9F9EF; border-radius: 16px; }
.report-done-modal h3 { font-weight: 700; font-size: 20px; line-height: 26px; }
.rd-continue { align-self: stretch; padding: 16px; border: none; border-radius: 16px; cursor: pointer;
  background: var(--red); font-family: inherit; font-weight: 600; font-size: 16px; line-height: 20px;
  color: #FFF; }

@media (max-width: 1280px) {
  .crumbs, .car-hero, .car-body, .car-similar { padding-left: 40px; padding-right: 40px; }
  .car-details { width: 340px; }
}
/* ==== мобильная карточка объявления (фигма Mobile → Info, 375px) ==== */
@media (max-width: 860px) {
  /* крошки на мобиле (фигма: 14/20, отступ 16; до следующего блока 30) — общие для каталога и карточки */
  .crumbs { padding: 0 16px; font-size: 14px; line-height: 20px; margin-bottom: 15px; }
  .car-page .crumbs { margin-bottom: 10px; }
  .car-page { gap: 20px; }
  /* десктопные добивки межсекционных гэпов на мобиле не нужны (фигма: везде 20) */
  .car-page > .car-body { margin-top: 0; }
  .car-page > .popular-searches { margin-top: 0; }
  .car-hero, .car-body, .car-similar { padding-left: 16px; padding-right: 16px; }
  /* порядок как в макете: продавец → галерея → тайтл/цена → кнопки */
  .car-hero { flex-direction: column; gap: 20px; }
  .car-details { display: contents; }
  .cd-seller { order: -1; }
  .seller-name { font-weight: 700; font-size: 16px; line-height: 22px; }
  .seller-since { font-size: 12px; line-height: 16px; }
  .seller-info { gap: 4px; }
  .cd-title-row .year-badge { font-weight: 500; font-size: 12px; line-height: 16px; }

  /* пропорция макета 343:201 (375px) вместо фиксированных 201px: на планшете 700-860px
     фиксированная высота давала ленту 3:1, где фото целиком помещалось в треть ширины */
  .gallery { height: auto; aspect-ratio: 343 / 201; border-radius: 16px; flex: none; }
  .gal-arrow { display: none; }
  .gal-dots { bottom: 10px; }
  .fav-lg { top: 11px; right: 12px; padding: 8px; }
  .fav-lg img { width: 18px; height: 18px; }

  .cd-title-col { gap: 12px; }
  .cd-title-row h1 { font-weight: 600; font-size: 18px; line-height: 22px; }
  .cd-meta { gap: 4px; }
  .cd-meta-row { font-size: 14px; line-height: 20px; }
  .cd-meta-row img { width: 18px; height: 18px; }
  .cd-price-col { gap: 8px; }
  .share-btn { width: 36px; height: 36px; padding: 10px; }
  .share-btn img { width: 16px; height: 16px; }
  .cd-price { font-size: 18px; line-height: 23px; }
  .cd-approx { font-size: 12px; line-height: 16px; }

  /* кнопки в один ряд: Message тянется, Call/WhatsApp — квадратные иконки */
  .cd-actions { flex-direction: row; gap: 7px; }
  .btn-message { flex: 1; height: 44px; font-size: 16px; line-height: 20px; }
  .btn-message img { width: 20px; height: 20px; }
  .cd-contact-row { display: contents; }
  .btn-contact { flex: none; width: 48px; height: 44px; font-size: 0; gap: 0; }
  .btn-contact[href^="tel"] img { width: 20px; height: 20px; }

  /* жалоба на мобиле — нижняя шторка, как в аппке */
  .report-overlay { align-items: flex-end; padding: 0; }
  .report-sheet { width: 100%; border-radius: 16px 16px 0 0; padding: 12px 16px 20px; }
  .report-done-overlay { padding: 16px; }

  .car-body { gap: 20px; padding-bottom: 20px; }
  .info-card { padding: 20px 16px; gap: 12px; }
  .info-card h2 { font-size: 16px; line-height: 22px; }
  .desc-text { font-size: 14px; line-height: 20px; }
  /* Full Specifications mobile (фигма 12709:17570): строки с нижней линией (кроме последней),
     паддинг 10, текст 14/20 Medium, между строками 14 */
  .specs-card { gap: 14px; }
  .specs-grid { grid-template-columns: 1fr; gap: 14px; }
  .spec-row { padding: 10px; border-bottom: 1px solid var(--gray-20); }
  .spec-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--gray-20); }
  .spec-row:last-child { border-bottom: none; }
  .spec-label, .spec-value { font-weight: 500; font-size: 14px; line-height: 20px; }
  .car-similar { gap: 20px; padding-bottom: 20px; }

  /* Report переехал под Full Specifications (фигма 13032:18896): разделитель + строка;
     блок под продавцом на мобиле скрыт */
  .cd-report-wrap { display: none; }
  .report-block-m { margin: 0 16px; border-top: 1px solid var(--gray-20); padding: 12px 0; }
}