/* ==========================================================================
   CAR PARK — стили того, чего нет в вёрстке макета:
   слайдер героя, модальные формы движка, пагинация, телефонное поле.
   Дизайн-токены берём из вёрстки: #2A2620, #EDE6D9, #297CCF, #212121.
   ========================================================================== */

/* --- Слайдер героя: отступы .hero переносим на обёртку слайдера --------- */
.hero-slider {
    margin: -107px 0 80px;
}

.hero-slider .hero {
    margin: 0;
}

.hero-slider .swiper-pagination {
    bottom: 32px;
}

.hero-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #EDE6D9;
    opacity: 0.4;
}

.hero-slider .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: #297CCF;
    opacity: 1;
}

@media (max-width: 1822px) {
    .hero-slider {
        margin: -94px 0 60px;
    }
}

@media (max-width: 575px) {
    .hero-slider {
        margin-bottom: 32px;
    }
}

/* --- Служебные страницы движка (политика, 404): контейнер как .wrap ----- */
.container {
    margin: 0 auto;
    width: 1792px;
    box-sizing: border-box;
    padding: 40px 0 72px;
    font-size: 16px;
    line-height: 22px;
}

.container h1,
.container .section-title {
    margin-bottom: 32px;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    letter-spacing: -0.01em;
}

.container h2 {
    margin: 32px 0 16px;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
}

.container h3 {
    margin: 24px 0 12px;
    font-weight: 600;
    font-size: 24px;
}

.container p,
.container ul,
.container ol,
.container table {
    margin-bottom: 16px;
}

.container ul,
.container ol {
    padding-left: 24px;
    list-style: disc;
}

.container ol {
    list-style: decimal;
}

@media (max-width: 1822px) { .container { width: 1400px; } }
@media (max-width: 1430px) { .container { width: 1170px; } }
@media (max-width: 1200px) { .container { width: 970px; } }
@media (max-width: 991px) { .container { width: 747px; } }
@media (max-width: 767px) { .container { width: 556px; } }
@media (max-width: 575px) { .container { width: auto; padding: 24px 8px 48px; } }

/* --- Подвал: ссылка на политику в строке копирайта ---------------------- */
.footer__copy a {
    color: rgba(230, 222, 207, 0.5);
}

/* --- Большой логотип бренда на странице марки (в макете 144x138) -------- */
.brand__logo img {
    max-height: 138px;
    max-width: 300px;
    width: auto;
    height: auto;
}

/* Фото в карточке объявления — ссылка не должна ломать сетку */
.catalog2__image a {
    display: block;
}

/* --- Мобильный герой: точки слайдера не должны налезать на чипсы брендов --- */
@media (max-width: 575px) {
    .hero-slider .hero {
        padding-bottom: 60px;
    }

    .hero-slider .swiper-pagination {
        bottom: 10px;
    }
}

/* Логотип бренда в заголовке героя: в вёрстке 48x48, у нас логотипы разной ширины */
.hero__name img {
    max-height: 48px;
    max-width: 180px;
    width: auto;
    height: auto;
}

/* --- Логотипы брендов в карточках: приводим к размеру макета ------------ */
/* В наборе вёрстки логотипы разной ширины, одинаковая только высота. */
.catalog__logo {
    max-height: 39px;
    max-width: 120px;
    width: auto;
    height: auto;
}

.catalog2__brand {
    max-height: 46px;
    max-width: 120px;
    width: auto;
    height: auto;
}

.brands__info h3 img {
    max-height: 29px;
    max-width: 90px;
    width: auto;
    height: auto;
}

