/**
 * Работа со стилями styles.css.
 * Наработки будут перенесены верстальщиком в style.css
 * Добавлять в 2 блока Заменить и Добавить
 */

/**
 * Изменить в style.css
 */

@media (max-width:576px) {
    .card-row-gallery .slider_pic {
        max-height: 187px;
    }

    .card-row-gallery .slick-dots button {
        display: none;
    }
}

.card-row-gallery .slick-dots li {
    width:auto;
    flex-grow:1;
}

@media screen and (max-width: 575px) {
    .first-left__text.mobile {
        margin-bottom: 0;
    }
}

.select2 {
    max-width: 500px;
}

@media screen and (max-width: 1023px) {
    .select2 {
        max-width: 300px;
    }
}

@media screen and (max-width: 575px) {
    .select2 {
        max-width: 256px;
    }
}

.request__img {
    padding:0;
}

.request__img img {
    object-fit: cover;
}

@media screen and (max-width: 480px) {
    .first-right {
        height: 300px;
    }
}

.faq__text {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
}

.faq__text p {
    margin-bottom: 14px;
}

.faq__text p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 1739px) {
    .faq__text {
        font-weight: 300;
        font-size: 14px;
        line-height: 1.5;
    }
}


.review-card__text.shadow {
    position: relative;
}

.review-card__text.shadow::after {
    content: "";
    display: block;
    height: 40px;
    width:100%;
    position: absolute;
    z-index: 1;
    bottom:0;
    left:0;
    background: linear-gradient(180deg, transparent 0%, #fff 100%);;
}

.dark .review-card__text.shadow::after {
    background: linear-gradient(180deg, transparent 0%, var(--bg-dark) 100%);;
}

.review-card__text.open::after {
    background: none;
}



/* Mobile head 2 lines */
@media screen and (max-width: 1023px) {
    .toggle-theme {
        display: block;
    }
}

@media screen and (max-width: 575px) {

    .top__row {
        max-width: calc(100% + 10px);
        box-sizing: border-box;
    }

    .top__left {
        max-width: 130px;
    }

    .top__center {
        width: auto;
        margin-bottom: 0;
    }

    .top__right {
        flex-grow: 1;
        width: auto;
    }
    
}


@media screen and (max-width: 1199px) {
    .mobile-header {
        display: block;
    }
    /*
    .navbar {
        display: none;
    }
    */
}


/**
 * Добавить в style.css
 */

.instock-block {
    max-width: 350px;
    margin-bottom: 30px;
    color: #ff0000;
    font-weight: bold;
    text-align: center;
    display: inline-block;
}

.instock-block select {
    margin-bottom: 10px;
    padding: 5px;
}

.instock-block button {
    display: block;
}


.compl_title {
    display: flex;
    align-items: center;
    gap:15px;
}

.compl_title b {
    color: var(--secondary);
}

.compl_title svg {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: .3s ease all;
}

.compl_title svg:hover {
    fill:var(--secondary);
}

.compl_title svg.open {
    transform: rotate(180deg);
    transition: .3s ease all;
}

.equipment {
    height: 100%;
    opacity: 1;
    transition: .3s ease all;
}

.hide_part {
    overflow: hidden;
    opacity: 0.6;
    cursor: pointer;
    transition: .3s ease all;
}

@media (max-width:1023px) {
    .hide_part {
        height: 215px;
    }
}

@media (max-width:575px) {
    .hide_part {
        height: 220px;
    }
    .top__center {
        margin-bottom: 5px;
    }
}

.car-brands__link.hide {
    display: none;
}

span.is-dtp {
    display: block;
    background: #ef2222;
    color: white;
    padding: 3px 10px;
    text-align: center;
}

span.is-dtp.v0 {
    background: #2c9b2c;
}

.price-breakdown .text-gray {
    color: #666;
    font-size: 14px;
    font-weight: normal;
}

@media screen and (max-width: 1739px) {
    .price-breakdown .text-gray {
        font-size: 12px;
    }
}



/* Korea car page: */
.slide_container h2,
.slide_container .section-title {
    display: flex;
    align-items: center;
    gap:10px;
}

.slide_container h2 svg,
.slide_container .section-title svg {
    width:24px;
    height: 24px;
    fill: #000;
    display: block;
    cursor: pointer;
    transition: all .5s ease;
}

.dark .slide_container h2 svg,
.dark .slide_container .section-title svg {
    fill: #fff;
}

.slide_container h2 svg.active,
.slide_container .section-title svg.active {
    transform: rotate(180deg);
    transition: all .5s ease;
}

.slide_container .js-box__wrap,
.slide_container .box__wrap {
    max-height: 200px;
    height: auto;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 1s ease;
}

.slide_container .js-box__wrap {
    max-height: 100px;
}

@media (max-width:1739px) {
    .slide_container .js-box__wrap {
        max-height: 90px;
    }
}

@media (max-width:1023px) {
    .slide_container .js-box__wrap {
        max-height: 86px;
    }
}

@media (max-width:575px) {
    .slide_container .js-box__wrap {
        max-height: 77px;
    }
}

.slide_container .js-box__wrap:hover,
.slide_container .box__wrap:hover {
    opacity: 0.75;
}

.slide_container .js-box__wrap.active,
.slide_container .box__wrap.active {
    transition: all 1s ease;
    max-height: 100%;
    opacity: 1;
    cursor: text;
}

.slide_container .js-box__wrap.active:hover,
.slide_container .box__wrap.active:hover {
    opacity: 1;
}

.slide_container .hide_part a.car-brands__link:hover {
    color: var(--primary);
}




/* brands table */

.filter-group.block {
    display: block;
}

.brands_models_list {
    display: flex;
    align-items: flex-start;
    gap:16px;
}

@media (max-width:1023px) {
    .brands_models_list {
        flex-wrap: wrap;
        max-width: 620px;
    }
}

@media (max-width:767px) {
    .brands_models_list {
        max-width: 420px;
    }
}

@media (max-width:575px) {
    .brands_models_list {
        max-width: 100%;
    }
}

.brands_models_list .col {
    width: calc(100% / 4 - 12px);
    display: flex;
    flex-direction: column;
    gap:16px;
    margin: 0;
    padding: 0;
}

@media (max-width:1023px) {
    .brands_models_list .col {
        width: calc(50% - 8px);
    }
}

@media (max-width:575px) {
    .brands_models_list .col {
        width: 100%;
    }
}

.brands_models_list .col .brands_models__link {
    display: flex;
    gap:10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--font-dark);
    column-gap: 16px;
}

.brands_models_list .col .brands_models__link span:first-child {
    display: inline-block;
    transition: 1s ease all;
}

.brands_models_list .col .brands_models__link span:nth-child(2) {
    font-weight: 400;
    transition: 1s ease all;
    color:#8e8e89;
}

.brands_models_list .col .brands_models__link:hover span {
    color:var(--secondary);
    transition: .5s ease all;
}

.brands_models_list .col .brands_models__link.hidden {
    display: none;
    height: 0;
    overflow: hidden;
    position: absolute;
}


.brands_models_list .col .link span {
    font-size: 14px;
    font-weight: 600;
}

.brands_models_list .col .link svg {
    transform: rotate(270deg);
    fill:red;
    stroke: none;
    width:16px;
    height: 16px;
}

.brands_models_list .col .link.active svg {
    transform: rotate(90deg);
}

.brands_models_list .col .brands_models__link.hiding {
    font-weight: 400;
}



.video-card__img video {
    width: 100%;
    height: 100%;
}


.my-5 {
    margin: 5px 0;
}



.radar__widget {
    height: 480px;
}

@media (max-width:767px) {
    .radar__widget {
        height: 280px;
    }
}


.card-row__price>p:first-child span.price-descr, .card__price>p span.price-descr, .card-moto__price span.price-descr {
    display: block;
    font-size: 12px;
    color: var(--secondary);
    margin-left: 0;
    font-weight: 400;
}
.track-auto__title + .track-auto__info.track-auto__params {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -20px;
    margin-bottom: 20px;
}






.formated_text a {
    color: var(--secondary);
}

.formated_text table {
    padding:0;
    margin:0 0 24px 0;
    border-collapse: collapse;
}

.formated_text table th,
.formated_text table td {
    padding:5px;
}



.form-checkbox.agree_box label {
    font-size: 12px;
}

.form-checkbox.agree_box input:checked+label::before {
    background-color: #666;
    border-color: #666;
}

.form-checkbox.agree_box label a {
    color: #333;
}

.dark {
    .form-checkbox.agree_box label a {
        color: #eee;
    }
}

.form-checkbox.agree_box label a:hover {
    color: var(--secondary);
}
/* ===========================================================================
 * 19.09.2026 — блоки «Средняя цена», «Из чего складывается цена», шапка цены,
 * плашка пошлины и характеристики карточки. Перенос с demo.pro-auctions.ru,
 * макет тот же (шаблон 10), поэтому стили идут как есть.
 * ========================================================================== */
/* ==========================================================================
 * Добавить в style.css
 * Гистограмма последних продаж в блоке средней цены — аукционы Японии и сток.
 * Столбик = одна проданная машина, высота = её цена, пунктир = средняя.
 * Свежая продажа слева. Цвет задаёт ЧИСЛО найденных продаж (точность подбора),
 * как в админке парсера japan-auc-autos: больше продаж — надёжнее средняя.
 * Разметка: template/10/partials/price-insight/average-price.php
 * Подсказка по наведению: блок .js-sold-chart в js/dev.js
 * ========================================================================== */

.average-price,
.car-average-price {
    --sold-accent:#3dbf00;
}

.average-price--acc-hi,
.car-average-price--acc-hi {
    --sold-accent:#16a34a;
}

.average-price--acc-mid,
.car-average-price--acc-mid {
    --sold-accent:#2563eb;
}

.average-price--acc-low,
.car-average-price--acc-low {
    --sold-accent:#ca8a04;
}

.average-price--acc-min,
.car-average-price--acc-min {
    --sold-accent:#ea580c;
}

.sold-chart {
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:end;
    -ms-flex-align:end;
    align-items:flex-end;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    gap:2px;
    width:100%;
    height:100%;
}

.sold-chart b {
    -webkit-box-flex:1;
    -ms-flex:1 1 0px;
    flex:1 1 0;
    min-width:2px;
    max-width:8px;
    border-radius:2px 2px 0 0;
    background:var(--sold-accent);
    opacity:.8;
}

/* Самая свежая продажа — слева и в полную силу цвета */
.sold-chart b[data-last],
.sold-chart b:hover {
    opacity:1;
}

.sold-chart__avg {
    position:absolute;
    left:0;
    right:0;
    border-top:1px dashed var(--sold-accent);
    opacity:.55;
}

.sold-chart__hint {
    position:absolute;
    bottom:calc(100% + 6px);
    left:50%;
    z-index:5;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    padding:4px 8px;
    border-radius:8px;
    background:var(--primary);
    color:#fff;
    font-family:var(--font-family);
    font-weight:500;
    font-size:11px;
    line-height:1.3;
    /* вторая строка — пометка «последняя»: в строку она не помещается,
       подсказка становится шире графика и наезжает на цену слева */
    white-space:pre-line;
    text-align:center;
    /* абсолютный блок внутри узкого графика иначе рвёт цену по словам */
    width:-webkit-max-content;
    width:-moz-max-content;
    width:max-content;
    pointer-events:none;
}

.sold-chart__hint[hidden] {
    display:none;
}