/* --- Фото из каталога и объявлений: пропорции как в вёрстке ------------- */
/* В макете фото модели 588x329 и 636x363 — это 16/9 */
.catalog__image {
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.catalog2__photo {
    aspect-ratio: 636 / 438;
    object-fit: cover;
}

/* --- Телефонное поле (intl-tel-input) внутри полей вёрстки -------------- */
.iti {
    display: block;
    width: 100%;
}

.iti .feedback__input {
    padding-left: 96px;
}

.iti--separate-dial-code .iti__selected-flag {
    background: none;
    padding-left: 24px;
}

.iti__country-list {
    color: #2A2620;
    text-align: left;
}

/* --- Модальные формы движка (MZ.form.callback) -------------------------- */
.cp-modal {
    width: 520px;
    max-width: 100%;
    padding: 48px;
    box-sizing: border-box;
    background: #2A2620;
    border-radius: 16px;
    color: #EDE6D9;
}

.cp-modal h3 {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
}

.cp-modal__text {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 19px;
    color: #A3A3A3;
}

.cp-modal__car {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(237, 230, 217, 0.08);
    border-radius: 12px;
}

.cp-modal__car img {
    width: 96px;
    border-radius: 8px;
}

.cp-modal__car b {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.cp-modal__car span {
    font-size: 14px;
    color: #A3A3A3;
}

.cp-modal__input {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 0 32px;
    border: 1.5px solid #595959;
    border-radius: 48px;
    background: none;
    color: #EDE6D9;
    font-size: 16px;
}

.cp-modal__input::placeholder {
    color: #A3A3A3;
}

.cp-modal .iti .cp-modal__input {
    padding-left: 96px;
}

.cp-modal__button {
    width: 100%;
    height: 64px;
    margin-top: 8px;
    background: #297CCF;
    border-radius: 48px;
    color: #EDE6D9;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

.cp-modal__button:hover {
    filter: brightness(0.85);
}

.cp-modal__privacy {
    margin-top: 16px;
    font-size: 13px;
    line-height: 16px;
    color: #A3A3A3;
}

.cp-modal__privacy a {
    color: #EDE6D9;
}

.cp-modal .y-smart-captcha {
    margin-bottom: 8px;
}

.fancybox__content {
    padding: 0;
    background: none;
}

.fancybox__content > .carousel__button.is-close {
    top: 16px;
    right: 16px;
    color: #EDE6D9;
}

/* Поле с ошибкой валидации */
.js-field--error {
    border-color: #E2564B !important;
}

/* --- Пагинация каталога ------------------------------------------------- */
.cp-pagination {
    margin-top: 32px;
    text-align: center;
}

.cp-pagination svg {
    display: none;
}

.cp-pagination nav > div:first-child {
    display: none;
}

.cp-pagination span[aria-current="page"] span,
.cp-pagination a {
    display: inline-block;
    min-width: 48px;
    height: 48px;
    line-height: 48px;
    margin: 0 4px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #A3A3A3;
    border-radius: 12px;
    color: #2A2620;
    font-size: 16px;
    text-decoration: none;
}

.cp-pagination span[aria-current="page"] span {
    border-color: #212121;
    background: #212121;
    color: #EDE6D9;
}

.cp-pagination a:hover {
    border-color: #212121;
}

/* --- Резерв места под картинки, пока они грузятся --------------------- */
/* Без этого .brands__info с margin-top:-32px наезжает на схлопнутый блок. */
.brands__logo {
    aspect-ratio: 279 / 272;
    object-fit: cover;
}

.brands__image {
    aspect-ratio: 279 / 272;
}

/* --- Цена объявления: у нас 6-значные суммы, символ ₾ не должен уезжать --- */
/* Макет считан под «89,900 ₾»; при «109,900 ₾» на ширинах ниже дизайнерской
   строка ломалась и ₾ уезжал вниз. */
@media (max-width: 1822px) {
    .car__block span {
        font-size: 44px;
        white-space: nowrap;
    }
}

@media (max-width: 1200px) {
    .car__block span {
        font-size: 40px;
    }
}

/* Текстовые страницы из админки (Trade-in, политика и т.п.):
   в вёрстке макета таких блоков нет, задаём ритм заголовков и абзацев */
.car__about h3 {
    color: #2A2620;
    margin: 40px 0 16px;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.01em;
}
.car__about h3:first-child {
    margin-top: 0;
}
.car__about p {
    margin-bottom: 16px;
}
.car__about p:last-child {
    margin-bottom: 0;
}
.car__about ul,
.car__about ol {
    margin: 0 0 16px 20px;
}
.car__about li {
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .car__about h3 {
        font-size: 24px;
        line-height: 30px;
        margin: 28px 0 12px;
    }
}

/* --- Точечные правки после сверки с макетом ---------------------------- */

/* В блоке «Наши бренды» кликабельна вся карточка, а не только кнопка. */
.brands__item {
    position: relative;
}

.brands__card-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
}

.brands__info button {
    pointer-events: none;
}

/* Панель цены закреплена снизу: высота блока характеристик не сдвигает её. */
.catalog__item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Вся карточка модели ведёт на её страницу. Кнопка остаётся поверх ссылки. */
.catalog__model-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    border-radius: 16px;
}

.catalog__model-link:focus-visible {
    outline: 2px solid #297CCF;
    outline-offset: -3px;
}

.catalog__price button {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.catalog__price {
    margin-top: auto;
}

/* Каталог объявлений: карточки одной высоты, а названия в одну и в три
   строки не сдвигают цену и характеристики по вертикали. */
.catalog2__items {
    align-items: stretch;
}

/* Сетка каталога на grid: одинаковая высота держится и между рядами. */
.catalog2__list .catalog2__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 32px;
    margin-right: 0;
}

.catalog2__list .catalog2__item {
    width: auto;
    margin: 0;
}

@media (max-width: 767px) {
    .catalog2__list .catalog2__items {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.catalog2__item {
    display: flex;
    flex-direction: column;
}

.catalog2__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Кнопка формы не прилипает к правому краю и занимает ширину полей. */
.feedback__button {
    display: block;
    width: 100%;
    margin-top: 8px;
}

/* Длинные названия комплектаций в каталоге больше не накладываются. */
.catalog2__name h3 {
    line-height: 1.1;
}

/* Горизонтальный зазор карточек оснащения равен вертикальному — 16px. */
.car__complects .flex2 {
    margin-right: -16px;
}

.car__complect {
    width: calc(20% - 16px);
    margin-right: 16px;
}

@media (max-width: 1430px) {
    .car__complect {
        width: calc(25% - 16px);
    }
}

@media (max-width: 1200px) {
    .car__complect {
        width: calc(33.3334% - 16px);
    }
}

@media (max-width: 991px) {
    .car__complect {
        width: calc(50% - 16px);
    }
}

@media (max-width: 575px) {
    .car__complects .flex2 {
        margin-right: 0;
    }

    .car__complect {
        width: 100%;
        margin-right: 0;
    }
}

/* После первой комплектации показываются только отличия от предыдущей. */
.model__complect-note {
    margin-top: 12px;
    color: #686868;
    font-size: 14px;
    line-height: 1.35;
}

.model__complect-note strong {
    color: #2A2620;
    font-weight: 600;
}

.model__complect--active .model__complect-note {
    color: #315d87;
}

.model__complect-feature--spec {
    color: #174f88;
    font-weight: 600;
}

.model__complect-feature--note {
    color: #686868;
    font-style: italic;
}

/* Эмблема бренда в герое — размер как в исходной вёрстке. */
.brand__logo img {
    width: 144px;
    max-width: none;
    max-height: none;
}

@media (max-width: 1822px) {
    .brand__logo img {
        width: 120px;
    }
}

@media (max-width: 575px) {
    .brand__logo img {
        width: 48px;
    }
}

/* На длинном списке комплектаций фото и общие данные модели закреплены. */
@media (min-width: 992px) {
    .model {
        overflow: visible;
    }

    .model > .wrap > .flex {
        align-items: flex-start;
    }

    .model__image {
        position: sticky;
        top: 96px;
        align-self: flex-start;
    }
}


/* --- Мобильное меню: языки над пунктом «Главная» ---------------------- */
@media (max-width: 991px) {
    .mobile-menu .header__langs {
        margin: 4px 0 20px;
    }
}

/* --- «Наши бренды» на узком экране: логотипы, 3 в ряд, как на десктопе - */
@media (max-width: 991px) {
    .brands__list {
        margin-right: -12px;
    }

    .brands__item {
        width: calc(33.333% - 12px);
        margin: 0 12px 12px 0;
    }
}

@media (max-width: 575px) {
    .brands__list {
        margin-right: -8px;
    }

    .brands__item {
        width: calc(33.333% - 8px);
        margin: 0 8px 8px 0;
    }

    .brands__photo {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
    }

    .brands__photo:after {
        display: none;
    }

    .brands__logo {
        display: block;
        width: 100%;
    }

    .brands__image {
        opacity: 0;
    }

    .brands__info {
        margin-top: -12px;
        padding: 12px 8px 10px;
        position: relative;
    }

    .brands__info h3 {
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 14px;
    }

    .brands__info h3 img {
        display: none;
    }

    .brands__info p {
        margin: 0 0 8px;
        font-size: 10px;
        line-height: 12px;
    }

    .brands__info button {
        position: static;
        width: 100%;
        height: 28px;
        font-size: 10px;
        line-height: 12px;
        border-radius: 8px;
        background: rgba(237, 230, 217, 0.1) !important;
        box-shadow: inset rgba(255, 255, 255, 0.1) 0 0 0 1px;
    }

    .brands__info button span {
        display: none;
    }
}

/* --- «Избранные модели» на мобилке скрыты, пока не попросят вернуть ---- */
@media (max-width: 991px) {
    .catalog--featured {
        display: none;
    }
}