/* Иконка была рассчитана на картинку 48x40 — гистограмме нужно шире */
.average-price__icon {
    width:76px;
}


/* ==========================================================================
 * Добавить в style.css
 * Плашка смены пошлины рядом с ценой: зелёная — цена скоро упадёт (с 3 лет
 * пошлина ниже), красная — скоро вырастет (после 5 лет выше).
 * Раньше плашка была одна и всегда красная, поверх фото; теперь она в потоке
 * (модификатор --flow выше) и красится по смыслу.
 * Разметка: template/10/partials/price-insight/duty-badge.php
 * Подсказка — своя, а не браузерный title: в title нельзя развернуть текст
 * в две строки и он появляется с задержкой в секунду.
 * ========================================================================== */

/* Селектор по data-hint не для красоты: выше .card--flow .card__duty
   ставит position:static, и без веса в два класса подсказка отсчитывалась бы
   от окна, а не от плашки */
.duty-badge[data-hint] {
    position:relative;
}

.duty-badge {
    gap:6px;
    padding:6px 12px;
    border-radius:40px;
    font-size:13px;
    line-height:1.2;
    cursor:default;
}

.duty-badge--down {
    color:#2f8a00;
    background:rgba(61,191,0,.14);
}

.duty-badge--up {
    color:#d42020;
    background:rgba(239,34,34,.12);
}

.duty-badge strong {
    font-weight:700;
    color:inherit;
}

.duty-badge span {
    color:inherit;
    opacity:.75;
}

/* Иконки в плашке больше нет — стрелка вверх/вниз говорит то же самое
   и не требует спрайта на страницах, где его может не быть */
.duty-badge svg {
    display:none;
}

.duty-badge::after {
    content:attr(data-hint);
    position:absolute;
    bottom:calc(100% + 8px);
    left:0;
    z-index:20;
    width:240px;
    max-width:70vw;
    padding:8px 10px;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    font-family:var(--font-family);
    font-weight:400;
    font-size:12px;
    line-height:1.35;
    text-align:left;
    opacity:0;
    visibility:hidden;
    -webkit-transition:opacity .15s;
    transition:opacity .15s;
}

.duty-badge:hover::after {
    opacity:1;
    visibility:visible;
}

/* Распорка в плитке 4 в ряд: держит высоту, но ничего не рисует.
   height берём от той же строки, что и у плашки с текстом */
.duty-badge--empty {
    visibility:hidden;
    min-height:calc(1.2em + 12px);
}


/* ==========================================================================
 * Добавить в style.css
 * «Из чего складывается цена» в карточке авто: полоса долей и строки
 * с процентом и суммой. Наведение на строку подсвечивает её сегмент
 * на полосе и наоборот — это связь строки и цвета, без неё полоса
 * читается как украшение.
 * Разметка: template/10/partials/price-insight/cost-split.php
 * Подсветка: блок .js-cost-split в js/dev.js
 * Цвета сегментов — две палитры, переключает настройка шаблона ccBd:
 * тональная (оттенки серого, цветом выделена только цена авто) и цветная.
 * ========================================================================== */

.cost-split {
    --cost-car:#ef2222;
    --cost-delivery:#9aa4a4;
    --cost-customs:#4e5859;
    --cost-extra:#c5cdce;
    --cost-company:#e1e6e6;
    --cost-hair:rgba(121,131,131,.25);
    --cost-hot:rgba(40,47,47,.055);
}

.cost-split--color {
    --cost-delivery:#1fa88e;
    --cost-customs:#3d7be8;
    --cost-extra:#f0a32e;
    --cost-company:#8e5be8;
}

.dark .cost-split {
    --cost-delivery:#8e9899;
    --cost-customs:#d5dcdd;
    --cost-extra:#5f6a6b;
    --cost-company:#3e4747;
    --cost-hot:rgba(255,255,255,.07);
}

.dark .cost-split--color {
    --cost-delivery:#1fa88e;
    --cost-customs:#3d7be8;
    --cost-extra:#f0a32e;
    --cost-company:#8e5be8;
}

.cost-split__title {
    margin:0 0 14px;
    font-family:var(--font-family);
    font-weight:700;
    font-size:20px;
    line-height:1.2;
    color:var(--primary);
}

.cost-split__bar {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:2px;
    height:12px;
    margin-bottom:6px;
}

.cost-split__seg {
    display:block;
    min-width:3px;
    -webkit-transition:opacity .15s,-webkit-transform .15s;
    transition:opacity .15s,transform .15s;
    -webkit-transform-origin:center;
    transform-origin:center;
}

.cost-split__bar .cost-split__seg:first-child {
    border-radius:6px 0 0 6px;
}

.cost-split__bar .cost-split__seg:last-child {
    border-radius:0 6px 6px 0;
}

.cost-split__seg--car {
    background:var(--cost-car);
}

.cost-split__seg--delivery {
    background:var(--cost-delivery);
}

.cost-split__seg--customs {
    background:var(--cost-customs);
}

.cost-split__seg--extra {
    background:var(--cost-extra);
}

.cost-split__seg--company {
    background:var(--cost-company);
}

.cost-split__list {
    list-style:none;
    margin:0;
    padding:0;
}

.cost-split__row {
    display:grid;
    grid-template-columns:10px 1fr auto auto;
    gap:14px;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin:0 -10px;
    padding:11px 10px;
    border-top:1px solid var(--cost-hair);
    border-radius:10px;
    font-family:var(--font-family);
    font-size:15px;
    color:var(--primary);
    cursor:default;
    -webkit-transition:background .15s;
    transition:background .15s;
}

.cost-split__list .cost-split__row:first-child {
    border-top:0;
}

.cost-split__dot {
    width:10px;
    height:10px;
    border-radius:50%;
}

.cost-split__percent {
    font-style:normal;
    font-size:13px;
    color:var(--gray);
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.cost-split__sum {
    font-weight:600;
    text-align:right;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

/* Подсветка пары «строка — сегмент» */
.cost-split__row.is-hot {
    background:var(--cost-hot);
    border-top-color:transparent;
}

.cost-split__row.is-hot + .cost-split__row {
    border-top-color:transparent;
}

.cost-split__bar .cost-split__seg.is-hot {
    -webkit-transform:scaleY(1.5);
    transform:scaleY(1.5);
    border-radius:3px;
}

.cost-split.is-hover .cost-split__bar .cost-split__seg:not(.is-hot),
.cost-split.is-hover .cost-split__row:not(.is-hot) .cost-split__dot {
    opacity:.4;
}

@media (max-width:575px) {
    .cost-split__title {
        font-size:17px;
    }

    .cost-split__row {
        gap:10px;
        font-size:14px;
    }
}


/* ==========================================================================
 * Добавить в style.css
 * Раскладки правой колонки карточки авто — настройка шаблона ccLayout:
 *   A — цена справа от фото, характеристики широкой полосой ниже (по умолчанию);
 *   B — характеристики справа, цена широкой полосой ниже;
 *   C — обе карточки справа друг под другом (как было до правки).
 * Разметка одна на все три варианта: характеристики (.car-card__info) и блок
 * цены (.car-card__right) — соседние ячейки сетки .car-card, место каждой
 * задаёт модификатор. Сетка .car-card описана в styles.css: две колонки,
 * галерея .car-card__left занимает первую и тянется на три строки.
 * ========================================================================== */

.car-card__info-title {
    margin:0 0 20px;
    font-family:var(--font-family);
    font-weight:700;
    font-size:28px;
    line-height:1.2;
    color:var(--primary);
}

/* Заголовок нужен только широкой полосе: в правой колонке характеристики
   и так стоят первыми и подписи не требуют */
.car-card--lay-B .car-card__info-title,
.car-card--lay-C .car-card__info-title {
    display:none;
}

.car-card--lay-A .car-card__right {
    grid-area:2/2/3/3;
}

.car-card--lay-A .car-card__info {
    grid-area:4/1/5/3;
}

.car-card--lay-B .car-card__info {
    grid-area:2/2/3/3;
}

.car-card--lay-B .car-card__right {
    grid-area:4/1/5/3;
}

.car-card--lay-C .car-card__info {
    grid-area:2/2/3/3;
}

.car-card--lay-C .car-card__right {
    grid-area:3/2/4/3;
}

/* Во всю ширину характеристики встают в четыре колонки: в правой колонке
   их три, и на полной ширине строки вышли бы вдвое длиннее подписи */
@media screen and (min-width:1200px) {
    .car-card--lay-A .car-card__info .car-info {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    /* Сток: пары «подпись — значение» на всю ширину разъезжались бы на
       полэкрана. Разносить их по две в ряд нельзя — часть подписей
       печатается по условию, и один пропущенный span сдвинул бы всё
       дальше по сетке. Поэтому просто прижимаем пару влево. */
    .car-card--lay-A .car-card__info .specifs__col,
    .car-card--lay-B .car-card__info .specifs__col {
        grid-template-columns:-webkit-max-content minmax(0,340px);
        grid-template-columns:max-content minmax(0,340px);
        -webkit-column-gap:40px;
        -moz-column-gap:40px;
        column-gap:40px;
    }

    /* Широкая карточка цены: цена и шкала слева, состав цены справа —
       иначе на всю ширину растягивается один столбец строк.
       Обе колонки — по одному блоку в строке сетки: раньше левые блоки
       стояли в ней по одному, строка подстраивалась под высокий состав
       цены, и между ценой и шкалой зияла дыра. */
    .car-card--lay-B .car-price-wrap {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:56px;
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:start;
    }

    .car-card--lay-B .car-price-wrap > .car-price-wrap__main {
        grid-column:1;
        grid-row:1;
    }

    .car-card--lay-B .car-price-wrap > .cost-split {
        grid-column:2;
        grid-row:1;
        padding-left:56px;
        border-left:1px solid rgba(121,131,131,.25);
    }
}

/* ==========================================================================
 * Добавить в style.css
 * Знак «?» у цены в карточке списка и подсказка «из чего складывается цена».
 * Разметка: template/10/partials/price-insight/price-tip.php
 * Открывается наведением и с клавиатуры, на тач-устройствах — касанием;
 * класс tip-open на карточке ставит блок .js-price-tip в js/dev.js.
 * Подсказка построена на классах cost-split: модификатор --tip только
 * ужимает размеры, цвета сегментов общие с блоком в карточке авто.
 * Привязана не к самому знаку, а к блоку цены (.card__price и соседи) —
 * тогда её ширина равна ширине карточки и не зависит от длины суммы.
 * Селекторы со span: в карточках есть правила вида .card-moto__price span,
 * они задают всем вложенным span свой отступ и кегль, и подсказку разносит.
 * ========================================================================== */

.card__price,
.card-row__price,
.card-moto__price {
    position:relative;
}

/* Карточка обрезает всё, что вылезает за её границы, — на время показа
 * подсказки обрезку снимаем и поднимаем карточку над соседними. */
.card.tip-open,
.card-row.tip-open,
.card-moto.tip-open,
.card-auc.tip-open,
.card-stock.tip-open {
    position:relative;
    z-index:20;
    overflow:visible;
}

span.price-tip {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    width:17px;
    height:17px;
    margin:0 0 0 4px;
    vertical-align:middle;
    border-radius:50%;
    background:rgba(121,131,131,.18);
    font-family:var(--font-family);
    font-weight:600;
    font-size:11px;
    line-height:1;
    color:var(--gray);
    cursor:help;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-transition:background .15s,color .15s;
    transition:background .15s,color .15s;
}

span.price-tip:hover,
span.price-tip:focus,
span.price-tip.is-hot,
span.price-tip.is-open {
    background:var(--primary);
    color:#fff;
    outline:none;
}

.price-tip__pop {
    position:absolute;
    /* Точки слайдера фото (.slick-dots) стоят на z-index:999 внутри того же
       контекста наложения карточки, и на мобильном они рисовались поверх
       окна — это и есть «поехавшая вёрстка» из тикета 19827. */
    z-index:1000;
    left:0;
    right:0;
    bottom:calc(100% + 12px);
    padding:14px 16px 6px;
    border-radius:16px;
    background:var(--bg-card,#fff);
    -webkit-box-shadow:0 12px 34px rgba(40,47,47,.2);
    box-shadow:0 12px 34px rgba(40,47,47,.2);
    font-family:var(--font-family);
    font-weight:400;
    font-size:13px;
    line-height:1.3;
    color:var(--primary);
    text-align:left;
    white-space:normal;
    opacity:0;
    visibility:hidden;
    -webkit-transition:opacity .15s;
    transition:opacity .15s;
}

.price-tip:hover .price-tip__pop,
.price-tip:focus .price-tip__pop,
.price-tip.is-hot .price-tip__pop,
.price-tip.is-open .price-tip__pop {
    opacity:1;
    visibility:visible;
}

/* Мостик до подсказки: пока курсор идёт от знака вверх, он проходит по
 * пустому месту. Мостик принадлежит самой подсказке, поэтому наведение
 * на ней не теряется. Работает только на открытой подсказке —
 * у скрытой (visibility:hidden) события мыши не ловятся. */
.price-tip__pop::before {
    content:'';
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:14px;
}

/* Хвостик указывает на блок цены, а не на сам знак: подсказка шире знака
 * и привязана к блоку, стрелка по центру блока читается вернее. */
.price-tip__pop::after {
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-8px;
    border:8px solid transparent;
    border-top-color:var(--bg-card,#fff);
}

/* Сброс правил карточки для всего, что внутри подсказки: кегль, начертание,
 * цвет и отступы задаёт сама подсказка (в стоке, например, цена белая,
 * и без сброса белым становился весь текст). Собственные размеры
 * возвращаются ниже — у них выше специфичность. */
.price-tip__pop span,
.price-tip__pop i,
.price-tip__pop b,
.price-tip__pop em {
    margin:0;
    font-family:var(--font-family);
    font-size:inherit;
    font-weight:inherit;
    font-style:normal;
    color:inherit;
}

.cost-split--tip {
    display:block;
}

.cost-split--tip .cost-split__title {
    display:block;
    margin:0 0 8px;
    font-weight:600;
    font-size:13px;
    line-height:1.3;
    color:var(--gray);
}

.cost-split--tip .cost-split__bar {
    height:10px;
    margin-bottom:2px;
}

.cost-split--tip .cost-split__list {
    display:block;
}

.cost-split--tip .cost-split__row {
    grid-template-columns:8px minmax(0,1fr) auto;
    gap:10px;
    margin:0 -8px;
    padding:8px;
    border-radius:8px;
    font-size:13px;
}

.cost-split--tip .cost-split__dot {
    width:8px;
    height:8px;
}

.cost-split--tip .cost-split__percent {
    margin-left:3px;
    font-size:12px;
    color:var(--gray);
    white-space:nowrap;
}

.cost-split--tip .cost-split__sum {
    font-weight:600;
    font-size:13px;
    white-space:nowrap;
}

@media screen and (max-width:767px) {
    .price-tip__pop {
        padding:12px 14px 4px;
    }

    .cost-split--tip,
    .cost-split--tip .cost-split__row,
    .cost-split--tip .cost-split__sum {
        font-size:12px;
    }
}

/* ==========================================================================
 * Добавить в style.css
 * Варианты вывода характеристик в карточке авто.
 * Классы ставит шаблон на .car-card__info по настройкам ccSpec, ccIcons и
 * ccLbl; значения по умолчанию (spec-col, icons-1, lbl-14) повторяют нынешний
 * вид карточки — пока в настройках не выбрали другой вариант, ничего
 * не меняется.
 * Разметка у направлений разная: Корея, Китай, Статистика и Аукционы выводят
 * .car-info с иконкой, подписью и значением, Сток — .specifs двумя колонками
 * из чередующихся span. Поэтому у каждого варианта два набора правил.
 * ========================================================================== */

/* Размер подписи параметра. Значение не трогаем: рядом с крупной подписью
 * мелкое значение читается хуже, чем наоборот. */
.car-card__info--lbl-14 .car-info__label,
.car-card__info--lbl-14 .specifs__col span:nth-child(odd) {
    font-size:14px;
}

.car-card__info--lbl-12 .car-info__label,
.car-card__info--lbl-12 .specifs__col span:nth-child(odd) {
    font-size:12px;
}

/* Иконки параметров. Без них колонка под иконку не нужна — иначе подпись
 * и значение остаются с пустым отступом слева. */
.car-card__info--icons-0 .car-info__icon {
    display:none;
}

.car-card__info--icons-0 .car-info__item {
    grid-template-columns:minmax(0,1fr);
}

/* «Строкой с отточием»: подпись и значение в одну строку, между ними
 * пунктир. Он строится на ::after подписи — это единственный способ
 * дотянуть пунктир ровно до значения при любой длине подписи.
 * Колонка подписи не уже её текста (min-content): при minmax(0,1fr) подпись
 * вылезала из своей ячейки и наезжала на значение. */
.car-card__info--spec-row .car-info__item {
    grid-template-columns:30px minmax(-webkit-min-content,1fr) minmax(0,auto);
    grid-template-columns:30px minmax(min-content,1fr) minmax(0,auto);
    -webkit-box-align:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;
    gap:4px 12px;
}

.car-card__info--spec-row.car-card__info--icons-0 .car-info__item {
    grid-template-columns:minmax(-webkit-min-content,1fr) minmax(0,auto);
    grid-template-columns:minmax(min-content,1fr) minmax(0,auto);
}

.car-card__info--spec-row .car-info__icon {
    grid-area:auto;
    -ms-flex-item-align:center;
    align-self:center;
}

.car-card__info--spec-row .car-info__label,
.car-card__info--spec-row .specifs__col span:nth-child(odd) {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;
}

.car-card__info--spec-row .car-info__label::after,
.car-card__info--spec-row .specifs__col span:nth-child(odd)::after {
    content:'';
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto;
    min-width:16px;
    margin:0 0 .25em 8px;
    border-bottom:1px dotted var(--border);
}

/* Длинное значение (модификация целиком) в узкой колонке переносим —
 * иначе оно наезжает на подпись соседнего параметра. */
.car-card__info--spec-row .car-info__value,
.car-card__info--spec-row .specifs__col span:nth-child(even) {
    min-width:0;
    overflow-wrap:break-word;
    text-align:right;
}

/* У стока колонка подписей резиновая: под отточие нужен запас ширины,
 * а max-content из раскладок A и B его не оставляет. Специфичность
 * из двух классов на одном элементе — чтобы перебить те правила. */
.car-card__info--spec-row.car-card__info .specifs__col {
    grid-template-columns:minmax(-webkit-min-content,1fr) minmax(0,auto);
    grid-template-columns:minmax(min-content,1fr) minmax(0,auto);
    -webkit-column-gap:12px;
    -moz-column-gap:12px;
    column-gap:12px;
}

/* Отточию нужна широкая строка: в четыре колонки значение переносится
 * по три строки и вариант нельзя оценить. Поэтому колонок вдвое меньше —
 * во всю ширину (раскладка A) две, в правой колонке одна. */
.car-card__info--spec-row.car-card__info .car-info {
    grid-template-columns:minmax(0,1fr);
}

@media screen and (min-width:1200px) {
    .car-card--lay-A .car-card__info--spec-row .car-info {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* ==========================================================================
 * Добавить в style.css
 * Вкладка «Карточка авто» в панели настроек демо (класс design).
 * Варианты в ней длиннее, чем в остальных вкладках («A — цена,
 * характеристики, шкала»), и их до четырёх: в общей горизонтальной прокрутке
 * видно только первые полтора. Здесь переносим их по строкам.
 * ========================================================================== */

#settings7 .theme-settings {
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    gap:12px;
    overflow-x:visible;
}

/* ==========================================================================
 * Добавить в style.css
 * Цвет итоговой цены в карточке авто — настройка ccPrice.
 * Красный (как сейчас) выделяет цену на фоне остальных строк; тёмный
 * ставит её в один ряд с ними, тогда акцентом остаётся только размер.
 * Класс ставит шаблон на .car-card рядом с раскладкой.
 * ========================================================================== */

.car-card--price-dark .car-price .car-price__item .red {
    color:var(--primary);
}

/* ==========================================================================
 * Добавить в style.css
 * Шкала «Средняя цена»: варианты zones и steps (настройка ccScale).
 * Градиент с ползунком (grad) — прежняя вёрстка, она уже в style.css.
 * Разметка: template/10/partials/price-insight/compare-price.php,
 * положение метки и подпись считает Iastudio\PriceInsight::scale().
 * ========================================================================== */

.compare-price__track {
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:3px;
    height:8px;
    margin:4px 0 10px;
}

.compare-price__zone {
    display:block;
    border-radius:4px;
}

.compare-price__zone--good {
    -webkit-box-flex:0;
    -ms-flex:0 0 calc(33.33% - 2px);
    flex:0 0 calc(33.33% - 2px);
    background:rgba(61,191,0,.18);
}

/* Ширины зон повторяют пороги вердикта (good <= 33, high >= 67):
   при 35/35/30 метка на 66 % попадала в красную зону, а подпись оставалась
   «средняя». */
.compare-price__zone--mid {
    -webkit-box-flex:0;
    -ms-flex:0 0 calc(33.33% - 2px);
    flex:0 0 calc(33.33% - 2px);
    background:rgba(121,131,131,.2);
}

.compare-price__zone--high {
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto;
    background:rgba(239,34,34,.16);
}

/* Метку центрируем отрицательным полем, а не transform: шкала стоит
 * в карточке рядом с подсказками, лишний слой ей ни к чему. */
.compare-price__dot {
    position:absolute;
    top:50%;
    width:18px;
    height:18px;
    margin:-9px 0 0 -9px;
    border:3px solid var(--bg-card,#fff);
    border-radius:50%;
    -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2);
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    background:var(--primary);
}

.compare-price--good .compare-price__dot {
    background:var(--green,#3dbf00);
}

.compare-price--high .compare-price__dot {
    background:var(--secondary);
}

.compare-price__zones {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-family:var(--font-family);
    font-size:12px;
    line-height:1.2;
    color:var(--gray);
    text-align:center;
}

.compare-price__zones span {
    -webkit-box-flex:0;
    -ms-flex:0 0 33.33%;
    flex:0 0 33.33%;
}

.compare-price__zones span:last-child {
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto;
}

.compare-price__zones span.on {
    font-weight:600;
    color:var(--primary);
}

.compare-price__steps {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:5px;
    height:10px;
    margin:4px 0 10px;
}

.compare-price__steps i {
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto;
    border-radius:5px;
    background:rgba(121,131,131,.22);
}

.compare-price__steps i.on {
    background:var(--step-color);
}

/* Текущая ступень обведена кольцом цвета самой ступени. */
.compare-price__steps i.cur {
    -webkit-box-shadow:0 0 0 3px var(--bg-card,#fff),0 0 0 5px var(--step-color);
    box-shadow:0 0 0 3px var(--bg-card,#fff),0 0 0 5px var(--step-color);
}

.compare-price__ends {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    font-family:var(--font-family);
    font-size:12px;
    line-height:1.2;
    color:var(--gray);
}

/* ==========================================================================
 * Добавить в style.css
 * Кнопка «Панель настроек»: наведение ловит только сама кнопка.
 * Обёртка .settings__open занимает ширину РАЗВЁРНУТОЙ кнопки (261 px), сама
 * кнопка сдвинута за левый край и видна на 68 px. Из-за этого панель
 * выезжала, когда курсор попадал в невидимую полосу справа от иконки.
 * Обёртка перестаёт ловить курсор, кнопка — ловит; :hover у обёртки
 * по-прежнему срабатывает, потому что наведение на потомка поднимается вверх.
 * ========================================================================== */

.settings__open {
    pointer-events:none;
}

.settings__open .settings__btn {
    pointer-events:auto;
}

/* ==========================================================================
 * Добавить в style.css
 * Характеристики: иконка и подпись параметра — серые, значение тёмное.
 * В утверждённом макете иконка и подпись нарисованы цветом --gray, на сайте
 * они унаследовали основной тёмный цвет и блок читался сплошным чёрным
 * списком, где подпись не отличается от значения.
 * Правила ограничены блоком .car-card__info: те же классы .car-info
 * использует блок отзывов, его трогать нельзя.
 * ========================================================================== */

.car-card__info .car-info__icon svg {
    fill:var(--gray);
}

.car-card__info .car-info__label,
.car-card__info .specifs__col span:nth-child(odd) {
    color:var(--gray);
}

/* Подпись параметра в одну строку: в макете длинная подпись не переносится,
 * а обрезается — иначе строки в колонках разъезжаются по высоте. */
.car-card__info .car-info__label {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* В варианте «строкой с отточием» подпись и так в одну строку, а обрезка
 * там мешает отточию посчитать свою ширину. */
.car-card__info--spec-row .car-info__label {
    overflow:visible;
    text-overflow:clip;
}


/* ===== Панель настроек: скролл страницы, тень справа, ширина =====
 * Добавить в style.css */

/* Страница за панелью снова листается (блокировку сняли в scripts.js),
 * но колесо над самой панелью не должно «пробивать» на страницу, когда
 * список настроек докручен до конца. Скроллер на десктопе —
 * .settings-modal__tabs, на узких экранах — .settings-modal__main. */
.settings-modal__tabs {
    overscroll-behavior:contain;
}
@media screen and (max-width:1023px) {
    .settings-modal__main {
        overscroll-behavior:contain;
    }
}

/* Тень справа, чтобы белая панель не сливалась с белой страницей.
 * Направление и мягкость — как у кнопки-открывашки, только без сдвига
 * по вертикали: панель во всю высоту экрана. */
.settings-modal {
    box-shadow:8px 0 30px 0 rgba(0,0,0,.18);
}
/* Ниже 1024px панель разворачивается во весь экран — тени некуда падать. */
@media screen and (max-width:1023px) {
    .settings-modal {
        box-shadow:none;
    }
}

/* Ширина панели 935px -> 840px (-10%), чтобы правая колонка карточки авто
 * была видна шире. Медиазапрос обязателен: без него это правило перебило бы
 * width:100% полноэкранного режима. */
@media screen and (min-width:1024px) {
    .settings-modal {
        width:840px;
    }
}


/* ==========================================================================
 * Добавить в style.css
 * Крупная гистограмма продаж на странице авто (аукционы Японии и сток).
 * В дизайне это самостоятельный блок во всю ширину колонки: подпись и
 * средняя цена сверху, столбики высотой 118px, под ними — объём выборки.
 * В карточках списка гистограмма остаётся компактной (.sold-chart без --big).
 * Разметка: template/10/partials/price-insight/average-price.php
 * ========================================================================== */

.car-average-price--big {
    display:grid;
    gap:10px;
}

.car-average-price--big .car-average-price__head {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    gap:12px;
    font-family:var(--font-family);
    font-weight:400;
    font-size:14px;
    line-height:1.3;
    color:var(--gray);
}

.car-average-price--big .car-average-price__head b {
    font-weight:700;
    font-size:20px;
    line-height:1.2;
    white-space:nowrap;
    color:var(--sold-accent);
}

/* Столбики крупного графика: шире, с промежутком и скруглением по макету.
 * padding-top резервирует место под подсказку — она всплывает внутри графика,
 * а не над ним, иначе наезжает на строку со средней ценой. */
.sold-chart--big {
    gap:5px;
    height:118px;
    padding-top:24px;
}

.sold-chart--big b {
    min-width:6px;
    max-width:54px;
    border-radius:3px 3px 0 0;
    opacity:.85;
    -webkit-transition:opacity .12s;
    transition:opacity .12s;
}

.sold-chart--big b[data-last] {
    opacity:1;
}

/* При наведении на график гасим все столбики и подсвечиваем нужный —
 * так видно, к какому именно относится подсказка. */
.sold-chart--big:hover b {
    opacity:.45;
}

.sold-chart--big b:hover {
    opacity:1;
}

.sold-chart--big .sold-chart__avg {
    border-top:1px dashed var(--border);
    opacity:1;
}

.sold-chart--big .sold-chart__avg em {
    position:absolute;
    right:0;
    bottom:2px;
    padding:0 4px;
    background:var(--bg-card);
    font-style:normal;
    font-size:11px;
    line-height:1.3;
    color:var(--gray);
}

.sold-chart--big .sold-chart__hint {
    top:0;
    bottom:auto;
}

.car-average-price--big .car-average-price__foot {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    gap:12px;
    font-family:var(--font-family);
    font-weight:400;
    font-size:12px;
    line-height:1.3;
    color:var(--gray);
}

@media screen and (max-width:520px) {
    .car-average-price--big .car-average-price__head {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start;
        gap:2px;
    }
}


/* ==========================================================================
 * Добавить в style.css
 * Блок цены на странице авто по макету: слева подпись и крупный итог,
 * справа — исходная цена источника с подписью. Раньше это были две
 * равнозначные строки с отточием, и итог не читался как главный.
 * Разметка: template/10/partials/price-insight/price-hero.php
 * ========================================================================== */

.car-price-hero {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-align:end;
    -ms-flex-align:end;
    align-items:flex-end;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    gap:20px;
}

/* На аукционах под итогом есть пояснение про торги — колонки выравниваем
 * по верху, иначе исходная цена уезжает вниз вслед за пояснением. */
.car-price-hero--auc {
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
}

.car-price-hero__lbl {
    margin-bottom:8px;
    font-family:var(--font-family);
    font-weight:400;
    font-size:14px;
    line-height:1.3;
    color:var(--gray);
}

.car-price-hero__total {
    font-family:var(--font-family);
    font-weight:700;
    font-size:36px;
    line-height:1.05;
    letter-spacing:-.015em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--secondary);
}

/* Настройка ccPrice: тёмный итог вместо красного */
.car-card--price-dark .car-price-hero__total {
    color:var(--primary);
}

.car-price-hero__note {
    max-width:330px;
    margin-top:7px;
    font-family:var(--font-family);
    font-weight:400;
    font-size:12px;
    line-height:1.35;
    color:var(--gray);
}

.car-price-hero__src {
    font-family:var(--font-family);
    font-weight:600;
    font-size:16px;
    line-height:1.3;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    text-align:right;
    color:var(--primary);
}

.car-price-hero__src small {
    display:block;
    margin-top:5px;
    font-weight:400;
    font-size:13px;
    line-height:1.3;
    color:var(--gray);
}

/* Плашка смены пошлины переехала из-под заголовка под итог — по макету
 * она объясняет именно эту сумму. */
.car-price-hero__duty {
    margin-top:10px;
}

@media screen and (max-width:767px) {
    .car-price-hero {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start;
        gap:8px;
    }

    .car-price-hero__src {
        font-size:14px;
        text-align:left;
    }

    .car-price-hero__src small {
        display:inline;
        margin:0 0 0 6px;
    }

    .car-price-hero__src small::before {
        content:"\00b7\00a0";
    }
}

@media screen and (max-width:575px) {
    .car-price-hero__total {
        font-size:28px;
    }
}


/* ==========================================================================
 * Добавить в style.css
 * Строка над ценой: статус лота, его номер со ссылкой на источник и даты.
 * Эти поля были в «Характеристиках» вперемешку с параметрами авто — по
 * макету они относятся к сделке, а не к машине, и стоят над ценой.
 * Разметка: template/10/partials/price-insight/car-meta.php
 * ========================================================================== */

.car-meta {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    gap:10px 20px;
    margin-bottom:20px;
    font-family:var(--font-family);
    font-weight:400;
    font-size:13px;
    line-height:1.3;
    color:var(--gray);
}

.car-meta__chip {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    gap:8px;
    height:30px;
    padding:0 13px;
    border-radius:100px;
    font-weight:600;
    font-size:13px;
    line-height:1;
    background:rgba(121,131,131,.12);
    color:var(--primary);
}

/* Зелёная плашка — авто ещё продаётся */
.car-meta__chip--ok {
    background:rgba(61,191,0,.14);
    color:#2f8a00;
}

.car-meta__chip--ok::before {
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3dbf00;
}

/* Красная — статус надо проверить у источника, это ссылка */
.car-meta__chip--check {
    background:rgba(239,34,34,.12);
    color:var(--secondary);
}

a.car-meta__chip--check:hover {
    color:var(--secondary);
}

.car-meta__lot {
    font-weight:600;
    color:var(--secondary);
}

.car-meta__lot svg {
    width:12px;
    height:12px;
    margin:-2px 0 0 3px;
    vertical-align:middle;
    fill:var(--secondary);
}

/* Квадратик с логотипом площадки перед её названием */
.car-meta__src {
    display:-ms-inline-grid;
    display:inline-grid;
    place-items:center;
    width:18px;
    height:18px;
    margin-right:5px;
    border-radius:5px;
    vertical-align:-4px;
    background:#ffcc32;
    color:#000;
}

.car-meta__src svg {
    width:13px;
    height:13px;
    fill:currentColor;
}

/* Внутри карточки цены вертикальный ритм задаёт gap самой карточки —
 * собственный отступ строки его удваивал. */
.car-price-wrap > .car-meta {
    margin-bottom:0;
}


/* ==========================================================================
 * Добавить в style.css
 * Схемы раскладок в «Панели настроек»: три варианта в ряд, под каждым —
 * картинка, что и где окажется на странице авто.
 * Разметка: class/design/Class.html + partials/price-insight/card-layout-preview.php
 * ========================================================================== */

.settings-variants--three .settings-variants__item {
    width:calc(33.333% - 14px);
    padding:15px;
}

.settings-variants--three .settings-variants__item label {
    gap:10px;
    margin-bottom:12px;
    font-size:14px;
    line-height:1.2;
}

.settings-prev {
    display:block;
    height:120px;
    overflow:hidden;
    border:1px solid #e7eced;
    border-radius:10px;
    background:#f8f7f7;
}

.settings-prev svg {
    display:block;
    width:100%;
    height:100%;
}

/* На узкой панели три схемы в ряд уже не читаются */
@media screen and (max-width:767px) {
    .settings-variants--three .settings-variants__item {
        width:100%;
    }
}


/* ==========================================================================
 * Добавить в style.css
 * Левая колонка карточки цены: цена, шкала и остальные строки одним блоком.
 * Нужна раскладке B, где состав цены уходит во вторую колонку, — и не мешает
 * остальным раскладкам: там это просто обычная колонка с тем же шагом 30px.
 * ========================================================================== */

.car-price-wrap__main {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    gap:30px;
}


/* ==========================================================================
 * Добавить в style.css
 * Мгновенное применение настроек карточки: панель настроек вешает класс на
 * <html>, чтобы спрятать то, что php уже нарисовал, без перезагрузки.
 * Скрипт: class/design/scripts.js, функция applyCcLive()
 * ========================================================================== */

.pa-cc-tip-0 .price-tip {
    display:none;
}

.pa-cc-decod-0 .card__decod,
.pa-cc-decod-0 .card-row__decod,
.pa-cc-decod-0 .card-moto__decod {
    display:none;
}


/* ==========================================================================
 * Добавить в style.css
 * Свёрнутые блоки на странице авто: «Комплектация», «Страховая история»,
 * «Схема и список повреждений», «Внутренний осмотр».
 * Общее правило .hide_part притеняет содержимое (opacity .6) — здесь это
 * мешает читать таблицы и схему, а подсказка «развернуть» и так есть
 * под блоком: сам .box__wrap остаётся приглушённым, пока блок свёрнут.
 * ========================================================================== */

.equipment.hide_part,
.insurance.hide_part,
.damage.hide_part,
.report.hide_part {
    opacity:1;
}


/* ==========================================================================
 * Добавить в style.css
 * Рыночная шкала (настройка ccScale = market). В отличие от «зон», ось здесь
 * настоящая: от самой дешёвой похожей машины до самой дорогой. Тёмная полоса —
 * середина рынка (p25…p75), вертикальная черта — типичная цена, точка — место
 * этой машины в ряду. Данные: колонки grp_* каталога, метод PriceInsight::market().
 * Разметка: template/10/partials/price-insight/compare-price.php
 * ========================================================================== */

.compare-price__header--market {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
}

.market-scale {
    position:relative;
    height:22px;
    margin:10px 0 0;
}

.market-scale__rail {
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:6px;
    margin-top:-3px;
    border-radius:3px;
    background:linear-gradient(90deg,rgba(99,201,110,.3) 0%,rgba(241,210,90,.32) 50%,rgba(239,114,114,.32) 100%);
}

/* Середина рынка: половина похожих машин стоит в этих границах */
.market-scale__band {
    position:absolute;
    top:50%;
    height:12px;
    margin-top:-6px;
    border-radius:6px;
    opacity:.85;
    cursor:help;
    background:linear-gradient(90deg,#63c96e 0%,#f1d25a 50%,#ef7272 100%);
}

.market-scale__median {
    position:absolute;
    top:50%;
    width:2px;
    height:24px;
    margin-top:-12px;
    border-radius:1px;
    cursor:help;
    background:var(--primary);
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}

.market-scale__median::after {
    content:"";
    position:absolute;
    left:50%;
    top:-6px;
    width:6px;
    height:6px;
    margin-left:-3px;
    border-radius:50%;
    background:var(--primary);
}

/* Стрелка на краю: ось обрезана, за ней есть ещё предложения */
.market-scale__more {
    position:absolute;
    top:50%;
    width:0;
    height:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    cursor:help;
}

.market-scale__more--lo {
    left:-9px;
    border-right:7px solid var(--gray);
}

.market-scale__more--hi {
    right:-9px;
    border-left:7px solid var(--gray);
}

.market-scale__dot {
    position:absolute;
    top:50%;
    width:18px;
    height:18px;
    border:3px solid var(--bg-card);
    border-radius:50%;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

.market-scale__dot--good {
    background:#3dbf00;
}

.market-scale__dot--mid {
    background:var(--primary);
}

.market-scale__dot--high {
    background:var(--secondary);
}

.market-scale__ends {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    gap:12px;
    margin-top:8px;
    font-family:var(--font-family);
    font-weight:400;
    font-size:11px;
    line-height:1.25;
    color:var(--gray);
}

.market-scale__end {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    gap:1px;
    font-style:normal;
}

.market-scale__end--r {
    text-align:right;
}

.market-scale__end b {
    font-weight:400;
    font-size:13px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--primary);
}

.market-scale__half {
    padding-top:3px;
    text-align:center;
}

.market-scale__meta {
    margin-top:4px;
    font-family:var(--font-family);
    font-weight:400;
    font-size:12px;
    line-height:1.3;
    text-align:center;
    color:var(--gray);
}

/* В карточке списка шкала уже — подпись про половину предложений не влезает */
.card__price .market-scale__half,
.card-row__price .market-scale__half,
.card-moto__price .market-scale__half {
    display:none;
}

/* Вердикт рыночной шкалы — плашка, а не серая строка: «Дешевле 75 %»
 * само по себе не говорит, хорошо это или плохо. */
.compare-price--market .compare-price__value {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:26px;
    padding:0 11px;
    border-radius:100px;
    font-weight:600;
    font-size:13px;
    line-height:1;
    background:rgba(121,131,131,.12);
    color:var(--primary);
}

.compare-price--market.compare-price--good .compare-price__value {
    background:rgba(61,191,0,.14);
    color:#2f8a00;
}

.compare-price--market.compare-price--high .compare-price__value {
    background:rgba(239,34,34,.12);
    color:var(--secondary);
}

/* ==========================================================================
 * Добавить в style.css
 * Плашка «Санкционный авто» в карточке списка. Раньше она лежала внутри
 * .car-price__item и оттуда же брала размер значка и пунктирную отбивку;
 * отбивка в этом месте лишняя, поэтому обёртку сняли, а размер значка
 * переносим сюда.
 * ========================================================================== */

.card__sanction {
    margin-top:10px;
}

.card__sanction svg {
    position:relative;
    top:3px;
    left:3px;
    width:15px;
    height:15px;
    cursor:pointer;
    fill:var(--secondary);
}

/* ==========================================================================
 * Добавить в style.css
 * Карточка стока в списке была неоправданно высокой: под название
 * резервировалось две строки (min-height:54px), даже когда оно в одну,
 * и сверху этого лежал отступ 25px. Итого до характеристик — почти 60px
 * пустоты. Правило только для стока (.card-auc), остальные списки не трогаем.
 * ========================================================================== */

.card-auc .card__car {
    min-height:0;
    margin-bottom:0;
}

/* Блок в колонке — отступы соседей не схлопываются, поэтому 14px названия
 * и 27px характеристик складывались в 41px. Оставляем один отступ. */
.card-auc .card__info {
    margin-top:16px;
}

/* Схема раскладки — тоже подпись к полю выбора, вариант берётся кликом по
 * картинке. Общий стиль подписи в .settings-variants__item рисует кружок
 * радиокнопки и раскладывает содержимое в строку — здесь это лишнее. */
label.settings-prev {
    display:block;
    margin:0;
    gap:0;
    cursor:pointer;
}

label.settings-prev::before {
    content:none;
    display:none;
}

/* Штрихи аналогов на рыночной шкале: одно деление оси — один штрих, плотность
   в --tick (0..1). Считает Iastudio\PriceInsight::marketTicks(), только на
   странице авто: в списке это было бы 12 запросов на просмотр. */
.market-scale__tick {
    position:absolute;
    top:50%;
    width:1px;
    height:11px;
    margin-top:-5.5px;
    background:#39414f;
    opacity:calc(.07 + var(--tick,0) * .58);
    pointer-events:none;
}

/* Своя подсказка рыночной шкалы вместо браузерного title: текст и положение
   ставит js/dev.js по курсору. */
.market-scale__hint {
    position:absolute;
    top:calc(100% + 7px);
    left:50%;
    z-index:6;
    transform:translateX(-50%);
    padding:5px 9px;
    border-radius:8px;
    background:#282f2f;
    color:#fff;
    font-size:12px;
    font-style:normal;
    font-weight:500;
    line-height:1.25;
    white-space:nowrap;
    pointer-events:none;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.market-scale:hover .market-scale__band {
    filter:saturate(1.15) brightness(1.02);
}

.market-scale__more {
    cursor:help;
}

/* ==========================================================================
 * Добавить в style.css
 * Цена и знак «?» — один элемент строки.
 * В карточке-строке .card-row__price > p:first-child это flex-колонка
 * с обратным порядком: так пометка «ориентировочно» встаёт над суммой.
 * Знак «?» попадал туда же отдельным элементом и вставал отдельной строкой.
 * Обёртка .price-val делает сумму со знаком одним элементом колонки.
 * Правила вида .card-row__price > p span и .card-moto__price span задают
 * вложенным span свой отступ и кегль — для обёртки их снимаем, иначе она
 * сдвигает цену вправо и сбивает кегль.
 *
 * Класс в селекторе повторён дважды намеренно: перебиваемые правила живут
 * в styles.css и опираются на структуру (где-то класс на .card-row__price,
 * где-то на самом <p>), поэтому селектор по структуре ненадёжен — нужен
 * вес выше, чем у .card-row__price > p:first-child span.
 * ========================================================================== */

.card-row__price .price-val.price-val,
.card__price .price-val.price-val,
.card-moto__price .price-val.price-val,
.card-auc__price .price-val.price-val,
.card-stock__price .price-val.price-val {
    margin:0;
    font:inherit;
    color:inherit;
}

/* Знак «?» стоит в строке с суммой — небольшой отступ, чтобы он не прилипал
   к «₽». Вес селектора тот же, что у обёртки: перебиваем отступы для span
   из styles.css, которые в разных карточках дают то 20, то 30 пикселей. */
.card-row__price .price-val.price-val > .price-tip,
.card__price .price-val.price-val > .price-tip,
.card-moto__price .price-val.price-val > .price-tip,
.card-auc__price .price-val.price-val > .price-tip,
.card-stock__price .price-val.price-val > .price-tip {
    margin-left:8px;
}


/* ==========================================================================
 * Правки по тикетам 19824 / 19825 / 19827 (18.09.2026)
 * ========================================================================== */

/* «от» слева, «до» справа. Строка была flex с переносом, и длинный вердикт
   («Дороже 92 % похожих») сбрасывал max на вторую строку — обе цифры
   оказывались слева. Сетка из трёх колонок держит края на месте, а вердикт
   переносится внутри своей ячейки. */
.compare-price__header:not(.compare-price__header--market) {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-box-align:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;
    gap:2px 8px;
}

.compare-price__header:not(.compare-price__header--market) .compare-price__value {
    text-align:center;
}

.compare-price__header .compare-price__min {
    justify-self:start;
}

.compare-price__header .compare-price__max {
    justify-self:end;
}

/* Подсказки-«пузыри». Раньше фон брался из var(--primary), а текст был
   захардкожен #fff; в тёмной теме --primary становится белым, и подсказка
   выходила белым по белому. Свои токены не зависят от темы текста. */
:root {
    --tip-bg:#282f2f;
    --tip-fg:#ffffff;
}

.dark {
    --tip-bg:#3b4248;
    --tip-fg:#ffffff;
}

.duty-badge::after,
.sold-chart__hint,
.market-scale__hint {
    background:var(--tip-bg);
    color:var(--tip-fg);
}

/* Плашка пошлины в тёмной теме: тёмно-зелёный и алый на почти чёрном фоне
   бьют по глазам. Тон светлее, подложка тише. */
.dark .duty-badge--down {
    color:#7fd06a;
    background:rgba(61,191,0,.10);
}

.dark .duty-badge--up {
    color:#ff9b9b;
    background:rgba(239,34,34,.10);
}


/* ==========================================================================
 * Правки 4.6 / 4.8 / 4.9 по документу Стаса (18.09.2026)
 * ========================================================================== */

/* 4.6. История цен в списке.
   Гистограмма прижимается к правому краю карточки — раньше она висела
   сразу за подписью и у карточек с разной длиной подписи стояла по-разному. */
.average-price {
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.average-price__icon {
    margin-left:auto;
}

/* Статус лота — ярлыком, а не строкой текста: строка терялась под ценой. */
.catalog-grid .card .card__status,
.card-row .card__status,
.card-moto .card__status {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -ms-flex-item-align:start;
    align-self:flex-start;
    gap:4px;
    margin-block:10px 0;
    padding:4px 10px;
    border-radius:40px;
    background:rgba(239,34,34,.12);
    color:#d42020;
    font-weight:500;
}

.card__status b,
.card__status .red {
    color:inherit;
    font-weight:700;
}

.dark .catalog-grid .card .card__status,
.dark .card-row .card__status,
.dark .card-moto .card__status {
    color:#ff9b9b;
    background:rgba(239,34,34,.10);
}

/* Отступ «заголовок → характеристики» гулял от 0 до 98 px: распорка
   margin-top:auto стояла на .card__info, и свободная высота карточки копилась
   ровно под названием. Переносим распорку ниже характеристик — верх карточки
   теперь одинаковый у всех, а нижняя группа по-прежнему прижата к низу. */
.catalog-grid .card .card__info {
    margin-top:14px;
}

.catalog-grid .card .card__price {
    margin-top:auto;
}

/* 4.8. Промежуточная область между заголовком и ценой на странице авто:
   убираем лишний воздух, сами элементы остаются на месте. */
.car-price-wrap {
    padding-top:24px;
    gap:20px;
}

.car-price-wrap__main {
    gap:20px;
}

/* 4.9. Мобильная версия: блок характеристик и правая колонка были разложены
   слишком размашисто. */
@media screen and (max-width:767px) {
    .car-price-wrap {
        padding:16px;
        gap:14px;
    }

    .car-price-wrap__main {
        gap:14px;
    }

    .car-card__info .car-info {
        row-gap:10px;
    }

    .car-card__info .car-info__item {
        gap:2px;
    }
}


/* ==========================================================================
 * Каталог комплектаций: отличия в «Других комплектациях» (18.09.2026)
 * Карточки одной модели за один период выглядели одинаково — теперь под
 * названием стоят значения тех полей, которыми комплектация отличается от
 * открытой (кузов-код, объём, привод, КПП, топливо, цена базовой версии).
 * ========================================================================== */

.car-other__diff {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    gap:4px;
    margin-top:6px;
}

.car-other__diff span {
    padding:2px 8px;
    border-radius:40px;
    background:var(--bg-box,#f8f7f7);
    font-family:var(--font-family);
    font-weight:500;
    font-size:11px;
    line-height:1.3;
    color:var(--primary);
    white-space:nowrap;
}

.dark .car-other__diff span {
    background:rgba(255,255,255,.08);
}


/* ==========================================================================
 * История цен в каталогах (18.09.2026)
 * Блок рисует partials/price-insight/price-history.php, показ включается
 * настройками макета ccPhList / ccPhCar. Классы .ph-* те же, что в разделе
 * /price_history_agg/, — у раздела они объявлены локально, здесь нужны глобально.
 * ========================================================================== */

.ph-block {
    margin:0 0 24px;
    padding:20px 24px 16px;
    border:1px solid var(--border,#e8ecf1);
    border-radius:16px;
    background:var(--bg-card,#fff);
}

.ph-block__head {
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-box-align:baseline;
    align-items:baseline;
    gap:4px 16px;
    margin-bottom:6px;
}

.ph-block__title {
    margin:0;
    font-size:20px;
    line-height:1.25;
    font-weight:600;
    color:var(--primary);
}

.ph-block__more {
    font-size:14px;
    color:var(--secondary);
    white-space:nowrap;
}

.ph-block__note {
    margin:0 0 14px;
    font-size:13px;
    line-height:1.5;
    color:var(--font-gray,gray);
}

.ph-up { color:#d64545; }
.ph-down { color:#27924a; }

.ph-charts {
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:16px;
}

.ph-chart {
    min-width:0;
    padding:12px 14px 6px;
    border:1px solid var(--border,#e8ecf1);
    border-radius:10px;
    background:var(--bg-box,#fff);
}

.ph-chart__head {
    display:flex;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-box-align:baseline;
    align-items:baseline;
    gap:10px;
    margin-bottom:4px;
}

.ph-chart__head b { font-size:14px; color:var(--primary); }
.ph-chart__head span { font-size:12px; color:var(--font-gray,gray); }
.ph-chart__svg { display:block; width:100%; height:auto; }

/* Полотно под ширину экрана: SVG тянется вместе с текстом, и одно полотно
   viewBox 1100 на телефоне ужимается втрое — подписи становятся по 4 px.
   Поэтому рисуем два и переключаем медиазапросом. */
.ph-chart__svg--pc { max-width:1100px; margin:0 auto; }
.ph-chart__svg--mob { display:none; }

.ph-chart--empty {
    display:flex;
    -webkit-box-pack:justify;
    justify-content:space-between;
    color:var(--font-gray,gray);
    font-size:13px;
}

.ph-chart__legend {
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    gap:6px 16px;
    padding:2px 0 8px;
    font-size:12px;
    color:var(--font-gray,gray);
}

.ph-chart__key {
    display:-webkit-inline-box;
    display:inline-flex;
    -webkit-box-align:center;
    align-items:center;
    gap:6px;
}

.ph-chart__key::before { content:''; display:block; border-radius:2px; }
.ph-chart__key--line::before { width:14px; height:3px; background:var(--k,#2f80ed); }
.ph-chart__key--bar::before { width:9px; height:12px; background:#f2c94c; opacity:.5; }

.ph-scroll { overflow-x:auto; }

.ph-table {
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    color:var(--primary);
}

.ph-table th {
    padding:6px 10px;
    border-bottom:1px solid var(--border,#e8ecf1);
    font-size:12px;
    font-weight:400;
    color:var(--font-gray,gray);
    text-align:left;
    white-space:nowrap;
}

.ph-table td { padding:7px 10px; border-bottom:1px solid var(--border,#f1f4f8); }
.ph-table__num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Тёмная тема: сетка и подписи графика зашиты в SVG светлыми — на тёмном фоне
   они пропадали. Осветляем сам холст, а не перекрашиваем каждую линию. */
.dark .ph-chart { background:#f6f8fb; }
.dark .ph-chart__head b { color:#20262e; }
.dark .ph-chart__head span,
.dark .ph-chart__legend { color:#5d6773; }

@media screen and (max-width:767px) {
    .ph-block { padding:16px; border-radius:12px; }
    .ph-block__title { font-size:17px; }
    .ph-chart { padding:10px 10px 4px; }
    .ph-chart__svg--pc { display:none; }
    .ph-chart__svg--mob { display:block; }
    .ph-table { font-size:13px; }
    .ph-table th, .ph-table td { padding:6px 8px; }
}


/* Ряд с единственным заполненным месяцем: вместо линии показываем само число. */
.ph-chart__one {
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-align:baseline;
    align-items:baseline;
    gap:4px 12px;
    padding:6px 0 2px;
}

.ph-chart__oneval {
    font-size:26px;
    font-weight:700;
    line-height:1.2;
    color:var(--primary);
    font-variant-numeric:tabular-nums;
}

.ph-chart__onecap,
.ph-chart__onenote {
    font-size:12px;
    color:var(--font-gray,gray);
}

.ph-chart__onenote { margin:0 0 8px; }
.dark .ph-chart__oneval { color:#20262e; }


/* ==========================================================================
 * Знак «?»: один вид во всех каталогах и видимый на наведении (тикет 19827)
 * ==========================================================================
 * Две жалобы Стаса — одна причина. В карточке-строке (раздел «Статистика»)
 * знак живёт внутри .card-row__price > p:first-child, и правило
 * `.card-row__price > p:first-child span` (вес 0,2,2) перебивает
 * `span.price-tip` (0,1,1): знак получал кегль 18/14/12 px, вес 400 и цвет
 * var(--font-dark) вместо своих 11 px / 600 / серого.
 *
 * Оно же ломало наведение: `span.price-tip:hover` (0,2,1) тоже легче, поэтому
 * цвет текста оставался var(--font-dark), а фон менялся на var(--primary).
 * В светлой теме выходило тёмное по тёмному, в тёмной — белое по белому
 * (--primary и --font-dark там оба #fff). Знак просто пропадал.
 *
 * Класс повторён трижды намеренно: нужен вес 0,3,1 — выше, чем у правила
 * по структуре карточки. Селектор по структуре тут ненадёжен: знак стоит
 * то в .card-row__price, то в .card__price, то в .card-auc__price.
 * Цвета наведения берём из --tip-bg/--tip-fg — тех же, что у подсказок,
 * они уже заданы отдельно для светлой и тёмной темы.
 * ========================================================================== */

span.price-tip.price-tip.price-tip {
    font-size:11px;
    font-weight:600;
    line-height:1;
    color:var(--gray);
    background:rgba(121,131,131,.18);
}

span.price-tip.price-tip.price-tip:hover,
span.price-tip.price-tip.price-tip:focus,
span.price-tip.price-tip.price-tip.is-hot,
span.price-tip.price-tip.price-tip.is-open {
    background:var(--tip-bg);
    color:var(--tip-fg);
}

/* В тёмной теме --gray (#798383) почти сливается с подложкой карточки —
   берём ту же светло-серую, что у остального второстепенного текста.
   Наведение перечисляем и здесь: у правила с .dark вес 0,4,1, и без этого
   оно перебивало бы состояние :hover, заданное выше. */
.dark span.price-tip.price-tip.price-tip {
    color:#ced7d9;
    background:rgba(206,215,217,.16);
}

.dark span.price-tip.price-tip.price-tip:hover,
.dark span.price-tip.price-tip.price-tip:focus,
.dark span.price-tip.price-tip.price-tip.is-hot,
.dark span.price-tip.price-tip.price-tip.is-open {
    background:var(--tip-bg);
    color:var(--tip-fg);
}


/* ==========================================================================
 * История цен: блок живёт на сером, графики — на белом (правки 18.09.2026)
 * ========================================================================== */

/* Блок и так стоит внутри серой плашки .box__wrap — своя рамка и белый фон
   давали «карточку в карточке». Оставляем содержимое прямо на сером, а белыми
   делаем только графики: так они читаются как вставки, а не как ещё один слой. */
.ph-block {
    padding:0;
    border:0;
    border-radius:0;
    background:none;
}

.ph-chart {
    background:#fff;
    border-color:#e8ecf1;
}

.dark .ph-chart {
    background:#f6f8fb;
    border-color:#dfe5ec;
}

/* Таблица: те же правила, что в разделе. Ширину числовых колонок задаём сами —
   при автоширине «Машин» в одной таблице выходило 196 px, а в соседней 226,
   и одинаковые по смыслу колонки не вставали в одну линию. */
.ph-table {
    table-layout:fixed;
}

.ph-table__num {
    width:165px;
}

.ph-table th:first-child,
.ph-table td:first-child {
    width:auto;
}

.ph-table td {
    overflow-wrap:anywhere;
}

/* Ссылки в таблицах были браузерного синего (#0000ee). */
.ph-table td a {
    color:var(--secondary);
    text-decoration:none;
}

.ph-table td a:hover {
    text-decoration:underline;
}

/* Раскрытие таблицы по месяцам. Чекбокс скрыт и служит только состоянием:
   блок бывает на странице в нескольких экземплярах, и своего js ему не нужно. */
.ph-more__wrap {
    position:relative;
}

.ph-more__cb {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.ph-more__cb:not(:checked) ~ .ph-scroll .ph-row--extra {
    display:none;
}

.ph-more {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    padding:7px 14px;
    border:1px solid var(--border,#e8ecf1);
    border-radius:20px;
    background:var(--bg-card,#fff);
    font-size:13px;
    color:var(--secondary);
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
}

.ph-more:hover {
    border-color:var(--secondary);
}

.ph-more__hide { display:none; }
.ph-more__cb:checked ~ .ph-more .ph-more__show { display:none; }
.ph-more__cb:checked ~ .ph-more .ph-more__hide { display:inline; }

/* Подпись шкалы в легенде — тише названия ряда. */
.ph-chart__key i {
    font-style:normal;
    color:var(--font-gray,#98a1ad);
}

@media screen and (max-width:767px) {
    .ph-table { table-layout:auto; min-width:460px; }
    .ph-table__num { width:auto; }
}

/* ===== Каталог комплектаций Японии: таблица модификаций на телефоне (18.09.2026) =====
   В теме таблице жёстко задано `.sets-table table{width:880px}` — на экране 375 px
   она вылезала за контейнер 355 px. Селектор ниже намеренно с .sets-table:
   по одному классу вес не перебивает тему. На узком экране строка превращается
   в карточку, подписи колонок берутся из data-label. */
@media (max-width: 767px) {
	.sets-table { overflow-x: visible; }
	.sets-table .jp-compl-table,
	.sets-table .jp-compl-table tbody,
	.sets-table .jp-compl-table tr { display: block; width: auto; }
	.jp-compl-table thead { display: none; }
	.jp-compl-table tr {
		margin-bottom: 10px;
		padding: 12px 14px;
		border: 1px solid var(--border, #e4e7ec);
		border-radius: 10px;
		background: var(--bg-card, #fff);
	}
	.sets-table .jp-compl-table td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 4px 0;
		border: 0;
		text-align: right;
	}
	.sets-table .jp-compl-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--font-gray, #98a1ad);
		font-size: 13px;
		text-align: left;
	}
	/* первая ячейка — название модификации, она же заголовок карточки */
	.sets-table .jp-compl-table td:first-child {
		display: block;
		margin-bottom: 6px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--border, #e4e7ec);
		font-weight: 600;
		text-align: left;
	}
	.sets-table .jp-compl-table td:first-child::before { display: none; }
	.sets-table .jp-compl-table td.jp-compl__act {
		display: block;
		margin-top: 8px;
		text-align: left;
	}
	.sets-table .jp-compl-table td.jp-compl__act::before { display: none; }
	.sets-table .jp-compl-table td.jp-compl__act .add_compare { display: inline-block; }
	/* пустые ячейки не должны оставлять строку с одной подписью */
	.sets-table .jp-compl-table td:empty { display: none; }
}

/* подсветка строки при наведении — как в каталоге Кореи */
.jp-compl-table tbody tr:hover { background: var(--bg-box, #f8f7f7); }
@media (max-width: 767px) {
	.jp-compl-table tbody tr:hover { background: var(--bg-card, #fff); }
}

/* ===== Список сравнения: кнопка удаления и счётчик (18.09.2026) =====
   Крестик удаления был 22 px со stroke #ced7d9 на белом — его практически
   не видно, и удаление выглядело недоступным. Делаем его заметной круглой
   кнопкой с подписью при наведении. */
.comparison__del.comparison__del {
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--border, #ced7d9);
	border-radius: 50%;
	background: var(--bg-card, #fff);
	transition: .2s linear;
	z-index: 2;
}
.comparison__del.comparison__del svg {
	width: 16px;
	height: 16px;
	stroke: var(--primary, #282f2f);
}
.comparison__del.comparison__del:hover {
	border-color: var(--secondary, #ef2222);
	background: var(--secondary, #ef2222);
}
.comparison__del.comparison__del:hover svg { stroke: #fff; }
.dark .comparison__del.comparison__del { background: var(--bg-box, #282f2f); }
.dark .comparison__del.comparison__del svg { stroke: #fff; }

/* подпись под карточкой — чтобы удаление читалось, а не угадывалось */
.comparison__delmore {
	display: inline-block;
	margin-top: 6px;
	color: var(--font-gray, #8e8e89);
	font-size: 13px;
	border-bottom: 1px dashed currentColor;
	cursor: pointer;
	transition: color .2s linear;
}
.comparison__delmore:hover { color: var(--secondary, #ef2222); }

/* ===== Кнопка «В сравнении N» ===== */
.pa-compare-bar {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 100px;
	background: var(--secondary, #ef2222);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	transition: transform .15s ease-out;
}
.pa-compare-bar.is-on { display: inline-flex; }
.pa-compare-bar:hover { color: #fff; transform: translateY(-2px); }
.pa-compare-bar__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .22);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
	.pa-compare-bar {
		right: 12px;
		left: 12px;
		bottom: 12px;
		justify-content: center;
		padding: 13px 16px;
	}
}

/* ===== «Другие комплектации»: описание справа от фото (18.09.2026) =====
   На ПК тема раскладывала карточку в столбец (flex-direction:column, row-gap:30px) —
   карточка выходила 262 px высотой, а половина ширины пустовала. На планшете
   и телефоне там уже строка, так что просто распространяем её на все ширины. */
.car-other--sm .car-other__item.car-other__item {
	flex-direction: row;
	align-items: flex-start;
	column-gap: 20px;
	row-gap: 0;
	padding: 20px;
}
.car-other--sm .car-other__item .car-other__img {
	flex: 0 0 132px;
	width: 132px;
	height: 88px;
}
.car-other--sm .car-other__item .car-other__desc {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}
/* на узком экране две колонки сжимали описание до 170 px — оставляем одну */
@media (max-width: 575px) {
	.car-other--sm .car-other__grid.car-other__grid { grid-template-columns: 100%; }
}

/* на телефоне фото 132 px оставляло описанию 121 px — ужимаем фото */
@media (max-width: 575px) {
	.car-other--sm .car-other__item.car-other__item { /* car-other__img--phone */
		column-gap: 14px;
		padding: 14px;
	}
	.car-other--sm .car-other__item .car-other__img {
		flex: 0 0 104px;
		width: 104px;
		height: 70px;
	}
}

/* на телефоне внизу висит фиксированный .tabbar высотой 58 px — кнопка
   сравнения ставится над нижним меню, а не поверх него */
@media (max-width: 767px) {
	.pa-compare-bar { bottom: 70px; }
}

/* справа внизу висит колонка мессенджеров и кнопка «Бесплатный расчёт» —
   на ПК кнопку сравнения ставим слева, там пусто */
@media (min-width: 768px) {
	.pa-compare-bar { right: auto; left: 20px; }
}

/* ===== 19.09.2026, задача 19992. Недостающие стили новых ценовых блоков.
   На демо .car-info / .compare-price / .price-scale лежат в styles.css новой
   версии макета; на клиенте styles.css старее, и блоки выводились без вёрстки
   (иконки 300x150, подписи вразнос). Перенесены сюда точечно: только селекторы
   самих блоков, общую карточку клиента не трогаем. ===== */
.card-row__duty{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;position:absolute;z-index:10;left:20px;top:26px;font-family:var(--font-family);font-weight:400;font-size:14px;line-height:1;color:#fff;border-radius:40px;padding:8px 12px;background:#ef2222}
.card-row__duty strong{font-weight:700}
.card-row__duty svg{width:14px;height:14px;fill:#fff;opacity:.6}
.card-row__price>p:first-child span.price-descr{display:block;font-size:12px;color:var(--secondary);margin-left:0;font-weight:400}
.compare-price{padding-top:15px}
.compare-price__header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:10px;margin-bottom:8px;font-family:var(--font-family);font-weight:400;font-size:12px;line-height:1.2;color:#798383}
.compare-price__header span:nth-child(2){font-weight:700;font-size:14px}
.compare-price__input{width:100%;height:8px;background:-webkit-gradient(linear,left top,right top,from(#3dbf00),color-stop(49.18%,#ffd24c),to(#ef2222));background:linear-gradient(90deg,#3dbf00 0,#ffd24c 49.18%,#ef2222 100%);border-radius:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.compare-price__input::-webkit-slider-thumb{width:20px;height:20px;border:4px solid #ffd24c;border-radius:50%;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.15);box-shadow:0 4px 8px 0 rgba(0,0,0,.15);background:#fff;-webkit-appearance:none;appearance:none}
.compare-price__input::-moz-range-thumb{width:20px;height:20px;border:4px solid #ffd24c;border-radius:50%;box-shadow:0 4px 8px 0 rgba(0,0,0,.15);background:#fff;-moz-appearance:none;appearance:none}
.compare-price__input.green::-webkit-slider-thumb{border:4px solid #3dbf00}
.compare-price__input.green::-moz-range-thumb{border:4px solid #3dbf00}
.compare-price__input.red::-webkit-slider-thumb{border:4px solid #ef2222}
.compare-price__input.red::-moz-range-thumb{border:4px solid #ef2222}
.car-info{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px;padding:40px;background:var(--bg-card);border-radius:var(--radius)}
.car-info__item{display:grid;gap:6px 15px;grid-template-columns:30px 1fr}
.car-info__icon{grid-area:1/1/3/2;align-self:center}
.car-info__icon svg{width:100%;height:30px;fill:var(--primary)}
.car-info__label{-ms-flex-line-pack:end;align-content:flex-end;font-family:var(--font-family);font-weight:400;font-size:14px;line-height:1.2;color:var(--primary)}
.car-info__value{-ms-flex-line-pack:start;align-content:flex-start;font-family:var(--font-family);font-weight:600;font-size:16px;line-height:1.2;color:var(--primary)}
.car-price-wrap .compare-price{padding:0;margin:0}
@media screen and (max-width:1739px){
.card-row__duty{padding:4px 10px;font-size:12px}
}
@media screen and (max-width:1365px){
.car-info{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:1023px){
.car-info,.car-price-wrap{margin-bottom:30px;padding:30px;border-radius:var(--radius-lg)}
}
@media screen and (max-width:575px){
.card-row__duty{top:20px;left:10px}
.car-info{gap:15px}
.car-info__item{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:4px}
.car-info__icon{-ms-flex-item-align:start;align-self:flex-start;width:20px;height:20px;margin-bottom:2px}
.car-info__icon svg{height:100%}
.car-info__label,.car-info__value{font-size:12px}
}
@media screen and (max-width:480px){
.car-info{margin-bottom:20px;padding:20px;border-radius:var(--radius-xs)}
}
.site-label.che,.car-info__value.che{color:#2253A0}
.site-label.dong,.car-info__value.dong{color:#FFCC32}
.card-row__passable-soon{margin-top:10px}
.price-scale{margin:0 0 30px}
.price-scale__head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;margin-bottom:10px}
.price-scale__edge{-webkit-box-flex:0;-ms-flex:none;flex:none;font-weight:400;font-size:16px;line-height:1.33;color:#8e8e89}
.price-scale__label{font-weight:700;font-size:16px;line-height:1.33;text-align:center}
.price-scale__label--best,.price-scale__label--good{color:#3dbf00}
.price-scale__label--mid{color:#e8a90c}
.price-scale__label--high,.price-scale__label--worst{color:var(--secondary)}
.price-scale__bar{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,#22c55e 0%,#86cf3a 30%,#f5c518 55%,#f08a1d 78%,#e63946 100%)}
.price-scale__dot{position:absolute;top:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#2b2b2b;-webkit-box-shadow:0 0 0 3px #fff,0 1px 4px rgba(0,0,0,.35);box-shadow:0 0 0 3px #fff,0 1px 4px rgba(0,0,0,.35);-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.dark .price-scale__dot{-webkit-box-shadow:0 0 0 3px var(--bg-card),0 1px 4px rgba(0,0,0,.5);box-shadow:0 0 0 3px var(--bg-card),0 1px 4px rgba(0,0,0,.5)}
@media screen and (max-width:1739px){
.price-scale__edge,.price-scale__label{font-size:14px}
}
@media screen and (max-width:1023px){
.price-scale{margin-bottom:25px}
.price-scale__edge,.price-scale__label{font-size:12px}
}
.card-row__duty{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;position:absolute;z-index:10;left:20px;top:26px;font-family:var(--font-family);font-weight:400;font-size:14px;line-height:1;color:#fff;border-radius:40px;padding:8px 12px;background:#ef2222}
.card-row__duty strong{font-weight:700}
.card-row__duty svg{width:14px;height:14px;fill:#fff;opacity:.6}
.compare-price{padding-top:15px}
.compare-price__header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:10px;margin-bottom:8px;font-family:var(--font-family);font-weight:400;font-size:12px;line-height:1.2;color:#798383}
.compare-price__header span:nth-child(2){font-weight:700;font-size:14px}
.compare-price__input{width:100%;height:8px;background:-webkit-gradient(linear,left top,right top,from(#3dbf00),color-stop(49.18%,#ffd24c),to(#ef2222));background:linear-gradient(90deg,#3dbf00 0,#ffd24c 49.18%,#ef2222 100%);border-radius:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.compare-price__input::-webkit-slider-thumb{width:20px;height:20px;border:4px solid #ffd24c;border-radius:50%;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.15);box-shadow:0 4px 8px 0 rgba(0,0,0,.15);background:#fff;-webkit-appearance:none;appearance:none}
.compare-price__input::-moz-range-thumb{width:20px;height:20px;border:4px solid #ffd24c;border-radius:50%;box-shadow:0 4px 8px 0 rgba(0,0,0,.15);background:#fff;-moz-appearance:none;appearance:none}
.compare-price__input.green::-webkit-slider-thumb{border:4px solid #3dbf00}
.compare-price__input.green::-moz-range-thumb{border:4px solid #3dbf00}
.compare-price__input.red::-webkit-slider-thumb{border:4px solid #ef2222}
.compare-price__input.red::-moz-range-thumb{border:4px solid #ef2222}
.car-price-wrap .compare-price{padding:0;margin:0}
@media screen and (max-width:1739px){
.card-row__duty{padding:4px 10px;font-size:12px}
}
@media screen and (max-width:575px){
.card-row__duty{top:20px;left:10px}
}
.car-card__right>.compare-price,.car-card__right>.car-average-price{margin-bottom:30px}


.card-moto.is-price-open,.card.is-price-open,.card-row.is-price-open{overflow:visible}
.card--flow .card__duty,.card-row--flow .card-row__duty,.card-moto--flow .card-moto__duty{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:start;align-self:flex-start;position:static;left:auto;top:auto;bottom:auto;margin-block:10px}
/* ===== 19.09.2026, задача 19992 (продолжение). Карточка на планшете и телефоне.
   На клиенте .car-card ниже 767px оставалась грид-сеткой, а правила раскладок
   (.car-card--lay-C .car-card__right) специфичнее мобильных и держали правую
   колонку во втором столбце — на телефоне цена и характеристики уезжали за
   экран. На эталонном макете ниже 1023px карточка переключается на flex-колонку,
   переносим это правило. Плюс стили плашки выгодной пошлины. ===== */
.car-card__fav.active svg,.car-card__fav:hover svg{fill:var(--secondary);stroke:var(--secondary)}
.car-card__duty{grid-column:2/3;grid-row:2/span 2;align-self:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;font-family:var(--font-family);font-weight:400;font-size:14px;line-height:1;color:#fff;border-radius:40px;padding:8px 12px;background:#ef2222}
.car-card__duty strong{font-weight:700}
.car-card__duty svg{width:14px;height:14px;fill:#fff;opacity:.6}
@media screen and (max-width:1739px){
.car-card__duty{padding:4px 10px;font-size:12px}
}
@media screen and (max-width:1023px){
.car-card{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.car-card__left{width:100%}
}
@media screen and (max-width:767px){
.car-card__duty{-ms-flex-item-align:start;align-self:flex-start;left:20px}
}
/* 19.09.2026, задача 19992. Ниже 1023px карточка — flex-колонка, и её элементы
   по умолчанию тянутся до min-content самого широкого (у нас это строка
   «Из чего складывается цена»). Из-за этого заголовок и цена вылезали за
   правый край карточки. min-width:0 разрешает им сжиматься до ширины карточки. */
@media screen and (max-width:1023px){
.car-card>*{min-width:0;max-width:100%}
}

/* 19.09.2026, задача 19992. Ещё один слой недостающих стилей из нового макета:
   блок «Средняя цена по проданным аналогам» в списке и в карточке, плашка
   выгодной пошлины у карточек списка, метка «скоро проходной». Без них
   гистограмма продаж схлопывалась в нулевую высоту (.average-price__icon
   на клиенте задаёт только ширину). Высоту дописываем отдельным правилом,
   чтобы не перебить ширину 76px, заданную выше в этом же файле. */
.average-price__icon{height:40px}
.card__duty{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;position:absolute;z-index:10;left:30px;bottom:30px;font-family:var(--font-family);font-weight:400;font-size:14px;line-height:1;color:#fff;border-radius:40px;padding:8px 12px;background:#ef2222}
.card__duty strong{font-weight:700}
.card__duty svg{width:14px;height:14px;fill:#fff;opacity:.6}
.card-moto__duty{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;position:absolute;left:20px;top:26px;font-family:var(--font-family);font-weight:400;font-size:14px;line-height:1;color:#fff;border-radius:40px;padding:8px 12px;background:#ef2222}
.card-moto__duty strong{font-weight:700}
.card-moto__duty svg{width:14px;height:14px;fill:#fff;opacity:.6}
.average-price__value{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:6px;width:140px}
.average-price__value p{margin:0;font-family:var(--font-family);font-weight:700;font-size:18px;line-height:1.2;color:#3dbf00}
.average-price__value span{font-family:var(--font-family);font-weight:400;font-size:12px;line-height:1.2;color:#798383}
.average-price__icon img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
.car-average-price__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;gap:20px}
.car-average-price__icon{width:68px;height:60px}
.car-average-price__icon img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
.car-average-price__text{margin:0;font-family:var(--font-family);font-weight:400;font-size:14px;line-height:1.2;color:#798383}
@media screen and (max-width:1739px){
.card__duty{bottom:25px;left:25px;padding:4px 10px;font-size:12px}
.card-moto__duty{padding:4px 10px;font-size:12px}
}
@media screen and (max-width:767px){
.card__duty{bottom:20px;left:20px}
}
@media screen and (max-width:575px){
.card-moto__duty{top:20px;left:10px}
.car-average-price__icon{width:65px;height:40px}
.car-average-price__text{font-size:12px}
}
.card__passable-soon{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:5px 12px;border-radius:var(--radius-xs);background:rgba(61,191,0,.1);font-weight:600;font-size:14px;line-height:1.4;color:var(--green)}
.card__passable-soon::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--green)}
.dark .card__passable-soon{background:rgba(61,191,0,.18)}
@media screen and (max-width:1739px){
.card__passable-soon{font-size:13px}
}
@media screen and (max-width:1023px){
.card__passable-soon{margin-bottom:8px;padding:4px 10px;font-size:12px}
}
.card-moto__passable-soon{margin-top:10px}
.car-price__passable-soon{display:-webkit-box;display:-ms-flexbox;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-top:16px;margin-left:auto}
.average-price--orange .average-price__value p{color:#f59300}
.average-price--red .average-price__value p{color:#ef2222}

/* 19.09.2026: правила .card-row__price-toggle>span с эталона НЕ переносим — на клиенте
   «расшифровка цены» оформлена красной кнопкой-пилюлей, а правило с эталона меняло
   только цвет текста и подчёркивание, оставляя красный фон: получался красный текст
   на красном. Оставляем клиентское оформление. */

/* 19.09.2026, задача 19992. Метки сайта-источника (che168, dongchedi) в карточках Китая.
   На клиенте не было ни .site-icon, ни базовых .site-label — svg без размеров рисовался
   300x150 по умолчанию и разваливал карточку. Стили с эталонного макета. */
.site-label .lot-number,.specifs__col span .lot-number{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;color:var(--secondary)}
.site-label{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;gap:6px;vertical-align:middle;padding-block:0;font-size:14px;line-height:1}
.site-icon{width:18px;height:18px;-webkit-box-flex:0;-ms-flex:0 0 18px;flex:0 0 18px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;fill:currentColor;border-radius:var(--input-sm-radius);padding:2px;-webkit-box-sizing:content-box;box-sizing:content-box}
.site-label.che .site-icon{background-color:#2253a0}
.site-label.dong .site-icon{background-color:#ffcc32}
.site-label.che{color:#2253a0}
.site-label.dong{color:#ffcc32}
.site-label.che svg{color:#fff}
.site-label.dong svg{color:#000}
.specifs__col span .lot-number,.site-label .lot-number{flex:0 1 auto;color:var(--secondary)}

/* 19.09.2026, задача 19992. Блок цены на странице авто.
   На эталоне .car-price-wrap — flex-колонка, и расстояния между «ценой»,
   шкалой и блоком «Из чего складывается цена» держит gap. На клиенте правила
   display не было: элемент оставался block, gap:20px (он задан ниже в этом же
   файле) не работал, и «Из чего складывается цена» прилипало к шкале.
   Gap здесь намеренно не дублируем, чтобы не перебить 20px/14px ниже. */
.car-price-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.car-price-wrap .car-price{margin:0}
.car-price-wrap .car-price__item span{background:var(--bg-card)}

/* 19.09.2026, задача 19992. Фильтр каталога на телефоне.
   В custom.css, в блоке стилей страницы отзывов, правило написано без области
   видимости: рядом стоит «.reviews-search .filter{margin-top:0}», а следом —
   просто «.filter{grid-template-columns:repeat(3,1fr)}» и «@media(max-width:1749px)
   {.filter{repeat(2,1fr)}}». custom.css подключается последним, поэтому эти правила
   перебивают сетку фильтра каталога во ВСЕХ разделах, а брейкпоинта уже нет:
   на телефоне фильтр оставался в две колонки, и «Модель», «Показать проходные»
   и кнопка «Поиск» уезжали за правый край карточки.
   Возвращаем одну колонку на телефоне, как в макете. Сетку на ПК и планшете
   намеренно не трогаем, чтобы не менять вид, к которому клиент привык. */
/* Селектор намеренно с `body` — правило из custom.css лежит в бандле ПОЗЖЕ,
   при равной специфичности оно бы победило. Лишний `body` поднимает вес и
   делает правило независимым от порядка файлов в сборке. */
@media screen and (max-width:767px){
body .filter{grid-template-columns:1fr}
}