/* ===== CORE : core/base.css ===== */
/* base.css — 341 правил */

/* полоса скролла страницы — системная, ПОСТОЯННАЯ: overflow-y:scroll не даёт
   ей исчезать при открытии модалок (body overflow hidden), страница не
   прыгает; кастомная раскраска убрана (владелец 2026-09-27) */
html{overflow-y:scroll}
:root{--font-family:Arial,sans-serif;--bg-primary:#F6F7F8;--bg-secondary:#FFFFFF;--text-primary:#000000;--text-secondary:#333333;--border-color:#FFFFFF;--telegram-bg:#31343E;--telegram-text:#FFFFFF;--card-shadow:0 2px 8px rgba(0,0,0,0.1)}
.ambient-light{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden;background:linear-gradient(135deg,#17212B 0%,#17212B 10%,#17212B 28%,#17212B 82%,#17212B 95%,#17212B 100%);display:block}
html{background-color:#17212B}
.orb{display:block}
@keyframes floatOrb{0%{transform:translate(0,0)}100%{transform:translate(30px,50px)}}
:root:root,:root{--bg-primary:#17212B;--bg-secondary:#242F3D;--text-primary:#e6e6e6;--text-secondary:#E0E0E0;--border-color:#404040;--telegram-bg:#242F3D;--telegram-text:#FFFFFF;--card-shadow:0 2px 8px rgba(0,0,0,0.3)}
html,body{height:100%}
body{font-family:var(--font-family);background-color:#17212B;color:var(--text-primary);display:flex;flex-direction:column;min-height:100vh}
html.dark body{background-color:#16202A!important}
.rate-item{display:flex;align-items:center;font-size:16px;font-weight:400;color:#000000;text-transform:uppercase}
.rate-arrow{font-size:15px;line-height:1;display:inline-flex;align-items:center}
.admin-side-panel{position:relative;width:100%;border-radius:12px;background:#FFFFFF;box-shadow:0 1px 0px 0px rgba(0,0,0,0.12),0 0px 1px rgba(0,0,0,0.08);padding:8px 12px;font-size:11px;overflow:hidden}
.asp-hdr{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#656d76;padding-bottom:3px;margin-bottom:2px;border-bottom:1px solid rgba(0,0,0,0.06);display:flex;justify-content:space-between;align-items:center}
.asp-extra-sum{font-weight:600;color:#424a53}
.asp-total-val{font-size:13px;font-weight:700;color:#1a7f37}
.asp-r{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:10.5px;line-height:1.45;color:#424a53;font-variant-numeric:tabular-nums}
.asp-r span:last-child{font-weight:500;white-space:nowrap;flex-shrink:0}
.asp-r i{font-style:normal;font-size:9px;opacity:.55}
.asp-bold span{font-weight:600!important;color:inherit!important}
.asp-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#b0b8c4;font-size:12px}
.listing-thumb-skeleton{position:absolute;inset:0;border-radius:12px;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.12) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.12) 75%,rgba(255,255,255,0.06) 100%);background-size:400% 100%;animation:skeleton-shimmer-thumb 1.5s ease-in-out infinite}
@keyframes skeleton-shimmer-thumb{0%{background-position:100% 0}100%{background-position:-100% 0}}
.listing-thumb-skeleton.hidden{display:none}
.listing-spec-row--trim .listing-spec-value{flex:0 1 auto;display:inline-block;font-size:12px;padding:0 5px;border-radius:4px;background:#392237;color:#F5F5F5}
@media (min-width:769px){}
.purchase_info_title{font-size:16px;font-weight:600;color:#FFFFFF;margin-bottom:23px}
.purchase_info_item{display:block;font-size:14px;font-weight:400;color:inherit;margin-bottom:20px}
.skeleton{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;background:linear-gradient(90deg,#3A3A3A 0%,#4A4A4A 50%,#3A3A3A 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;z-index:10;pointer-events:none}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton.hidden{display:none}
.v10-body{padding:20px 24px;display:flex;gap:24px;align-items:flex-start;background:#17212B}
.ct-title{font-size:14px;font-weight:500;color:#fff}
.ct-sub{font-size:12px;color:#8b9cb0;margin-top:1px}
.qr-hint{font-size:12px;color:#77889b;margin-top:8px;padding:0 2px;line-height:1.5}
.foot-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#77889b}
.dg-modal-body{pointer-events:auto;background:#fff;padding:20px;color:#1a1a1a;max-width:480px;margin-left:auto;overflow-y:auto}
.tg-modal-body{pointer-events:auto;background:#fff;border-radius:12px;box-shadow:8px 0 32px rgba(0,0,0,0.18);max-width:480px;margin-left:auto;padding:20px;display:flex;flex-direction:column;gap:16px;color:#1a1a1a;overflow:hidden}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.video_skeleton.hidden{display:none}
.page-title h1{font-family:var(--font-family);font-size:32px;font-weight:600;color:var(--text-primary);margin:0 0 12px 0}
.placeholder-text{font-size:16px!important;font-weight:600!important;color:#e2e8f0!important;margin-bottom:8px!important}
.placeholder-hint{font-size:13px!important;color:#8b9cb0!important;margin-bottom:20px!important}
.placeholder-link{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:#283341;color:#e2e8f0;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;box-shadow:0 1px 4px 0 rgba(0,0,0,0.12),0 0 1px rgba(0,0,0,0.08);transition:background .2s;margin-top:8px}
.contact-icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#FFB900;border-radius:12px;font-size:24px;color:#000000}
.contact-info h3{font-family:var(--font-family);font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 4px 0}
.contact-link{font-family:var(--font-family);font-size:14px;color:#FFB900;text-decoration:none;transition:color .2s ease}
.contact-text{font-family:var(--font-family);font-size:14px;color:var(--text-primary);margin:0}
.page-title-inline{font-family:var(--font-family);font-size:20px;font-weight:600;color:var(--text-primary);margin:0}
.page-placeholder-box .placeholder-icon{font-size:48px;color:#FFB900;margin-bottom:24px}
.page-placeholder-box .placeholder-text{font-family:var(--font-family);font-size:16px;font-weight:500;color:var(--text-primary);margin:0 0 8px 0}
.page-placeholder-box .placeholder-hint{font-family:var(--font-family);font-size:13px;color:#666666;margin:0}
.card{width:100%;height:300px;border-radius:8px;transition:all .3s ease;box-shadow:var(--card-shadow);cursor:pointer;flex:0 0 300px}
.skeleton-pulse{background:rgba(255,255,255,.06);animation:skeleton-shimmer 1.2s ease-in-out infinite}
.skeleton-photo{width:100%;aspect-ratio:4/3;border-radius:8px;margin-bottom:6px}
.skeleton-line{height:14px;border-radius:4px;margin-bottom:4px}
.skeleton-line-sm{height:12px;border-radius:4px;margin-bottom:4px}
.skeleton-w70{width:70%}
.skeleton-w50{width:50%}
.skeleton-w40{width:40%}
.skeleton-w30{width:30%}
@keyframes skeleton-shimmer{0%,100%{opacity:.4}50%{opacity:1}}
.tg-modal-body{display:flex;gap:12px;max-height:calc(95vh - 20px);align-items:stretch}
@media(max-width:500px){.tg-modal{width:95vw}.tg-modal-body{flex-direction:column}.tg-modal-right{width:100%}.tg-modal-close{top:-36px;right:0}}
.dg-modal-body{flex:1;min-height:0;overflow-y:auto;padding:20px 32px 20px 0;font-size:15px;line-height:1.75;color:#222;scrollbar-width:thin;scrollbar-color:#bbb transparent}
.dg-modal-body::-webkit-scrollbar{width:6px}
.dg-modal-body::-webkit-scrollbar-track{background:transparent}
.dg-modal-body::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}
.dg-modal-body::-webkit-scrollbar-thumb:hover{background:#888}
.dg-modal-body h1,.dg-modal-body h2,.dg-modal-body h3{color:#1a1a1a;margin:24px 0 12px;font-weight:600}
.dg-modal-body h1{font-size:20px}
.dg-modal-body h2{font-size:18px}
.dg-modal-body h3{font-size:16px}
.dg-modal-body h1:first-child,.dg-modal-body h2:first-child,.dg-modal-body h3:first-child{margin-top:0}
.dg-modal-body p{margin:0 0 14px}
.dg-modal-body ul,.dg-modal-body ol{margin:0 0 14px;padding-left:24px}
.dg-modal-body li{margin-bottom:6px}
.dg-modal-body strong{color:#1a1a1a;font-weight:600}
.dg-modal-body em{font-style:italic}
.dg-modal-body hr{border:none;border-top:1px solid #e2e8f0;margin:20px 0}
.dg-modal-body blockquote{border-left:3px solid #B22234;margin:14px 0;padding:8px 16px;background:#f8f9fa;color:#444;border-radius:0 6px 6px 0}
.dg-modal-body table{width:100%;border-collapse:collapse;margin:14px 0}
.dg-modal-body th,.dg-modal-body td{border:1px solid #ddd;padding:8px 12px;text-align:left}
.dg-modal-body th{background:#f5f5f5;font-weight:600}
.dg-page-btn{min-width:36px;height:36px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#333;font-size:14px;font-family:inherit;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.dg-page-info{font-size:13px;color:#666;padding:0 8px}
.midx-h1{display:flex;flex-direction:column;gap:0;margin-bottom:12px;padding:14px 0 8px 0;background:none;border:none;position:relative;font-size:28px;font-weight:600;color:var(--text-primary);line-height:1}
@media(max-width:768px){.faq-block{margin:0 5px 25px 5px}.faq-block-inner{gap:0}.faq-item{border-radius:8px}.faq-item+.faq-item{border-top:1px solid #2c3743;margin-top:0;padding-top:0}.faq-q{font-size:14px;padding:12px 10px}}
.seo-text-block{max-width:1230px;margin:0 auto 32px;padding:28px;background:var(--bg-secondary);border-radius:12px;box-shadow:var(--card-shadow);font-size:14px;line-height:1.7;color:var(--text-secondary)}
@media (max-width:768px){
    .brand-models-nav{padding:18px;margin:0 auto 24px}
    .brand-models-nav-title{font-size:17px;margin-bottom:12px}
    .brand-models-nav-list{grid-template-columns:1fr;gap:0}
    .brand-models-nav-list--inline{grid-template-columns:1fr 1fr}
    .brand-models-nav-link{font-size:13px;padding:7px 0}
    .seo-brands-nav{padding:16px;margin:0 auto 20px}
    .seo-brands-nav-title{font-size:18px;margin-bottom:10px}
    .seo-brands-nav-list{grid-template-columns:1fr 1fr;gap:0 14px}
    .seo-brands-nav-item a{font-size:12.5px;padding:7px 0}
    .bm-advantages-title{font-size:18px;margin-bottom:10px}
}
.reviews-2gis-name{font-size:14px;font-weight:600;color:#fff;line-height:1.3}
.reviews-2gis-stars{font-size:13px;letter-spacing:1px}
.reviews-2gis-date{font-size:11px;color:#7f91a4}
.reviews-2gis-source-link{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.025em;text-transform:uppercase;text-decoration:none;color:#86A93C;opacity:.6;transition:opacity .15s}
.reviews-page-title{font-size:24px;font-weight:700;color:#fff;margin:0;padding:0}
.reviews-page-count{font-size:13px;color:#7f91a4;margin:0}
.reviews-page-text{font-size:13px;line-height:1.6;color:#7f91a4;margin:8px 0 0}
.reviews-2gis-source-link--tg{color:#0088cc;opacity:.7;transition:opacity .15s}
.reviews-2gis-source-link--tg:hover{opacity:1}
@media(max-width:768px){.footer-cities-grid{grid-template-columns:repeat(3,1fr);gap:2px 8px}.footer-cities-grid a{font-size:10px;line-height:1.5}.footer-cities-title{font-size:10px;margin-bottom:6px}}
.footer-cities--collapsible .footer-cities-grid a:nth-child(n+21){display:block;list-style:none}
.footer-v8-address--mobile{display:none}
.footer-v8-address--desktop{display:block}
@media(max-width:768px){
  .blog-page-wrap,.blog-index-wrap{padding:20px 14px 48px}
  .blog-article-h1{font-size:24px}
  .blog-article-lead{font-size:16px}
  .blog-section h2{font-size:20px}
  .blog-index-list{grid-template-columns:1fr}
}
@media(max-width:768px){
  .brands-page-wrap{padding:16px 14px 40px}
  .brands-h1{font-size:22px}
  .brands-lead{font-size:14px}
  .brands-popular-grid{grid-template-columns:repeat(2,1fr)}
  .brands-all{grid-template-columns:1fr}
}
@media(max-width:768px){
  .calc-page-wrap{padding:16px 14px 40px}
  .calc-h1{font-size:22px}
  .calc-lead{font-size:14px}
  .calc-form{grid-template-columns:1fr;padding:18px}
  .calc-result{padding:18px}
  .calc-total strong{font-size:22px}
}
@media(max-width:768px){
  .calc-faq-title,.calc-seo-title{font-size:20px}
  .calc-seo-text{font-size:14px}
}
@media(max-width:768px){
  .brands-faq-title,.brands-seo-title{font-size:20px}
  .brands-seo-text{font-size:14px}
  .brands-article .brands-article-h3{font-size:18px;margin:24px 0 10px}
  .brands-article .brands-article-h4{font-size:15px;margin:16px 0 6px}
}
@media (max-width:768px){
  .idx-seo-text{margin:20px 0;padding:18px 16px;border-radius:0}
  .idx-seo-text h2{font-size:19px}
  .idx-seo-text h3{font-size:15px;margin:14px 0 6px}
  .idx-seo-text p{font-size:13px}
}
@media(max-width:768px){
  .about-teaser{margin:28px auto 0;padding:0 14px}
  .about-teaser-inner{padding:20px 18px}
  .about-teaser-title{font-size:19px}
  .about-teaser-text{font-size:14px}
}
.reviews-2gis-name{font-size:14px;font-weight:600;color:#fff;line-height:1.3}
.reviews-2gis-stars{font-size:13px;letter-spacing:1px}
.reviews-2gis-date{font-size:11px;color:#7f91a4}
.reviews-2gis-source-link{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.025em;text-transform:uppercase;text-decoration:none;color:#86A93C;opacity:.6;transition:opacity .15s}
.reviews-page-title{font-size:24px;font-weight:700;color:#fff;margin:0;padding:0}
.reviews-page-count{font-size:13px;color:#7f91a4;margin:0}
.reviews-page-text{font-size:13px;line-height:1.6;color:#7f91a4;margin:8px 0 0}
.reviews-2gis-source-link--tg{color:#0088cc;opacity:.7;transition:opacity .15s}
.reviews-2gis-source-link--tg:hover{opacity:1}

/* → перенесено из header.css (консолидация модулей 2026-09-09) */
.main-content a:not(.nav-btn):not(.listing-link):not(.footer-v8-logo):not(.footer-v8-phone):not(.listing-page-link):not(.footer-v8-nl):not(.footer-v8-privacy):not(.privacy-card a){text-decoration:none}

/* (перенесено из zz-refine — общее правило, не карточное) */
body,html{overflow-x:hidden}

/* ===== CORE : core/layout.css ===== */
/* utility.css — 26 правил */

.container{max-width:100%;margin:0;padding:0}
.telegram-wrapper{display:flex;width:100%;height:100%;gap:0;align-items:stretch;padding:0}
.content-wrapper{width:1280px;max-width:100%;padding:0 24px 0 24px;display:flex;flex-direction:column}
.content-blocks{display:flex;gap:15px}
/* height:fit-content убран: сжимал родителя sticky-блока (purchase-sticky-wrap
   упирался в низ сайдбара и не магнитился); align-self:stretch даёт sticky ход
   по всей высоте левой колонки (владелец 2026-10-02) */
.content-right{width:250px;flex-shrink:0;background:transparent;border-radius:20px;position:relative;display:flex;flex-direction:column;gap:15px;align-self:stretch}
.contacts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.contacts-grid .contact-card{margin:0}

/* прод-спейсер перед пагинацией (index.html) */

/* ===== CORE : core/misc.css ===== */
/* misc2.css — 184 правил */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
*:focus{outline:none}
.telegram-block{background-color:#242F3D;height:30px;min-height:30px;margin-top:0;padding:0 24px;display:flex;align-items:center;justify-content:flex-start;width:100%}
.telegram-left{width:115px;background-color:transparent;padding:0 24px 0 0;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;height:100%;border:none}
.rate-item{color:#F5F5F5}
/* центр тикера структурно: line-height 1 + флекс — глифы честно по центру */
.rate-label{margin-right:4px;line-height:1;display:flex;align-items:center;padding-top:1px}
.rate-value{margin-right:4px;line-height:1;display:flex;align-items:center;padding-top:1px}
.rate-down{color:#E53935}
.rate-up{color:#74AF52}
.telegram-right{display:flex;flex:1;overflow:hidden;padding:0;align-items:stretch;height:100%}
.carousel-track{display:flex;height:100%;width:max-content}
.block{width:auto;color:#FFFFFF;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 24px;border:none;flex-shrink:0;white-space:nowrap;text-decoration:none;cursor:pointer}
.block-content{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;gap:5px}
.tg-line-icon{width:14px;height:14px;flex-shrink:0}
.block:last-child{border-right:none}
.main-content{display:flex;justify-content:center;width:100%;background-color:#17212B}
.theme-switch .track{box-shadow:inset 2px 0 6px rgba(0,0,0,0.5),inset -2px 0 6px rgba(255,255,255,0.3)}
.loading-cards{pointer-events:none;opacity:.3;transition:opacity .2s ease}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.purchase_info_box{width:100%;margin-top:0;margin-bottom:1px;padding:20px;background:linear-gradient(90deg,#B22234 0%,#641515 100%);border:none;border-radius:12px;position:sticky;top:20px;z-index:10;overflow:hidden}
.purchase_info_box::before{content:'';position:absolute;right:19px;bottom:0px;width:89px;height:166px;max-height:calc(100% - 40px);background:url(/static/img/shield.svg) no-repeat center center;background-size:contain;pointer-events:none}
.purchase_info_item:last-child{margin-bottom:0}
.purchase_info_list{color:#e6e6e6}
@keyframes v10Up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.qr-wrap{background:#fff;padding:12px;border-radius:16px;display:inline-block}
.qr-wrap img{display:block;width:150px;height:150px}
.foot-row{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.foot-item svg{width:14px;height:14px;flex-shrink:0}
/* липнет JS-ом (comments.js): страница скроллится через body — нативный
   sticky ограничен коротким сайдбар-рядом (владелец 2026-10-02) */
.purchase-sticky-wrap{position:static}
@keyframes shimmer-year{0%{background-position:200% 0}100%{background-position:-200% 0}}
.page-title{text-align:center;margin-bottom:40px}
.contact-card{display:flex;align-items:center;gap:20px;padding:24px;background:rgba(57,61,92,0.4);border-radius:16px;border:.5px solid rgba(255,255,255,0.1);transition:all .3s ease}
.contact-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.contact-icon .fa-telegram{color:#000000}
.contact-icon .fa-whatsapp{color:#000000}
.contact-link:hover{color:#e5a600}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,0.4)}
:root::-webkit-scrollbar{width:8px}
:root::-webkit-scrollbar-track{background:#1A1A1A}
:root::-webkit-scrollbar-thumb{background:#404040;border-radius:4px}
:root::-webkit-scrollbar-thumb:hover{background:#505050}
@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
#yandex-map{width:100%;height:100%;border:none}

.manager-card{position:relative;border-radius:16px;overflow:hidden;background:rgba(30,41,59,0.5);border:1px solid rgba(100,116,139,0.2)}
.dg-item-clickable{cursor:pointer}
@keyframes err-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes err-shake{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}

/* → из header.css (консолидация 2026-09-09): мобильные блоки скрыты на десктопе */
.mobile-filter-container,.mobile-header,.mobile-sidebar,.mobile-sidebar-overlay{display:none!important}

/* ===== CORE : core/overlays.css ===== */
/* modal.css — 32 правил */

.comment_preview_overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.1) 70%,transparent 100%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.comment_preview_overlay.visible{opacity:1}
.modal_overlay.active{display:block}
#modal-controls-slot{width:250px;position:absolute;top:-5px;transform:translateY(-100%);display:none;justify-content:flex-end;pointer-events:auto;z-index:520;padding-right:5px}
#modal-source-text{white-space:nowrap;word-spacing:normal;letter-spacing:normal}

/* ===== CORE : core/pressable.css ===== */
/* ==========================================================================
   Pressable — эффект "утопания" с прогрессией по времени удержания.
   Быстрый тап (<250ms) → лёгкое нажатие, долгий зажим → максимум (0.94).
   Плавная кривая без ступенек.
   ========================================================================== */

.pressable {
    transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1) translateZ(0);
    will-change: transform;
}

@keyframes pressable-press {
    0%   { transform: scale(1)     translateZ(0); }
    100% { transform: scale(0.97)  translateZ(0); }
}

/* Accessibility: пользователи с prefers-reduced-motion получают только лёгкий эффект */
@media (prefers-reduced-motion: reduce) {
    .pressable.pressing {
        animation: none;
        transform: scale(0.985) translateZ(0);
    }
}

/* ==========================================================================
   Обводка при нажатии и в активном состоянии.
   outline (а не border) — не влияет на layout и не перебивает существующий box-shadow.
   ========================================================================== */

/* ==========================================================================
   (стили dd-panel фильтра переехали в modules/filter/forms.css).
   Стили идентичны светлой теме по структуре, но цвета под #1E293B.
   ========================================================================== */

/* ===== CORE : core/reset.css ===== */
/* ===== CORE: reset.css — обнуление и базовые стили ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }

/* ===== CORE : core/tokens.css ===== */
/* ===== CORE: tokens.css — единая таблица переменных сайта =====
   Правило: цвета/отступы/шрифты/z-index НИГДЕ больше не задаются числами —
   только через эти переменные. Новое общее значение = сюда, не в модуль. */

:root {
  /* Типографика */
  --font-family: Arial, sans-serif;

  /* Светлая тема (базовая, как на проде) */
  --bg-primary: #F6F7F8;
  --bg-secondary: #FFFFFF;
  --bg-panel: #283341;
  --text-primary: #000000;
  --text-secondary: #333333;
  --border-color: #FFFFFF;
  --card-bg: #FFFFFF;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Акценты */
  --telegram-bg: #31343E;
  --telegram-text: #FFFFFF;
  --accent: #3385d1;
  --accent-danger: #B32C35;
  --warn: #FFB900;

  /* Тёмная тема — принудительная тема сайта (как на проде) */
  --dark-bg-primary: #17212B;
  --dark-bg-secondary: #1E2832;
  --dark-bg-panel: #242F3D;
  --dark-text-primary: #e6e6e6;
  --dark-text-secondary: #9aa5b1;
  --dark-border: #2e3947;

  /* Реестр z-index (никаких чисел в модулях!) */
  --z-content: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-dropdown: 200;
  --z-burger: 300;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Сетка */
  --container: 1200px;
  --gap-card: 16px;
  --radius: 12px;
  --radius-sm: 8px;
}

/* Тёмная тема применяется всегда (тема сайта тёмная — как на проде) */
:root {
  --bg-primary: var(--dark-bg-primary);
  --bg-secondary: var(--dark-bg-secondary);
  --bg-panel: var(--dark-bg-panel);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --border-color: var(--dark-border);
  --card-bg: #1E2832;
}

/* ===== MODULE header : modules/header/header-v2.css ===== */
/* ===== HEADER V2 (тест, флаг HEADER_V2) : modules/header/header-v2.css ===== */

.h2x-topbar {
    height: 76px;
    background: #242f3d;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.h2x-inner {
    width: 1590px;
    max-width: 100%;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.h2x-logo {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 0;
    text-decoration: none;
}

/* высота лого = высоте блока (40px), ширина — по пропорции файла */
.h2x-logo img {
    height: 100%;
    width: auto;
    display: block;
}

/* ===== MODULE header : modules/header/header.css ===== */
/* header.css — ОПУСТОШЁН 2026-09-09: все стили .topbar переехали в topbar.css
   (файл ждёт включения после визуальной проверки). Пока header стилизован
   нулём — так заказчик проверяет, что скрытых стилей не осталось. */

/* ===== MODULE header : modules/header/topbar.css ===== */
/* ============================================================
   TOPBAR — десктопная шапка (единый владелец стилей блока).
   Разметка: templates/modules/header/header.html
   Весь каскад 1:1 из прежнего header.css + core/misc.css + core/base.css
   (консолидация 2026-09-09). Мобильная шапка — модуль burger, тут её нет.
   Анимации кнопок ускорены ×2 (2026-09-09): transition .15s, пульс/блик .75s.
   ============================================================ */

/* ── Каркас ─────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;padding:50px 0;width:100%}
.topbar-left{display:flex;align-items:center;width:60px;flex-shrink:0}
.topbar-center{display:flex;align-items:center;justify-content:center;flex:1;gap:40px}
.topbar-right{width:60px;flex-shrink:0}

/* ── Логотип ────────────────────────────────────────────── */
.logo{display:flex;align-items:center;justify-content:center;padding:0 5px;position:relative}
.logo::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:transparent;pointer-events:none;z-index:0;display:none}
/* лого — span.logo-dark с CSS-фоном (img убран: не было ни битых картинок, ни сети) */
.logo .logo-dark{display:block;width:177px;height:67px;filter:none;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgxIiBoZWlnaHQ9IjY4IiB2aWV3Qm94PSIwIDAgMTgxIDY4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMjEuODI3MyAxMy4zNjlDMTkuNTI3OSAxMi4xNzQ5IDE3LjAxNDcgMTEuNzcyNSAxNC43OTY5IDExLjQxNjVMMTQuNDMzMiAxMS4zNTlDMTIuMzg3NCAxMS4wMjc0IDEwLjExMDEgMTAuNjMxNiA4Ljk3MjUzIDEwLjA5NjRMOC44OTMxNCAxMC4wNjFDOC42MTgwNCA5Ljk1NDQ5IDguMzU3OTMgOS44MTI1NCA4LjExOTM0IDkuNjM4NzFDOC4wOTI4OCA5LjYwMzMzIDguMDQ2NjIgOS40NTUxNSA4LjA0NjYyIDguODg0NjVDOC4wNDY2MiA4LjMxNDE2IDguMTIxNTcgOC4xODM3IDguNTg0NTIgNy44MzQzMkM5LjA0NzQ4IDcuNDg0OTUgMTAuMDkwMiA3LjA0OTM2IDExLjU2NTEgNi45MTIyNkMxNC42MzM4IDYuNjI0ODEgMTguNTk5OCA3LjY1NTI1IDIxLjIwNzggOS40MTc1OUwyMS44NDcxIDkuODQ4NzdMMjUuNjYxIDQuMTY4MTZMMjUuMDIxNyAzLjcyNTkyQzIxLjM2MDQgMS4zMDc2OCAxNy4wNzU0IDAuMDEyODM2MSAxMi42OTE2IDBDMTIuMDk2NCAwIDExLjUwNTUgMC4wMzA5ODUxIDEwLjkyNzkgMC4wODQwNTQzQzguMjgyNDcgMC4zMjk0OTkgNi4xNzkzMyAxLjA3MDI1IDQuNDgxODIgMi4zNDgzNEMzLjQ3MTA3IDMuMTA5IDIuNjQ5ODQgNC4wOTQyNSAyLjA4MjU5IDUuMjI2ODFDMS41MTUzNCA2LjM1OTM2IDEuMjE3NTQgNy42MDg0MiAxLjIxMjUgOC44NzU4NUMxLjIxMjUgMTIuNDEzOCAzLjY1Mjk1IDE1LjE1NzkgNi4wNjI1MiAxNi4yOTIyQzguMjIwNzggMTcuMzA1IDEwLjQ3MTYgMTcuNjU4OCAxMi42NDA5IDE4LjAwMTVMMTMuMzMwOSAxOC4xMDk5QzE1LjIwNyAxOC40MTI4IDE3LjUwODYgMTguODM5NiAxOC42NzA0IDE5LjQzNjZDMTkuNjk5OSAxOS45NzE3IDE5LjcxOTcgMTkuOTgyNyAxOS43MTk3IDIxLjEwMTZDMTkuNzE5NyAyMS44NTc5IDE5LjU2NzYgMjIuMTQwOSAxOC45MTA2IDIyLjYxODVDMTguMzExIDIzLjA2MDggMTcuMDU2NiAyMy41NTYxIDE1LjM0MzcgMjMuNjUxMkMxMS44MDA5IDIzLjg1MDIgNy43MjQ3MyAyMi4zNDY2IDUuNDIzMTcgMTkuOTkxNkw0Ljg4MzA3IDE5LjQzNjZMMCAyNC4yMjE3TDAuNTM3ODk4IDI0Ljc3NjdDNC4wODUwMyAyOC40MTg2IDkuMjY3OTMgMzAuNTI1OSAxNC41ODk3IDMwLjUyNTlDMTQuOTY0NSAzMC41MjU5IDE1LjMzOTIgMzAuNTE0OCAxNS43MTYyIDMwLjQ5NDlDMTguNTgyMSAzMC4zMzM1IDIxLjAwNzIgMjkuNTUwNyAyMi45MDc1IDI4LjE3MDlDMjQuMDI0NiAyNy4zNjMzIDI0LjkzNTggMjYuMzAyNSAyNS41NjY3IDI1LjA3NDhDMjYuMTk3NyAyMy44NDcxIDI2LjUzMDYgMjIuNDg3MiAyNi41Mzg0IDIxLjEwNkMyNi41MjQ2IDE5LjUwOTUgMjYuMDc5MSAxNy45NDY3IDI1LjI0OTQgMTYuNTg0MkMyNC40MTk4IDE1LjIyMTYgMjMuMjM3IDE0LjExMDQgMjEuODI3MyAxMy4zNjlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNDYuNDg1MiAxNi41Mzk5QzQ2LjQ4NTIgMTguNzA0NyA0NS44OTY2IDIwLjI2MTQgNDQuNjMxMiAyMS40NDIxQzQzLjQ4ODIgMjIuNDU5MSA0Mi4wMDc3IDIzLjAxMTEgNDAuNDggMjIuOTlDMzguOTU0NCAyMy4wMTAxIDM3LjQ3NjQgMjIuNDU4MSAzNi4zMzU0IDIxLjQ0MjFDMzUuMDcgMjAuMjYxNCAzNC40ODE0IDE4LjcwMjUgMzQuNDgxNCAxNi41MzMzVjAuMDIyMTI1MkgyNy42NDczVjE2LjUzMzNDMjcuNjQ3MyAyMC41MTM0IDI5LjA3ODEgMjQuMDMxNSAzMS42NzcyIDI2LjQ1NzJDMzQuMDc2MiAyOC42NjE3IDM3LjIxOTkgMjkuODcwOCA0MC40NzM0IDI5Ljg0MDNDNDMuNzI4MiAyOS44NjggNDYuODcyNCAyOC42NTY3IDQ5LjI3MTggMjYuNDUwNkM1MS44NzEgMjQuMDE4MiA1My4zMDE3IDIwLjUwMjQgNTMuMzAxNyAxNi41MzMzVjAuMDIyMTI1Mkg0Ni40Njc1TDQ2LjQ4NTIgMTYuNTM5OVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02MS42NzI0IDAuMDI4NzQ3Nkg1NC44NDQ5VjI5Ljg0N0g2MS42NzI0VjAuMDI4NzQ3NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02My4yMzU0IDI5Ljg0N0g3MC4wNjI5VjE4LjA3NjdIODMuMzYwOFYxMS4yMjg2SDcwLjA2MjlWNi44NzY4OEg4My4zNjA4VjAuMDI4NzQ3Nkg2My4yMzU0VjI5Ljg0N1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04NC44Nzk3IDI5Ljg0N0gxMDUuMDA1VjIyLjk5ODlIOTEuNzA5NFYxOC4wNzY3SDEwNS4wMDVWMTEuMjI4Nkg5MS43MDk0VjYuODc2ODhIMTA1LjAwNVYwLjAyODc0NzZIODQuODc5N1YyOS44NDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTI1LjE5NyAxNy45OTA0TDExNC4wNjYgMC4wMjg3MzFMMTA2LjUyNiAwLjAyNjUxOThWMjkuODcxM0gxMTMuMzU0VjExLjg1NDNMMTI0LjUwNCAyOS44NDdIMTMyLjAyNFYwLjAyODczMUgxMjUuMTk3VjE3Ljk5MDRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTUyLjIwMyAxMS4yNzI4SDE0MC4zOTVWMC4wMjg3NDc2SDEzMy41NjdWMjkuODQ3SDE0MC4zOTVWMTguMTIwOUgxNTIuMjAzVjI5Ljg0N0gxNTkuMDMyVjAuMDI4NzQ3NkgxNTIuMjAzVjExLjI3MjhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTgwLjcxMiA2Ljg3Njg4VjAuMDI4NzQ3NkgxNjAuNTg2VjI5Ljg0N0gxODAuNzEyVjIyLjk5ODlIMTY3LjQxNFYxOC4wNzY3SDE4MC43MTJWMTEuMjI4NkgxNjcuNDE0VjYuODc2ODhIMTgwLjcxMloiIGZpbGw9IndoaXRlIi8+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xMV84KSI+CjxwYXRoIGQ9Ik00NC4zMjgxIDMzLjMzM0wyOS4wOTE5IDY2LjQ2MDFIMzcuMzk3Mkw0MC43Njc1IDU5LjEyOTRINTQuMjE0TDU3LjU4NDMgNjYuNDYwMUg2NS44ODk2TDUwLjY1NjEgMzMuMzMzSDQ0LjMyODFaTTUwLjcwNyA1MS40NzE5SDQ0LjMwMTNMNDcuNTE2MiA0NC41MDZMNTAuNzA3IDUxLjQ3MTlaIiBmaWxsPSIjRkZCOTAwIi8+CjxwYXRoIGQ9Ik04My43NzUzIDUxLjY3MzRDODMuNzc1MyA1NC4wNjQzIDgzLjEzMjMgNTUuNzg1NCA4MS43NTUzIDU3LjA4N0M4MC41MTE2IDU4LjIxMzQgNzguODk4NSA1OC44MjYzIDc3LjIzMjkgNTguODA1M0M3NS41NzEgNTguODI3IDczLjk2MTEgNTguMjE3MSA3Mi43MTg2IDU3LjA5NTJDNzEuMzM4OSA1NS43OTA4IDcwLjY5ODYgNTQuMDY5OCA3MC42OTg2IDUxLjY3MzRWMzMuMzMzSDYzLjE2NDlWNTEuNjczNEM2My4xNjQ5IDU2LjA4NzYgNjQuNzM3NSA2MC4wMDM1IDY3LjU4ODEgNjIuNjk5NEM3MC4yMTc1IDY1LjE1MTEgNzMuNjY0OSA2Ni40OTYyIDc3LjIzMjkgNjYuNDYyOEM4MC44MDEyIDY2LjQ5MjMgODQuMjQ3OCA2NS4xNDU1IDg2Ljg3NzcgNjIuNjk0Qzg5LjcyODMgNTkuOTk4MSA5MS4yOTgyIDU2LjA4NDkgOTEuMjk4MiA1MS42NzM0VjMzLjMzM0g4My43NjczTDgzLjc3NTMgNTEuNjczNFoiIGZpbGw9IiNGRkI5MDAiLz4KPHBhdGggZD0iTTEyMC43ODUgMzMuMzA4NUg5Mi40NDIyVjQwLjk2MzNIMTAyLjg0OFY2Ni40NjAxSDExMC4zNzlWNDAuOTYzM0gxMjAuNzg1VjMzLjMwODVaIiBmaWxsPSIjRkZCOTAwIi8+CjxwYXRoIGQ9Ik0xMzUuMjUyIDMzLjQzOTJDMTMxLjk2NiAzMy40MzkyIDEyOC43NTUgMzQuNDI5NCAxMjYuMDIzIDM2LjI4NDZDMTIzLjI5MiAzOC4xMzk4IDEyMS4xNjMgNDAuNzc2NiAxMTkuOTA2IDQzLjg2MTdDMTE4LjY0OCA0Ni45NDY4IDExOC4zMTkgNTAuMzQxNSAxMTguOTYgNTMuNjE2NUMxMTkuNjAxIDU2Ljg5MTYgMTIxLjE4MyA1OS45IDEyMy41MDYgNjIuMjYxMkMxMjUuODI5IDY0LjYyMjQgMTI4Ljc4OSA2Ni4yMzA0IDEzMi4wMTEgNjYuODgxOEMxMzUuMjMzIDY3LjUzMzMgMTM4LjU3MyA2Ny4xOTg5IDE0MS42MDggNjUuOTIxMUMxNDQuNjQzIDY0LjY0MzIgMTQ3LjIzOCA2Mi40NzkyIDE0OS4wNjMgNTkuNzAyN0MxNTAuODg4IDU2LjkyNjMgMTUxLjg2MiA1My42NjIgMTUxLjg2MiA1MC4zMjI3QzE1MS44NTggNDUuODQ2MyAxNTAuMTA3IDQxLjU1NDQgMTQ2Ljk5MiAzOC4zODkxQzE0My44NzggMzUuMjIzNyAxMzkuNjU2IDMzLjQ0MzUgMTM1LjI1MiAzMy40MzkyWk0xMzUuMjUyIDY1LjcwODVDMTMyLjI1NyA2NS43MDg1IDEyOS4zMyA2NC44MDYgMTI2Ljg0MSA2My4xMTUxQzEyNC4zNTEgNjEuNDI0MiAxMjIuNDEgNTkuMDIwOCAxMjEuMjY0IDU2LjIwODlDMTIwLjExOSA1My4zOTcxIDExOS44MTkgNTAuMzAyOSAxMjAuNDAzIDQ3LjMxNzlDMTIwLjk4NyA0NC4zMzI4IDEyMi40MjkgNDEuNTkwOCAxMjQuNTQ2IDM5LjQzODdDMTI2LjY2NCAzNy4yODY2IDEyOS4zNjEgMzUuODIxIDEzMi4yOTggMzUuMjI3MkMxMzUuMjM1IDM0LjYzMzQgMTM4LjI3OSAzNC45MzgyIDE0MS4wNDUgMzYuMTAyOUMxNDMuODEyIDM3LjI2NzYgMTQ2LjE3NiAzOS4yNCAxNDcuODQgNDEuNzcwNkMxNDkuNTAzIDQ0LjMwMTIgMTUwLjM5MSA0Ny4yNzY0IDE1MC4zOTEgNTAuMzJDMTUwLjM4NyA1NC40IDE0OC43OTEgNTguMzExNiAxNDUuOTUyIDYxLjE5NjZDMTQzLjExNCA2NC4wODE1IDEzOS4yNjYgNjUuNzA0MiAxMzUuMjUyIDY1LjcwODVaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTM1LjI1MiAzNC45MzE1QzEzMi4yNTcgMzQuOTMxNSAxMjkuMzMgMzUuODM0IDEyNi44NDEgMzcuNTI0OUMxMjQuMzUxIDM5LjIxNTggMTIyLjQxIDQxLjYxOTIgMTIxLjI2NSA0NC40MzExQzEyMC4xMTkgNDcuMjQzIDExOS44MTkgNTAuMzM3MSAxMjAuNDAzIDUzLjMyMjJDMTIwLjk4NyA1Ni4zMDczIDEyMi40MjkgNTkuMDQ5MiAxMjQuNTQ2IDYxLjIwMTNDMTI2LjY2NCA2My4zNTM0IDEyOS4zNjEgNjQuODE5MSAxMzIuMjk4IDY1LjQxMjhDMTM1LjIzNSA2Ni4wMDY2IDEzOC4yNzkgNjUuNzAxOSAxNDEuMDQ1IDY0LjUzNzJDMTQzLjgxMiA2My4zNzI0IDE0Ni4xNzYgNjEuNCAxNDcuODQgNTguODY5NEMxNDkuNTAzIDU2LjMzODggMTUwLjM5MSA1My4zNjM2IDE1MC4zOTEgNTAuMzJDMTUwLjM4NyA0Ni4yNCAxNDguNzkxIDQyLjMyODQgMTQ1Ljk1MiAzOS40NDM1QzE0My4xMTQgMzYuNTU4NSAxMzkuMjY2IDM0LjkzNTggMTM1LjI1MiAzNC45MzE1Wk0xMzQuNDE5IDM4LjEyM0wxMzIuMDQ1IDQ1LjU1MThIMTI0LjE3NEMxMjUuMDQzIDQzLjQ3NDYgMTI2LjQ1OSA0MS42ODE3IDEyOC4yNjcgNDAuMzcwOUMxMzAuMDc1IDM5LjA2IDEzMi4yMDMgMzguMjgyMSAxMzQuNDE5IDM4LjEyM1pNMTIzLjY2NSA0Ny4wMzA1TDEzMC4wNiA1MS43NTI0TDEyNy41MjUgNTkuNjg0OUMxMjUuNzUxIDU4LjE3NzMgMTI0LjQ0MyA1Ni4xODEzIDEyMy43NTkgNTMuOTM2NUMxMjMuMDc0IDUxLjY5MTcgMTIzLjA0MSA0OS4yOTM2IDEyMy42NjUgNDcuMDMwNVpNMTM1LjI0OSA1NS41ODM5TDE0MS45MDQgNjAuNDg1NUMxMzkuOTMzIDYxLjgyMDcgMTM3LjYxOCA2Mi41MzMxIDEzNS4yNDkgNjIuNTMzMUMxMzIuODgxIDYyLjUzMzEgMTMwLjU2NSA2MS44MjA3IDEyOC41OTQgNjAuNDg1NUwxMzUuMjQ5IDU1LjU4MzlaTTEzNi4wODIgMzguMTIzQzEzOC4yOTcgMzguMjgyMSAxNDAuNDI2IDM5LjA2IDE0Mi4yMzQgNDAuMzcwOUMxNDQuMDQyIDQxLjY4MTcgMTQ1LjQ1OCA0My40NzQ2IDE0Ni4zMjcgNDUuNTUxOEgxMzguNDU2TDEzNi4wODIgMzguMTIzWk0xNDIuOTczIDU5LjY4NDlMMTQwLjQzOSA1MS43NTI0TDE0Ni44MzQgNDcuMDMwNUMxNDcuNDU3IDQ5LjI5MzYgMTQ3LjQyNCA1MS42OTE3IDE0Ni43NCA1My45MzY1QzE0Ni4wNTUgNTYuMTgxMyAxNDQuNzQ3IDU4LjE3NzMgMTQyLjk3MyA1OS42ODQ5WiIgZmlsbD0iI0ZGQjkwMCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzExXzgiPgo8cmVjdCB3aWR0aD0iMTIyLjc2MiIgaGVpZ2h0PSIzMy44OTIzIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDk3MyAzMy4zMDg1KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat center/contain}
.logo .logo-light{display:none}

/* ── Навигация ──────────────────────────────────────────── */
.nav{display:flex;gap:40px}
.nav.nav-left,.nav.nav-right{flex:1;min-width:0}
.nav.nav-left{justify-content:flex-end}
.nav.nav-right{justify-content:flex-start}
.nav a.nav-btn,.nav button.nav-btn,.nav a.btn-in-stock{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:6px}

/* ── Кнопки-разделы ─────────────────────────────────────── */
.nav-btn{position:relative;height:45px;padding:0 24px;background:transparent;font-family:var(--font-family);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#B8C4CE;border:1.5px solid transparent;border-radius:8px;cursor:pointer;outline:none;transition:all .15s cubic-bezier(0.25,0.8,0.25,1)}
.nav-btn:hover:not(.active){color:#e6e6e6;border-color:#2E3742;transform:translateY(-2px)}
.nav-btn.active{color:#fff;border-color:#fff;background-color:#2B323B}
.nav-btn:active{transform:translateY(0)}

/* ── Кнопка «В наличии» ─────────────────────────────────── */
.btn-in-stock{width:160px;height:45px;border-radius:10px;position:relative;overflow:hidden;background:rgba(255,255,255,0.03);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid transparent;border-radius:8px;transition:all .15s cubic-bezier(0.4,0,0.2,1);padding:0;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;user-select:none;text-decoration:none;font-family:var(--font-family)}
.btn-in-stock .btn-text-stock{color:#e2e8f0;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:-0.03em;transition:color .15s ease;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,0.8)}
.btn-in-stock .icon-box-wrapper{color:#ffffff;font-size:16px;transition:all .15s ease;display:flex;align-items:center;opacity:1}
/* фиксированные px вместо 1em-атрибутов: размер не зависит от момента
   применения CSS — иконка не «дорисовывается» после первого кадра */
.btn-in-stock .icon-box-wrapper svg{display:inline-block;width:16px;height:16px;flex:none;color:inherit}
.btn-in-stock .status-dot-wrapper{position:relative;width:8px;height:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-in-stock .status-dot{width:6px;height:6px;background-color:#ffb900;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 8px rgba(255,185,0,0.8)}
.btn-in-stock .status-pulse{position:absolute;top:50%;left:50%;width:6px;height:6px;transform:translate(-50%,-50%);background-color:#ffb900;border-radius:50%;opacity:.7;animation:stock-ping .75s cubic-bezier(0,0,0.2,1) infinite}
.btn-in-stock.active{background:#2B323B;border-color:#F3BC3E}
.btn-in-stock:not(.active):hover{background:transparent;border-color:#2E3742;transform:translateY(-2px)}
/* при нажатии кнопка плавно (transition .15s на базе) возвращается на место,
   остальной hover-стиль (подсветка/бордер) держится, пока курсор не отпущен.
   Специфичность выше ховер-правила, иначе -2px побеждает при удержании */
.nav-btn:hover:not(.active):active{transform:translateY(0)}
.btn-in-stock:not(.active):hover:active{transform:translateY(0)}
.btn-in-stock:not(.active):hover:active .icon-box-wrapper{transform:translateY(0)}
.btn-in-stock.active .btn-text-stock{color:#ffb900;text-shadow:0 0 15px rgba(255,185,0,0.6)}
.btn-in-stock:not(.active):hover .btn-text-stock{color:#ffb900;text-shadow:0 0 15px rgba(255,185,0,0.6)}
.btn-in-stock.active .icon-box-wrapper{color:#ffb900!important}
.btn-in-stock:not(.active):hover .icon-box-wrapper{color:#ffb900!important;transform:translateY(-2px)}
.btn-in-stock::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,185,0,0.2),rgba(255,255,255,0.05),transparent);transform:skewX(-20deg);pointer-events:none;transition:none}
.btn-in-stock:hover::after{animation:scan-stock .75s ease-in-out infinite}
.hdr-badge-hidden{display:none}

/* ── Анимации кнопки ────────────────────────────────────── */
@keyframes stock-ping{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}75%,100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
@keyframes scan-stock{0%{left:-100%}100%{left:200%}}

/* ── Анти-дёрганье на кромке: hover-подъём уводит кнопку из-под курсора.
   Буфер — на ::before (::after у «В наличии» занят бликом scan-stock) ── */
.nav-btn::before, .btn-in-stock::before{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.nav-btn, .btn-in-stock{position:relative}

/* активное «Сравнение» (на странице /compare) — жёлтая заливка */
#compareBtn.active .compare-badge{background:#ef4444;color:#fff}

/* ===== MODULE burger : modules/burger/burger.css ===== */
/* ================================================================
   BURGER MENU — переписано с нуля
   Без opacity на main-content. Только transform + border-radius.
   ================================================================ */

/* === Фоновые орбы — скрыты === */
.burger-bg-orbs { display: none; }

/* === Сайдбар === */
#sidebar-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    padding-top: 0;
    padding-left: 0;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .3s ease, transform .3s ease;
}

#sidebar-menu.menu-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* === Sidebar header === */
.bm-sidebar-header {
    display: flex;
    align-items: center;
    padding: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bm-sidebar-logo { display: flex; align-items: center; text-decoration: none; }
.bm-sidebar-logo-img { height: 37px; width: auto; }

/* === Пункты меню — stagger === */
.menu-item {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}

.menu-item.menu-item-show {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

/* === Основной контент — сдвиг === */
#main-content.menu-shifted {
    transform: translateX(80vw) scale(0.9);
    border-radius: 20px;
    overflow: hidden;
    opacity: 0.5;
}

/* === Click-catcher === */
#click-catcher {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 50;
    display: none;
    cursor: pointer;
    touch-action: pan-y;
}

/* === Список меню === */
#menu-list {
    margin: 0;
    padding: 15px 15px 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === Пункт меню === */
#menu-list a,
#menu-list button {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0 12px 30px;
    border-radius: 0;
    transition: none;
    cursor: pointer;
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

#menu-list a:hover,
#menu-list button:hover {
    background: rgba(255, 255, 255, 0.05);
}

#menu-list a.is-active,
#menu-list button.is-active {
    background: #ffb900;
    color: #000;
    font-weight: 700;
}

/* === Бейдж сравнения === */
.cmp-burger-badge {
    margin-left: 10px;
    background: #eab308;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* === Menu item initial state === */
.bm-item-initial {
    transform: translate3d(-20px, 0, 0);
    opacity: 0;
}

/* === Hidden states === */
#cmp-burger-badge.bm-badge-hidden { display: none; }
#click-catcher.bm-hidden { display: none; }

/* === Site header === */
#site-header.bm-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #232E3C;
    transition: transform 0.3s;
    padding: 0 24px;
}

.bm-header-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.bm-header-left { display: flex; align-items: center; }
.bm-header-logo-link { display: flex; justify-content: center; padding: 9px 0; }
.bm-header-logo-img { height: 37px; }
.bm-header-right { display: flex; justify-content: flex-end; }

/* Mobile YouTube horizontal scroll */
.m-yt-section { margin: 0 0 20px; }
.m-yt-title { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; font-size: 20px; font-weight: 600; color: #e2e8f0; }
.m-yt-icon { width: 20px; height: 20px; flex-shrink: 0; }
.m-yt-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.m-yt-viewport::-webkit-scrollbar { display: none; }
.m-yt-list { display: flex; gap: 8px; padding: 0 16px 0 14px; }
.m-yt-card { flex: 0 0 auto; position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; height: 150px; aspect-ratio: 16/9; line-height: 0; font-size: 0; box-shadow: 0 1px 4px 0px rgba(0,0,0,.18), 0 0px 1px rgba(0,0,0,.08); }
.m-yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center; margin-top: -4px; height: calc(100% + 8px); }
.m-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 24px; pointer-events: none; }
.m-yt-play svg { width: 100%; height: 100%; }
.m-yt-link { display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 14px; font-weight: 500; color: #e2e8f0; background: #222d3a; text-decoration: none; margin: 5px 15px; width: calc(100% - 30px); border-radius: 8px; box-shadow: 0 1px 4px 0px rgba(0,0,0,.18), 0 0px 1px rgba(0,0,0,.08); }

/* modules/burger/burger.css — desktop-скрытие (бывший отдельный мини-файл) */
@media (min-width:769px){
.mobile-header,.mobile-sidebar,.mobile-sidebar-overlay{display:none!important}
}

/* синхронная анимация гамбургер→крест: та же кривая/длительность, что и
   сдвиг #main-content (transform .35s cubic-bezier(.4,0,.2,1) в bundle),
   класс ставится сразу по клику (burger.js) — превращение идёт ВМЕСТЕ
   со сдвигом страницы, а не после него (прод-канон: transitionend) */
.hamburger span{transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1)}

/* превращение бургер↔крест ПО ПРОГРЕССУ (0..1) — переменная --p:
   классы дают 0/1 (клик: плавный transition .35s как у сдвига страницы),
   drag-свайп ставит промежуточные значения напрямую из burger.js,
   крестик следует за пальцем кадр в кадр */
.hamburger{--p:0}
.hamburger span:nth-child(1){transform:translateY(calc(8px * var(--p,0))) rotate(calc(45deg * var(--p,0)))}
.hamburger span:nth-child(2){opacity:calc(1 - var(--p,0));transform:scaleX(calc(1 - var(--p,0)))}
.hamburger span:nth-child(3){transform:translateY(calc(-8px * var(--p,0))) rotate(calc(-45deg * var(--p,0)))}
.hamburger.is-active{--p:1}
.hamburger.is-active span:nth-child(1){transform:translateY(calc(8px * var(--p,1))) rotate(calc(45deg * var(--p,1)))}
.hamburger.is-active span:nth-child(2){opacity:calc(1 - var(--p,1));transform:scaleX(calc(1 - var(--p,1)))}
.hamburger.is-active span:nth-child(3){transform:translateY(calc(-8px * var(--p,1))) rotate(calc(-45deg * var(--p,1)))}
/* во время drag-свайпа спаны следуют за пальцем мгновенно (без transition) */
.hamburger.is-dragging span{transition:none!important}

/* ===== MODULE ticker : modules/ticker/ticker.css ===== */
/* ============================================================
   TICKER — восстановленные правила (потерялись при переносе).
   Источник: .ref/legacy_css/ticker/ticker.legacy.css
   (прод styles.css L1 @3595/3717/3804/3845/3866/4153–4381, mobile
   отличия). Остальные тикер-правила живут в static/core/misc.css.
   ============================================================ */

/* styles.css L1 @3595 */
.telegram-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
    align-items: stretch;
    padding: 0;
}

/* курс в тикере: 14px (было 16px) */
.rate-item { font-size: 14px; }

/* styles.css L1 @3804 */
.rate-arrow {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* styles.css L1 @3845 */
.rate-down { color: #E53935; }

/* styles.css L1 @3866 */
.rate-up { color: #74AF52; }

/* styles.css L1 @5182 — иконка TГ-линии белая в тёмной теме */
.tg-line-icon{filter:brightness(0) invert(1)}

/* styles.css L1 @4153 */
.car-brand {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    /* центр полосы: как у курса (line-height 1 + 1px компенсация глифов) */
    line-height: 1;
    padding-top: 2px;
}

/* styles.css L1 @4195 */
.car-date { font-size: 12px; font-weight: 400; }

/* styles.css L1 @4237 — цена золотым градиентом */
.car-price {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding-top: 2px;
    background: linear-gradient(14deg, #E07D14 0%, #FEB801 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* styles.css L1 @4381 */
.car-new {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    /* mobile-bundle.css L3840/3846/3850/3859 */
    .telegram-left { width: auto; padding: 0 12px 0 0; }
    .rate-arrow { font-size: 13px; }
    .tg-line-icon { width: 12px; height: 12px; }
    .car-price { font-weight: 400; }
}

/* ═══ перенесено из mobile-bundle.css (2026-09-24): тикер правится ТОЛЬКО здесь ═══ */
.telegram-block{display:block}


/* === Telegram Block / Ticker (mobile) === */
.telegram-block {
    display: block !important;
    height: 27px;
    background-color: #31343E;
    padding: 0 12px 0 10px;
}

html.dark .telegram-block { background-color: #31343E; }

.telegram-wrapper { display: flex; width: 100%; height: 100%; gap: 0; align-items: stretch; padding: 0; }

.telegram-left { width: auto !important; min-width: auto; padding: 0 12px 0 0; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; height: 100%; }

/* курс в тикере — жирный белый (владелец 2026-09-27, стиль потерян при
   переносе: был font-weight 400 #F5F5F5) */
.rate-item { display: flex; align-items: center; font-size: 13px; font-weight: 700; color: #ffffff; text-transform: uppercase; }

html.dark .rate-item { color: #ffffff; }

.telegram-right { display: flex; flex: 1; overflow: hidden; padding: 0; align-items: center; height: 100%; }

/* ===== MODULE footer : modules/footer/footer.css ===== */
/* footer.css — 158 правил */

/* Desktop modals - within content-wrapper */
.manager-modal-overlay{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:16px}
.manager-modal-overlay.visible{display:flex}
.manager-modal-backdrop{position:absolute;inset:0;background:rgba(11,13,26,0.9);backdrop-filter:blur(4px)}
.v10-box{position:relative;z-index:2;width:580px;max-width:95vw;border-radius:16px;overflow:hidden;border:1px solid rgba(100,116,139,0.2);animation:v10Up .3s ease;background:#131727}
.v10-top{background:linear-gradient(135deg,rgba(255,185,0,0.15),rgba(245,158,11,0.08));padding:28px 24px;position:relative;display:flex;align-items:center;gap:18px}
.v10-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#FFB900,#f59e0b);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;color:#0b0d1a;border:3px solid #131727;flex-shrink:0}
.v10-info{display:flex;flex-direction:column;gap:2px}
.v10-name{font-size:20px;font-weight:700;color:#e2e8f0}
.v10-role{font-size:13px;color:#77889b}
.v10-phone{font-size:18px;font-weight:700;color:#FFB900;text-decoration:none;margin-top:4px}
.v10-phone:hover{color:#facc15}
.v10-close{position:absolute;top:12px;right:14px;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:#77889b;cursor:pointer;transition:all .2s}
.v10-close:hover{background:rgba(100,116,139,0.5);color:#fff}
.v10-close svg{width:20px;height:20px}
.v10-contacts{display:flex;flex-direction:column;gap:8px;flex:1}
.v10-qr{flex-shrink:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;width:174px}
.v10-qr .qr-wrap img{width:150px;height:150px}
.v10-foot{padding:12px 24px;border-top:1px solid rgba(100,116,139,0.2);background:#17212B}
.dg-modal-overlay{display:none;position:fixed;inset:0;z-index:10000}
.dg-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.4)}
.dg-modal-content{position:absolute;top:35px;left:50%;transform:translateX(-50%);width:1280px;max-width:calc(100vw - 48px);padding:0 24px;pointer-events:none}
.dg-modal-close{color:#666}
.dg-modal-close:hover{color:#1a1a1a}
.tg-modal-overlay{display:none;position:fixed;inset:0;z-index:10000}
.tg-modal{position:absolute;top:35px;left:50%;transform:translateX(-50%);width:1280px;max-width:calc(100vw - 48px);padding:0 24px;pointer-events:none}
.tg-modal-left{background:#fff;color:#1a1a1a;padding:0;border-radius:0}
.tg-modal-name{color:#1a1a1a}
.tg-modal-comment{color:#1a1a1a}
.tg-modal-right{background:#f9fafb;color:#1a1a1a;width:100%;padding:16px 0 0;border-radius:0}
.tg-modal-btn{background:#283341;color:#fff}
.tg-modal-close{position:absolute;top:8px;color:#666;font-size:20px;z-index:10}
.tg-modal-close:hover{color:#1a1a1a}
.footer{background-color:#242F3D;width:100%;margin-top:auto;padding-top:0;padding-bottom:0;border-radius:12px 12px 0 0}
.footer-inner{max-width:1280px;margin:0 auto;padding:40px 80px 0;box-sizing:border-box}
.footer{background:#242f3d!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border-top:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;padding:0!important;margin-top:auto!important;width:100%!important}
.footer .footer-inner{max-width:1280px!important;margin:0 auto!important;padding:48px 30px 32px!important;box-sizing:border-box!important;background:none!important}
.footer-v8-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px}
.footer-v8-logo{font-weight:800;color:#fff;letter-spacing:1px;font-size:22px;text-decoration:none;display:block}
.footer-v8-logo .accent{color:#FFB900}
.footer-v8-desc{color:#c4d0d8;font-size:14px;margin-top:8px;max-width:300px;line-height:1.6}
.footer-v8-actions{display:flex;align-items:center;justify-content:space-between;margin:16px 0 0}
.footer-v8-address{color:#c4d0d8;font-size:13px;margin:0;line-height:1.6;text-align:right;align-self:flex-end}
.footer-v8-address-label{display:block;color:#c4d0d8;font-size:13px;margin-bottom:2px}
.footer-v8-address-text{display:block;color:#fff;font-size:13px}
.footer-city-top{color:#fff!important;font-weight:500}
.footer-v8-btns{margin-top:24px;display:flex;gap:12px}
.footer-v8-phone{padding:10px 24px;border-radius:8px;background:rgba(255,185,0,.15);color:#FFB900;font-weight:600;font-size:13px;text-decoration:none;transition:background .15s}
.footer-v8-phone:hover{background:rgba(255,185,0,.25)}
.footer-v8-write{padding:10px 24px;border-radius:8px;background:rgba(255,255,255,.06);color:#c4d0d8;font-weight:600;font-size:13px;text-decoration:none;transition:background .15s;cursor:pointer;border:none;font-family:inherit}
.footer-v8-write:hover{background:rgba(255,255,255,.1)}
.footer-v8-st{font-size:11px;font-weight:700;color:#8b9cb0;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px 0}
.footer-v8-nl{font-size:14px;color:#FFB900;margin-bottom:8px;display:block;text-decoration:none;transition:color .15s}
.footer-v8-nl:hover{color:#ffc940}
.footer-v8-divider{height:1px;background:rgba(255,255,255,.06);margin:24px 0}
.footer-v8-bottom{display:flex;justify-content:space-between;align-items:flex-start}
.footer-v8-copy{color:#8b9cb0;font-size:12px;display:flex;justify-content:space-between;align-items:center;margin:0}
.footer-v8-copy-link{color:#ffb900;font-size:12px;text-decoration:underline}
.footer-v8-copy-link:hover{text-decoration:underline}
.footer-v8-disclaimer{color:#5a6a7e;font-size:11px;line-height:1.6;margin:10px 0 0;text-align:left}
.manager-modal-overlay.visible{display:flex}
.manager-modal-backdrop{position:absolute;inset:0;background:rgba(11,13,26,0.9);backdrop-filter:blur(4px);transition:opacity .3s ease}
.manager-modal-overlay.visible .manager-modal-logo{display:flex;flex-direction:column;line-height:1;letter-spacing:-0.05em;font-weight:900;font-style:italic}
.tg-modal-overlay.active{display:flex}
.tg-modal-close{position:absolute;top:-10px;right:-36px;background:none;border:none;color:#666;font-size:22px;cursor:pointer;line-height:1;z-index:10001;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.tg-modal-close:hover{color:#c4d0d8}
.tg-modal{background:transparent;width:600px;max-width:95vw;max-height:95vh;position:relative;box-shadow:none}
.tg-modal-left{flex:1;min-width:0;display:flex;flex-direction:column;color:#1a1a1a;background:#fff;padding:20px;border-radius:0;min-height:0}
.tg-modal-author{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-shrink:0}
.tg-modal-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,185,0,0.15);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.tg-modal-avatar img{width:44px;height:44px;object-fit:cover;border-radius:50%}
.tg-modal-name{font-weight:600;font-size:15px;color:#1a1a1a}
.tg-modal-comment-wrap{overflow-y:auto;flex:1;min-height:0}
.tg-modal-comment{font-size:13px;line-height:1.5;color:#1a1a1a;margin:0}
.tg-modal-right{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;width:221px;color:#1a1a1a;background:#f9fafb;padding:20px;border-radius:0}
.tg-modal-qr{border-radius:10px;background:#fff;padding:8px}
.tg-modal-qr-hint{font-size:11px;text-align:center;color:rgba(255,255,255,0.6);margin:0;line-height:1.4}
.tg-modal-btn{display:flex;align-items:center;gap:8px;width:100%;height:38px;padding:0 16px;background:#283341;border:1px solid transparent;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .2s}
.tg-modal-btn:hover{background:#313f50}
.tg-modal-btn:active{}
.dg-modal-overlay.visible{display:flex}
.dg-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}
.dg-modal-content::before{content:"";position:absolute;top:0;left:0;bottom:0;right:16px;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);z-index:-1}
.dg-modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0 4px;line-height:1;transition:color .15s}
.dg-modal-close:hover{color:#1a1a1a}
.footer-cities{padding:0 0 4px}
.footer-cities-title{font-size:11px;font-weight:700;color:#8b9cb0;text-transform:uppercase;letter-spacing:1px;margin:0 0 10px 0}
.footer-cities-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px 14px}
.footer-cities-grid a{font-size:12px;color:#e2e8f0;text-decoration:none;line-height:1.8;transition:color .15s}
.footer-cities-grid a:hover{color:#FFB900}
.footer-cities-grid a.footer-city-top{color:#e2e8f0;font-weight:400;font-size:12px}
.footer-cities-grid a.footer-city-top:hover{color:#FFB900}
.footer-cities-grid a.footer-city-primary{color:#FFB900;font-weight:700}
.footer-cities-grid a.footer-city-primary:hover{color:#FFD140}
.footer-cities-note{margin-top:25px;font-size:11px;color:#94a3b8;line-height:1.55}
.footer-cities-note a{color:#FFB900;text-decoration:underline;text-underline-offset:2px}
.footer-cities-note a:hover{color:#FFD140}
.footer-cities-toggle{display:none}
.footer-v8-phone-num{display:inline}
.footer-v8-phone-call{display:none}
.footer-cities{padding:0 0 4px}
.footer-cities-title{font-size:11px;font-weight:700;color:#8b9cb0;text-transform:uppercase;letter-spacing:1px;margin:0 0 10px 0}

/* → из header.css (консолидация 2026-09-09): навигация футера */
.footer-nav-title{font-size:16px;font-weight:600;color:#e6e6e6;margin:0 0 12px 0}
/* аватар Владимира (как inline-style в проде старого сайта) */
.v10-avatar--photo{background-image:url('https://img.suifenheauto.ru/team/vladimir.webp')!important;background-size:cover!important;background-position:center!important}

/* единый отступ футера */
/* margin-top:auto!important в базовом правиле перебиваем здесь же */
.footer{margin-top:16px!important}

/* город в футере: мгновенная жёлтая подсветка нажатия */
[data-city-slug] { -webkit-tap-highlight-color: transparent; transition: color .1s; }
[data-city-slug]:active, [data-city-slug].is-pressed { color: #EAB308 !important; }

/* карточка авто: футер почти вплотную к контенту (владелец 2026-10-02) */
body.car-page .footer{margin-top:2px!important}

/* ссылка «Уточните условия у оператора» — кнопка модалки контактов */
.footer-cities-link{background:none;border:none;padding:0;font:inherit;color:#5B9BD5;text-decoration:underline;cursor:pointer}
.footer-cities-link:hover{color:#7fb3e8}

/* ===== MODULE filter-modal : modules/filter-modal/filter-modal.css ===== */
/* ============================================================================
   FILTER-MODAL (mobile) — быстрый фильтр (fm-), полноэкранная модалка «Все
   параметры» (fsm-), вложенные bottom-sheet модалки (#nested-*), барабанные
   пикеры (drum-*), state-классы (tw-), утилиты.

   Источник: prod static/css/mobile-bundle.css (перенос 2026-09-08), строки:
     53-54     .no-scrollbar (используется .fsm-body)
     950-963   fs-ячейки: tap-highlight + .fs-disabled (блок «CITY MOBILE»)
     1913-2225 «MOBILE FILTERS & MODALS»: list-active/dd-count-mobile/drum-*
               filter-cell/show-btn/filter-arrow — БЕЗ мёртвого (см. ниже)
     2227-2403 fm- быстрый фильтр + #nested-content (+mflt-color-*)
     2404-2781 fsm- полноэкранный фильтр + nested bottom-sheet
     2782-2994 tw- state-классы + утилиты
   Каскадный порядок исходника сохранён (правила не переупорядочены).

   НЕ перенесено (мёртвое по отчёту 04-css-mobile + grep по JS/шаблонам):
     - .filter-arrow-loading + @keyframes filterArrowSpin (1913-1937) — класс
       никто не ставит;
     - .chip-active, .selection-*, .multi-active (1994-2033) — поколения
       старых списков, в живых JS не встречаются;
     - .toggle-checkbox* (2041-2044, 2055-2057) и .modal-sort-card
       (2051-2053) — старая разметка сортировки;
     - mflt-opacity-dim (2335-2337) — не используется;
     - .city-bc-mobile/.city-header-mobile (964-988) — крошки, не фильтр;
     - мёртвые семейства mistk-/mcmp-/mf-footer (вне указанных диапазонов).
   Уточнение к отчёту 04: mflt-color-active/inactive НЕ мёртвые — ими
   _filter_mobile.html рендерит исходный цвет ячеек (дубль 1026-1031 взят
   одной копией из секции 2326+).
   ============================================================================ */

/* --- mobile-bundle.css L53-54: .no-scrollbar (для .fsm-body) --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- mobile-bundle.css L950-963: fs-ячейки — tap-highlight и .fs-disabled --- */
/* =============================================
   CITY MOBILE — <style> block extracted from city_mobile.html
   ============================================= */
.fs-cell {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.fs-cell:active {
    opacity: 1 !important;
    transform: none !important;
}
.fs-disabled span {
    color: #3f4852 !important;
}

/* --- mobile-bundle.css L1913-2225: фильтры и модалки (drum, list-active, filter-cell, show-btn) --- */
/* ============================================
   MOBILE FILTERS & MODALS
   Стили для фильтров и модальных окон
   ============================================ */

/* === Selection Styles === */

.brand-item {
  padding: 12px 10px;
  margin: 0;
  border-radius: 8px;
}

.list-active {
  background-color: #fffbeb !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
}

/* Brand name text color */
.brand-name-text {
  color: #a0b0c0;
}

:root .list-active,
html.dark .list-active {
  background-color: #2C3743 !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html.dark .list-active .brand-name-text {
  color: #ffffff !important;
}

html.dark .list-active .dd-count-mobile {
  background: #283341 !important;
  color: #cbd5e1 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Count badges (desktop style) */
.dd-count-mobile {
  color: #a0b0c0;
  font-size: 10px;
  font-weight: 700;
  background: #283341;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-family);
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* === Full Screen Filter Modal === */
#full-screen-filter {
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* === Modal Max Heights === */
.modal-nested-card {
  max-height: 85vh;
}

/* === Drum/Wheel Year Picker === */
.drum-picker-container {
  display: flex;
  align-items: stretch;
  gap: 0;
  justify-content: center;
  padding: 0 20px;
}

.drum-picker-column {
  flex: 0 0 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.drum-picker-wrapper {
  position: relative;
  width: 100%;
  height: 150px; /* 3 items * 50px */
  overflow: hidden;
}

.drum-picker-scroll {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.drum-picker-scroll::-webkit-scrollbar {
  display: none;
}

.drum-picker-item {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: rgba(127, 145, 164, 0.3);
  transition: color 0.15s, font-weight 0.15s;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

.drum-picker-item.drum-active {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}

.drum-picker-item.drum-near {
  color: rgba(127, 145, 164, 0.4);
  font-size: 17px;
}

/* Center highlight band — always filled */
.drum-picker-highlight {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 50px;
  transform: translateY(-50%);
  background: #2C3743;
  border: none;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

/* Gradient masks for fade effect */
.drum-picker-mask-top,
.drum-picker-mask-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
  z-index: 3;
}

.drum-picker-mask-top {
  top: 0;
  background: linear-gradient(to bottom, #242F3D 0%, transparent 100%);
}

.drum-picker-mask-bottom {
  bottom: 0;
  background: linear-gradient(to top, #242F3D 0%, transparent 100%);
}

/* Spacers for scroll padding — top spacer = center offset so first items start BELOW center */
.drum-picker-spacer-top {
  height: 100px; /* wrapper=150, center=75, first item center=125 — dist=50 > threshold 35 */
  flex-shrink: 0;
}

.drum-picker-spacer-bottom {
  height: 50px;
  flex-shrink: 0;
}

/* Separator between columns */
.drum-picker-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  color: #a0b0c0;
  font-size: 20px;
  font-weight: 500;
}

/* === Filter interaction styles === */

html.dark #filter-box {
    background: #242F3D !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px 0px rgba(0,0,0,.18), 0 0px 1px rgba(0,0,0,.08);
}

.filter-cell {
    box-shadow: 0 1px 4px 0px rgba(0,0,0,.18), 0 0px 1px rgba(0,0,0,.08);
    transition: transform 0.12s cubic-bezier(.2,.6,.35,1), box-shadow 0.15s ease;
}
.filter-cell:active {
    transform: scale(0.98);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.show-btn {
    transition: transform 0.12s cubic-bezier(.2,.6,.35,1), box-shadow 0.15s ease;
    box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.12);
}
.show-btn:active {box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

#full-screen-filter button {
    transition: transform 0.12s cubic-bezier(.2,.6,.35,1);
}
#full-screen-filter button:active {
    transform: scale(0.97);
}

.filter-arrow {
    transition: transform 0.3s ease;
}
.filter-arrow.is-open {
    transform: rotate(90deg);
}

.filter-cell img:first-child {
    display: none;
}

.filter-arrow {
    filter: none !important;
}

/* --- mobile-bundle.css L2226-2403: fm- быстрый фильтр + #nested-content + mflt-color --- */

/* ============================================
   fm-  —  Quick filter box (_filter_mobile.html)
   ============================================ */

.fm-filter-wrap {
    padding: 0 !important;
}

.fm-box {
    border-radius: 8px;
    padding: 5px 10px 12px 10px;
}

.fm-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.fm-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    margin: 0;
}

.fm-params-btn {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: transparent;
    padding: 0 15px;
    height: 34px;
    border-radius: 11.25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: transform 0.12s;
    border: none;
    cursor: pointer;
}

.fm-params-icon {
    width: 16px;
    height: 16px;
}

.fm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.fm-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #283341;
    border-radius: 11.25px;
    padding: 0 12px;
    height: 45px;
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    /* 1:1 с ПК .dd-head: обводка/тень/цвет текста */
    border: 1px solid transparent;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 0 -1px;
    color: #b8c8d8;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* нажатие — как :active на ПК */
.fm-cell:active {
    scale: .98;
    border-color: transparent;
}

.fm-cell-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fm-show-btn {
    background: #fff;
    color: #000;
    font-weight: 500;
    width: 100%;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    border: none;
    cursor: pointer;
}

.fm-show-icon {
    filter: brightness(0);
}

/* Dynamic color states for filter cells */
.mflt-color-active {
    color: #fff;
}

.mflt-color-inactive {
    color: #b8c8d8;
}

/* === Nested content — grouped fs-cell style === */
#nested-content {
    padding: 0 15px 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#nested-content:has(.tw-list-wrap),
#nested-content:has(.tw-comp-list) {
    justify-content: flex-start;
}
#nested-content .tw-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
}
#nested-content .brand-item.tw-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    flex-shrink: 0;
    background: #242F3D;
    padding: 0 15px;
    border-radius: 0 !important;
    margin: 0;
    font-size: 16px;
    color: #b0bec5;
    line-height: 1.25;
}
#nested-content .brand-item.tw-list-item .brand-name-text {
    color: #bcd4f4;
    font-size: 16px;
    font-weight: 400;
}
#nested-content .brand-item.tw-list-item .dd-count-mobile {
    font-size: 14px;
    color: #bcd4f4;
    font-weight: 400;
    background: none;
    padding: 0;
    border-radius: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
#nested-content .brand-item.tw-list-item.list-active {
    background-color: #2C3743 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
}
#nested-content .brand-item.tw-list-item.list-active .brand-name-text {
    color: #ffffff !important;
}
html.dark #nested-content .brand-item.tw-list-item.list-active {
    background-color: #2C3743 !important;
    color: #ffffff !important;
}

/* --- mobile-bundle.css L2404-2781: fsm- полноэкранный фильтр + nested bottom-sheet --- */
/* ============================================
   fsm-  —  Full-screen filter modal (_filter_modal_mobile.html)
   ============================================ */

/* --- Container (full-screen overlay) --- */
.fsm-container {
    position: fixed;
    inset: 0;
    z-index: 60; /* выше sticky-хэдера (z-50): «Все параметры» перекрывает шапку */
    background: #242F3D;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: transform 0.3s;
}

/* --- Header --- */
.fsm-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #242F3D;
    padding: 16px 15px;
}

.fsm-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.fsm-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.fsm-close-icon {
    width: 20px;
    height: 20px;
    color: #fff;
}

/* --- Scrollable body --- */
.fsm-body {
    flex: 1 1 0%;
    overflow-y: auto;
    padding-bottom: 75px;
    padding-left: 15px;
    padding-right: 15px;
}

/* --- Category bar --- */
.fsm-cat-bar {
    height: 40px;
    background: #1A252F;
    border-radius: 6px;
    display: flex;
    padding: 3px;
    gap: 1px;
    margin-bottom: 15px;
}

.fsm-cat-btn {
    flex: 1 1 0%;
    height: 100%;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #b0bec5;
    transition: all 0.15s;
    background: transparent;
}

/* --- Filter sections (groups of cells) --- */
.fsm-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #283341;
    border-radius: 8px;
    overflow: hidden;
}

.fsm-section-spaced {
    margin-top: 15px;
}

/* --- Full-screen cells (shared base) --- */
.fs-cell {
    width: 100%;
    height: 50px;
    background: transparent;
    padding: 0 15px;
    display: flex;
    align-items: center;
    text-align: left;
}

.fs-cell:has(.fsm-value:not(.hidden)) {
    background: #2C3743;
}

.fs-cell-top {
    border-radius: 8px 8px 0 0;
}

.fs-cell-bottom {
    border-radius: 0 0 8px 8px;
}

.fsm-cell-mid {
    /* middle cell — no border-radius */
}

.fs-cell-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0%;
    min-width: 0;
}

/* --- Labels & values inside cells --- */
.fsm-label {
    color: #fff;
    line-height: 1.25;
    font-size: var(--fmm-label-size, 16px);
    transition: all .15s cubic-bezier(.4,0,.2,1);
}

.fsm-value {
    font-size: 16px;
    color: #fff;
    line-height: 1.25;
}

/* --- Clear icon (X) inside cells --- */
.fsm-clear {
    flex-shrink: 0;
    margin-left: 8px;
}

.fsm-clear-svg {
    width: 16px;
    height: 16px;
    color: #7F7F7F;
}

/* --- Drive type bar --- */
.fsm-drive-bar {
    height: 40px;
    background: #1A252F;
    border-radius: 6px;
    display: flex;
    padding: 3px;
    gap: 1px;
    margin-top: 15px;
}

.fsm-drive-btn {
    flex: 1 1 0%;
    height: 100%;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #b0bec5;
    transition: all 0.15s;
    background: transparent;
}

/* --- Toggle rows (unsold / util) --- */
.fsm-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 2px;
}

.fsm-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.fsm-toggle-mark {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fmm-check-bg, #a0b0c0);
    transition: all .15s cubic-bezier(.4,0,.2,1);
}

.fsm-toggle-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #B22234;
    transition: transform 0.15s;
}

.fsm-toggle-text {
    font-size: 13px;
    color: #fff;
}

/* --- Reset button --- */
.fsm-reset-btn {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #b0bec5;
    font-weight: 500;
    margin-top: 16px;
    padding: 12px 0;
    background: #1A252F;
    border-radius: 8px;
}
/* та же кнопка в футере (один блок с «Показать»): без верхнего отступа,
   видимость управляется классом hidden (только когда что-то выбрано) */
.fsm-reset-btn--footer { margin: 0 0 10px; }
.fsm-footer .fsm-reset-btn.hidden { display: none; }
/* когда кнопка сброса видна — футер выше: боди получает запас снизу,
   иначе кнопка перекрывает нижние чекбоксы (Непроданные/Льготный утиль) */
#full-screen-filter.fsm-has-reset .fsm-body { padding-bottom: 135px; }

/* --- Footer (bottom fixed panel) --- */
.fsm-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #242F3D;
    z-index: 20;
    padding: 0 15px 15px;
}

.fsm-submit-btn {
    width: 100%;
    background: #fff;
    color: #000;
    font-weight: 500;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s;
}

.fsm-submit-arrow {
    filter: brightness(0);
    width: 14px;
}

.fsm-submit-spinner {
    width: 18px;
    height: 18px;
}

/* --- Nested modal (bottom sheet) --- */
.fsm-nested-container {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: all 0.3s;
}

.fsm-nested-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    /* backdrop-filter убран: iOS размывает им и лист, нарисованный ПОВЕРХ
       (известный баг) — затемнение остаётся чистым rgba */
    cursor: pointer;
    transition: opacity 0.3s;
    z-index: 10;
}

.fsm-nested-card {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 448px;
    max-height: calc(100vh - 10px);
    max-height: calc(100dvh - 10px);
    background: #242F3D;
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    transition: transform 0.3s;
}

.fsm-nested-handle,
.fsm-nested-swipe {
    flex-shrink: 0;
    touch-action: none;
}

.fsm-nested-handle-bar {
    width: 52px;
    height: 7px;
    background: #7F7F7F;
    border-radius: 9999px;
    margin: 16px auto;
}

.fsm-nested-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 16px;
    position: relative;
}

.fsm-nested-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.fsm-nested-close {
    width: 24px;
    height: 24px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    z-index: 10;
}

.fsm-nested-close-icon {
    width: 24px;
    height: 24px;
}

.fsm-nested-search {
    flex-shrink: 0;
    padding: 0 15px 12px;
}

.fsm-nested-content {
    flex: 1 1 0%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.fsm-nested-content:has(.tw-loading) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsm-nested-footer {
    flex-shrink: 0;
}

/* --- mobile-bundle.css L2782-2994: tw- state-классы + утилиты --- */
/* ============================================
   tw-  —  Tailwind replacement classes
   ============================================ */

/* Search inputs */
.tw-search-input {
    width: 100%; height: 45px; border-radius: 8px;
    background: #283341; color: #fff; padding: 0 12px;
    font-size: 13px; outline: none;
    border: 1px solid transparent; transition: border-color .2s;
}
.tw-search-input::placeholder { color: #b0bec5; }
.tw-search-input:focus { border-color: transparent; }

/* List items (brands, models, etc.) */
.tw-list-item {
    width: 100%; display: flex; justify-content: space-between;
    align-items: center; padding: 12px 0; border-radius: 8px;
    transition: all .15s cubic-bezier(.4,0,.2,1);
}
.tw-item-text { font-size: 14px; font-weight: 500; }
.tw-model-sub { font-size: 11px; color: #556677; }

/* Section headers */
.tw-section-header {
    padding: 16px 10px 8px; font-size: 13px;
    font-weight: 700; color: #b0bec5; text-transform: uppercase;
}

/* Range inputs (year, price, etc.) */
.tw-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tw-range-input {
    width: 100%; height: 50px; border-radius: 12px;
    background: #283341; font-weight: 500; font-size: 18px;
    text-align: center; color: #fff; outline: none;
    border: 1px solid transparent; transition: border-color .2s;
}
.tw-range-input::placeholder { color: #b0bec5; }
.tw-range-input:focus { border-color: #a0b0c0; }
.ce-input { position: relative; text-align: center; line-height: 50px; }
.ce-input:focus { outline: none; border-color: transparent; box-shadow: none; }
.ce-input:empty::before,
.ce-input[data-show-ph="1"]::before {
    content: attr(data-ph);
    color: #6b7d8e;
    pointer-events: none;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
}
.ce-input[data-show-ph=""]::before { display: none; }

/* Spec items (complectation) */
.tw-spec-item {
    background: transparent; border-radius: 0; padding: 0 15px;
    border: none; transition: all .15s cubic-bezier(.4,0,.2,1);
    cursor: pointer; height: 50px; display: flex; align-items: center; flex-shrink: 0;
}
.tw-spec-item:active { transform: none; }
.tw-spec-item--selected { background: #2C3743; border: none; }
html.dark .tw-spec-item--selected { background: #2C3743; border: none; }
.tw-comp-list > .tw-spec-item:first-child { border-radius: 8px 8px 0 0; }
.tw-comp-list > .tw-spec-item:last-child { border-radius: 0 0 8px 8px; }
.tw-comp-list > .tw-spec-item:first-child:last-child { border-radius: 8px; }
.tw-spec-item--unselected { border: none; }
html.dark .tw-spec-item--unselected { border: none; }
.tw-spec-name { font-weight: 400; font-size: 16px; color: #bcd4f4; line-height: 1.25; }
html.dark .tw-spec-name { color: #bcd4f4; }
.tw-spec-count { background: transparent; color: #bcd4f4; border-radius: 0; padding: 0; font-size: 14px; font-weight: 400; }
html.dark .tw-spec-count { color: #bcd4f4; }
.tw-spec-check { display: none; }
.tw-spec-check--active { color: #eab308; }
.tw-spec-check--inactive { color: transparent; }

/* Save/submit button */
.tw-save-btn {
    width: 100%; background: #fff; color: #000; font-weight: 500;
    height: 45px; border-radius: 12px; font-size: 16px;
    display: flex; justify-content: center; align-items: center;
    text-transform: uppercase; letter-spacing: .05em;
}

/* Empty states */
.tw-empty-state { padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 200px; }
.tw-empty-icon { width: 48px; height: 48px; color: #d1d5db; margin: 0 auto 16px; }
html.dark .tw-empty-icon { color: #4b5563; }
.tw-empty-text { color: #6b7280; font-weight: 500; }
html.dark .tw-empty-text { color: #9ca3af; }

/* Loading */
.tw-loading { display: flex; justify-content: center; padding: 32px; width: 100%; }

/* Category active state */
.tw-active-cat { background-color: #242F3D !important; color: #fff !important; }

/* Disabled */
.tw-disabled .fsm-value { opacity: .4; }
.tw-disabled .fsm-icon { opacity: .4; }
.tw-disabled .fsm-label { color: #fff; }

/* Spin animation */
.tw-spin { animation: tw-spin-anim 1s linear infinite; }
@keyframes tw-spin-anim { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Toggle states */
.tw-toggle-on { transform: scale(1); }
.tw-toggle-off { transform: scale(0); }

/* Full-screen modal visibility */
.tw-fsm-hidden { transform: translateY(100%); pointer-events: none; }
.tw-nested-hidden { visibility: hidden; pointer-events: none; }
.tw-backdrop-hidden { opacity: 0; }
.tw-card-hidden { transform: translateY(100%); }

/* Cell color states */
.tw-cell-active { color: #fff; }
.tw-cell-inactive { color: #D8DEE6; }
html.dark .tw-cell-inactive-dark { color: #C0C8D6; }

/* Toggle mark states */
.tw-mark-active { background: #fff !important; }
.tw-mark-inactive { background: #a0b0c0 !important; }
.tw-fs-label-small, .tw-fs-label-active { font-size: 12px; color: #b0bec5; line-height: 1.25; transition: all .15s cubic-bezier(.4,0,.2,1); }
.tw-fs-label-big, .tw-fs-label-default { font-size: 16px; color: #b0bec5; line-height: 1.25; transition: all .15s cubic-bezier(.4,0,.2,1); }
.tw-no-pointer { pointer-events: none; }
html.dark .tw-spec-selected { border-color: #fbbf24 !important; }
html.dark .tw-spec-unselected { border-color: rgba(255,255,255,.05) !important; }
.tw-spec-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.tw-spec-name-col { flex: 1; padding-right: 16px; }
.tw-spec-meta { display: flex; align-items: center; }

/* Compare list */
.tw-comp-list { display: flex; flex-direction: column; gap: 2px; background: #283341; border-radius: 8px; padding-bottom: 96px; }
html.dark .tw-vol-default { color: #fff; }
html.dark .tw-chip-default { color: #d1d5db; }

/* Padding wrappers */
.tw-list-wrap { padding: 0 10px 16px; }
.tw-range-wrap, .tw-price-wrap { padding: 0 20px; }
.tw-footer-wrap { padding: 20px; }

/* === Basic utility classes (replacing Tailwind) === */
.hidden { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark\:text-gray-400 { color: #9ca3af; }
.dark\:text-gray-600 { color: #4b5563; }

/* --- Инлайны из _filter_modal_mobile.html, вынесенные в классы (2026-09-08).
       В проде начальное состояние задавалось инлайн-переменными:
         style="--fmm-label-size:12px|16px"  на .fsm-label
         style="--fmm-check-bg:#fff|#7F91A4" на .fsm-toggle-mark
       Классы повторяют те же значения тех же CSS-переменных (каскад не изменился:
       переменная потребляется правилами .fsm-label / .fsm-toggle-mark выше). --- */
.fsm-label--small { --fmm-label-size: 12px; }
.fsm-label--big { --fmm-label-size: 16px; }
.fsm-toggle-mark--on { --fmm-check-bg: #fff; }
.fsm-toggle-mark--off { --fmm-check-bg: #7F91A4; }

/* Затемнение страницы под модалками фильтра (z ниже .fsm-container 40 / nested 50).
   pointer-events:none - ничего не блокирует и не глотает тачи. */
#fsm-page-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    pointer-events: none;
}
#fsm-page-dim.on {
    opacity: 1;
    visibility: visible;
}

/* ═══ FILTER-MODAL v2: списки нового контроллера (fmq-) ═══
   Мультивыбор: кружок слева — пустой серый, активный жёлтый с точкой. */
#nested-content .fmq-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 44px;
    padding: 0 10px;
    margin: 3px 0; /* мягкий зазор между строками */
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e3e3e3;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    transition: background-color .15s ease;
}
#nested-content .fmq-row:active { background: rgba(255, 255, 255, 0.05); }
#nested-content .fmq-row.is-on { background: #2A3A4C; }
/* кружок выбора */
.fmq-check {
    /* 1:1 с ПК .dd-check (forms.css:36-38): 13x13, точка — radial-gradient */
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border: 2px solid #4a5568;
    border-radius: 50%;
    margin-right: 9px;
    position: relative;
    flex-shrink: 0;
    background: transparent;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease;
}
.fmq-row.is-on .fmq-check {
    border-color: #EAB308;
    background: radial-gradient(circle, #EAB308 2px, transparent 3px);
}
.fmq-row.is-on .fmq-check::after { display: none; }
.fmq-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fmq-count { color: #8B9CB0; font-size: 13px; }
/* свотч цвета */
.fmq-dot {
    flex: 0 0 auto;
    width: 18px; height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}
/* строка сброса */
.fmq-reset { color: #BBC4D1; }
.fmq-any-x {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #BBC4D1;
    font-size: 14px;
}
.fmq-sep { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 6px 0; }
/* комплектация: заголовки групп (1 столбик, группировка как на ПК) */
.fmq-year-hd {
    padding: 14px 15px 6px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}
.fmq-body-hd {
    padding: 4px 15px;
    font-size: 13px;
    font-weight: 600;
    color: #8B9CB0;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.fmq-fuel {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 15px 4px;
    font-size: 14px;
}
.fmq-fname { font-weight: 600; color: #E6EBF2; }
.fmq-common { color: #8B9CB0; font-size: 13px; }
.fmq-spec .fmq-text { white-space: normal; }
.fmq-spec-name { display: block; }
.fmq-diff { display: block; color: #8B9CB0; font-size: 12px; margin-top: 2px; }
.fmq-mismatch .fmq-count { color: #ef4444; font-size: 12px; }
/* не подходящая комплектация — вся строка выделена как неверный параметр */
#nested-content .fmq-spec.fmq-mismatch { background: rgba(229, 57, 53, 0.12); border: 1px solid rgba(229, 57, 53, 0.35); }
#nested-content .fmq-spec.fmq-mismatch .fmq-spec-name,
#nested-content .fmq-spec.fmq-mismatch .fmq-diff { color: #FF6E6E; }
#nested-content .fmq-spec.fmq-mismatch .fmq-check { border-color: #FF6E6E; }
/* поиск */
.fmq-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    background: #19212A;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
.fmq-search::placeholder { color: #8390A2; }
/* диапазоны от/до */
.fmq-range { padding: 10px 15px; display: flex; flex-direction: column; gap: 10px; }
.fmq-range-row { display: flex; align-items: center; gap: 10px; color: #BBC4D1; font-size: 14px; }
.fmq-range-row input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1C2531;
    color: #E6EBF2;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
/* кнопка в футере sheet */
.fmq-apply {
    display: block;
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.fmq-preload { display: flex; justify-content: center; padding: 40px 0; }
.dd-spinner {
    width: 22px; height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #FFB900;
    border-radius: 50%;
    animation: fmq-spin .8s linear infinite;
}
@keyframes fmq-spin { to { transform: rotate(360deg); } }
/* тост (конфликт комплектация/год) */
.fm-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(10px);
    background: #242F3D;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 100001;
    max-width: 86vw;
}
.fm-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ЕДИНЫЙ стиль кнопок во всех шторках (эталон — модалка Год):
   футер с отступами 10/15/12, кнопка полной ширины */
.fsm-nested-footer {
    padding: 10px 15px 12px;
}
.fsm-nested-card {
    display: flex;
    flex-direction: column;
}
#nested-content-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
/* Барабанные модалки (Год/Мощность/Объём): ровно по высоте без скролла,
   поля отцентрированы между заголовком и кнопкой */
.fsm-nested-card:has(.drum-picker-container) #nested-content-wrap {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Цвета: свотчи ровной вертикальной колонкой у правого края (перед счётчиком) */
#nested-content .fmq-row .fmq-dot { margin-left: auto; }
#nested-content .fmq-row .fmq-count { min-width: 52px; text-align: right; flex-shrink: 0; }

/* Комплектации: ячейка по контенту, минимум 44px (длинные имена не обрезаются) */
#nested-content .fmq-row.fmq-spec {
    height: auto;
    min-height: 44px;
    align-items: center;
}
#nested-content .fmq-spec .fmq-text { white-space: normal; }

/* Крестик сброса значения: посадочное место во всю высоту полосы ячейки —
   тап мимо крестика больше не открывает модалку */
.fs-clear-icon {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -10px 0 0;
    flex: 0 0 44px;
}
.fs-clear-icon .fsm-clear-svg { width: 18px; height: 18px; }
/* крестик ячейки виден ТОЛЬКО когда значение выбрано (hidden перебивает display:flex) */
.fs-clear-icon.hidden { display: none; }
/* Комплектации: заголовки групп без боковых отступов; топливо 120px */
#nested-content .fmq-year-hd,
#nested-content .fmq-body-hd { padding-left: 0; padding-right: 0; }
#nested-content .fmq-fuel { padding-left: 0; padding-right: 0; }
.fmq-fuel .fmq-fname { min-width: 120px; flex: 0 0 120px; }

/* Как на ПК (forms.css .cell-error): пульсирующий красный «!» справа в ячейке
   вместо стрелки — фильтр не находит совпадений, нужно изменить параметр */
.fs-cell.cell-error { position: relative; }
/* крестик остаётся в своей колонке даже при «!» — колонки не перекрываются */
.fs-cell.cell-error::after {
    content: '';
    position: absolute;
    right: 58px;      /* своя колонка ПЕРЕД колонкой крестика (44px) — строго друг под другом */
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    z-index: 2;
    background-color: #B12234;
    animation: fmExclPulseBg 1.4s ease-in-out infinite alternate;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
}
@keyframes fmExclPulseBg { from { background-color: #B12234; } to { background-color: #6E1020; } }
.fsm-submit-btn:disabled, .fm-show-btn:disabled { opacity: .45; }

/* Быстрая ячейка Цены на главной: тот же пульс-«!» при невалидной цене */
.fm-grid .fm-cell.cell-error { position: relative; }
.fm-grid .fm-cell.cell-error .filter-arrow { visibility: hidden; }
.fm-grid .fm-cell.cell-error::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background-color: #B12234;
    animation: fmExclPulseBg 1.4s ease-in-out infinite alternate;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
}

/* блокировка ячеек без ошибки при невалидном фильтре (в т.ч. быстрые ячейки) */
.fs-cell.fm-locked, .fm-cell.fm-locked { opacity: .45; pointer-events: none; }
/* комплектации: тип двигателя и характеристики — жёлтым (акцент выбора) */
.fmq-fuel .fmq-fname, .fmq-fuel .fmq-common { color: #EAB308; }
.fmq-spec .fmq-diff { color: #EAB308; }
/* строки выбора: постоянный 2px зазор у ВСЕХ строк — при выделении ничего не сдвигается */
#nested-content .fmq-row { margin-bottom: 2px; }
/* цена: поля шире + крестик очистки */
.fmq-price-row { position: relative; }
/* Цена: поля пошире; обёртка без боковых паддингов */
.fmq-price-wrap { padding: 5px 0 5px; }  /* симметрично — крестик ровно по центру поля */
.fmq-price-wrap .tw-range-grid { gap: 10px; }
/* текст/плейсхолдер — по центру зоны от начала поля до крестика, отступы по 5px */
.fmq-price-wrap .tw-range-input { flex: 1 1 50%; min-width: 0; padding-left: 5px; padding-right: 5px; text-align: center; }
/* крестики: прозрачный квадрат в высоту ячейки, зона нажатия 64px (было 38 —
   мелко для пальца), крестик 22px, текст под квадрат не заходит */
#nested-content .fmq-price-clear {
    position: absolute;
    top: 5px;      /* симметричные паддинги обёртки — квадрат ровно по высоте поля */
    bottom: 5px;
    width: 64px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #8B9CB0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
/* from-крестик — у правого края поля «от» (правая граница = середина ряда + ползазора),
   to-крестик — у правого края поля «до» */
#nested-content .fmq-price-clear--from { right: calc(50% + 10px); }
#nested-content .fmq-price-clear--to { right: 5px; }
/* крестик внутри зоны — крупнее (13 → 20px) */
#nested-content .fmq-price-clear svg { width: 22px; height: 22px; }
/* скругление полей цены — 8px как у ячеек */
.fmq-price-wrap .tw-range-input { border-radius: 8px; }
#nested-content .fmq-price-wrap { position: relative; }

/* привод: выбранный неверный (4WD у переднеприводной машины) — «!» в своей
   колонке справа от кнопки; остальные кнопки привода блокируются */
.fsm-drive-btn { position: relative; }
.fsm-drive-btn.cell-error::after {
    content: '';
    position: absolute;
    right: -4px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    background-color: #B12234;
    animation: fmExclPulseBg 1.4s ease-in-out infinite alternate;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
    -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
    mask-repeat: no-repeat; mask-size: contain;
}
.fsm-drive-btn.fm-locked { opacity: .45; pointer-events: none; }

/* 0 авто из-за связки марка+модель: тихая серая пометка у Модели (не «!») */
.fs-cell.fm-hint-model #fs-model-label::after {
    content: ' — проверьте модель';
    color: #8A97A6;
    font-size: 11px;
    font-weight: 400;
}

/* есть неподходящий фильтр («!») — «Сбросить все» жёлтая с чёрным текстом;
   всё исправлено — обычный цвет кнопки */
.fsm-reset-btn.fm-reset-warn { background: #EAB308; color: #111; border: none; font-weight: 600; }
/* подпись под неподходящей комплектацией (видно ещё до выбора) */
#nested-content .fmq-spec .fmq-spec-note {
    display: block;
    font-size: 11px;
    color: #FF6E6E;
    line-height: 1.2;
    margin-top: 1px;
}

/* «Найдено 0. Сбросить параметры?» — СЕРАЯ (владелец 2026-09-24) + «!» */
.fm-show-btn.fm-show-zero {
  background: #3A465A !important;
  color: #C7CFDC !important;
}
.fm-show-btn.fm-show-zero * { color: #C7CFDC !important; }
#fm-show-excl {
  display: none;
  width: 16px; height: 16px;
  background-color: #B12234;
  animation: fmExclPulseBg 1.4s ease-in-out infinite alternate;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
  -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
  mask-repeat: no-repeat; mask-size: contain;
  flex: 0 0 auto;
  margin-left: 8px;
}
/* привод: неверный выбранный — бордово-красная плашка (БЕЗ «!») */
.fsm-drive-btn.fm-drive-wrong {
  background: #B12234 !important;
  color: #fff !important;
  border-color: #B12234 !important;
  animation: fmExclPulseBg 1.4s ease-in-out infinite alternate;
}

/* ===== MODULE sort : modules/sort/sort.css ===== */
/* ============================================================
   SORT (mobile) — панель «Найдено N авто + Сортировка»
   (.results-header вынесен из mobile-bundle.css — правим здесь)
   ============================================================ */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

/* ===== MODULE pagination : modules/pagination/pagination.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   PAGINATION — пагинация каталога: desktop + mobile (.che168-pagination)

   Источники (живое прода, аудиты 03/04/10):
   [styles] analiz/static/css/styles.css:
     L1 @17332-20563 — базовая пагинация (wrapper, каркас, page-link,
       ellipsis; в середине региона лежали мёртвые .che168-badge--* —
       не перенесены);
     L58 @70303-71471 — переопределения `.che168-pagination .che168-page-link`
       (color #5B9BD5 с важностью, 40×40, 14px) и .che168-nav-link;
    effective-значения обоих слоёв слиты в ОДНО правило на селектор;
   [MB]     analiz/static/css/mobile-bundle.css 2995-3116 — mobile-переопределения
       (колонка, nav-ряд, 13px, ellipsis 40×37), обёрнуты в @media (max-width:768px).

   ⚠ КАНДИДАТ НА ЧИСТКУ ПОСЛЕ ВИЗУАЛЬНОЙ СВЕРКИ (пометка по плану порта):
   прод-пагинация ВСЯ на important (~60 шт., отчёт 04 §5: «тотальная война» —
   MB-строка 1 против MB 3005, styles L1 против L58). При переносе дубли слиты
   в одну копию правила, important сняты как избыточные (внутри модуля
   конкурентов нет; mobile изолирован @media). Если визуальный диф с продом
   покажет расхождение — возвращать important поштучно в указанное правило.
   Сняты также :root-дубли со значениями, идентичными светлым
   (#5B9BD5 / #fff / transparent).

   НЕ ПЕРЕНЕСЕНО (мёртвое): .che168-page-prev/.che168-page-next (классы не
   рендерятся), .che168-page-link span::after-подчёркивание (в разметке
   страниц ссылок нет <span> — правила L1 не применялись).
   Анти-утечка (гасит десктоп-значения внутри ≤768, где моб- прод их не грузил):
   .che168-nav-link{height:auto}. #}
/* ───────── DESKTOP ───────── */
/* [styles L1 @17332] */
.che168-pagination-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 32px;
  margin-bottom: 32px;
}
/* прод: padding с important без конкурента — важно снято */
.che168-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: transparent;
  border: none;
  padding: 25px 0 28px 0;
  border-radius: 0;
  font-family: var(--font-family);
  height: auto;
}
/* [styles L1 @17555 базовая + L58 @71227 переопределение — слиты] */
.che168-page-link {
  background: transparent;
  border: none;
  color: #5B9BD5;              /* победа L58 color с важностью */
  font-size: 14px;             /* L58 (вместо 15px базовой) */
  font-weight: 500;
  cursor: pointer;
  padding: 0;                  /* L58 (вместо 6px 7.5px) */
  transition: color .3s ease;
  text-transform: none;        /* L58 */
  letter-spacing: 0;           /* L58 */
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0;            /* L58 (вместо 4px) */
  text-decoration: none;
  position: relative;
}
.che168-page-link.is-active { color: #fff; font-weight: 600; }
.che168-page-link:hover:not(.is-active) { color: #fff; }
.che168-page-link.is-disabled { opacity: .45; pointer-events: none; }
/* [styles L58 @70303] навигация «предыдущая/следующая» */
.che168-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5B9BD5;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: opacity .2s ease;
  white-space: nowrap;
  line-height: 1;
  height: 40px;
}
.che168-nav-link svg {
  width: 8px;
  height: 12px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}
.che168-nav-link:hover { opacity: .7; }
.che168-nav-link.is-disabled { opacity: .3; pointer-events: none; }

/* ───────── MOBILE (≤768px) — [MB 2995-3116] ───────── */
@media (max-width: 768px) {
  .pagination-wrapper { padding: 0 20px; }

  .che168-pagination {
    background: transparent;
    border: none;
    width: 100%;
    padding: 25px 0 28px 0;
    border-radius: 0;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: auto;
  }
  .che168-pagination-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    height: auto;
  }
  .che168-page-link {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #5B9BD5;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 0;
    background: transparent;
  }
  .che168-page-link.is-active { color: #fff; font-weight: 600; }
  .che168-page-link:hover:not(.is-disabled) { color: #fff; }
  .che168-page-link.is-disabled { opacity: 0.3; pointer-events: none; }
  .che168-page-ellipsis {
    width: 40px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5B9BD5;
    font-size: 13px;
  }

  /* ряд «предыдущая / следующая» */
  .che168-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
  }
  .che168-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5B9BD5;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: opacity 0.2s ease;
    height: auto;              /* анти-утечка: гасит height:40px desktop-строки */
  }
  .che168-nav-link svg {
    width: 8px;
    height: 14px;
    flex-shrink: 0;
  }
  .che168-nav-link:hover { opacity: 0.7; }
  .che168-nav-link.is-disabled { opacity: 0.3; pointer-events: none; }

  /* прод прятал .che168-page-prev/.che168-page-next — классы не рендерятся, не перенесено */
}

/* → перенесено из header.css (консолидация модулей 2026-09-09) */
.listing-nav-link{display:flex;align-items:center;gap:8px;color:#5B9BD5;font-size:13px;font-weight:400;text-decoration:none;transition:opacity .2s ease;white-space:nowrap;line-height:1;height:40px}
.listing-nav-link svg{width:8px;height:12px;flex-shrink:0;position:relative;top:1px}
.listing-nav-link:hover{opacity:.7}
.listing-nav-link.is-disabled{opacity:.3;pointer-events:none}

/* ───────── MOBILE 1:1 с suifenheauto.ru (эталон снят 2026-09-23) ─────────
   Сверху цифры, снизу «предыдущая/следующая» (синие 13px, gap 40, центр);
   колонка gap 14, паддинг 25/0/28; ссылки-цифры 40×40 без фона. */
@media (max-width: 768px) {
  .pagination-wrapper { padding: 0 20px; }
  .listing-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 25px 0 28px 0;
  }
  .listing-pagination-numbers { justify-content: center; height: 40px; }
  .listing-pagination-nav {
    display: flex; flex-direction: row; align-items: center;
    justify-content: center; gap: 50px;
    height: auto;
  }
  .listing-pagination .listing-nav-link { color: #5B9BD5; font-size: 13px; font-weight: 400; height: auto; }
  .listing-pagination .listing-nav-link.is-disabled { opacity: .5; }
  .listing-pagination .listing-page-ellipsis { color: #5B9BD5; font-size: 13px; padding: 0 4px; }
  .listing-pagination .listing-page-link { font-size: 13px; font-weight: 600; }
}

/* ===== MODULE sidebar : modules/sidebar/sidebar.css ===== */
/* sidebar — блок «Информация» (deal-guarantees) в правой колонке. FAQ/popular-cars —
   страница главной; отзывы → modules/comments, youtube → modules/youtube-block. */
/* FAQ block — desktop */
.faq-block{max-width:1230px;margin:0 auto 30px;background:#2B3643;border-radius:8px;overflow:visible}
.faq-block-title{font-family:var(--font-family);font-size:24px;font-weight:700;margin:0;color:#fff;padding:20px;border-radius:8px 8px 0 0;line-height:1.4;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.faq-page .faq-block-title{display:none}
.faq-block-inner{padding:24px;background:#242F3D;border-radius:8px}
.faq-item{margin:0}
.faq-item+.faq-item{border-top:1px solid #2c3743;margin-top:16px;padding-top:16px}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#fff;line-height:1.5;text-align:left;gap:12px}
.faq-q::after{content:'';width:5px;height:9px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5-5 5' stroke='%237f91a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;background-size:contain;transition:transform .25s}
.faq-item.open .faq-q::after{transform:rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(0,1,0,1)}
.faq-item.open .faq-a{max-height:500px;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.faq-a p,.faq-a ul{margin:8px 0 0;font-size:14px;line-height:1.7;color:#7f91a4}
.faq-a p:last-child{margin-bottom:0}
.faq-a strong{color:#fff;font-weight:600}
.faq-a ul{margin:8px 0 0;padding-left:20px}
.faq-a li{margin-bottom:4px;font-size:14px;line-height:1.6;color:#7f91a4}
.faq-a a{color:#5B9BD5;text-decoration:none}
.faq-a a:hover{text-decoration:underline}
.popular-cars{max-width:1230px;margin:0 auto 30px;padding:0;overflow:visible}
.popular-cars-title{font-family:var(--font-family);font-size:24px;font-weight:700;color:#fff;margin:0 0 16px;padding:0;line-height:1.4;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.popular-cars-viewport{width:100%;overflow:hidden;border-radius:12px}
.popular-cars-list{display:flex;gap:12px;width:max-content}

.dg-modal-header{pointer-events:auto;background:#fff;border-radius:12px 12px 0 0;padding:16px 20px;border-bottom:1px solid #e5e7eb;color:#1a1a1a;max-width:480px;margin-left:auto;box-shadow:8px 0 32px rgba(0,0,0,0.18)}
.dg-modal-header{display:flex;justify-content:space-between;align-items:center;padding:0 32px 16px 0;margin-right:16px;border-bottom:2px solid #e2e8f0;flex-shrink:0}
.dg-modal-header h2{font-size:20px;font-weight:700;margin:0;color:#1a1a1a}

/* ===== MODULE carousel : modules/carousel/carousel.css ===== */
/* carousel — бегущая карусель «Похожие авто» / «Самые продаваемые» (одна реализация popular+similar)
   Источник: см. MODULE.md (перенос 2026-09, значения 1:1 с продом) */
/* ===== DESKTOP (>=769px) — styles.css секция .popular-*/.vp-*/.similar-* ===== */
@media (min-width:769px){
.popular-cars{max-width:1230px;margin:0 auto 30px;padding:0;overflow:visible}
.popular-cars-title{font-family:var(--font-family);font-size:24px;font-weight:700;color:#fff;margin:0 0 16px;padding:0;line-height:1.4;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.vp-wrapper{position:relative;width:100%}
.popular-cars-viewport{width:100%;overflow:hidden;border-radius:12px}
.vp-wrapper:hover .vp-arrow{opacity:1}
.vp-arrow{display:none;position:absolute;top:25%;height:50%;width:36px;z-index:5;border:none;background:#272F3C;color:#fff;cursor:pointer;opacity:0;transition:opacity .25s;align-items:center;justify-content:center;font-size:18px}
.vp-arrow:hover{opacity:1}
.vp-arrow-left{left:-40px;border-radius:8px 0 0 8px}
.vp-arrow-right{right:-40px;border-radius:0 8px 8px 0}
.vp-arrow{display:flex}
.popular-cars-list{display:flex;gap:12px;width:max-content}
.popular-car-card{flex-shrink:0;width:180px;background:#242F3D;border-radius:8px;overflow:hidden;text-decoration:none;transition:transform .15s;display:flex;flex-direction:column}
.popular-car-card:hover{transform:translateY(-2px)}
.popular-car-img{width:100%;height:120px;object-fit:cover;display:block;background:#1a2332}
.popular-car-info{padding:10px;display:flex;flex-direction:column;gap:2px;flex:1}
.popular-car-name{font-size:14px;color:#fff;font-weight:500;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.popular-car-price{font-size:13px;font-weight:600;color:#FFB900;margin-top:auto}
.similar-cars{max-width:1230px;margin:0 auto 0;padding:0}
.similar-cars-title{font-family:var(--font-family);font-size:24px;font-weight:700;color:#fff;margin:30px 0 16px;padding:0;line-height:1.4;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
}

/* ===== MOBILE (<=768px) — mobile-car.css 923-932 (дубль bundle 3887+ взят ОДИН раз) ===== */
@media (max-width:768px){
.popular-cars { margin: 0 5px 20px 5px; padding: 0; }
.popular-cars-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 12px; padding: 0 5px 0 15px; }
.similar-cars-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 12px; padding: 0 5px 0 15px; }
.popular-cars-viewport { width: 100%; overflow: hidden; }
.popular-cars-list { display: flex; gap: 10px; width: max-content; padding: 0 5px 8px; }
.popular-car-card { flex-shrink: 0; width: 150px; background: #242F3D; border-radius: 8px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.popular-car-img { width: 100%; height: 100px; object-fit: cover; display: block; background: #1a2332; }
.popular-car-info { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.popular-car-name { font-size: 13px; color: #fff; font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.popular-car-price { font-size: 12px; font-weight: 600; color: #FFB900; margin-top: auto; }
}

/* === перенесено из static/pages/car/car.css (dark слит, дубли схлопнуты) === */
.related-cars-section{margin-top:32px;padding:20px 0}
@media (max-width:900px){
.related-cars-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:500px){
.related-cars-grid{grid-template-columns:1fr}
}

/* ===== MODULE carousel : modules/carousel/other-models-cards.css ===== */
/* Карточки «Другие модели {бренда}» / «Все модели {бренда}
.om-card-badge.electric{background:rgba(16,185,129,0.85)}
.om-card-specs .dot{
  width:3px;
  height:3px;
  background:#8b949e;
  border-radius:50%;
  opacity:0.5;
}

/* === Десктоп: сетка со скруглением === */
@media (min-width:768px){
  .other-models-cards-section{
    padding:24px 28px;
    background:#272F3C;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    margin-bottom:32px;
  }
  .other-models-cards-section .brand-models-nav-title,
  .other-models-cards-section .brand-models-nav-title-mobile{
    padding-left:0;
    font-size:22px;
    margin-bottom:18px;
  }
  .other-models-cards-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    padding:0;
    overflow:visible;
    scroll-snap-type:none;
  }
  .other-models-cards-grid .om-card{
    flex:initial;
    max-width:none;
    scroll-snap-align:none;
  }
}
@media (min-width:1024px){
  .other-models-cards-grid{
    grid-template-columns:repeat(5, 1fr);
  }
}
@media (max-width:767px){
  .popular-brands-chips{padding:0 15px!important}
}
@media (min-width:768px){
  .popular-models-cards-section{
    padding:24px 28px;
    background:#272F3C;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
  }
  .popular-models-cards-section .seo-brands-nav-title{
    padding-left:0;
    font-size:22px;
    margin-bottom:18px;
  }
  .popular-models-cards-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }
}
@media (min-width:1024px){
  .popular-models-cards-grid{
    grid-template-columns:repeat(5, 1fr);
  }
}
.nav-dim-overlay.is-active{background:rgba(0,0,0,0.35)}

/* === Десктоп: популярные бренды === */
@media (min-width:768px){
  .popular-brands-chips{
    max-width:1230px;
    margin:0 auto 32px;
  }
  .popular-brands-chips .seo-brands-nav-title,
  .popular-brands-chips .seo-brands-nav-title-mobile{
    padding-left:0;
    margin-bottom:18px;
  }
}

/* ===== MODULE specs : modules/specs/specs-table.css ===== */
/* Полные характеристики модели — простой блок без details */
.specs-table-block{
  display:block !important;
  width:100% !important;
  max-width:1230px !important;
  margin:24px auto !important;
  padding:0;
  background:#272F3C !important;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  box-sizing:border-box;
  position:relative;
  
  opacity:1 !important;
}

.specs-table-header{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:18px 24px;
  background:#272F3C;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.specs-table-icon{
  font-size:22px;
  line-height:1;
}
.specs-table-title{
  font-size:18px;
  font-weight:700;
  color:#fff;
  flex:1;
  line-height:1.3;
}
.specs-table-count{
  font-size:13px;
  color:#8b949e;
  font-weight:400;
  white-space:nowrap;
}

.specs-table-content{
  display:block !important;
  padding:18px 24px 22px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:18px 28px;
  
}
@media (min-width:768px){
  .specs-table-content{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  }
}

.specs-group{
  display:block !important;
  padding:8px 0 4px;
}
.specs-group-title{
  display:block !important;
  font-size:13px;
  font-weight:700;
  color:#F5A623;
  margin:0 0 10px;
  padding:0 0 6px;
  border-bottom:1px solid rgba(245, 166, 35,0.25);
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.specs-list{
  display:block !important;
  margin:0;
  padding:0;
}
.specs-row{
  display:flex !important;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:6px 0;
  font-size:13px;
  border-bottom:1px dotted rgba(255,255,255,0.06);
}
.specs-row:last-child{border-bottom:none}
.specs-row dt{
  color:#8b949e;
  font-weight:400;
  flex-shrink:0;
}
.specs-row dd{
  color:#fff;
  font-weight:500;
  margin:0;
  text-align:right;
  flex:1;
}

.specs-row-colors dd{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.specs-color-chip{
  display:inline-block;
  padding:3px 9px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:12px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.1);
  text-decoration:none;
  transition:background .15s, border-color .15s;
}
.specs-color-chip:hover{
  background:rgba(245, 166, 35,0.15);
  border-color:rgba(245, 166, 35,0.4);
  color:#F5A623;
}
.specs-color-chip em{
  color:#8b949e;
  font-style:normal;
  font-weight:400;
  margin-left:4px;
}

.specs-row-locations dd{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.specs-location-chip{
  display:inline-block;
  padding:3px 9px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:12px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.1);
}

.specs-row-trim{
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:8px 0;
}
.specs-row-trim dt{color:#fff; font-weight:500; font-size:13px}
.specs-row-trim dd{color:#8b949e; font-size:12px; text-align:left; font-weight:400}

.specs-trim-link{
  color:#F5A623 !important;
  text-decoration:none;
  font-weight:500;
  transition:color .15s;
}
.specs-trim-link:hover{color:#fff !important; text-decoration:underline}

@media (max-width:767px){
  .specs-table-block{
    margin:20px 0 !important;
    border-radius:0;
  }
  .specs-table-header{
    padding:14px 15px;
    gap:10px;
  }
  .specs-table-title{font-size:15px}
  .specs-table-count{font-size:11px}
  .specs-table-content{
    padding:14px 15px 16px;
  }
  .specs-row{font-size:12px}
}

/* === Год-селектор === */
.specs-year-selector{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 24px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-wrap:wrap;
}
.specs-year-label{
  color:#8b949e;
  font-size:13px;
  font-weight:500;
}
.specs-year-list{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.specs-year-chip{
  display:inline-block;
  padding:5px 12px;
  background:rgba(255,255,255,0.05);
  color:#c9d1d9;
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.06);
  transition:all .15s;
}
.specs-year-chip em{
  color:#8b949e;
  font-style:normal;
  font-weight:400;
  margin-left:4px;
  font-size:11px;
}
.specs-year-chip:hover{
  background:rgba(245, 166, 35,0.12);
  border-color:rgba(245, 166, 35,0.4);
  color:#F5A623;
}
.specs-year-chip-active{
  background:#F5A623 !important;
  color:#1a2332 !important;
  border-color:#F5A623 !important;
}
.specs-year-chip-active em{color:#1a2332 !important}
.specs-trim-group{
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.specs-trim-group:last-child{border-bottom:none; margin-bottom:0}
.specs-trim-group-title{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0 0 12px;
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.specs-trim-group-meta{
  color:#8b949e;
  font-size:13px;
  font-weight:400;
}
.specs-trim-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:8px;
}
.specs-trim-name{
  color:#fff;
  font-size:13px;
  font-weight:500;
}
.specs-trim-stats{
  color:#8b949e;
  font-size:12px;
}

/* === Назад ссылка === */
.specs-back-link{
  padding:10px 24px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.specs-back-link a{
  color:#F5A623;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
}
.specs-back-link a:hover{text-decoration:underline}

/* === 2-колоночный layout для годовой страницы === */
.specs-year-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:0;
  padding:0;
}
@media (max-width:900px){
  .specs-year-layout{grid-template-columns:1fr}
}

/* Левая колонка — список комплектаций */
.specs-trim-sidebar{
  padding:16px 12px 16px 20px;
  border-right:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.1);
}
@media (max-width:900px){
  .specs-trim-sidebar{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding:14px 15px;
  }
}
.specs-trim-group-aside{margin-bottom:18px}
.specs-trim-group-title-aside{
  font-size:13px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.specs-trim-group-meta-aside{
  color:#8b949e;
  font-size:11px;
  font-weight:400;
}
.specs-trim-list-aside{
  list-style:none;
  margin:0;
  padding:0;
}
.specs-trim-link-aside{
  display:block;
  padding:8px 10px;
  margin-bottom:4px;
  background:transparent;
  color:#c9d1d9;
  text-decoration:none;
  border-radius:6px;
  border:1px solid transparent;
  transition:background .15s, border-color .15s, color .15s;
  cursor:pointer;
}
.specs-trim-link-aside:hover{
  background:rgba(255,255,255,0.04);
  color:#fff;
}
.specs-trim-link-aside-active,
.specs-trim-link-aside[data-active="1"]{
  background:rgba(245, 166, 35,0.12);
  border-color:rgba(245, 166, 35,0.35);
  color:#F5A623;
}
.specs-trim-name-aside{
  display:block;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
}
.specs-trim-stats-aside{
  display:block;
  font-size:11px;
  color:#8b949e;
  margin-top:2px;
}

/* Правая колонка — таблица */
.specs-trim-detail{
  padding:16px 20px;
  min-height:300px;
  position:relative;
}
@media (max-width:900px){
  .specs-trim-detail{padding:14px 15px}
}
.specs-trim-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-wrap:wrap;
  gap:8px;
}
.specs-trim-detail-name{
  font-size:16px;
  font-weight:700;
  color:#fff;
}
.specs-trim-detail-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:#F5A623;
  color:#1a2332;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  border-radius:8px;
  white-space:nowrap;
  transition:background .15s, transform .1s;
}
.specs-trim-detail-link:hover{background:#fff}

/* Loading state */
.specs-loading{opacity:0.5; pointer-events:none}
.specs-loading::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:24px; height:24px;
  margin:-12px 0 0 -12px;
  border:3px solid rgba(245, 166, 35,0.2);
  border-top-color:#F5A623;
  border-radius:50%;
  animation:specs-spin 0.8s linear infinite;
}
@keyframes specs-spin{to{transform:rotate(360deg)}}

/* === Пустое состояние === */
.specs-empty{
  padding:32px 24px;
  text-align:center;
  color:#8b949e;
  font-size:14px;
}

/* === перенесено из static/pages/car/car.css (dark слит, дубли схлопнуты) === */
.specs-label{color:rgba(255,255,255,0.5)}
.specs-value{color:#fff}
.spec-cell{display:flex;flex-direction:column;gap:4px}
.spec-label{font-size:13px;letter-spacing:0.05em;color:#94a3b8;font-weight:400}
.spec-value{font-size:14px;font-weight:400;color:#f1f5f9;display:block;border-bottom:none;padding-bottom:4px;line-height:1.8;border-bottom-color:rgba(255,255,255,0.1)}
.spec-value-na{color:#94a3b8}
.spec-value .spec-line-item{display:inline-flex;align-items:flex-start;gap:4px;color:#e2e8f0}
.spec-line-item .check-icon{width:24px;height:24px;min-width:24px;min-height:24px;color:#22c55e;flex-shrink:0}
/* маркеры — 1-в-1 как в сравнении (mobile-compare): 8px, колонка 16px,
   центр первой строки; тире — css-полоска 6×2.5 */
/* маркеры — 1-в-1 страница сравнения (mobile-compare): строка-блок flex,
   маркер в колонке 16px высотой строки 21px по центру первой строки,
   вторая строка текста идёт под текстом, не под маркером;
   тире — css-полоска 6×2.5 (владелец 2026-10-02) */
.spec-line-item{display:inline-flex;align-items:center;vertical-align:top}
.spec-value .spec-marker{display:inline-flex;align-items:center;justify-content:flex-start;width:26px;line-height:1;font-size:17px;vertical-align:middle;text-align:center;flex-shrink:0;box-sizing:border-box}
.spec-marker-yes{color:#4ade80}
.spec-marker-maybe{color:#fbbf24}
.spec-marker-no{color:transparent;position:relative}
.spec-marker-no::after{content:'';position:absolute;left:1px;top:50%;transform:translateY(-50%);width:6px;height:2.5px;background:#7f91a4;border-radius:1px}
.spec-marker-text{display:block;overflow:hidden;min-height:21px;line-height:21px;color:#e2e8f0}
/* строка без маркера: текст в струну с текстами маркерных строк */
.spec-line-plain{display:inline-block;padding-left:20px;min-height:21px;line-height:21px}

.spec-line-item.spec-value-na{color:#94a3b8}
.status-no{color:#64748b;opacity:0.6}
.color-swatch-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.color-swatch-item{display:flex;align-items:center;gap:6px}
.color-swatch{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,0.15);flex-shrink:0}
.color-swatch-dual{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,0.15);flex-shrink:0;position:relative;overflow:hidden}
.color-swatch-dual::before,.color-swatch-dual::after{content:'';position:absolute;top:0;width:50%;height:100%}
.color-swatch-dual::before{left:0}
.color-swatch-dual::after{right:0}
.color-swatch,.color-swatch-dual{border-color:rgba(255,255,255,0.2)}
.color-swatch-name{font-size:0.85rem;color:#e2e8f0}
@media (max-width:768px){
.specs-grid{grid-template-columns:1fr}
}
@keyframes specFlash{0%,100%{color:inherit}15%,85%{color:#FFB900}}

/* === расклад как на che168: sticky-навигация слева + разделы справа (2026-09-27) === */
.specs-two-col{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.specs-side-nav{position:sticky;top:12px;z-index:5;display:flex;flex-direction:column;gap:2px;background:#242F3D;border-radius:10px;padding:14px 10px;max-height:calc(100vh - 24px);overflow-y:auto;scrollbar-width:none}
.specs-side-nav::-webkit-scrollbar{width:0}
.specs-side-nav-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#7f91a4;padding:2px 12px 10px}
.specs-nav-link{display:flex;align-items:center;min-height:34px;padding:8px 12px;border-radius:8px;line-height:1.35;border-left:2px solid transparent;font-size:14px;color:#B8C8D8;text-decoration:none;cursor:pointer;transition:color .15s,background .15s}
.specs-nav-link:hover{color:#fff;background:rgba(255,255,255,.04)}
.specs-nav-link.active{color:#FFB900;background:rgba(255,185,0,.08);border-left-color:#FFB900}
.specs-section{margin-bottom:16px;scroll-margin-top:16px}
.specs-section.is-active .specs-section-title{background:rgba(255,185,0,.10)}
.specs-section.is-active .specs-section-title .header-title{color:#FFB900}
.specs-section-title{display:flex;align-items:center;font-size:22px;font-weight:500;padding:10px 14px;background:#2f3a4745;border-radius:12px 12px 0 0;user-select:none}
.specs-section-title .header-title{display:flex;align-items:center}
.specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;padding:14px;background:#242F3D;border-radius:0 0 12px 12px}/* последний блок справа тянутся до низа левой навигации, если она выше */
.specs-body{display:flex;flex-direction:column}
.specs-body .specs-section:last-child{flex:1;display:flex;flex-direction:column}
.specs-body .specs-section:last-child .specs-grid{flex:1}

/* заголовок над параметрами: скругление сверху, снизу нет, прижат к секциям */
.specs-main-title{background:transparent;border-radius:12px 12px 0 0;padding:14px 10px 14px 15px;font-size:22px;font-weight:700;color:#e8eef5;line-height:1.2}
.specs-body .specs-section:first-of-type{margin-top:0}
.specs-body .specs-main-title + .specs-section .specs-section-title{border-radius:0}

/* маркер без текста — по центру вертикали ячейки (владелец 2026-10-02) */
.spec-line-empty{display:flex;align-items:center;min-height:23px;margin:1px 0}
.spec-line-empty .spec-marker{align-self:stretch;height:auto;display:flex;align-items:center}

/* inline-маркер (внутри слэш-строк): обёртка высотой строки 21px,
   vertical-align:top — центр строго первой строки текста на любом шрифте */
.spec-marker-inline{display:inline-flex;align-items:center;justify-content:center;width:16px;height:21px;line-height:1;font-size:8px;vertical-align:top;box-sizing:border-box}

/* ===== MODULE price-breakdown : modules/price-breakdown/price-breakdown.css ===== */
/* Расшифровка цены — кнопка в карточке + модалка
   partial: templates/partials/_price_breakdown.html + _price_breakdown_modal.html */

/* ─── Кнопка в карточке (компактная, рядом с ценой) ─── */
/* Родитель с ценой становится inline-flex когда в нём есть кнопка */
.listing-price:has(.pb-card-btn),
.mc-price:has(.pb-card-btn),
.price-value:has(.pb-card-btn),
.mcar-price-value:has(.pb-card-btn) {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 768px) {
  .pb-rates {
    font-size: 11px;
    padding: 8px 12px;
    gap: 6px;
    margin-bottom: 12px;
  }
}

/* ─── Модалка ─── */
.pb-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pb-modal--open {
  display: flex;
}

.pb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.pb-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pb-modal-dialog {
  background: #1a2332;
  color: #f0f0f0;
}

.pb-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pb-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.pb-modal-title {
  font-size: 18px;
  font-weight: 700;
}

.pb-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.pb-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.pb-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pb-modal-body {
  /* контент из template вставляется сюда */
}

/* ─── Mobile tuning ─── */
@media (max-width: 768px) {
  .pb-card-btn {
    padding: 3px 8px;
    font-size: 10px;
    margin-left: 6px;
  }

  .pb-modal {
    padding: 0;
    align-items: flex-end;
  }

  .pb-modal-dialog {
    border-radius: 12px 12px 0 0;
    max-height: 92vh;
    padding: 18px 16px;
  }

  .pb-modal-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pb-col {
    padding: 12px 14px;
  }

  .pb-row {
    font-size: 12px;
    padding: 3px 0;
  }

  .pb-total-val {
    font-size: 16px;
  }
}

/* === перенесено из static/pages/car/car.css (dark слит, дубли схлопнуты) === */
.btn-price-calc{display:flex;align-items:center;justify-content:space-between;width:100%;height:38px;padding:0 16px;background:#27323f;color:#94a3b8;border:1px solid #cbd5e1;border-radius:8px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s ease;box-shadow:0 4px 6px rgba(0,0,0,0.2);border-color:rgba(51,65,85,0.5)}
.price-modal-overlay{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.price-modal-overlay.visible{opacity:1;pointer-events:auto}
.price-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}
.price-modal-overlay.visible .price-modal-content{transform:scale(1)}
.price-modal-header{padding:20px 24px;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;background:#1e2130;border-color:rgba(51,65,85,0.5)}
.price-modal-header h2{font-size:20px;font-weight:700;color:#ffffff;display:flex;align-items:center;gap:8px;margin:0}
.price-modal-header h2 svg{width:24px;height:24px;color:#2563eb}
.price-modal-header p{font-size:12px;color:#94a3b8;margin:4px 0 0 0}
.price-modal-close{padding:8px;background:#1e293b;border:none;border-radius:50%;color:#94a3b8;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border-color:#334155}
.price-modal-close:hover{background:#334155;color:#ffffff}
.price-modal-close svg{width:20px;height:20px}
.price-modal-body{overflow-y:auto;padding:24px;background:#1e2130}
.price-modal-body::-webkit-scrollbar{width:6px}
.price-modal-body::-webkit-scrollbar-track{background:#1e2130}
.price-modal-body::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}
.price-modal-body::-webkit-scrollbar-thumb:hover{background:#64748b}
.price-section{margin-bottom:24px}
.price-section:last-child{margin-bottom:0}
.price-section-label.china{background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.1)}
.price-section-label.russia{background:rgba(16,185,129,0.1);color:#34d399;border:1px solid rgba(16,185,129,0.1)}
.price-section-card{background:#262b3c;border-radius:12px;border:none;padding:0 8px;border-color:rgba(51,65,85,0.3)}
@media (min-width:640px){
.price-item{flex-direction:row;align-items:center}
}
@media (min-width:640px){
.price-item-left{margin-bottom:0}
}
.price-modal-footer{background:#1e2130;border-top:1px solid #e2e8f0;padding:24px;position:sticky;bottom:0;z-index:10;border-color:rgba(51,65,85,0.5)}
.price-total-row{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding-top:12px;border-top:1px solid #d1d5db;border-color:#334155}
@media (min-width:640px){
.price-total-row{flex-direction:row;align-items:center}
}
@media (min-width:640px){
.price-total-left{margin-bottom:0}
}
.price-total-label{font-size:18px;font-weight:700;color:#ffffff}
.price-total-value{font-size:24px;font-weight:700;color:#ffffff}

/* ===== MODULE compare : modules/compare/compare.css ===== */
/* ═══ Модуль «Сравнение»: стили (перенесено из core/base.css + fragment-обёртки) ═══ */
.cmp-popup--visible{opacity:1;pointer-events:auto;transition:opacity .1s ease}
.compare-toast{position:fixed;top:35px;right:16px;z-index:10000;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;color:#17212B;background:#fff;border:none;box-shadow:0 1px 4px 0px rgba(0,0,0,0.12),0 0px 1px rgba(0,0,0,0.08);transform:translateY(-12px);opacity:0;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s;pointer-events:none}
.compare-toast--show{transform:translateY(0);opacity:1}
.compare-toast--hide{transform:translateY(-12px);opacity:0}

/* ═══ Перенесено из core/misc.css и filter/filter.css (изоляция модуля) + фикс ширины колонки подписей и контраста крестика ═══ */
.cmp-popup{position:fixed;z-index:9999;width:280px;background:#fff;border-radius:12px;border:1px solid #e5e5e5;padding:0;opacity:0;pointer-events:none;font-family:var(--font-family);font-size:13px;color:#1a1a1a}
.cmp-popup-hint{padding:6px 16px 0;font-size:12px;color:#666;line-height:1.4}
.cmp-popup-range{padding:2px 16px 12px;font-size:12px;color:#666}
.cmp-popup-list{padding:6px 8px 4px}
.cmp-popup-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;transition:background .15s}
.cmp-popup-item:hover{background:#f8f8f8}
.cmp-popup-thumb{width:48px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#eee}
.cmp-popup-info{flex:1;min-width:0}
.cmp-popup-title{font-size:12px;font-weight:500;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-popup-price{font-size:11px;color:#666;margin-top:1px}
.cmp-popup-remove{width:24px;height:24px;border:none;border-radius:6px;background:transparent;color:#999;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s;line-height:1;padding:0}
.cmp-popup-remove:hover{background:#fee;color:#e55}
.cmp-popup-go{display:block;margin:4px 16px 12px;padding:8px 0;border-radius:8px;background:#FFB900;color:#1a1a1a;font-size:12px;font-weight:600;text-align:center;text-decoration:none;transition:background .15s}
.cmp-popup-go:hover{background:#e5a800}
.cmp-popup-clear-all{display:block;width:calc(100% - 16px);margin:4px 8px 8px;padding:6px 0;border:none;border-radius:6px;background:#ef4444;color:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s}
.cmp-popup-clear-all:hover{background:#dc2626}
/* === Бейдж сравнения в меню (burger.css L114) === */
    .cmp-burger-badge{
        margin-left: 10px;
        background: #eab308;
        color: #000;
        font-size: 11px;
        font-weight: 700;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
    }
/* burger.css L136 — скрытые состояния */
    #cmp-burger-badge.bm-badge-hidden{ display: none; }
.cmp-desk-btn{width:100%;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;font-family:var(--font-family);transition:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;padding:10px;background:rgba(40,51,65,.9);color:#b8c8d8;backdrop-filter:blur(4px)}
.cmp-desk-btn:hover{background:rgba(52,67,85,.9);color:#fff}
.cmp-desk-btn:active{transform:scale(.95)}
.cmp-desk-btn.compare-active{background:#FFB900!important;color:#1a1a1a!important}
.cmp-desk-btn.compare-active:hover{background:#e5a800!important}
:root .cmp-desk-btn{background:rgba(40,51,65,.9)}
.cmp-desk-btn:not(.compare-active):hover{background:#2d3a4a;color:#fff;box-shadow:0 1px 4px 0px rgba(0,0,0,.12),0 0px 1px rgba(0,0,0,.08)}
.listing-card--sold .listing-right .cmp-desk-btn{background:rgb(44,48,56)}
/* чекбокс мультивыбора в дропдаунах — кружок как sort-option-check (жёлтый #FFB900) */

/* кнопки под ячейками: «Расшифровка цены» + «Сравнить» + «Контакты» — пилюли (активный стиль ниже, строки 255+) */
.lc-badge--price,.lc-row--badges .cmp-desk-btn,.lc-badge--contacts{
  display:flex; align-items:center; justify-content:flex-start;
  border:none; border-radius:6px; padding:4px 8px; width:100%;
  font-size:13px; font-weight:400; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  background:#4b5665; color:#e3e3e3;
}
.lc-badge--price:hover,.lc-row--badges .cmp-desk-btn:hover,.lc-badge--contacts:hover{background:#5a6c80; color:#fff}
.lc-badge--price,:root .lc-row--badges .cmp-desk-btn,:root .lc-badge--contacts{background:#4b5665; color:#e3e3e3}
/* ═══════════ НЕТ анимации вдавливания: нажатие НЕ топит ячейку (scale 1) + высота всех ячеек 40px ═══════════ */
.sort-dropdown-btn:active,.lc-row--badges .cmp-desk-btn:active,.lc-badge--price:active,.lc-badge--contacts:active{scale:1 !important;transform:none !important}
/* ── Кнопки-бейджи карточки (перенесено из zz-refine) ── */
.listing-card .lc-badge--price,.listing-card .lc-row--badges .cmp-desk-btn,.listing-card .lc-badge--contacts{

  display:inline-flex !important;align-items:center;justify-content:center;

  height:26px !important;box-sizing:border-box;border-radius:6px !important;padding:0 14px !important;

  font-size:12px !important;font-weight:400;line-height:1;

  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;

  background:#2a3a4d !important;border:1px solid #3a4a5c !important;color:#b8c8d8 !important;width:auto !important;min-width:0;

}
.listing-card .lc-badge--price:hover,.listing-card .lc-row--badges .cmp-desk-btn:not(.compare-active):hover,.listing-card .lc-badge--contacts:hover{background:#34495e !important;color:#fff !important}
.lc-badge--price,.lc-row--badges .cmp-desk-btn,.lc-badge--contacts{font-size:12px;padding:0 12px;height:30px}
/* ── Бейдж «Сравнение» ──────────────────────────────────── */
.compare-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:700;background:#ef4444;color:#fff;margin-left:5px;line-height:1}

@keyframes compare-spin{to{transform:rotate(360deg)}}

/* ── Косметика шапки: цены на одной линии + контраст цены ── */

/* Сравнить активна: жёлтая заливка всегда — перекрывает пилюлю #2a3a4d!important выше
   (та идёт позже каскада с той же специфичностью) */
.cmp-desk-btn.compare-active,.lc-row--badges .cmp-desk-btn.compare-active{background:#FFB900!important;color:#1a1a1a!important;border-color:transparent!important}
.cmp-desk-btn.compare-active:hover,.lc-row--badges .cmp-desk-btn.compare-active:hover{background:#e5a800!important;color:#1a1a1a!important;border-color:transparent!important}

/* видимость попапа: усиливаем — базовое .cmp-popup{opacity:0} идёт в сборке позже
   и с той же специфичностью перебивало opacity:1 у --visible */
.cmp-popup.cmp-popup--visible{opacity:1!important;pointer-events:auto!important}

/* заголовок попапа — как на suifenheauto.ru (правило потерялось при переносе) */
.cmp-popup-header{padding:12px 16px 6px;font-size:13px;font-weight:600;color:#1a1a1a}
/* тень блока */
.cmp-popup{box-shadow:0 8px 24px rgba(0,0,0,.7)}

/* ===== MODULE seo : modules/seo/city.css ===== */
/* city.css — 9 правил */

.city-initially-hidden{display:none}

/* ===== MODULE seo : modules/seo/seo.css ===== */
/* seo.css — 53 правил */

.idx-hidden{display:none}
.seo-text-block{background:#242F3D;border:1px solid rgba(255,255,255,0.04)}
.seo-text-block p{margin:0 0 12px}
.seo-text-block p:last-child{margin-bottom:0}
.blog-breadcrumbs .bc-sep{margin:0 6px;color:#475569}
.blog-breadcrumbs .bc-current{color:#cbd5e1}

/* ===== MODULE calc : modules/calc/calc.css ===== */
/* → перенесено из header.css (консолидация модулей 2026-09-09) */
.calc-header{margin:0 0 28px;padding:0 0 20px;border-bottom:1px solid rgba(255,255,255,0.08)}

/* ===== MODULE pages : modules/pages/pages.css ===== */
/* → перенесено из header.css (консолидация модулей 2026-09-09) */
.page-header-inline{display:flex;align-items:center;gap:16px;padding:24px;background:rgba(57,61,92,0.4);border-radius:20px;border:.5px solid rgba(255,255,255,0.1);margin-bottom:18px}
.reviews-page-header{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0 16px}
.reviews-page-header{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0 16px}

/* ===== MODULE cards : modules/cards/cards-mobile.css ===== */
/* ═══ MOBILE-CARDS.CSS — модуль мобильной карточки (mc-card) ═══
   Канон: прод-мобилка suifenheauto.ru (стили живут в mobile-bundle.css).
   Здесь ТОЛЬКО снятие перекрытий desktop-модулей: .listing-card-wrap
   (cards.css) навешан на mc-card как контейнер AJAX-кроссфейда и тащит
   за собой десктопные рамки. Подключается в base/mobile.html ПОСЛЕ
   mobile-bundle.css, ДО cards.css — specificity выше за счёт .mc-list. */

/* mc-card — плоская карточка прода: без скруглений/обрезки */
.mc-list .listing-card-wrap{border-radius:0;overflow:visible}

/* фото-лента — чистая, без aspect-ratio/фона desktop-заглушек */
.mc-list .mc-photos{aspect-ratio:auto;background:transparent}

/* прод: контейнер карточек лежит ВНЕ .midx-page-wrap{padding:0 10px} и
   тянется на всю ширину экрана — компенсируем боковой паддинг обёртки */
.mc-list.filter-under-block{margin:0 -10px 16px;width:auto!important;max-width:none}

/* плашка типа двигателя — 1:1 как на ПК: вертикальная колонка на всю высоту
   фото (иконка сверху, текст вертикально), белые SVG. Живёт ВНУТРИ первого
   mc-slot: магнит к левому краю ИМЕННО фото, скругление совпадает со
   скруглением слота (overflow:hidden + radius 8px обрежет плашку по фото).
   Показ — после загрузки первого фото (.is-loaded от планировщика). */
.mc-slot:first-child{position:relative}
.mc-slot .engine-badge{position:absolute;left:0;top:0;bottom:0;right:auto;width:46px;height:auto;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:normal;
  padding:20px 4px;border-radius:8px 0 0 8px;
  opacity:0;visibility:hidden;transform:translateX(-6px);
  /* выезд на 50% медленнее ПК (0.3с -> 0.45с) — мягче после смены картинки;
     в фазе AJAX-подмены гасится мгновенно (.cards-swapping, как на ПК) */
  transition:opacity .45s ease,transform .45s ease,visibility .45s ease}
.cards-swapping .mc-slot .engine-badge{opacity:0!important;visibility:hidden!important;transition:none!important}
.mc-slot .engine-badge img{width:22px;height:22px;filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.24))}
/* текст СНИЗУ ВВЕРХ как на ПК: vertical-rl + rotate(180deg) (= matrix(-1,0,0,-1)) */
.mc-slot .engine-badge-text{color:#fff;font-size:16px;font-weight:700;letter-spacing:.08em;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg)}

/* мягкое появление фото (как на ПК, 0.2с) — класс ставит планировщик */
.mc-photo{opacity:0;transition:opacity .2s ease}
.mc-photo.is-loaded{opacity:1}
.mc-photos.is-loaded .engine-badge{opacity:1;visibility:visible;transform:none}

/* HD-подмена двумя слоями: thumb снизу, full абсолютом поверх, проявляется
   fade-in только после фактической загрузки — мерцание исключено */
.mc-slot{position:relative}
.mc-photo-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .25s ease}

/* ── нижняя строка карточки: дата слева (прижата к низу строки),
   кнопки Сравнить + Контакты справа; кнопки 30px, скругление 8px ── */
.mc-foot-line{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.mc-foot-line .mc-date{padding-bottom:0;align-self:flex-end}
.mc-actions{display:flex;gap:6px;align-items:center}
.mc-actions .cmp-desk-btn,.mc-actions .lc-badge--contacts{
  height:30px;padding:0 14px;border:1px solid #3a4a5c;border-radius:8px;
  background:rgb(42,58,77);color:#b8c8d8;font-size:12px;font-weight:400;
  font-family:Arial,sans-serif;line-height:12px;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.mc-actions .cmp-desk-btn:not(.cmp-mob-btn--active):active,
.mc-actions .lc-badge--contacts:active{background:#34495e;color:#fff}
.mc-actions .cmp-desk-btn.cmp-mob-btn--active{background:#FFB900;color:#1a1a1a}

/* активное «Сравнить» — compare-mobile.js ставит класс cmp-mob-btn--active */
.mc-actions .cmp-desk-btn.cmp-mob-btn--active{background:#FFB900;color:#1a1a1a}

/* мгновенный отклик переключения категории (Все/В наличии/Новые):
   карточки гаснут + плашка «Загрузка…» сразу по клику, до ответа AJAX */
.cards-switching { opacity: .35; pointer-events: none; position: relative; transition: opacity .15s; }
.cards-switching::after {
  content: 'Загрузка…';
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border-radius: 8px;
  background: #242F3D;
  color: #C7CFDC;
  font-size: 14px; font-weight: 600;
  z-index: 5;
  animation: fmPulse .8s ease-in-out infinite alternate;
}
@keyframes fmPulse { from { opacity: .65; } to { opacity: 1; } }

/* «Продано»: ИСХОДНЫЙ стиль плашки (красный блок #B12234, белый, uppercase)
   из .mc-sold-bar — но позиция справа от названия (в строке заголовка) */
.mc-title-row { display: flex; align-items: flex-start; gap: 8px; }
.mc-sold-badge {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; background: #B12234;
  border-radius: 8px;
  margin-top: 2px;
}

/* ===== MODULE cards : modules/cards/cards.css ===== */
/* cards.css — 181 правил */

#listing-cards-mobile{display:none}
.listing-card{display:flex;position:relative;padding:15px;border-radius:12px;background:#242F3D;border:none;box-shadow:0 1px 4px 0px rgba(0,0,0,0.12),0 0px 1px rgba(0,0,0,0.08);overflow:hidden;color:#e6e6e6}
.listing-left{display:flex;flex:1;min-width:0}
.listing-card-wrap{position:relative;display:block;text-decoration:none;color:inherit;border-radius:20px}
.admin-card-row .listing-card-wrap{min-width:0}
.listing-title-text,.listing-spec-value{height:auto;min-height:0;line-height:1;display:inline;padding:0}
.listing-pagination-wrapper{display:flex;justify-content:center;width:100%;margin-top:0;margin-bottom:0}
.listing-pagination{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;background:transparent;border:none;padding:25px 0 28px 0!important;border-radius:0;font-family:var(--font-family);height:auto}
.listing-pagination-numbers{display:inline-flex;align-items:center;gap:0;background:transparent;border-radius:0;padding:0;height:auto}
.listing-page-link{background:transparent;border:none;color:rgba(255,255,255,0.7);font-size:15px;font-weight:400;cursor:pointer;padding:6px 7.5px;transition:color .3s ease;text-transform:uppercase;letter-spacing:.5px;min-width:auto;text-align:center;border-radius:4px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;position:relative}
.listing-page-link.listing-page-prev{margin-right:23px;margin-left:10px;min-width:auto}
.listing-page-link.listing-page-next{margin-left:23px;margin-right:10px;min-width:auto}
.listing-page-link span{position:relative;display:inline-block}
.listing-page-link span::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:transparent;transition:background-color .3s ease}
.listing-page-link.listing-page-prev span::after,.listing-page-link.listing-page-next span::after{display:none}
.listing-page-link.is-active{color:#e6e6e6}
.listing-page-link.is-active span::after{background-color:#FFB900}
.listing-page-link:hover:not(.is-disabled):not(.listing-page-prev):not(.listing-page-next) span::after{background-color:#FFB900}
.listing-page-link:hover:not(.is-disabled){color:#e6e6e6}
.listing-page-link.is-disabled{opacity:.45;pointer-events:none}
.listing-page-ellipsis{color:#8b8ea3;font-size:15px;padding:0 4px;user-select:none}
.listing-thumb{width:238px;height:178px;margin-left:40px;margin-right:35px;border-radius:12px;overflow:hidden;position:relative;background:rgba(255,255,255,0.06);box-shadow:1px 2px 4px rgba(0,0,0,0.25);flex-shrink:0;font-size:0;line-height:0;user-select:none;-webkit-user-select:none}
.listing-thumb-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-secondary);z-index:1}
.listing-thumb-empty.is-hidden{display:none}
.listing-slides-wrapper{position:absolute;inset:0;width:100%;height:100%}
.listing-slide{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;overflow:hidden;z-index:1;opacity:0;pointer-events:none}
.listing-slide.is-active{z-index:2;opacity:1}
.listing-slide-img{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;display:block;opacity:0;transition:opacity .2s ease}
.listing-slide-img[data-loaded="1"]{opacity:1}
/* последний слайд галереи карточки — затемнён на 50% (владелец 2026-09-27) */
.listing-slide:last-child .listing-slide-img{filter:brightness(.5)}
.listing-hover-zones{position:absolute;inset:0;display:flex;z-index:30}
.listing-hover-zone{flex:1;cursor:pointer}
.listing-thumb:not(.is-loaded) .listing-hover-zones{display:none}
.listing-gallery-bars{position:absolute;bottom:6px;left:6px;right:6px;display:flex;gap:3px;z-index:31;pointer-events:none;opacity:0;transition:opacity 200ms}
.listing-thumb:hover .listing-gallery-bars{opacity:1}
.listing-thumb:not(.is-loaded) .listing-gallery-bars{display:none}
.listing-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,0.35);transition:background 100ms}
.listing-bar.is-active{background:#fff}
.listing-more-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,0.60);color:#fff;pointer-events:none;z-index:5}
.listing-more-overlay svg{width:30%;height:auto;flex-shrink:0;opacity:.9}
.listing-more-overlay span{font-size:14px;font-weight:600;white-space:nowrap;margin-top:12px}
.listing-thumb{background:rgba(255,255,255,0.06)}
.listing-content{flex:1;display:flex;flex-direction:column;min-width:0;padding:0;justify-content:space-between}
.listing-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.listing-title{margin-top:8px;font-size:20px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listing-trim{font-size:12px;font-weight:400;color:#b8c8d8;margin-top:0;margin-left:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listing-spec-year{cursor:help;opacity:.7}
.listing-engine-icon{width:16px;height:16px;flex:0 0 16px}
.listing-engine-icon.icon_dark{display:inline-block}
.listing-engine-icon.icon_light{display:none}
.listing-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.listing-spec-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:14px;min-width:0}
.listing-spec-value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;color:#b8c8d8}
.listing-spec{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listing-price{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1;text-align:left}
.listing-price{font-size:20px;font-weight:bold;color:var(--text-primary);align-self:flex-start;text-align:left;padding-right:0}
.listing-pagination .listing-page-link{color:#5B9BD5!important;font-size:14px;font-weight:500;width:40px;height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;text-transform:none;letter-spacing:0;border-radius:0}
.listing-pagination .listing-page-link span::after{display:none!important}
.listing-pagination .listing-page-link.is-active{color:#fff!important;font-weight:600}
.listing-pagination .listing-page-link:hover:not(.is-active){color:#fff!important}
.listing-pagination .listing-page-ellipsis{color:#5B9BD5;font-size:14px;padding:0 4px}
.calc-page-wrap{max-width:1100px;margin:0 auto;padding:24px 20px 60px;color:#cbd5e1;font-family:-apple-system,Segoe UI,Roboto,sans-serif}
.calc-h1{font-size:30px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.02em;line-height:1.2}
.calc-lead{font-size:16px;color:#94a3b8;line-height:1.65;margin:0;max-width:760px}
.calc-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;background:#242F3D;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:24px;margin:0 0 24px}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-field label{font-size:13px;font-weight:600;color:#cbd5e1}
.calc-field input,.calc-field select{background:#1a1a2e;border:1px solid rgba(255,255,255,0.1);color:#fff;padding:11px 12px;border-radius:8px;font-size:14px;font-family:inherit;transition:border-color .15s}
.calc-field input:focus,.calc-field select:focus{outline:none;border-color:#FFB900}
.calc-result{background:#242F3D;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:24px}
.calc-result-title{font-size:20px;font-weight:700;color:#fff;margin:0 0 18px}
.calc-result-rows{display:flex;flex-direction:column;gap:0}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,0.06);font-size:14px;color:#cbd5e1}
.calc-row strong{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 0;padding:16px 0 0;border-top:2px solid rgba(255,185,0,0.3)}
.calc-total span{font-size:16px;font-weight:600;color:#cbd5e1}
.calc-total strong{font-size:26px;font-weight:800;color:#FFB900;font-variant-numeric:tabular-nums}
.calc-disclaimer{font-size:12px;color:#64748b;line-height:1.6;margin:14px 0 18px}
.calc-cta-btn{display:inline-block;background:#FFB900;color:#1a1a2e;font-weight:700;font-size:15px;padding:13px 24px;border-radius:8px;text-decoration:none;transition:background .15s,transform .1s}
.calc-cta-btn:hover{background:#FFC940}
.calc-cta-btn:active{}
.calc-faq{max-width:900px;margin:40px auto 0}
.calc-faq-title{font-size:24px;font-weight:700;color:#fff;margin:0 0 18px;letter-spacing:-0.01em}
.calc-faq-item{background:#242F3D;border:1px solid rgba(255,255,255,0.06);border-radius:8px;margin:0 0 10px;overflow:hidden}
.calc-faq-item summary{padding:14px 18px;font-size:15px;font-weight:600;color:#fff;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline}
.calc-faq-item summary::-webkit-details-marker{display:none}
.calc-faq-item summary::after{content:"+";color:#FFB900;font-size:20px;font-weight:700;line-height:1}
.calc-faq-item[open] summary::after{content:"−"}
.calc-faq-item summary:hover{color:#FFB900}
.calc-faq-item p{margin:0;padding:0 18px 14px;font-size:14px;line-height:1.7;color:#cbd5e1}
.calc-seo-text{max-width:900px;margin:40px auto 0;font-size:15px;line-height:1.8;color:#cbd5e1}
.calc-seo-title{font-size:24px;font-weight:700;color:#fff;margin:0 0 16px;letter-spacing:-0.01em}
.calc-seo-p{margin:0 0 14px;color:#94a3b8}
.calc-seo-p strong{color:#cbd5e1;font-weight:600}

/* моб: цена слева, блок «Доставка» справа; ПК (media ниже) — столбик */
.lc-right{display:flex;flex-direction:column;justify-content:space-between;min-width:0}.lc-head-r{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:8px;flex:1;min-width:0}.lc-date{margin-top:auto;padding-top:4px}

/* → перенесено из header.css (консолидация модулей 2026-09-09) */
.asp-hdr-total{border-bottom:none;padding-bottom:2px}

/* → из header.css (консолидация 2026-09-09): скрытие мобильных карточек на десктопе */
@media (min-width:769px){.listing-card-header-mobile{display:none!important}}
@media (min-width:769px){#listing-cards-mobile,#listing-cards-mobile-gallery,.listing-card-mobile,.listing-card-mobile-wrap,.listing-card-header-mobile{display:none!important}}

/* ── Контейнер выдачи (перенесено из filter/core): без отступа сверху ── */
.filter-under-block{width:100%;margin-top:0;margin-bottom:16px;padding:0;background:transparent;border-radius:20px;display:flex;flex-direction:column;gap:16px}
.filter-under-block.is-ajax-loading{opacity:.45;pointer-events:none;transition:opacity .15s}

/* ── Проданные карточки (перенесено из core/base.css) ── */
.listing-card--sold .listing-badges{opacity:1!important}
.listing-card--sold .listing-card{background:#1E2832}
.listing-card--sold .listing-title,.listing-card--sold .listing-title-text{opacity:1!important}
.listing-card--sold .listing-title,:root .listing-card--sold .listing-title-text{opacity:1!important;color:#e6e6e6!important}
.listing-card--sold .listing-trim,.listing-card--sold .listing-date,.listing-card--sold .listing-bottom::after{opacity:.5!important}
.listing-card--sold .listing-badges:hover~.listing-card{opacity:1}
.listing-card--sold:has(.listing-badges:hover){opacity:1}
.listing-card--sold .listing-meta{opacity:.5}
.listing-card--sold .listing-thumb{opacity:.5;transition:opacity .2s}
.listing-card--sold .listing-thumb:hover,.listing-card--sold:hover .listing-thumb{opacity:1}

/* ── Бейджи/проданность карточек (перенесено из core/base.css) ── */
.listing-sold-badge,.listing-badge--new,.listing-badge--used,.listing-badge--sold{display:inline-flex;align-items:center;vertical-align:middle;line-height:1;font-family:var(--font-family);font-size:12px;font-weight:500;border-radius:40px;padding:0 8px;height:auto;white-space:nowrap}
.listing-card--sold .listing-meta,:root .listing-card--sold .listing-thumb{opacity:.5}
.listing-card--sold .listing-thumb:hover,:root .listing-card--sold:hover .listing-thumb{opacity:1}
.listing-card.listing-card--sold{background:rgba(49,52,62,0.5)}
.listing-sold-badge.listing-badge--new,.listing-badges>.listing-sold-badge.listing-badge--new,.listing-card .listing-sold-badge.listing-badge--new{background:#FFB900;color:#000;font-weight:400}
.listing-sold-badge.listing-badge--used,.listing-badges>.listing-sold-badge.listing-badge--used,.listing-card .listing-sold-badge.listing-badge--used{background:#000;color:#FFF;font-weight:400}
.listing-card .listing-badge--new{background:#FFB900;color:#000}
.listing-card .listing-badge--used{background:#000;color:#FFF}
.listing-card .listing-badge--sold,.listing-card .listing-sold-badge{background:#B22234;color:#FFF}

/* ═══════════ СТИЛИ КАРТОЧКИ КАТАЛОГА (перенесено целиком из zz-refine — единый источник) ═══════════ */
/* refine.css — единый источник стилей карточки каталога (десктоп).
   ПОРЯДОК: грузится ПОСЛЕ styles.css, поэтому перебивает его по каскаду БЕЗ !important
   (где у styles.css выше специфичность — добавляем тему/вложенность).
   Чисто после аудита 2026-07-25: один селектор = одно правило, дублей и мёртвых правил нет.
   ОТКАТ всего аудита: git checkout pre-css-audit-2026-07-25 -- static/css/ */

/* ───────── Каркас карточки: прозрачный 12px [плашка | тело] ───────── */
.listing-card{
  background:transparent; box-shadow:none; padding:0;
  display:flex; align-items:stretch; gap:0; border-radius:12px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/* ───────── Плашка типа двигателя — оверлей НА фото (единый блок, без деления) ───────── */
.engine-badge{
  position:absolute; left:0; top:0; bottom:0; width:46px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:20px 4px;
  border-radius:12px 0 0 12px;
}
/* заливки по типу двигателя (класс собирается в Jinja: engine-badge--{{ fuel_slug }}) */
.engine-badge--electro{background:rgba(45,101,183,.3)}
.engine-badge--hybrid{background:rgba(106,92,162,.3)}
.engine-badge--gasolin{background:rgba(46,166,65,.3)}
.engine-badge--diesel{background:rgba(84,77,76,.3)}
.engine-badge--gas{background:rgba(100,116,139,.3)}
.engine-badge img{width:22px; height:22px; filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.24))}
.engine-badge-text{
  color:#fff; font-size:16px; font-weight:700; letter-spacing:.08em;
  line-height:1; writing-mode:vertical-rl; transform:rotate(180deg);
  text-transform:uppercase;
  text-shadow:0 1px 8px rgb(0 0 0 / 24%);
}

/* ───────── Карточка = единый блок (белая заливка 12px, фото + контент) ───────── */
.listing-left{
  background:#FFFFFF; border-radius:12px; overflow:hidden; padding:0;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 0 1px rgba(0,0,0,.08);
}
.listing-left{background:#242F3D}

/* ───────── Фото (position:relative — на нём лежит плашка) ───────── */
.listing-thumb{position:relative; width:273px; height:204px; margin:0; border-radius:0; box-shadow:none}
.listing-slide{border-radius:0}
.listing-slide-img{width:100%; height:100%; object-fit:cover}

/* ───────── Контент: 2 столбца ───────── */
.listing-content{display:flex; flex-direction:row; gap:0; flex:1; min-width:0; padding:16px 21px 16px 16px}
.lc-left{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; justify-content:space-between}
.lc-right{width:180px; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; text-align:right; gap:8px}

/* шапка: название(24)/комплектация(12) слева — цена(24)/город(12) справа, на одном уровне */
.lc-head{display:flex; flex-direction:column; gap:2px}
.lc-head{align-items:flex-start;margin-left:5px}
.lc-head .listing-title-text{font-size:22px; line-height:1.2; font-weight:700}
.lc-head .listing-trim{font-size:12px; line-height:1.4; opacity:.8; margin-left:0}
.lc-price{font-size:22px; line-height:1.2; font-weight:700; letter-spacing:-.01em;color:#fff; flex-shrink:0}
/* Подпись доставки: одна строка; если не влезает — бегущая лента как тикер
   (класс .lc-city-run ставит city.js по факту переполнения) */
/* блок «Доставка / выберите город»: справа от цены, по ширине текста;
   город НЕ выбран — одна строка «Выберите город доставки» (верхняя скрыта);
   выбран (класс .has-city ставит city.js) — две строки. Ховер — жёлтым */
.lc-delivery{display:flex;flex-direction:row;align-items:flex-end;gap:1px;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lc-delivery:not(.has-city) .lc-delivery-top{display:none}
.lc-delivery.has-city{flex-direction:column;padding-bottom:2px}
.lc-delivery:hover .lc-delivery-top,
.lc-delivery:hover .lc-delivery-city,
.lc-delivery:hover .lc-delivery-price{color:#FFB900;opacity:1}
.lc-delivery-top{font-size:10px;line-height:1.3;color:#b8c8d8;font-weight:500}
/* жёлтым — только призыв «Выберите город доставки» (город ещё не выбран);
   выбранный город возвращается к серому (владелец 2026-10-01) */
.lc-delivery-city{font-size:10px;line-height:1.3;color:#b8c8d8;font-weight:500;opacity:1;white-space:nowrap}
.lc-delivery:not(.has-city) .lc-delivery-city{color:#FFB900;padding-bottom:3px}
.lc-city{font-size:10px; line-height:1.4; white-space:nowrap; overflow:hidden}

.lc-date{font-size:10px; line-height:1.4; opacity:.8;color:#b8c8d8}

/* параметры по сетке */
.lc-row--params{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; font-size:14px; line-height:1.4}
.lc-row--params .listing-spec-value{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:#17212b21; color:#e3e3e3;
  padding:6px 8px; border-radius:4px;
}
.lc-row--params .listing-spec-value:empty{background:transparent;padding:0}
/* кнопка «Выбрать» в мульти-дропдауне фильтра */
/* пробег от/до — точная копия цены от/до (тёмная ячейка #283341, hover, border, SVG-крестик) */
  display:flex;align-items:center;justify-content:flex-start;flex:1;width:auto;height:38px;
  padding:0 5px 0 16px;background:#283341;border:1px solid transparent;color:#b8c8d8;border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 1px rgba(0,0,0,.08);
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
/* фильтр по цвету — кружки как у дрома */
/* комплектации — крупная панель 500px + группировка по году, смещена влево (right:0) */
/* комплектации — стиль автохом: группа → чипы-параметры → строки с фото */
/* низ фильтра: «Сбросить все» (×+ссылка) слева, «Показать N» справа */
.filter-reset-all{display:none;align-items:center;gap:5px;font-size:14px;color:#9CA3AF;text-decoration:none;white-space:nowrap;cursor:pointer;flex-shrink:0;padding:0 0 0 2px;border:none;background:none;font-family:inherit}
.filter-reset-all:hover{color:#B32C35 !important}
.filter-reset-x{font-size:18px;line-height:1}
/* gap 10px между всеми ячейками фильтра */
/* убрать градиенты-затемнения сверху/снизу выпадающих списков */
/* стилизованный скроллбар под проект — 24px */

/* ───────── Вертикальный ритм страницы ───────── */
.content-blocks{gap:16px}

/* ───────── Мобайл (≤768px): главная адаптируется. Десктоп не трогает. ───────── */
@media (max-width:768px){
  .popular-cars{max-width:100%; width:100%; overflow:hidden; padding:0 12px}
  .popular-cars-viewport{overflow:hidden}
  .content-blocks{flex-direction:column; gap:16px}
  .content-left,.content-right{width:100%}
  .content-right{flex-shrink:1; order:99; margin-top:16px}
  img{max-width:100%; height:auto}
  
}

/* ═══════════ Типографика ячеек фильтра: 14px / #e3e3e3 (значения + плейсхолдеры) ═══════════ */
/* кнопка «Показать» — 14px */
/* опции выпадающих списков — 14px и высота 40px */

/* ═══════════ Цвет: кружки прижать вправо, «Любой цвет» — пилюля по высоте кружков (26px) ═══════════ */

/* ═══════════ Марка: 3 секции (Любая марка • топ-10 • алфавит) + каретка ═══════════ */
/* затемнение 50% марки/модели при ОТКРЫТОМ дропдауне (ghost для поиска) — и с выбранным значением, и с пустым плейсхолдером; снимается при вводе (.is-typing). Стабильно по aria-expanded — без мерцания. */
/* каретка марки: затемнения НЕТ (вызывало мерцание white↔grey) — текст всегда #e3e3e3 */
/* количество машин в выпадающих списках — 12px */
/* «Ничего не найдено» при поиске без совпадений — высота 40px, по центру */
/* высота группы чекбоксов «Непроданные/Льготный» = 40px (как все ячейки); сами чекбоксы не трогаем */
/* углы выпадающей панели не вылезают за обводку (клиппинг по border-radius) */
/* плашка «Продано» в lc-right (заливка #252A34) */
/* скругление skeleton при загрузке картинок убрано (уголки не скруглены) */
.listing-thumb-skeleton,.listing-thumb .skeleton,.listing-slide .skeleton{border-radius:0 !important}
/* «Ещё N фото» на последней картинке: без чёрной заливки (чистое фото), текст с тенью */
.listing-more-overlay{background:transparent !important}
.listing-more-overlay span,.listing-more-overlay svg{color:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.9))}
/* обводка ячеек при ховере — как у активной/открытой (bg #283341 + border) */
/* range-head (контейнер двух слотов) — всегда прозрачный: НЕ заливается блоком при ховере */
/* убрать theme-свечение (бирюзовый блок 18px) и сдвиг ячеек при ховере */
/* при выбранном значении: показываем крестик (сброс параметра), chev прячем;
   пустая ячейка — наоборот chev виден, крестик скрыт */
.notice-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* открытая ячейка: та же обводка/bg что у панели (скругления НЕ трогаем — как было) */

/* кнопки карточки (Расшифровка цены / Сравнить / Контакты) = стиль .color-any (пилюля 26px) */
.lc-row--badges{display:flex !important;gap:6px;flex-wrap:wrap;grid-template-columns:none !important;margin-left:5px}
  display:inline-flex !important;align-items:center;justify-content:center;
  height:26px !important;box-sizing:border-box;border-radius:999px !important;padding:0 14px !important;
  font-size:12px !important;font-weight:400;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  background:#2a3a4d !important;border:1px solid #3a4a5c !important;color:#b8c8d8 !important;width:auto !important;min-width:0;
}
/* опции: только фон/цвет (убираем широкое transition:all) */
/* ═══════════ Тень ячеек фильтра убрана ═══════════ */

/* ═══════════ Чипы активных фильтров — пилюля (как «Любой цвет»), фон #f3bc3e, текст чёрный, красный × слева ═══════════
/* Чипы рендерятся серверно в исходном HTML → при фильтрах контейнер сразу показан (точная высота, без прыжка) */
/* выпадающий блок опускается на 10px (не 8) */
/* активная (открытая) ячейка получает тень как у её панели */
/* активная маленькая ячейка (.slot Год/Объём): обводка как у большой dd-head — 0.04, а не ярче 0.1 */
/* Прелоадер на самом фильтр-боксе убран — остаётся только спиннер ВНУТРИ
   выпадающего блока (.dd-preloader из showPreloader) при открытии/загрузке. */
@keyframes filterSpin{to{transform:rotate(360deg)}}
/* тост: комплектация снята из-за конфликта года (фиксированный, янтарный) */
.filter-toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-12px);background:#283341;color:#fbbf24;border:1px solid rgba(255,185,0,.35);padding:10px 18px;border-radius:8px;font-size:13px;line-height:1.3;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 4px 16px rgba(0,0,0,.4);max-width:90vw;text-align:center;font-family:inherit}
.filter-toast.is-visible{opacity:1;transform:translate(-50%,0)}
/* ───────── Шапка главной: H1 НАД крошками, отступы/шрифты/цвета ───────── */
/* кнопки(шапка)→H1 = 40px, H1→крошки = 20px, крошки→фильтр = 20px */
/* ячейка сортировки: ширина по контенту, без переносов (слова «Сортировка» больше нет — текст в самой кнопке) */
.sort-dropdown{width:245px}
.sort-dropdown-btn{width:100%;box-sizing:border-box}
.sort-dropdown-btn,.sort-dropdown-text{white-space:nowrap}
/* Информ-блок между фильтром и плашками: уведомление о сброшенных параметрах / «нет авто».
   Скрывается от любого клика по странице и крестиком справа. */
/* пустой стейт: мигает сама кнопка «Сбросить все фильтры» (текущий цвет #9CA3AF → красный ховера #B32C35), плавно */
.filter-reset-all.is-pulsing{animation:filterResetPulse 1.6s ease-in-out infinite alternate}
@keyframes filterResetPulse{from{color:#9CA3AF}to{color:#B32C35}}

/* ═══════════ Блок комплектаций (новая структура): «Все комплектации» с ×, секции по фильтру,
   год → под-блоки (фото + характеристики + строки комплектаций) ═══════════ */
/* элементы trim-строки — по центру (align-items:center на .dd-sub-trim) */

/* ── Каркас карточки: переопределители (перенесено из zz-refine, позиция в каскаде сохранена) ── */
.listing-card{background:transparent; box-shadow:none; padding:0;
  display:flex; align-items:stretch; gap:0; border-radius:12px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;}
.listing-card{background:transparent}
#listing-cards{gap:16px}
.listing-card-wrap{margin:0}
.listing-card,.listing-card-wrap{max-width:100%}

/* ═══ ЕДИНАЯ карточка: мобильная компоновка (≤768px) ═══ */
@media (max-width:768px){
  .filter-under-block{gap:10px;border-radius:0}
  .listing-card-wrap{display:block}
  .listing-card{flex-direction:column;border-radius:12px;overflow:hidden;background:#1E2832}
  .listing-left{width:100%!important}
  .listing-thumb{width:100%!important;height:190px}
  .engine-badge{position:absolute;top:0;left:0;bottom:auto;right:auto;width:auto;height:auto;
    flex-direction:row;align-items:center;gap:6px;padding:5px 10px;border-radius:0 0 10px 0}
  .engine-badge-text{writing-mode:horizontal-tb;transform:none;font-size:11px;letter-spacing:.04em}
  .listing-content{padding:12px;flex-direction:column;gap:8px}
  .lc-left{gap:8px}
  .lc-head{margin-left:0;flex-direction:column;gap:2px}
  .lc-head .listing-title-text{font-size:16px}
  .lc-head .listing-trim{font-size:12px}
  .lc-price{font-size:18px}
  .lc-right{justify-content:flex-start}
  .lc-row--params{grid-template-columns:repeat(3,1fr);font-size:12px;gap:4px 8px}
  .lc-row--badges{margin-left:0;flex-wrap:wrap;gap:6px}
}

/* объём отсутствует (EV): красный перечёркнутый круг */
.listing-spec-value.spec-na{color:#B12234;font-weight:700}

/* плашка «Продано» в карточке (перенос из refine.css старого сайта) */
.listing-card--sold .lc-sold-stamp::before{content:"";-webkit-filter:blur(50px);filter:blur(50px);z-index:-1;pointer-events:none;opacity:.4;background:rgba(127,133,249,.4);border-radius:50%;width:100%;height:154px;position:absolute;bottom:-102px;left:0}
.listing-card--sold .lc-sold-stamp{position:relative;font-family:inherit;background:#B22234;color:#fff;font-size:13px;font-weight:400;padding:4px 10px;border-radius:999px;line-height:1.4;white-space:nowrap;cursor:default;align-self:flex-end;margin-top:auto}

/* единый паддинг карточки: 20px вокруг */
.listing-card .listing-content{padding:20px!important}

/* плашка типа двигателя — только ПОСЛЕ загрузки фото карточки
   (.listing-thumb.is-loaded ставит cards.js при onload первого фото) */
.listing-thumb .engine-badge{opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
.listing-thumb.is-loaded .engine-badge{opacity:1;visibility:visible;transform:none}
/* кроссфейд при пагинации: в фазе проявления новой карточки гасим её серый
   фон-скелетон — остаётся только фото поверх затухающей старой */
.pg-fade .listing-thumb{background:transparent}
.pg-fade .listing-thumb-skeleton{display:none!important}
/* фаза AJAX-подмены карточек: плашки гасятся мгновенно, без затухания */
.cards-swapping .engine-badge{opacity:0!important;visibility:hidden!important;transition:none!important}

@media (min-width:1025px){
    .lc-head-r{flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:2px}
    /* блок «Доставка +цена / в город» — две строки, стиль как .listing-trim:
       12px/1.4, #b8c8d8, weight 400, opacity .8 (владелец 2026-09-27) */
    .lc-delivery-top{font-size:12px;line-height:1.4;color:#b8c8d8;font-weight:400;opacity:.8}
    .lc-delivery-city{font-size:12px;line-height:1.4;font-weight:400;opacity:.8}
}

/* ===== MODULE filter : modules/filter/filter.css ===== */
/* filter.css — 304 правил */

.tg-line-icon{filter:brightness(0) invert(1)}
.filter_box{display:flex;flex-direction:column;gap:8px;padding:15px;background:#242F3D;border-radius:12px;border:none;box-shadow:0 1px 4px 0px rgba(0,0,0,0.12),0 0px 1px rgba(0,0,0,0.08)}
@keyframes filterOfferIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:768px){.filter-offer{flex-direction:column;align-items:stretch;text-align:center}.filter-offer-actions{justify-content:center}}
.asp-spec-id{font-weight:500;font-size:9px;color:#58a6ff;opacity:.8}
.filter_box .row{display:flex;gap:24px;align-items:center}
.filter_box .row.row-actions{justify-content:flex-end}
.filter_box .dropdown,.filter_box .range-dd{position:relative;flex:1;max-width:calc((100% - 48px) / 3);perspective:1200px;z-index:1}
.filter_box .price-range{display:flex;align-items:center;gap:8px;flex:1;max-width:calc((100% - 48px) / 3);position:relative}
.filter_box .price-range .price-input{width:100%;height:100%;text-align:left;padding:0}
.filter_box .price-range .price-input::placeholder{color:#676767;font-weight:400}
.filter_box .price-range .price-input:focus::placeholder{color:transparent}
.filter_box .price-divider{color:#bcc8d4;font-size:12px;flex-shrink:0}
.filter_box .dropdown:has(.dd-panel:not([hidden])),.filter_box .range-dd:has(.range-panel:not([hidden])){z-index:300}
.filter_box .dd-head,.filter_box .range-head,.filter_box .price-range .price-input-wrap{display:flex;align-items:center;justify-content:space-between;width:100%;height:38px;padding:0 40px 0 16px;background:#ffffff;border:1px solid transparent;border-radius:8px;color:var(--text-primary);font-family:var(--font-family);font-size:12px;cursor:pointer;position:relative;z-index:1;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;box-shadow:none;user-select:none}
.filter_box .price-range .price-input-wrap{padding:0 5px 0 16px;width:auto;justify-content:flex-start}
.filter_box .dd-head:active,.filter_box .range-head:active,.filter_box .price-range .price-input-wrap:active{scale:.98;border-color:transparent}
.filter_box .dd-head:hover,.filter_box .range-head:hover,.filter_box .price-range .price-input-wrap:hover{border-color:rgba(255,255,255,0.04);box-shadow:none}
:root .filter_box .dd-head[aria-expanded="true"]{z-index:110;background:#283341;position:relative;border-radius:8px;border-color:rgba(255,255,255,0.1);transition:none;box-shadow:0 2px 2px rgba(0,0,0,0.25)!important}
/* тень — только на открытом СЛОТЕ (слоты самостоятельные ячейки),
   обёртка range-head ячейкой не является — теней на ней быть не должно */
.filter_box .range-head[aria-expanded="true"]{z-index:110;box-shadow:none!important}
.filter_box .range-dd:has(.panel-from:not([hidden])) .slot-from,.filter_box .range-dd:has(.panel-to:not([hidden])) .slot-to{border-radius:8px;border-color:rgba(0,0,0,0.1);z-index:110;background:#ffffff}
.filter_box .slot:focus-within{border-color:rgba(255,255,255,0.04)}
.filter_box .price-range .dd-head:focus-within{border-color:rgba(255,255,255,0.04)}
.filter_box .chev{width:16px;height:16px;background:url('/static/img/arrow.svg') no-repeat center;background-size:16px 16px;transition:transform .3s ease,opacity .2s ease;flex-shrink:0;opacity:.6;filter:brightness(0) saturate(100%) invert(70%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(95%) contrast(90%)}
.filter_box .chev.chev-loading{background:none;border:2px solid rgba(148,163,184,0.3);border-top-color:#8b9cb0;border-radius:50%;width:14px;height:14px;filter:none;opacity:1;transition:none!important;animation:chevSpin .6s linear infinite;border-color:rgba(100,116,139,0.3)}
.filter_box .dd-head>.chev.chev-loading{animation:chevSpinCentered .6s linear infinite}
.filter_box .dd-head[aria-expanded="true"]>.chev.chev-loading{animation:chevSpinCentered .6s linear infinite}
.filter_box .dd-preloader{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:68px}
.filter_box .dd-spinner{width:24px;height:24px;border:2.5px solid rgba(148,163,184,0.25);border-top-color:#8b9cb0;border-radius:50%;animation:chevSpin .6s linear infinite;border-color:rgba(100,116,139,0.25)}
.filter_box .dd-head>.chev{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.filter_box .dd-head[aria-expanded="true"]>.chev{transform:translateY(-50%) rotate(180deg)}
.filter_box .dd-clear{display:none;width:16px;height:16px;font-size:0;font-style:normal;cursor:pointer;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%239CA3AF' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") no-repeat center;background-size:16px 16px;transition:opacity .2s ease}
.filter_box .dd-clear:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23EF4444' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")}
.filter_box .dropdown.has-value .chev{visibility:visible}
.filter_box .dropdown.has-value .dd-clear{display:flex;align-items:center;justify-content:center;position:absolute;right:38px;top:50%;transform:translateY(-50%)}
.filter_box .range-clear{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;font-size:0;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%239CA3AF' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") no-repeat center;background-size:16px 16px;transition:opacity .2s ease;z-index:5}
.filter_box .range-clear:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23EF4444' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")}
.filter_box .range-dd.has-value .slot .chev{visibility:hidden}
.filter_box .range-dd.has-value .range-clear{display:block}
.filter_box .price-clear{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;font-size:0;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%239CA3AF' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") no-repeat center;background-size:16px 16px;transition:opacity .2s ease;z-index:5}
.filter_box .price-clear:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23EF4444' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")}
.filter_box .price-range.has-value .price-clear{display:block}
.filter_box .dd-panel,.filter_box .range-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:100;background-color:#fff;border-radius:8px;overflow:visible;box-shadow:0 8px 20px -5px rgb(0 0 0 / .08),0 3px 8px -4px rgb(0 0 0 / .05);margin-top:0;border:1px solid rgba(0,0,0,0.06)}
.filter_box .dd-panel[hidden],.filter_box .range-panel[hidden]{overflow:hidden}
.filter_box .dd-inner{max-height:340px;overflow-y:auto;overflow-x:hidden;border-radius:3px;scrollbar-width:none;-ms-overflow-style:none;transition:transform .15s cubic-bezier(0.25,0.46,0.45,0.94);overscroll-behavior:contain;position:relative}
.filter_box .dd-inner-wrapper{position:relative;border-radius:0 0 12px 12px;overflow:hidden}
.filter_box .dd-inner-wrapper::before,.filter_box .dd-inner-wrapper::after{content:'';position:absolute;left:0;right:0;height:40px;pointer-events:none;z-index:10;opacity:0;transition:opacity .2s ease}
.filter_box .dd-inner-wrapper::before{top:0;background:linear-gradient(to bottom,#283341 0%,transparent 100%)}
.filter_box .dd-inner-wrapper::after{bottom:0;background:linear-gradient(to top,#283341 0%,transparent 100%)}
.filter_box .dd-inner-wrapper.can-scroll-up::before{opacity:1}
.filter_box .dd-inner-wrapper.can-scroll-down::after{opacity:1}
.filter_box .dd-inner::-webkit-scrollbar{display:none}
.filter_box .dd-options{list-style:none;margin:0;padding:0}
.filter_box .dd-options li:last-child{border-radius:8px}
.filter_box .dd-row{display:flex;justify-content:space-between;align-items:center;height:36px;margin:4px;padding:12px 6px 12px 12px;cursor:pointer;font-size:13px;color:#334155;font-weight:500;position:relative;border-radius:4px;border:none;background:transparent;transition:all .2s ease-out}
.filter_box .dd-row:hover{color:#ffffff;background:#242f3d;border:none}
.filter_box .dd-row.dd-active{background:#17212B;border:none;box-shadow:none;color:#ffffff}
.filter_box .dd-row-spec{flex-direction:column;align-items:stretch;height:auto;padding:12px;gap:10px}
.filter_box .dd-row-main{display:flex;justify-content:space-between;align-items:flex-start;width:100%;gap:5px}
.filter_box .dd-row-details{display:flex;gap:6px;margin-top:0;flex-wrap:wrap;padding-right:24px}
.filter_box .dd-row-detail{font-size:10px;color:rgb(148 163 184 / var(--tw-text-opacity,1));background:#f1f5f9;padding:2px 6px;border-radius:.25rem;border:none;font-family:var(--font-family);background-color:rgb(31 35 54 / .5);padding-left:.375rem;padding-right:.375rem;height:16.5px;display:inline-flex;align-items:center;justify-content:center;font-weight:400}
.filter_box .dd-row-detail:empty{display:none}
.filter_box .dd-row:hover .dd-row-detail{color:#ffffff;background-color:transparent;border:none}
.filter_box .dd-row-count{color:#bcc8d4;font-size:10px;font-weight:700;background:#ffffff;padding:2px 6px;border-radius:4px;border:1px solid #e2e8f0;font-family:var(--font-family);transition:all .2s ease;align-self:center;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;margin-right:4px;flex-shrink:0}
.filter_box .dropdown.has-carousel .dd-row-count,.filter_box .dd-row-main .dd-row-count{color:#bcc8d4;font-size:10px;font-weight:700;background:#ffffff;padding:2px 6px;border-radius:4px;border:1px solid #e2e8f0;font-family:var(--font-family);transition:all .2s ease;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;margin-right:4px;flex-shrink:0}
.filter_box .dd-row-year{color:#cbd5e1;font-size:13px;font-weight:500;margin-right:6px;flex-shrink:0}
.filter_box .dd-row-year.dd-year-loading{width:32px;height:14px;border-radius:3px;background:linear-gradient(90deg,#1f2937 25%,#283341 50%,#1f2937 75%);background-size:200% 100%;animation:shimmer-year 1.5s infinite;color:transparent;font-size:0}
.filter_box .dd-row-sep{color:#8b9cb0;margin:0 4px;flex-shrink:0;font-size:12px}
.filter_box .dropdown.has-carousel .dd-row-count,:root .filter_box .dd-row-main .dd-row-count{background-color:#242f3d;color:#b8cce0;border:none;padding-left:.375rem;padding-right:.375rem;height:20px;display:inline-flex;align-items:center;align-self:flex-start;justify-content:center;border-radius:.25rem;font-size:11px;font-weight:400}
.filter_box .dd-row:hover .dd-row-count{background:#ffffff;color:#8b9cb0}
.filter_box .dd-row.dd-active .dd-row-count{background:#ffffff;color:#b8cce0;border-color:rgb(234 179 8 / .5);background-color:#242f3d;border:none;padding-left:.375rem;padding-right:.375rem;height:20px;display:inline-flex;align-items:center;align-self:center;justify-content:center;border-radius:.25rem;font-size:11px;font-weight:400}
.filter_box .dd-checkbox{width:18px;height:18px;border:2px solid #bcc8d4;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;transition:all .15s ease;position:relative;border-color:#475569}
.filter_box .dd-checkbox::after{content:'';width:10px;height:6px;border-left:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(-45deg) translate(1px,-1px);transition:border-color .15s ease}
.filter_box .dd-checkbox.checked{background:#eab308;border-color:#eab308}
.filter_box .dd-checkbox.checked::after{border-left-color:#0f172a;border-bottom-color:#0f172a}
.filter_box .dd-row:hover .dd-checkbox{border-color:#c4d0d8}
.filter_box .dd-row.dd-selected{background:#17212B;border-color:transparent;box-shadow:none;color:#ffffff}
.filter_box .dd-row.dd-selected:hover{background:#17212B;border-color:transparent;color:#ffffff}
.filter_box .dd-row.dd-selected .dd-row-text{color:#ffffff}
.filter_box .dd-row.dd-selected .dd-row-count{background-color:#242f3d;color:#b8cce0;border:none;padding-left:.375rem;padding-right:.375rem;height:20px;display:inline-flex;align-items:center;align-self:center;justify-content:center;border-radius:.25rem;font-size:11px;font-weight:400}
.filter_box .dd-row.dd-selected .dd-row-detail{background-color:transparent}
.filter_box .spec-apply-btn{display:block;width:calc(100% - 16px);margin-left:8px;margin-right:8px;margin-top:4px;margin-bottom:8px;padding:0;border:none;border-radius:8px;background:#ffffff;color:#0f172a;font-family:var(--font-family);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;height:38px;box-sizing:border-box}
.filter_box .spec-apply-btn:hover{background:#e2e8f0}
.filter_box .dd-row.dd-reset{display:none}
.filter_box .dd-row:first-child{border-radius:12px 12px 0 0}
.filter_box .dd-row:last-child{border-radius:0 0 12px 12px}
.filter_box .col-split{display:flex;gap:8px;flex:1;max-width:calc((100% - 48px) / 3)}
.filter_box .col-split.col-split-3{max-width:calc((100% - 8px) / 2)}
.filter_box .col-split .dropdown{flex:1;max-width:none}
.filter_box .col-split .dropdown[data-filter="drive_type"] .dd-panel{width:calc(200% + 8px)}
.filter_box .col-split .dropdown[data-filter="transmission"] .dd-panel{width:calc(200% + 8px)}
.filter_box .col-split .dropdown[data-filter="engine_type"] .dd-panel{width:calc(200% + 8px);left:auto;right:0}
.filter_box .range-head{gap:8px;padding:0;background:transparent;border:none;border-radius:0;border-color:transparent}
.filter_box .range-head:hover{border-color:transparent;box-shadow:none;background:transparent}
.filter_box .slot{display:flex;align-items:center;gap:6px;flex:1 1 50%;min-width:0;height:38px;padding:0 40px 0 16px;background:#283341;border:1px solid transparent;border-radius:8px;position:relative;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;box-shadow:none;user-select:none;cursor:pointer}
.filter_box .slot:active{scale:.98;border-color:transparent}
.filter_box .slot:hover{border-color:rgba(255,255,255,0.04);box-shadow:none}
.filter_box .slot-text{color:#b8c8d8;font-weight:400;font-family:var(--font-family);font-size:13px}
.filter_box .slot-text.has-value{color:#e2e8f0;font-weight:500}
.filter_box .slot-from{justify-content:flex-start}
.filter_box .slot-from .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);transition:transform .3s ease}
.filter_box .range-dd:has(.panel-from:not([hidden])) .slot-from .chev{transform:translateY(-50%) rotate(180deg)}
.filter_box .slot-to{justify-content:flex-start}
.filter_box .slot-to .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);transition:transform .3s ease}
.filter_box .range-dd:has(.panel-to:not([hidden])) .slot-to .chev{transform:translateY(-50%) rotate(180deg)}
.filter_box .slot-to .slot-text{text-align:left}
.filter_box .divider{display:none}
.filter_box .dd-input{flex:1;border:none;background:transparent;color:#b8c8d8;font-family:var(--font-family);font-size:13px;font-weight:400;outline:none;width:100%;cursor:pointer}
.filter_box .dd-input:not([readonly]):focus{cursor:text}
.filter_box .price-range .price-input{color:var(--text-primary);font-weight:500}
.filter_box .dd-head .spec-carousel{position:absolute;left:16px;right:40px;top:0;height:38px;display:flex;align-items:flex-start;overflow:hidden}
.filter_box .dd-head .spec-slider{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(0.4,0,0.2,1);transform:translateY(0)}
.filter_box .dd-head .spec-slider.slide-up{transform:translateY(-38px)}
.filter_box .dd-head .spec-slide{height:38px;min-height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-start;font-family:var(--font-family);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter_box .dd-head .spec-slide-name{color:var(--text-primary);font-weight:500}
.filter_box .dd-head .spec-slide-details{color:#8b9cb0;font-size:11px}
.filter_box .dd-head .spec-slide-details span{margin-right:8px}
.filter_box .dd-head .spec-slide-details span:last-child{margin-right:0}
.filter_box .dropdown.has-carousel .dd-input{opacity:0;pointer-events:none}
.filter_box .dropdown.has-carousel .spec-carousel{display:flex}
.filter_box .dropdown:not(.has-carousel) .spec-carousel{display:none}
.filter_box .dropdown.has-carousel .dd-head[aria-expanded="true"] .spec-carousel{display:none}
.filter_box .dropdown.has-carousel .dd-head[aria-expanded="true"]+.dd-panel~.dd-input,.filter_box .dropdown.has-carousel .dd-head[aria-expanded="true"] .dd-input{opacity:1;pointer-events:auto}
.filter_box .dd-input::placeholder{color:#b8c8d8;font-weight:400}
.filter_box .price-range .price-input::placeholder{color:#676767;font-weight:400}
.filter_box .dropdown.has-value .dd-input{color:var(--text-primary);font-weight:500}
.filter_box .price-range .price-input.has-value{color:var(--text-primary);font-weight:500}
.filter-checkbox{display:inline-flex;align-items:center;gap:7px;padding-left:2px;cursor:pointer;user-select:none}
.filter-checkbox input{position:absolute;opacity:0;pointer-events:none}
.filter-checkbox:hover .checkbox-box::before,.filter-checkbox input:focus-visible+.checkbox-box::before{border-color:#D9D9D9}
.filter-checkbox input:checked+.checkbox-box::after{transform:scale(1)}
.checkbox-text{font-size:14px;color:#f3f3f3}
.filter-checkboxes-group{display:flex;gap:8px;flex:1;max-width:calc((100% - 48px) / 3);align-items:center;height:38px}
.filter-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;flex:1}
.filter-checkbox input[type="checkbox"]{display:none}
.filter-checkbox-mark{width:24px;height:24px;border-radius:4px;background:#b8c8d8;flex-shrink:0;position:relative;box-sizing:border-box;box-shadow:0 0 0 0px transparent,0 0 0 0px transparent;transition:box-shadow .2s ease,border-radius .2s ease}
.filter-checkbox-mark::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:3px;background:#B22234;transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(0.34,1.56,0.64,1)}
.filter-checkbox input[type="checkbox"]:checked+.filter-checkbox-mark::after{transform:translate(-50%,-50%) scale(1)}
.filter-checkbox:hover .filter-checkbox-mark{box-shadow:0 0 0 2px #242F3D,0 0 0 3px #b8c8d8}
.filter-checkbox-text{font-size:13px;font-weight:400;color:#b8c8d8;line-height:1.2}
.filter-checkbox input[type="checkbox"]:checked+.filter-checkbox-mark{background:#fff}
.filter-checkbox:hover input[type="checkbox"]:checked+.filter-checkbox-mark{box-shadow:0 0 0 2px #242F3D,0 0 0 3px #fff}
.filter_box .row .btn-show{flex:none;width:calc((100% - 50px) / 3);font-weight:500;margin-left:auto}
.filter_box .btn-show{position:relative;flex:1;max-width:none;height:38px;background:#FFFFFF;color:#1a1f2e;font-weight:600;font-size:13px;border-radius:8px;box-shadow:none;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;border:1px solid transparent;cursor:pointer}
.filter_box .btn-show:hover:not(:disabled){background:#f8fafc;box-shadow:0 0 15px rgba(255,255,255,0.15)}
.filter_box .btn-show:active:not(:disabled){scale:.98;background:#e2e8f0}
.filter_box .btn-show:disabled{opacity:.5;cursor:not-allowed}
.filter_box .btn-show.loading{pointer-events:none;opacity:.6;cursor:wait}
.filter_box .btn-show.loading .btn-show-content::after{content:'';width:12px;height:12px;border:2px solid rgba(255,255,255,0.3);border-top-color:#1a1f2e;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;border-color:rgba(26,31,46,0.3)}
.filter_box .dd-row{justify-content:space-between;color:#b8c8d8;background:transparent;border:none;border-radius:4px;margin-bottom:4px;transition:all .2s ease-out;font-size:13px}
.filter_box .dd-row-text{flex:1;font-size:14px;color:#b8cce0}
.filter_box .dd-row-count{color:#b8cce0;font-size:11px;margin-left:auto;background-color:#242f3d;border:none;padding-left:.375rem;padding-right:.375rem;height:20px;display:inline-flex;align-items:center;align-self:center;justify-content:center;border-radius:.25rem;font-weight:400}
.filter_box .dd-row:first-child .dd-row-count{color:#FFB900}
.filter_box .dd-row:hover .dd-row-count{color:#b8cce0;background-color:#242f3d;border:none;padding-left:.375rem;padding-right:.375rem;height:20px;display:inline-flex;align-items:center;align-self:center;justify-content:center;border-radius:.25rem;font-size:11px;font-weight:400}
.filter_box .dropdown.disabled{opacity:.6}
.filter_box .dropdown.disabled[data-filter="model"],.filter_box .dropdown.disabled[data-filter="spec"]{opacity:1}
.filter_box .slot-from .chev.chev-loading,.filter_box .slot-to .chev.chev-loading{animation:chevSpinCentered .6s linear infinite}
.filter_box .dropdown.disabled .dd-head{cursor:pointer;background:#F5F5F5}
.filter_box .dropdown.disabled[data-filter="model"] .dd-head,.filter_box .dropdown.disabled[data-filter="spec"] .dd-head{background:inherit}
.filter_box .dropdown.disabled .dd-input{cursor:pointer;color:#8b9cb0}
.filter_box .dropdown.disabled .dd-panel{display:none!important;pointer-events:none}
.filter_box .range-dd.disabled{opacity:.6;pointer-events:none}
.filter_box .range-dd.disabled .range-head{cursor:not-allowed;background:#F5F5F5}
.filter_box .dd-row.dd-disabled{color:#b0b8c0;cursor:not-allowed;font-style:italic}
.filter_box .dd-row.dd-disabled:hover{color:#b0b8c0;background:inherit}
.filter_box .dd-head,:root .filter_box .price-range .price-input-wrap{background:#283341;border:1px solid transparent;color:#b8c8d8;box-shadow:none}
.filter_box .dd-head:active,:root .filter_box .price-range .price-input-wrap:active{scale:.98;border-color:transparent}
.filter_box .dd-head:hover,:root .filter_box .price-range .price-input-wrap:hover{border-color:rgba(255,255,255,0.04);box-shadow:none}
.filter_box .range-dd:has(.panel-from:not([hidden])) .slot-from,:root .filter_box .range-dd:has(.panel-to:not([hidden])) .slot-to{border-radius:8px;border-color:rgba(255,255,255,0.1);background:#283341}
.filter_box .dd-panel,:root .filter_box .range-panel{background:#283341;border:1px solid rgba(255,255,255,0.06);box-shadow:0 8px 20px rgba(0,0,0,0.25)}
.filter_box .dd-row:not(.dd-row-spec){padding:12px 6px 12px 12px}
.filter_box .dd-row.dd-active:hover{background:#17212B;border:none;color:#ffffff}
.filter_box .dd-row:hover .dd-row-text{color:#ffffff}
.filter_box .dd-row.dd-active .dd-row-text{color:#ffffff}
.filter_box .dd-row-spec:hover .dd-row-count,:root .filter_box .dd-row-spec.dd-active .dd-row-count,:root .filter_box .dd-row-spec.dd-selected .dd-row-count{align-self:flex-start!important}
.filter_box .dd-row.dd-active .dd-row-detail{background-color:transparent}
.filter_box .dd-clear,:root .filter_box .range-clear,:root .filter_box .price-clear{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")}
.filter_box .dd-clear:hover,:root .filter_box .range-clear:hover,:root .filter_box .price-clear:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23EF4444' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")}
.filter_box .dropdown.disabled .dd-head,:root .filter_box .range-dd.disabled .range-head{background:transparent;border-color:transparent}
.filter_box .dropdown.disabled[data-filter="model"] .dd-head,:root .filter_box .dropdown.disabled[data-filter="spec"] .dd-head{background:#283341;box-shadow:none}
.filter_box .dropdown.disabled[data-filter="model"] .dd-input,:root .filter_box .dropdown.disabled[data-filter="spec"] .dd-input{color:#b8c8d8}
.filter_box .dropdown.hint-active .dd-input::placeholder{color:#ffffff;opacity:1}
.filter_box .spec-slide-name{color:#e2e8f0;font-size:13px;font-weight:600}
.filter_box .spec-slide-details{color:#c4d0d8}
.sort-panel{display:none;align-items:center;justify-content:space-between;margin-top:16px;margin-bottom:16px;padding:0}
@media (min-width:769px){.sort-panel{display:flex}}
.sort-panel-left{display:flex;align-items:center}
.sort-panel-count{font-size:20px;font-weight:500;color:#e6e6e6;padding-left:4px}
.sort-panel-right{display:flex;align-items:center;gap:12px}
.sort-dropdown{position:relative;z-index:100}
.sort-dropdown-btn{width:200px;height:38px;background:#283341;border:none;border-radius:8px;padding:0 47px 0 16px;display:flex;align-items:center;cursor:pointer;position:relative;font-family:var(--font-family);font-size:12px;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;box-shadow:none;user-select:none}
.sort-dropdown-btn:hover{border-color:rgba(255,255,255,0.1);box-shadow:none;background:#2d3a4a}
.sort-dropdown-btn:active{scale:.98;border-color:transparent}
.sort-dropdown-btn.is-open{border-color:rgba(255,255,255,0.1)}
.sort-dropdown-text{font-family:var(--font-family);font-size:12px;font-weight:500;color:#b8c8d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}
.sort-dropdown-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:url("/static/img/arrow.svg") no-repeat center;background-size:12px 12px;transition:transform .3s ease;flex-shrink:0;opacity:.6;filter:brightness(0) saturate(100%) invert(70%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(95%) contrast(90%)}
.sort-dropdown-btn.is-open .sort-dropdown-arrow{transform:translateY(-50%) rotate(180deg);opacity:1}
.sort-option{display:flex;align-items:center;gap:10px;height:36px;margin:2px 6px;padding:12px 12px;cursor:pointer;font-size:13px;color:#b8c8d8;font-weight:500;border-radius:6px;background:transparent;transition:all .2s ease-out}
.sort-option:hover{color:#ffffff;background:#242f3d}
.sort-option.is-selected{background:#17212B;box-shadow:none;color:#ffffff}
.sort-option.is-selected:hover{background:#17212B;color:#ffffff}
.sort-option-text{font-family:var(--font-family);font-size:13px;font-weight:500;color:inherit}
.sort-option-check{width:13px;height:13px;border-radius:50%;border:2px solid #cbd5e1;flex-shrink:0;transition:all .15s ease;box-sizing:border-box;background:transparent;border-color:#4a5568}
.sort-option.is-selected .sort-option-check{border-color:#EAB308;background:#EAB308;box-shadow:inset 0 0 0 2.5px #17212B}
.filter_box .dd-head,:root .filter_box .range-head{min-height:44px}

/* «Сбросить все фильтры» (вид с прода): невидима без фильтров,
   появляется (inline-flex из шаблона) когда есть активные фильтры */
.filter-reset-all{display:none;align-items:center;gap:5px;font-size:14px;color:#9CA3AF;background:none;border:none;padding:0;text-decoration:none;white-space:nowrap;cursor:pointer}
.filter-reset-all:hover{color:#B32C35 !important}
.filter-reset-x{font-size:18px;line-height:1}

/* единый бокс модуля фильтра: коробка filter_box + плашки активных фильтров */
.filter-wrap{width:100%}

/* ── ПК-СЕТКА ФИЛЬТРА: 3 равные колонки, gap 6px, на всю ширину родителя ──
   Линия 1: Марка | Модель | Комплектация
   Линия 2: [Привод+Тип] | Объём | [КПП+Топливо]
   Линия 3: Год | Цена | чекбоксы (третье место)
   Линия 4: Пробег (1/3) | Цвета (2/3)
   Ряды .row «расплющиваем» (display:contents) — ячейки ложатся в одну сетку,
   порядок задаём order-ом. Селекторы через .row — чтобы перебивать forms.css. */
/* комплектации: панель на всю ширину фильтра (от 1-й ячейки до последней) */
@media (min-width:769px){
    .filter_box .dropdown[data-filter="spec"] .dd-panel{width:calc(300% + 12px);left:calc(-200% - 12px);right:auto}
}

@media (min-width:769px){
    .filter_box.filter_box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
    .filter_box .row{display:contents}

    /* каждая ячейка — ровно в свою колонку, без собственных ширин */
    .filter_box .row > .dropdown,
    .filter_box .row > .range-dd,
    .filter_box .row > .price-range,
    .filter_box .row > .mileage-range,
    .filter_box .row > .col-split,
    .filter_box .filter-checkboxes-group{max-width:none;width:100%;flex:none;min-width:0}

    /* спаренный блок: два поля делят ячейку сетки, между ними 6px */
    .filter_box .row > .col-split{display:flex;gap:6px}
    .filter_box .row > .col-split > .dropdown{min-width:0;max-width:none;flex:1 1 0}
    /* внутри сдвоенных полей (Год/Объём/Цена/Пробег) — те же 6px между слотами */
    .filter_box .row > .range-dd .range-head{gap:6px}
    .filter_box .row > .price-range{gap:6px}
    .filter_box .row > .mileage-range{gap:6px}

    /* порядок ячеек в сетке */
    .filter_box .dropdown[data-filter="brand"]{order:1}
    .filter_box .dropdown[data-filter="model"]{order:2}
    .filter_box .dropdown[data-filter="spec"]{order:3}
    .filter_box .col-split:has([data-filter="drive_type"]){order:4}
    .filter_box .range-dd[data-filter="volume"]{order:5}
    .filter_box .col-split:has([data-filter="transmission"]){order:6}
    .filter_box .range-dd[data-filter="year"]{order:7}
    .filter_box .price-range[data-filter="price"]{order:8}
    .filter_box .filter-checkboxes-group{order:9}
    .filter_box .mileage-range{order:10}
    .filter_box .dropdown[data-filter="color"]{order:11;min-width:0}
    /* 5-я строка: сброс слева (колонка 1), «Показать» справа (колонки 2-3) */
    .filter_box .filter-reset-all{order:12;grid-column:1;justify-self:start;align-self:center;margin-left:2px}
    .filter_box .filter-actions .btn-show{order:13;grid-column:2 / -1;justify-self:end;align-self:center}

    /* год/цена/пробег — как все ячейки, без старых растяжек из forms.css */
    .filter_box .row > .range-dd[data-filter="year"],
    .filter_box .row > .price-range[data-filter="price"],
    .filter_box .row > .mileage-range{flex:none}
}

/* ── Мобильная раскладка (≤768px): каждая ячейка на всю ширину, без выдавливания соседей ── */
@media (max-width:768px){
    .filter_box .row{display:flex;flex-direction:column;gap:6px}
    .filter_box .row > .dropdown,
    .filter_box .row > .range-dd,
    .filter_box .row > .price-range,
    .filter_box .row > .mileage-range,
    .filter_box .row > .col-split{width:100%;max-width:100%;min-width:0;flex:none}
    .filter_box .row > .col-split{display:flex;gap:6px}
    .filter_box .row > .col-split > .dropdown{flex:1 1 0;min-width:0;max-width:none}
    .filter_box .filter-checkboxes-group{width:100%;max-width:100%;min-width:0}
}

/* ── Затемнение при открытом дропдауне: сам фильтр и его ячейки притушены,
     кроме активной ячейки и открытой панели. Страница НЕ затемняется. ── */
.filter_box .row > *{transition:opacity .06s ease}
.filter_box:has(.dd-head[aria-expanded="true"],.range-head[aria-expanded="true"]){background:#1c2531;transition:background .06s ease}
.filter_box:has(.dd-head[aria-expanded="true"],.range-head[aria-expanded="true"]) .row > *:not(:has(.dd-head[aria-expanded="true"])):not(:has(.range-head[aria-expanded="true"])):not(.btn-show):not(.filter-reset-all){opacity:.35}
.filter_box .dd-panel,.filter_box .range-panel{box-shadow:0 0px 5px rgba(0,0,0,0.3)!important}

/* ===== MODULE filter : modules/filter/forms.css ===== */
/* forms.css — 112 правил */

.theme-btn:hover{transform:scale(1.1)}
.theme-switch input:checked+.track .thumb{transform:translate(17px,-50%)}
.theme-switch input:checked+.track .thumb .icon-sun{opacity:0;transform:scale(.7)}
.theme-switch input:checked+.track .thumb .icon-moon{opacity:1;transform:scale(1)}
.admin-hide-btn{position:absolute;right:6px;top:6px;width:16px;height:16px;border:none;border-radius:4px;background:#B22234;color:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease;z-index:10}
.admin-hide-btn:hover{opacity:1;transform:scale(1.15);box-shadow:0 1px 4px rgba(178,34,52,0.4)}
.admin-hide-btn:active{}
.admin-hide-btn.loading{opacity:.5;pointer-events:none}
.ct-btn{display:flex;align-items:center;padding:12px 14px;border-radius:12px;text-decoration:none;color:#fff;background:#283341;box-shadow:0 1px 4px 0 rgba(0,0,0,0.12),0 0 1px rgba(0,0,0,0.08);transition:background .2s,transform .15s}
.ct-btn:active{}
.ct-btn svg{flex-shrink:0;margin-right:14px}
.video_play_btn.hovered:not(.show-stop) .play_vid_white{opacity:0}
.video_play_btn.hovered:not(.show-stop) .play_vid_hover{opacity:1;display:block!important}
.toggle-btn.active{background:#ffb900;border-color:#ffb900;color:#1a1f2e;box-shadow:0 0 20px rgba(255,185,0,0.4)}
.toggle-btn.active:hover{background:#ffb900;border-color:#ffb900;color:#172554}
.toggle-btn.active .toggle-btn-glow{display:none}
.btn-show-content{display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s ease}
.placeholder-icon{color:#8b9cb0;margin-bottom:16px}
.placeholder-link:hover{background:#1E2430}
.page-placeholder-box .placeholder-hint{color:#c4d0d8}
.dg-page-btn:hover{background:#f0f0f0;border-color:#999}
.dg-page-btn.active{background:#B22234;color:#fff;border-color:#B22234}
.dg-page-btn:disabled{opacity:.35;cursor:default;pointer-events:none}

/* → перенесено из header.css (консолидация модулей 2026-09-09) */
.filter_box .dd-header{display:none}
.filter_box .dd-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#FBBF24,transparent)}
.filter_box .dd-header svg{color:#FBBF24;stroke:#FBBF24}
.filter_box .dd-header:hover{background-color:#4a2d48}

/* → КОНСОЛИДАЦИЯ ФИЛЬТРА 2026-09-10: перенесено из core/zz-refine (патч-слой) */
.filter_box .col-split .dropdown[data-filter="body_type"] .dd-panel{width:calc(200% + 8px);left:auto;right:0}
.filter_box .dd-panel,:root .filter_box .range-panel{background:#283341;box-shadow:0 2px 2px rgba(0,0,0,0.25) !important}
.filter_box .dd-row .dd-check{display:inline-block;width:13px;height:13px;border:2px solid #4a5568;border-radius:50%;margin-right:9px;vertical-align:middle;position:relative;flex-shrink:0;background:transparent;box-sizing:border-box;transition:border-color .15s ease,background .15s ease}
.filter_box .dd-row.dd-selected .dd-check{border-color:#EAB308;background:radial-gradient(circle,#EAB308 2px,transparent 3px)}
.filter_box .dd-row.dd-selected .dd-check::after{display:none}
.filter_box .spec-apply-btn{background:#4b5665; color:#e3e3e3; border:none; border-radius:4px; padding:8px; width:calc(100% - 16px); margin:6px 8px; cursor:pointer; font-size:14px}
.filter_box .spec-apply-btn:hover{background:#5a6c80}
.filter_box .mileage-range{display:flex;align-items:center;gap:8px;flex:1;position:relative}
.filter_box .mileage-range .price-input-wrap{display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;height:40px;min-height:40px;background:#283341;padding:0 5px 0 16px;width:auto;flex:1;position:relative}
.filter_box .mileage-range .price-input-wrap:hover{border-color:rgba(255,255,255,0.04);box-shadow:none}
.filter_box .mileage-range .price-input-wrap:focus-within{border-color:rgba(255,255,255,0.04);background:#283341}
.filter_box .mileage-range .mileage-input{width:100%;height:100%;text-align:left;padding:0;background:transparent;border:none;color:#b8c8d8;font-weight:500;font-size:13px}
.filter_box .mileage-range .mileage-input::placeholder{color:#676767;font-weight:400}
.filter_box .mileage-clear{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;font-size:0;cursor:pointer;z-index:5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") no-repeat center;background-size:16px 16px}
.filter_box .mileage-range.has-value .mileage-clear{display:block}
.filter_box .color-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;flex:1}
.filter_box .color-any{background:#2a3a4d;border:1px solid #3a4a5c;color:#b8c8d8;font-size:12px;padding:4px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.filter_box .color-any:hover{background:#34495e;color:#fff}
.filter_box .color-circles{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter_box .color-circle{width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,.15);cursor:pointer;padding:0;box-sizing:border-box;transition:transform .12s,box-shadow .12s}
.filter_box .color-circle:hover{transform:scale(1.05)}
/* выбранный цвет: кольцо плавно меняет цвет тёмный↔светлый, без пульсации */
.filter_box .color-circle.is-selected{position:relative;animation:colorShift 1.6s ease-in-out infinite alternate}
.color-circle.is-auto-hint{position:relative;animation:colorShift 1.6s ease-in-out infinite alternate}
@keyframes colorShift{from{box-shadow:0 0 0 3px #3d4652}to{box-shadow:0 0 0 3px #6FA97C}}
.filter_box .color-circle[data-color="white"]{border-color:#ccc}
.filter_box .dropdown[data-filter="spec"] .dd-panel{width:calc(300% + 12px);max-width:none;left:auto;right:0}
.filter_box .dropdown[data-filter="spec"] .dd-inner{max-height:500px}
.filter_box .dd-group-head{display:flex;align-items:center;justify-content:space-between;background:#19212a;border-radius:4px;color:#c8d8e8;font-size:14px;font-weight:400;height:40px;padding:0 12px;box-sizing:border-box;text-transform:none;letter-spacing:0;cursor:default}
.filter_box .dd-group-head.dd-collapsed .dd-group-selectall{display:none}
.filter_box .dd-group-selectall{background:rgba(255,255,255,.08);border:none;color:#c8d8e8;font-size:10px;font-weight:600;padding:3px 10px;border-radius:999px;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0}
.filter_box .dd-group-selectall:hover{background:rgba(255,255,255,.18)}
.filter_box .dd-group-head{cursor:pointer}
.filter_box .dd-group-tools{display:flex;align-items:center;gap:8px}
.filter_box .dd-group-head .chev{position:static;display:inline-block;width:14px;height:14px;background-size:14px 14px;transform:none;opacity:.7;transition:transform .2s ease}
.filter_box .dd-group-head.dd-collapsed .chev{transform:rotate(-90deg)}
.filter_box .dd-group-head .dd-group-year{font-size:14px;font-weight:400;color:#c8d8e8}
.filter_box .dd-group-head .dd-group-count{font-size:11px;color:#7a8fa8}
.filter_box .dd-spec-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:400;line-height:1.2;white-space:nowrap;color:#b8c8d8;background:none;border:none;padding:0}
.filter_box .dropdown[data-filter="spec"] .dd-inner{overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#3a4453 transparent}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar{width:8px}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar-track{background:transparent}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar-thumb{background:#3a4453;border-radius:4px}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar-thumb:hover{background:#4d5a6e}
.filter-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.filter-actions .btn-show{flex:1}
.filter_box{gap:5px}
.filter_box .row{gap:5px}
.filter_box .dropdown,.filter_box .range-dd,.filter_box .price-range,.filter_box .mileage-range,.filter_box .col-split,.filter_box .filter-checkboxes-group{max-width:calc((100% - 20px) / 3)}
.dd-inner-wrapper::before,.dd-inner-wrapper::after{display:none}
.filter_box .dd-inner{scrollbar-width:auto;scrollbar-color:#3a4a5c rgba(255,255,255,.03)}
.filter_box .dd-inner::-webkit-scrollbar{width:24px;display:block}
.filter_box .dd-inner::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.filter_box .dd-inner::-webkit-scrollbar-thumb{background:#3a4a5c;border-radius:8px}
.filter_box .dd-inner::-webkit-scrollbar-thumb:hover{background:#5a6c80}
:root .filter_box .dd-head:active,:root .filter_box .range-head:active,
:root .filter_box .price-range .price-input-wrap:active,:root .filter_box .mileage-range .price-input-wrap:active,
/* высота 40px — только полям и кнопке; цветовым кругам нельзя (26px круг → «яйцо») */
:root .filter_box .dd-head,:root .filter_box .range-head,
:root .filter_box .price-range .price-input-wrap,:root .filter_box .mileage-range .price-input-wrap,
.filter_box .slot,:root .filter_box .btn-show{height:40px !important;min-height:40px !important}
:root .filter_box .dd-input,
:root .filter_box .slot-text,
:root .filter_box .price-input,
.filter_box .mileage-input{font-size:14px;color:#e3e3e3}
:root .filter_box .dd-input::placeholder,
:root .filter_box .price-input::placeholder,
.filter_box .mileage-input::placeholder{color:#e3e3e3}
.filter_box .btn-show{font-size:14px}
.filter_box .row .btn-show{font-weight:600}
.filter_box .dd-row{font-size:14px;height:40px !important;transition:background-color .15s ease,color .15s ease}
.filter_box .color-circles{margin-left:auto}
.filter_box .color-any{height:26px;box-sizing:border-box;border-radius:999px;padding:0 14px;display:inline-flex;align-items:center;line-height:1}
.filter_box .dd-sep{height:1px;margin:0;background:rgba(255,255,255,.09);border:0;list-style:none}
/* в рейндж-панелях (Год/Объём) строки «Любой» и разделитель не нужны */
.filter_box .range-panel .dd-reset,.filter_box .range-panel .dd-sep{display:none}
.filter_box .dd-row.dd-reset.dd-brand-any,.filter_box .dd-row.dd-reset.dd-model-any,.filter_box .dd-row.dd-reset.dd-multi-any{display:flex;align-items:center;justify-content:flex-start;gap:8px;border-radius:4px}
.filter_box .dropdown[data-filter="brand"] .dd-header,.filter_box .dropdown[data-filter="model"] .dd-header{display:none}
:root .filter_box .dropdown[data-filter="brand"]:has(.dd-head[aria-expanded="true"]) .dd-input:not(.is-typing),
.filter_box .dropdown[data-filter="model"]:has(.dd-head[aria-expanded="true"]) .dd-input:not(.is-typing){opacity:.5}
.filter_box .dd-any-x{width:14px;height:14px;flex:0 0 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center;background-size:contain}
.filter_box .dd-row-count{font-size:12px !important}
.filter_box .dd-no-results{justify-content:center !important;color:#9CA3AF !important;cursor:default !important;pointer-events:none;height:40px !important;box-sizing:border-box !important;margin:0 !important}
.filter_box .dd-no-results:hover{background:transparent !important;color:#9CA3AF !important}
.filter_box .filter-checkboxes-group{height:40px !important}
.filter_box .dd-panel,.filter_box .range-panel{overflow:hidden}
/* фон ячеек при hover/focus не меняется (было: пропадал в transparent);
   прозрачным остаётся только контейнер range-head */
.filter_box .range-head,:root .filter_box .range-head:hover,:root .filter_box .range-head:focus-within{background:transparent !important}
.filter_box .dropdown:hover,:root .filter_box .range-dd:hover{box-shadow:none !important;transform:none !important}
/* в ячейках только стрелка: крестики очистки скрыты всегда */
.filter_box .dd-clear,.filter_box .range-clear,.filter_box .price-clear,.filter_box .mileage-clear{display:none !important}
.filter_box .chev{opacity:.6 !important}
.filter_box .dd-head[aria-expanded="true"] .chev{transform:translateY(-50%) rotate(180deg) !important}
.filter_box .dd-head[aria-expanded="true"]{background:#283341;border-color:rgba(255,255,255,0.04)}
:root .filter_box .dd-head,
:root .filter_box .price-range .price-input-wrap,
:root .filter_box .mileage-range .price-input-wrap,
.filter_box .slot{box-shadow:none !important}
.filter_box .range-head{box-shadow:none !important}
/* #active-chips — плашки активных фильтров. Стилизуются только здесь — можно без !important. */
#active-chips{display:none;gap:5px;flex-wrap:wrap;padding:8px 4px}
#active-chips.has-chips{display:flex;padding:8px 4px 0 4px}
#active-chips .active-chip{background:#EACB61;color:#272F3C;border:none;border-radius:999px;height:26px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;box-sizing:border-box}
#active-chips .active-chip:hover{background:#f2d27a}
#active-chips .active-chip .active-chip-x{color:#B32C35;font-weight:700;font-size:15px;line-height:1;margin-right:2px}
.filter_box .dd-panel,.filter_box .range-panel{top:calc(100% + 6px)}
.filter_box .dd-head[aria-expanded="true"],
:root .filter_box .range-dd:has(.panel-from:not([hidden])) .slot-from,
:root .filter_box .range-dd:has(.panel-to:not([hidden])) .slot-to{box-shadow:0 2px 2px rgba(0,0,0,0.25) !important}
:root .filter_box .range-dd:has(.panel-from:not([hidden])) .slot-from,
.filter_box .range-dd:has(.panel-to:not([hidden])) .slot-to{border-color:rgba(255,255,255,0.1) !important}
.filter-notice{display:none;align-items:flex-start;gap:10px;background:rgba(255,185,0,.08);border:1px solid rgba(255,185,0,.3);color:#fbbf24;padding:10px 14px;border-radius:8px;font-size:13px;line-height:1.4;margin:10px 0}
.filter-notice.is-visible{display:flex}
.filter-notice-text{flex:1;min-width:0;white-space:pre-line}
.filter-notice-close{flex-shrink:0;background:none;border:none;color:#fbbf24;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;opacity:.7}
.filter-notice-close:hover{opacity:1}
.filter_box .dd-row.dd-reset.dd-spec-any{display:flex;align-items:center;justify-content:flex-start;gap:8px;border-radius:4px}
.filter_box .dd-section-label{padding:8px 12px 4px;font-size:12px;font-weight:700;color:#EAB308;text-transform:uppercase;letter-spacing:.04em;cursor:default;list-style:none}
.filter_box .dd-section-label.dd-rest-label{margin-top:4px;border-top:1px solid rgba(255,255,255,.09)}
.filter_box .dd-body-head{display:flex;align-items:baseline;gap:8px;padding:10px 12px 4px;list-style:none}
.filter_box .dd-body-head .dd-body-name{font-size:13px;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:.03em}
.filter_box .dd-body-head .dd-body-count{font-size:11px;color:#7a8fa8}
.filter_box .dropdown[data-filter="spec"] .dd-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:8px 4px 0}
.filter_box .dropdown[data-filter="spec"] .dd-options > li:not(.dd-spec-subblock){grid-column:1 / -1}
.filter_box .dd-spec-subblock{display:flex;flex-direction:column;gap:0;min-width:0;border:none;border-radius:0;background:#2b3340;padding:0;overflow:hidden;list-style:none;box-shadow:none;cursor:pointer}
.filter_box .dropdown[data-filter="spec"] .dd-options li.dd-spec-subblock:last-child{border-radius:0 !important}
.filter_box .dd-spec-subblock.dd-selected .dd-sub-chips{border-top-color:#f3bc3e}
.filter_box .dd-sub-left{flex:0 0 auto;position:relative}
.filter_box .dd-sub-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#1a2330}
.filter_box .dd-sub-ph{width:100%;aspect-ratio:4/3;display:block;background:#1a2330}
.filter_box .dd-sub-noimg{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#1a2330,#1a2330 10px,#1e2937 10px,#1e2937 20px);color:#6b7c8f;font-size:13px;font-weight:500;text-align:center;box-sizing:border-box}
.filter_box .dd-sub-right{flex:0 0 auto;padding:0 4px}
.filter_box .dd-sub-chips{display:flex;flex-direction:column;gap:1px;padding:8px;background:#252d39;border-top:3px solid transparent;align-items:flex-start}
.filter_box .dd-sub-count{position:absolute;right:6px;bottom:6px;z-index:2;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:600;padding:2px 7px;border-radius:999px}
.filter_box .dd-sub-names{display:flex;flex-direction:column;gap:4px;padding:0 4px 4px}
.filter_box .dd-sub-trim{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;background:none;border:none;color:#c8d4e0;font-size:14px;padding:7px 8px;border-radius:4px;cursor:pointer;text-align:left;font-family:inherit;box-sizing:border-box}
.filter_box .dd-sub-trim:hover{background:rgba(255,255,255,.04)}
.filter_box .dd-sub-trim.dd-selected{background:#17212B}
.filter_box .dd-sub-trim.dd-selected .dd-sub-trimname{color:#fff}
.filter_box .dd-sub-trim .dd-check{display:inline-block;width:13px;height:13px;border:2px solid #4a5568;border-radius:50%;flex-shrink:0;box-sizing:border-box;background:transparent}
.filter_box .dd-sub-trim.dd-selected .dd-check{border-color:#EAB308;background:radial-gradient(circle,#EAB308 2px,transparent 3px)}
.filter_box .dd-sub-trimname{flex:1;min-width:0;white-space:normal;word-break:break-word;line-height:1.25}
:root .filter_box .range-panel {
    background: #283341;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
/* анимация стрелок дропдаунов (из core/misc.css) */
@keyframes chevSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes chevSpinCentered{from{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(360deg)}}

/* disabled-поля (модель/комплектация без бренда): только hover-рамка.
   Фокус при клике на заблокированном поле активного стиля НЕ даёт —
   активная обводка только у рабочих полей и опущенных дропдаунов */
.filter_box .dropdown.disabled .dd-head:hover{border-color:rgba(255,255,255,0.04)}
.filter_box .dropdown.disabled .dd-head:focus-within{border-color:transparent}

/* тень под всеми ячейками фильтра (панели дропдаунов не трогаем) */
:root .filter_box .dd-head,:root .filter_box .slot,
:root .filter_box .price-range .price-input-wrap,:root .filter_box .mileage-range .price-input-wrap{box-shadow:0 2px 0 -1px rgba(0,0,0,.1) !important}

/* плашки — под оболочкой фильтра, на прозрачном фоне страницы */
#active-chips{background:transparent}

/* чекбоксы в ряду кнопок: занимают свободное место между «Сбросить» и «Показать»,
   по вертикали вровень с кнопкой */
.filter_box .filter-checkboxes-group{max-width:none;flex:1;justify-content:flex-start}

/* кнопка «Показать» в общем ряду: компактная по контенту, прижата вправо */
.filter-actions .btn-show{flex:0 0 auto;width:200px;white-space:nowrap;padding:0 12px}
.filter-actions{justify-content:flex-start !important}
.filter-actions .filter-checkboxes-group{flex:0 0 auto !important;margin-left:13px}
.filter-actions .btn-show{margin-left:auto}

/* ряд 3 (Год + Цена) без третьей колонки: Год = 1/3, Цена = 2/3 — без дыры справа */
.filter_box .range-dd[data-filter="year"]{flex:1 1 0;max-width:none}
.filter_box .price-range[data-filter="price"]{flex:2 1 0;max-width:none}
/* текст чекбоксов — одной строкой, без переносов */
.filter_box .filter-checkbox-text{white-space:nowrap}

/* AJAX-подгрузка карточек: лёгкое затенение списка на время запроса */

/* ── Комплектации: полный список с пометками несовпадений + модалка подтверждения ── */
.dd-spec-subblock.dd-spec-mismatch{opacity:.55;outline:1px dashed rgba(248,113,113,.35);outline-offset:-1px}
.dd-spec-subblock.dd-spec-mismatch:hover{opacity:.8}
.dd-spec-chip.dd-spec-name{font-weight:600;color:#e8eef4}
.dd-spec-mismatch-badge{color:#f87171!important;border:1px solid rgba(248,113,113,.4);border-radius:999px;padding:1px 8px;font-size:11px}
.smm-overlay{position:fixed;inset:0;background:rgba(10,14,20,.65);display:none;align-items:center;justify-content:center;z-index:1000}
.smm-overlay.open{display:flex}
.smm-box{background:#283341;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:22px 24px;max-width:440px;margin:16px;color:#e3e3e3;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.smm-title{font-size:16px;font-weight:600;margin-bottom:10px}
.smm-text{font-size:14px;line-height:1.55;margin-bottom:18px;color:#c6d2dc}
.smm-btns{display:flex;gap:10px;justify-content:flex-end}
.smm-no{background:#4b5665;color:#e3e3e3;border:none;border-radius:8px;padding:9px 16px;cursor:pointer;font-size:14px}
.smm-no:hover{background:#5a6c80}
.smm-yes{background:#FFB900;color:#272F3C;border:none;border-radius:8px;padding:9px 16px;cursor:pointer;font-size:14px;font-weight:600}
.smm-yes:hover{background:#ffc733}

/* ── Комплектации: компактные чипы 3-в-ряд, без картинок ──
   Год → Тип кузова → строка общих характеристик → сетка чипов (имя + кол-во) */
.filter_box .spg-chars{grid-column:1/-1;padding:4px 12px;font-size:12px;color:#9fb4cc;letter-spacing:.02em;list-style:none}
.filter_box .dd-spec-subblock.spg-chip{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;background:#252d39;padding:8px 10px;border:1px solid rgba(255,255,255,.06);cursor:pointer}
.filter_box .dd-spec-subblock.spg-chip:hover{background:#2b3546}
.filter_box .dd-spec-subblock.spg-chip .dd-spec-name{font-size:13px;line-height:1.25;white-space:normal;word-break:break-word;flex:1;min-width:0}
.filter_box .dd-spec-subblock.spg-chip.dd-selected{border-color:#EAB308;background:#2b3546}
.filter_box .dd-spec-subblock.spg-chip.dd-selected .dd-spec-name{color:#fff}
.filter_box .spg-count{font-size:11px;font-weight:600;color:#EACB61;background:rgba(234,203,97,.12);padding:2px 7px;border-radius:999px;flex-shrink:0}
.filter_box .dd-spec-subblock.spg-chip.dd-spec-mismatch{opacity:.55;outline:1px dashed rgba(248,113,113,.35);outline-offset:-1px}
.filter_box .dd-spec-subblock.spg-chip.dd-spec-mismatch:hover{opacity:.85}
.filter_box .dd-spec-subblock.spg-chip .dd-spec-mismatch-badge{color:#f87171;border:1px solid rgba(248,113,113,.4);border-radius:999px;padding:0 7px;font-size:11px;flex-shrink:0}
.filter_box .spg-chip .spg-sub{grid-column:2;font-size:10.5px;color:#7a8fa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter_box .dd-spec-subblock.spg-chip{display:grid;grid-template-columns:1fr auto auto;align-items:center}

/* ── Комплектации v3: общее — напротив кузова, отличия — в чипе;
   чип = ячейка фильтра (белая, 38px, hover/active как dd-head) ── */
.filter_box .dd-body-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 10px}
.filter_box .spg-common{font-size:12px;font-weight:400;color:#EACB61;letter-spacing:.02em;text-align:right}
.filter_box .spg-dots{flex:1;min-width:24px;border-bottom:1px dotted rgba(154,164,174,.35);margin:0 10px 2px 0;align-self:flex-end;padding-bottom:4px}
.filter_box .dd-spec-subblock.spg-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:12px 6px 12px 12px;margin:4px;background:transparent;border:none;border-radius:4px;box-sizing:border-box;font-size:14px;font-weight:500;color:#b8c8d8;cursor:pointer;transition:all .2s ease-out;overflow:hidden}
.filter_box .dd-spec-subblock.spg-chip:hover{background:#242F3D}
.filter_box .dd-spec-subblock.spg-chip:active{scale:.98}
.filter_box .dd-spec-subblock.spg-chip .dd-spec-name{display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:14px;font-weight:500;color:#b8c8d8;line-height:1.2;flex:1;min-width:0;white-space:normal;word-break:break-word}
.filter_box .spg-chip .spg-diff{font-size:11px;font-weight:400;color:#7a8fa8;line-height:1.1}
.filter_box .spg-chip .dd-row-count{flex-shrink:0;align-self:center}
.filter_box .dd-spec-subblock.spg-chip.dd-selected{background:#17212B}
.filter_box .dd-spec-subblock.spg-chip.dd-selected .dd-spec-name{color:#fff}
.filter_box .dd-spec-subblock.spg-chip.dd-spec-mismatch{opacity:.6;outline:1px dashed rgba(248,113,113,.35);outline-offset:-1px}

/* ── Комплектации v3: общее — напротив кузова, отличия — в чипе;
   чип = ячейка фильтра (белая, 38px, hover/active/цифры как у дропдауна) ── */
.filter_box .dd-body-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 10px}
.filter_box .spg-common{font-size:12px;font-weight:400;color:#EACB61;letter-spacing:.02em;text-align:right}
.filter_box .spg-dots{flex:1;min-width:24px;border-bottom:1px dotted rgba(154,164,174,.35);margin:0 10px 2px 0;align-self:flex-end;padding-bottom:4px}
.filter_box .dd-spec-subblock.spg-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:12px 6px 12px 12px;margin:4px;background:transparent;border:none;border-radius:4px;box-sizing:border-box;font-size:14px;font-weight:500;color:#b8c8d8;cursor:pointer;transition:all .2s ease-out;overflow:hidden}
.filter_box .dd-spec-subblock.spg-chip:hover{background:#242F3D}
.filter_box .dd-spec-subblock.spg-chip:active{scale:.98}
.filter_box .dd-spec-subblock.spg-chip .dd-spec-name{display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:14px;font-weight:500;color:#b8c8d8;line-height:1.2;flex:1;min-width:0;white-space:normal;word-break:break-word}
.filter_box .spg-chip .spg-diff{font-size:11px;font-weight:400;color:#7a8fa8;line-height:1.1}
.filter_box .spg-chip .dd-row-count{flex-shrink:0;align-self:center}
.filter_box .dd-spec-subblock.spg-chip.dd-selected{background:#17212B}
.filter_box .dd-spec-subblock.spg-chip.dd-selected .dd-spec-name{color:#fff}
.filter_box .dd-spec-subblock.spg-chip.dd-spec-mismatch{opacity:.6;outline:1px dashed rgba(248,113,113,.35);outline-offset:-1px}

/* прелоадер цифры на кнопке «Показать» (кнопка не меняет размер) */
.filter_box .btn-cnt-load{display:inline-block;width:14px;height:14px;vertical-align:-2px;border:2px solid rgba(120,120,120,.3);border-top-color:#8a8a8a;border-radius:50%;animation:btnCntSpin .7s linear infinite}
@keyframes btnCntSpin{to{transform:rotate(360deg)}}

/* сосед-половинка в спаренной ячейке: если открыта одна — вторая притушена */
.filter_box .range-panel{background:#283341;border:1px solid rgba(255,255,255,.06)}
.filter_box:has(.dd-head[aria-expanded="true"],.range-head[aria-expanded="true"]) .col-split:has(.dd-head[aria-expanded="true"],.range-head[aria-expanded="true"])>.dropdown:not(:has(.dd-head[aria-expanded="true"])),
.filter_box:has(.dd-head[aria-expanded="true"],.range-head[aria-expanded="true"]) .col-split:has(.dd-head[aria-expanded="true"],.range-head[aria-expanded="true"])>.range-dd:not(:has(.range-head[aria-expanded="true"])){opacity:.35}
.filter_box .spg-fuel{grid-column:1/-1;display:flex;align-items:baseline;padding:0px 12px 0px 10px;list-style:none}
.filter_box .spg-fname{font-size:12px;font-weight:700;color:#EACB61;text-transform:uppercase;letter-spacing:.05em}
.filter_box .spg-fuel .spg-common{font-weight:500;color:#EACB61}

/* половинки «от»/«до»: не открытая половина приглушается */
.filter_box:has(.range-head[aria-expanded="true"]) .range-dd:has(.panel-from:not([hidden])) .slot-to,
.filter_box:has(.range-head[aria-expanded="true"]) .range-dd:has(.panel-to:not([hidden])) .slot-from{opacity:.35;transition:opacity .15s ease}

/* кнопка «Выбрать» — белая заливка, чёрный текст */
.filter_box .spec-apply-btn{background:#ffffff!important;color:#0f172a!important;border:none;border-radius:8px;padding:0;height:38px;font-size:13px;font-weight:600}

/* ── Панель сортировки (перенесена из модуля sort — часть блока фильтра) ── */
/* → перенесено из header.css (консолидация модулей 2026-09-09) */
.sort-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;width:100%;background:#283341;border:1px solid rgba(255,255,255,0.06);border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.25);padding:4px 0;display:none;z-index:101;overflow:hidden}
.sort-dropdown.is-open .sort-dropdown-menu{display:block}

/* кнопка сортировки растянута на контейнер — без отступа справа */
.sort-dropdown{display:flex;justify-content:flex-end}
.sort-dropdown-btn{width:240px;box-sizing:border-box;margin-left:auto}
.sort-dropdown-menu{width:240px;box-sizing:border-box;left:auto;right:0}
.sort-panel-left{flex:none}

/* ── «Ничего не найдено»: кнопка затемнена и неактивна ── */
.btn-show.is-zero,.btn-show:disabled{cursor:not-allowed}
.btn-show.is-zero .btn-show-content,.btn-show:disabled .btn-show-content{opacity:.45;filter:grayscale(.5)}

/* ── Красная плашка: пульс заливки красный↔бордовый (без ореола).
     background БЕЗ !important — иначе он перебивает keyframes и плашка не пульсирует ── */
.active-chip.chip-mismatch{background:#B12234;color:#fff!important;border-color:transparent!important;animation:chipPulseBg 1.4s ease-in-out infinite alternate}
@keyframes chipPulseBg{from{background-color:#B12234}to{background-color:#6E1020}}
.active-chip.chip-mismatch .active-chip-x{color:#fff!important}

/* ── Красная плашка: мгновенный стилизованный тултип ── */
.active-chip{position:relative}
.active-chip.chip-mismatch::after{content:'Отмените этот фильтр';position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#17212B;color:#fff;font-size:12px;font-weight:500;white-space:nowrap;padding:6px 12px;border-radius:8px;opacity:0;pointer-events:none;z-index:9999}
.active-chip.chip-mismatch::before{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#17212B;opacity:0;pointer-events:none;z-index:9999}
.active-chip.chip-mismatch:hover::after,.active-chip.chip-mismatch:hover::before{opacity:1}

/* рейндж без значений: серый текст (как неактивные), ⊘ на месте стрелки справа, клик запрещён */

/* несовместимое выбранное значение в дропдауне: та же красная пульс-заливка, что у плашки и ячейки */
.dd-row.dd-row-incompatible{color:#fff!important;position:relative;background:#B12234;animation:chipPulseBg 1.4s ease-in-out infinite alternate}
.dd-row.dd-row-incompatible .dd-row-text{color:#fff!important}
.dd-row.dd-row-incompatible .dd-row-count-bad{color:#fff!important;font-size:11px}
/* кружок слева — как у обычных строк, но белый и «активный» (заполнен) */
.dd-row.dd-row-incompatible .dd-check{border-color:#fff;background:radial-gradient(circle,#fff 3px,transparent 4px)}
/* тултип у несовместимой строки не нужен — «отменить» уже подписано справа */

/* блокированные ячейки: обычный вид, стрелки на месте, курсор-«запрет» (⊘), клики глушит JS */
.dropdown.dd-blocked, .range-dd.dd-blocked{opacity:.55}
.dropdown.dd-blocked .dd-head, .dropdown.dd-blocked .dd-input,
.range-dd.dd-blocked .slot, .range-dd.dd-blocked .slot-text, .range-dd.dd-blocked .chev{cursor:not-allowed}

/* ячейка-виновник (в ней выбрано несовместимое значение): та же красная пульс-заливка + SVG «!» справа */
/* «!» — пульс красный↔бордовый, пока фильтр несовместим (цвет через mask, чтобы анимировать) */
.dropdown.cell-error .dd-head::after, .range-dd.cell-error .range-head::after{
  content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;z-index:2;
  background-color:#B12234;animation:exclPulseBg 1.4s ease-in-out infinite alternate;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:16px 16px;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4'/><path d='M12 17h.01'/><circle cx='12' cy='12' r='10'/></svg>");
  mask-repeat:no-repeat;mask-position:center;mask-size:16px 16px}
@keyframes exclPulseBg{from{background-color:#B12234}to{background-color:#6E1020}}
.dropdown.cell-error .dd-head{position:relative}
.range-dd.cell-error .range-head{position:relative}

to{opacity:.35}}

/* ── 3) Неактивные ячейки: без анимации нажатия ── */
.dropdown.dd-blocked .dd-head:active, .range-dd.dd-blocked .slot:active,
.range-dd.dd-blocked .range-head:active, .range-dd.dd-blocked:active,
.dropdown.dd-blocked .dd-head:hover, .range-dd.dd-blocked .slot:hover, .range-dd.dd-blocked .range-head:hover{scale:none!important;border-color:rgba(40,51,65,1)!important;transform:none!important;box-shadow:none!important}

/* ── 4) Кнопка «Ничего не найдено»: тултип слева от кнопки, мгновенный ── */
.btn-show.is-zero{position:relative}
.btn-show.is-zero .btn-cnt-load, .btn-show.is-zero .btn-cnt-spin{display:none}
.btn-show.is-zero{position:relative}
.btn-show.is-zero::before{content:'Отключите неподходящий фильтр';position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#17212B;color:#fff;font-size:12px;font-weight:500;white-space:nowrap;padding:6px 12px;border-radius:8px;opacity:0;pointer-events:none;z-index:9999}
.btn-show.is-zero:hover::before{opacity:1}

/* выбранный, но не подходящий цвет */
/* красное кольцо СНАРУЖИ, того же размера, что жёлтое у выбранных (3px), без пульсации */
.filter_box .color-circle.is-incompatible,.color-circle.is-incompatible{position:relative;border:2px solid rgba(0,0,0,.15)!important;animation:none!important;box-shadow:0 0 0 3px #B12234!important}

/* тултип у несовместимого цвета: две строки, над кружком */
.color-circle.is-incompatible::before{content:'Отменить цвет\AНет авто с таким цветом с выбранными параметрами';white-space:pre;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#17212B;color:#fff;font-size:12px;font-weight:500;line-height:1.45;text-align:center;padding:6px 12px;border-radius:8px;opacity:0;pointer-events:none;z-index:9999}
.color-circle.is-incompatible:hover::before{opacity:1}

/* ячейка цветов с наведённым несовместимым кружком — поверх всего, чтобы тултип не резался */
.color-filter:has(.color-circle.is-incompatible:hover){position:relative;z-index:9999}

/* ячейка-виновник с «!» — НЕ полупрозрачная и кликабельная, даже если попала под dd-blocked */
.dropdown.dd-blocked.cell-error,.range-dd.dd-blocked.cell-error{opacity:1!important}
.dropdown.dd-blocked.cell-error .dd-head,.range-dd.dd-blocked.cell-error .range-head{cursor:pointer!important}

/* ═══ Цвет кузова: дропдаун-ячейка (стиль Привода) ═══ */
/* строка цвета: 4 колонки — радио | текст | прямоугольник цвета | количество.
   Счётчик фикс. ширины справа → прямоугольники цветов стоят ровным вертикальным столбиком */
.filter_box .dd-row .color-dot{width:18px;height:12px;border-radius:3px;flex-shrink:0;margin-left:auto;margin-right:12px;box-sizing:border-box;border:1px solid rgba(0,0,0,.25)}
.filter_box .dd-row:has(.color-dot) .dd-row-count{min-width:52px;text-align:right;flex-shrink:0}
.filter_box .dd-row.dd-row-incompatible .color-dot{border:2px solid #fff}

/* ячейка-виновник: стрелку прячем — вместо неё «!» */
.dropdown.cell-error .dd-head .chev,.range-dd.cell-error .range-head .chev{display:none}

/* cache-bust 2026-09-19 */

/* ===== MODULE about-teaser : modules/about-teaser/about-teaser.css ===== */
/* ═══ МОДУЛЬ about-teaser — «О компании» на главной (со старого сайта,
   перенесено 2026-10-02). Стили в теме сайта: блок #242F3D, радиус 12. ═══ */
.about-teaser{margin:0 0 24px}
.about-teaser-inner{background:#242F3D;border-radius:12px;padding:18px 16px}
.about-teaser-title{background:transparent;border-radius:0;padding:10px 10px 6px;font-size:24px;font-weight:700;color:#fff;margin:0}
.about-teaser-text{font-size:14px;line-height:1.7;color:#c9d4de;margin:0 0 16px}
.about-teaser-btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:8px;background:#FFB900;color:#1a1a1a;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s}
.about-teaser-btn:hover{background:#e5a800;color:#1a1a1a}
@media (max-width:768px){
  .about-teaser{margin:0 0 16px}
  .about-teaser-inner{padding:18px 16px}
  .about-teaser-title{font-size:24px}
}

/* ===== MODULE car-actions : modules/car-actions/car-actions.css ===== */
/* ═══ CAR-ACTIONS — фиксированные кнопки «Позвонить/Написать» на странице авто ═══ */
.car-fixed-bar { position: sticky; bottom: 0; z-index: 9999; display: flex; gap: 5px; padding: 10px 10px 10px; background: #17212B; }
.car-fixed-btn { flex: 1; border: none; padding: 14px 0; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.car-fixed-write { background: #fff; color: #17212B; }
.car-fixed-call { background: #FFB900; color: #17212B; }
.car-fixed-spacer { display: none; }

/* ===== MODULE car-gallery : modules/car-gallery/car-gallery.css ===== */
/* ═══ CAR-GALLERY.CSS — слайдер галереи страницы авто (мобильная) ═══
   Только галерея на странице (лента + тумбы + счётчик). Лайтбокс — отдельный
   модуль car-lightbox/ (lb-*). ПК-версия (car.html) — отдельный код. */
.gallery-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f1f5f9;
    touch-action: pan-y;
    cursor: grab;
}
.gallery-carousel:active { cursor: grabbing; }
html.dark .gallery-carousel {
    background: #1e293b;
}
/* Navigation arrows */
.gallery-nav-prev,
.gallery-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0;
}
.gallery-carousel:hover .gallery-nav-prev,
.gallery-carousel:hover .gallery-nav-next {
    opacity: 1;
}
.gallery-nav-prev { left: 8px; }
.gallery-nav-next { right: 8px; }
.gallery-nav-prev:active,
.gallery-nav-next:active {
    background: rgba(0,0,0,0.6);
}
.gallery-track {
    display: flex;
    will-change: transform;
    /* transition добавляется/убирается из JS */
}
.gallery-track.animating {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.gallery-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
/* счётчик «1 / 15» — плашка внизу справа первого экрана галереи */
.gallery-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 11px;
    font-family: var(--font-family);
    padding: 3px 8px;
    border-radius: 8px;
    pointer-events: none;
    letter-spacing: 0.5px;
}
/* миниатюры: БЕЗ скругления, зазоры 1px (между собой и большой картинкой);
   активная — уменьшенная (владелец, 2026-09-23) */
.car-thumbs {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1px 0 0 0; /* 1px зазор от большой картинки */
    margin-top: 1px;
}
.car-thumbs::-webkit-scrollbar { display: none; }
.car-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    object-fit: cover;
    background: transparent;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease, border-radius 0.3s ease;
    cursor: pointer;
    transform: scale(1);
}
.car-thumb--active {
    opacity: 0.55;
    transform: scale(0.85);
}

/* ===== MODULE car-hero : modules/car-hero/car-hero.css ===== */
/* car-hero — заголовок карточки (h1); перенесено из pages/car/car.css 2026-09-11 */
.car-hero-title{margin:0;padding:0}
.car-hero-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;line-height:normal}
.car-hero-brand{text-transform:uppercase}
.car-hero-model{text-transform:uppercase}
.car-hero-year{font-weight:inherit}
.car-hero-title{background:none;border:none;box-shadow:none}

/* ===== MODULE car-lightbox : modules/car-lightbox/car-lightbox-mobile.css ===== */
/* ═══ CAR-LIGHTBOX-MOBILE.CSS — лайтбокс страницы авто (мобильная) ═══
   Единый префикс lb- (конституция п.2). Связка: car-lightbox.html + car-lightbox-mobile.js.
   ПК-лайтбокс (car.html) — car-lightbox.css, классы .lightbox-* — не пересекаются. */
.lb-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    touch-action: pan-x; /* горизонталь — нативный скролл ленты, вертикаль — JS (dismiss) */
}
.lb-root.is-open {
    opacity: 1;
    visibility: visible;
}
.lb-backdrop {
    position: absolute;
    inset: 0;
    background: #000; /* сплошной чёрный, без прозрачности (владелец 2026-09-24) */
}
/* лента-киноплёнка: нативный скролл с примагничиванием (инерция и снап —
   сам браузер, как системные списки). Зазор 28px только между слайдами */
.lb-strip {
    display: flex;
    column-gap: 28px;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    will-change: transform, opacity;
    overflow: hidden; /* увеличенная картинка не наезжает на соседний слайд */
}
.lb-slide img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: center center;
}
/* верхняя полоса: высота по контенту (40px кнопки), счётчик по центру
   вертикали, крестик справа в блоке 40×40 */
.lb-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 5px 0 15px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}
.lb-counter {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-family: var(--font-family);
    font-weight: 500;
    letter-spacing: 1px;
}
/* крестик — блок 40×40, внутри svg ровно 20×20 */
.lb-close {
    position: static;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    z-index: 101;
}
.lb-close:active {
    background: rgba(255, 255, 255, 0.25);
}
.lb-close svg {
    width: 30px;  /* viewBox 24, крест занимает 12 единиц → видимый крест 15×15 */
    height: 30px;
    stroke: #fff;
    stroke-width: 2;
}

/* ===== MODULE car-lightbox : modules/car-lightbox/car-lightbox.css ===== */
/* modules/car-lightbox/car-lightbox.css — вынесено из static/pages/car/car.css (однотемная тёмная тема, dark-перекрытия слиты) */
.lightbox-overlay{position:absolute;inset:0;background:#0f111a;cursor:pointer}
.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;overflow:hidden}
.lightbox-header{pointer-events:auto;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:20;transition:transform 0.3s ease}
.lightbox-header.is-hidden{transform:translateY(-100%)}
.lightbox-header-left{display:flex;align-items:center;gap:16px}
.lightbox-counter{font-family:var(--font-family);font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:0.1em}
.lightbox-counter-total{color:#4B5563;font-size:1rem}
@media (min-width:640px){
.lightbox-header-title{display:block}
}
.lightbox-header-right{display:flex;align-items:center;gap:8px}
.lightbox-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:9999px;border:1px solid #e2e8f0;background:transparent;color:#9CA3AF;cursor:pointer;transition:all 0.15s ease;box-shadow:0 1px 2px rgba(0,0,0,0.05);border-color:transparent}
.lightbox-btn:hover{color:#fff;border-color:transparent;background:rgba(255,255,255,0.1)}
.lightbox-btn:focus{outline:none}
.lightbox-btn-close:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,0.2)}
.lightbox-btn svg{width:20px;height:20px}
.lightbox-btn .icon-zoom.hidden{display:none}
.lightbox-content{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;height:100%;pointer-events:auto}
.lightbox-content:hover .lightbox-nav{opacity:1;transform:translateY(-50%) translateX(0)}
.lightbox-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none;opacity:0;transition:opacity 0.3s ease}
.lightbox-loader.is-loading{opacity:1}
.lightbox-loader-spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#ffb900;border-radius:9999px;animation:lightbox-spin 1s linear infinite;border-color:#374151}
.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;transition:transform 0.5s cubic-bezier(0,0,0.2,1),opacity 0.3s ease;cursor:zoom-in;user-select:none;position:relative;z-index:10;filter:drop-shadow(0 25px 25px rgba(0,0,0,0.15));opacity:0}
.lightbox-img.is-loaded{opacity:1}
.lightbox-img.is-zoomed{cursor:grab}
.lightbox-img.is-zoomed.is-dragging{cursor:grabbing}
.lightbox-img.is-loading{opacity:0.5;filter:blur(4px) drop-shadow(0 25px 25px rgba(0,0,0,0.15))}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:9999px;border:1px solid #e2e8f0;background:rgba(0,0,0,0.4);color:#fff;cursor:pointer;transition:all 0.3s ease;z-index:20;opacity:0;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);border-color:rgba(255,255,255,0.1)}
.lightbox-nav:hover{background:#ffb900;color:#000;transform:translateY(-50%) scale(1.1);border-color:transparent}
.lightbox-nav:active{transform:translateY(-50%) scale(0.95)}
.lightbox-nav:focus{outline:none}
.lightbox-nav svg{width:24px;height:24px}
.lightbox-nav-prev{left:24px;transform:translateY(-50%) translateX(-16px)}
.lightbox-nav-next{right:24px;transform:translateY(-50%) translateX(16px)}
.lightbox-footer{pointer-events:auto;height:112px;z-index:20;transition:transform 0.3s ease;display:flex;align-items:center;justify-content:center;padding:8px 0 32px}
.lightbox-footer.is-hidden{transform:translateY(100%)}
.lightbox-thumbs-wrapper{position:relative;max-width:90vw;width:100%;overflow:hidden}
@media (min-width:768px){
.lightbox-thumbs-wrapper{width:auto}
}
.lightbox-thumbs-gradient{position:absolute;top:0;bottom:0;width:64px;z-index:10;pointer-events:none;border-radius:16px}
.lightbox-thumbs-gradient-left{left:0;background:linear-gradient(to right,#0f111a,rgba(15,17,26,0.8),transparent);border-top-right-radius:0;border-bottom-right-radius:0}
.lightbox-thumbs-gradient-right{right:0;background:linear-gradient(to left,#0f111a,rgba(15,17,26,0.8),transparent);border-top-left-radius:0;border-bottom-left-radius:0}
.lightbox-thumbs-panel{background:rgb(15 17 26);border:1px solid #e2e8f0;border-radius:16px;padding:8px;transition:all 0.3s ease;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);overflow:hidden;border-color:rgba(255,255,255,0.05)}
.lightbox-thumbs-panel:hover{background:rgb(15 17 26);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);border-color:rgba(255,255,255,0.2)}
.lightbox-thumbs{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;max-width:672px;padding:4px 16px;scrollbar-width:none;cursor:grab;user-select:none}
.lightbox-thumbs::-webkit-scrollbar{display:none}
.lightbox-thumbs.is-dragging{cursor:grabbing;scroll-behavior:auto}
.lightbox-thumb{position:relative;flex-shrink:0;width:56px;height:40px;border-radius:4px;overflow:hidden;border:2px solid transparent;transition:all 0.3s ease;opacity:0.4;cursor:pointer;background:none;padding:0}
.lightbox-thumb:hover{opacity:1;transform:scale(1.05)}
.lightbox-thumb.active{border-color:#ffb900;opacity:1;transform:scale(1.1);z-index:10;box-shadow:0 0 12px rgba(255,185,0,0.2)}
.lightbox-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-drag:none}
.header-title{font-size:16px;font-weight:400;color:#ffffff;display:flex;align-items:center;gap:3px;line-height:1.3}
.header-icon-box{width:32px;height:32px;min-width:32px;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#FFB900}
@keyframes lightbox-spin{to{transform:rotate(360deg)}}

/* ===== MODULE car-manager-modal : modules/car-manager-modal/car-manager-modal.css ===== */
/* modules/car-manager-modal/car-manager-modal.css — вынесено из static/pages/car/car.css (однотемная тёмная тема, dark-перекрытия слиты) */
.manager-modal-overlay{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:16px}
.manager-modal-overlay.visible{display:flex}
.manager-modal-backdrop{position:absolute;inset:0;z-index:1;background:rgba(11,13,26,0.9);backdrop-filter:blur(4px);transition:opacity 0.3s ease}
.manager-modal-overlay.visible .manager-modal-content{opacity:1;transform:translateY(0)}
.manager-city-tab.active{background:#475569;color:#ffffff;box-shadow:0 4px 12px rgba(0,0,0,0.3);ring:1px solid rgba(0,0,0,0.05)}
.manager-city-tab.active .city-pin-icon{color:#facc15}
@media (min-width:768px){
.manager-title-section{flex-direction:row;justify-content:space-between;align-items:flex-end}
}
@media (min-width:768px){
.managers-grid{grid-template-columns:repeat(2,1fr)}
}
.manager-card{position:relative;background:#1e243d;border-radius:16px;padding:1px;overflow:hidden;transition:all 0.3s ease;ring:1px solid rgba(100,116,139,0.5);display:flex;flex-direction:column;height:100%}
.manager-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(251,144,0,0.15)}
.manager-card:hover .manager-card-gradient{opacity:1}
.manager-card:hover .manager-card-inner{border-color:transparent}
.manager-card:hover .manager-avatar{border-color:rgba(251,144,0,0.5)}
.manager-card:hover .manager-info h3{color:#fb9000}
.manager-channel-btn.active{background:#475569;color:#ffffff;box-shadow:0 2px 4px rgba(0,0,0,0.2);ring:1px solid rgba(0,0,0,0.05);font-weight:700}
.manager-qr-glow.telegram{background:linear-gradient(135deg,rgba(59,130,246,0.3),rgba(59,130,246,0.1),transparent)}
.manager-qr-glow.whatsapp{background:linear-gradient(135deg,rgba(34,197,94,0.3),rgba(34,197,94,0.1),transparent)}
.manager-qr-glow.max{background:linear-gradient(135deg,rgba(59,130,246,0.3),rgba(168,85,247,0.3),rgba(236,72,153,0.3))}
.manager-qr-icon.telegram svg{color:#3b82f6;fill:#3b82f6}
.manager-qr-icon.whatsapp svg{color:#22c55e;fill:#22c55e}
.manager-qr-icon.max span{font-size:10px;font-weight:900;background:linear-gradient(135deg,#3b82f6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.manager-qr-scan-line.telegram{background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,0.5)}
.manager-qr-scan-line.whatsapp{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.5)}
.manager-qr-scan-line.max{background:linear-gradient(90deg,#3b82f6,#a855f7,#ec4899);box-shadow:0 0 8px rgba(168,85,247,0.5)}
.manager-qr-hint-channel.telegram{color:#60a5fa}
.manager-qr-hint-channel.whatsapp{color:#4ade80}
.manager-qr-hint-channel.max{background:linear-gradient(90deg,#3b82f6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mgr-contacts-col .manager-card{max-width:100%}
@keyframes qr-appear{0%{opacity:0;transform:scale(0.9);filter:blur(4px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes scan-line{0%{top:0%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}}
@keyframes icon-pop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

/* ===== MODULE car-price-actions : modules/car-price-actions/car-price-actions.css ===== */
/* modules/car-price-actions/car-price-actions.css — вынесено из static/pages/car/car.css (однотемная тёмная тема, dark-перекрытия слиты) */
.car-price-actions{display:flex;flex-direction:column;width:100%;padding:15px;background:#242F3D;border-radius:12px;border:none;position:relative;z-index:100;box-shadow:0 1px 4px 0px rgba(0,0,0,0.12),0 0px 1px rgba(0,0,0,0.08)}
.price-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}
.price-info{display:flex;flex-direction:column;gap:8px}
.price-label{font-family:var(--font-family);font-size:12px;color:#94a3b8;font-weight:400}
.price-value{font-family:var(--font-family);font-size:24px;font-weight:700;color:#ffffff}
.car-good-choice{padding:5px 10px;background:#355E69;color:#71F0B3;border:1px solid #E6C263;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap;margin-bottom:3px;border-color:#4D9888}
.action-row{display:flex;justify-content:center}
.action-row + .action-row{margin-top:18px}
.btn-select-car{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;width:100%;height:38px;padding:0 16px;background:#ffffff;color:#111428;border:none;border-radius:8px;font-family:inherit;font-size:14px;font-weight:500;text-align:center;cursor:pointer;overflow:hidden;transition:box-shadow 0.2s ease;box-shadow:0 0 20px rgba(255,255,255,0.1)}
.btn-select-car:hover{background:#1e3a8a;box-shadow:0 0 40px rgba(255,255,255,0.3)}
.btn-select-car::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent);transform:skewX(-12deg);animation:btn-shimmer 6s infinite}
.btn-select-car .btn-icon{width:16px;height:16px;position:absolute;right:16px;transition:transform 0.2s ease;filter:none}
.btn-select-car:hover .btn-icon{transform:translateX(2px)}
@keyframes btn-shimmer{0%{left:-100%}100%{left:200%}}

/* ===== MODULE car-specs : modules/car-specs/car-specs.css ===== */
/* ═══ из mobile-car.css (распил 2026-09-24, визуал 1:1) ═══ */

/* =====================================================
   MOBILE ACCORDION STYLES (from accordeon documents)
   ===================================================== */

/* --- Accordion Container --- */
.mobile-specs-block {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* ===== MOBILE SPECS SEARCH ===== */
/* --- Search Overlay Backdrop --- */

/* управление аккордеоном: развернуть/свернуть все */

/* Hide buttons when search overlay is active */

/* Search overlay mode — fixed to top when keyboard open */

/* Clear button */

/* --- Suggestions Dropdown --- */

/* Highlight flash animation — only label color, no background */

@keyframes mobSpecFlash {
  0%, 100% { color: inherit; }
  15%, 85% { color: #FFB900; }
}

/* Dark theme suggestions */

/* --- Accordion List --- */
.mob-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- Accordion Item --- */
.mob-accordion-item {
  background: #242F3D;
  border: none;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  box-shadow: none;
}

.mob-accordion-item + .mob-accordion-item {
  border-top: 1px solid #2c3743;
  margin-top: 0;
  padding-top: 0;
}

.mob-accordion-item.open {
  box-shadow: none;
}

.mob-accordion-item.open .mob-accordion-header {
  background: #2B3643;
  border-radius: 0; /* у открытого скругления нет (владелец 2026-09-25) */
}

/* --- Accordion Header --- */
.mob-accordion-header {
  padding: 15px 15px;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  height: auto;
}

/* --- Header Title Row --- */
.mob-accordion-title-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* --- Header Icon Box --- */

/* --- Header Title Text --- */
.mob-header-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
}

/* --- Chevron --- */
.mob-accordion-chevron {
  color: #7f91a4;
  transition: transform 0.25s ease;
  width: 5px;
  height: 9px;
  min-width: 5px;
  flex-shrink: 0;
  margin-left: 12px;
  margin-right: 0;
}

.mob-accordion-item.open .mob-accordion-chevron {
  transform: rotate(90deg);
  color: #7f91a4;
}

/* --- Accordion Content (animated) --- */
.mob-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.mob-accordion-item.open .mob-accordion-content {
  max-height: 500px;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* FAQ block */
.faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.5; text-align: left; gap: 12px; }
.faq-q::after { content: ''; width: 5px; height: 9px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5-5 5' stroke='%237f91a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: contain; transition: transform .25s; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(0,1,0,1); }
.faq-a p, .faq-a ul { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: #7f91a4; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: #fff; font-weight: 600; }
.faq-a ul { margin: 8px 0 0; padding-left: 20px; }
.faq-a li { margin-bottom: 4px; font-size: 14px; line-height: 1.6; color: #7f91a4; }
.faq-a a { color: #5B9BD5; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }

/* SEO text block (mobile) */

/* Popular cars block (mobile) */
.popular-cars { margin: 0 5px 20px 5px; padding: 0; }
.popular-cars-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 12px; padding: 0 5px 0 15px; }
.similar-cars-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 12px; padding: 0 5px 0 15px; }
.popular-cars-viewport { width: 100%; overflow: hidden; }
.popular-cars-list { display: flex; gap: 10px; width: max-content; padding: 0 5px 8px; }
.popular-car-card { flex-shrink: 0; width: 150px; background: #242F3D; border-radius: 8px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.popular-car-img { width: 100%; height: 100px; object-fit: cover; display: block; background: #1a2332; }
.popular-car-info { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.popular-car-name { font-size: 13px; color: #fff; font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.popular-car-price { font-size: 12px; font-weight: 600; color: #FFB900; margin-top: auto; }

/* --- Content Inner --- */
.mob-content-inner {
  padding: 0 15px;
  border-top: none;
}

/* === Spec Row Styling === */
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #2c3743;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.spec-row:last-child {
  border-bottom: none;
}

/* Spec Row Label */
.spec-row-label {
  font-size: 14px;
  font-weight: 400;
  color: #7f91a4;
  width: 50%;
  flex-shrink: 0;
  line-height: 1.5;
  text-align: left;
}

/* Spec Row Value */
.spec-row-value {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  width: 50%;
  line-height: 1.5;
  word-break: break-word;
}

/* Status: not available / dash / empty circle */
.spec-row-value.status-no {
  color: #7f91a4;
  opacity: 0.6;
}

/* Spec value NA (dash, empty circle) */
.spec-value-na {
  color: #94a3b8;
}

/* Spec line item (multi-line with check/circle) */
.spec-line-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  color: #0f172a;
  margin-bottom: 2px;
}

.spec-line-item.spec-value-na {
  color: #94a3b8;
}

/* маркеры — 1-в-1 страница сравнения: строка-блок flex, маркер 16×21 по
   центру первой строки, вторая строка текста под текстом, не под маркером;
   тире — css-полоска 6×2.5 */
.spec-line-item{display:inline-flex;align-items:center;vertical-align:top}
.spec-marker{display:inline-flex;align-items:center;justify-content:flex-start;width:24px;line-height:1;font-size:17px;vertical-align:middle;text-align:center;flex-shrink:0;position:relative}
.spec-marker-yes{color:#4ade80}
.spec-marker-maybe{color:#fbbf24}
.spec-marker-no{color:transparent;position:relative}
.spec-marker-no::after{content:'';position:absolute;left:1px;top:50%;transform:translateY(-50%);width:6px;height:2.5px;background:#7f91a4;border-radius:1px}
.spec-marker-text{display:block;overflow:hidden;min-height:21px;line-height:21px;color:#e2e8f0}
/* строка без маркера: текст в струну с текстами маркерных строк */
.spec-line-plain{display:inline-block;padding-left:20px;min-height:21px;line-height:21px}

/* Color swatches */
.color-swatch-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.color-swatch-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.color-swatch-dual {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.color-swatch-name {
  font-size: 0.7rem;
  color: #64748b;
}

/* заголовок над параметрами (моб): скругление сверху, снизу нет, прижат */
.specs-main-title{background:transparent;border-radius:12px 12px 0 0;padding:14px 10px 14px 15px;font-size:22px;font-weight:700;color:#e8eef5;line-height:1.2}
.mob-accordion-list{border-radius:0 0 0 0}

/* маркер без текста — по центру вертикали ячейки (владелец 2026-10-02) */
.spec-line-empty{display:flex;align-items:center;min-height:23px;margin:1px 0}
.spec-line-empty .spec-marker{align-self:stretch;height:auto;display:flex;align-items:center}

/* inline-маркер (внутри слэш-строк): обёртка высотой строки 21px,
   vertical-align:top — центр строго первой строки текста на любом шрифте */
.spec-marker-inline{display:inline-flex;align-items:center;justify-content:center;width:12px;height:21px;line-height:1;font-size:8px;vertical-align:top;box-sizing:border-box}

/* ===== MODULE car-specs-summary : modules/car-specs-summary/car-specs-summary-mobile.css ===== */
/* ═══ из mobile-car.css (распил 2026-09-24, визуал 1:1) ═══ */

/* === Utilities === */
/* .no-scrollbar, .ease-custom, .no-select — in mobile.css (mobile-bundle) */

/* === Global Background === */
/* html, body, body background — управляется burger_menu.html */

/* === Main Content Container === */
/* Базовые стили — transition и layout переопределяются в burger_menu_styles */
#main-content {
  background-color: #17212B;
}

/* === Telegram Block (mobile) — moved to mobile-bundle.css === */
/* === Specs Summary Block === */
.mc-specs-summary {
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  font-size: 14px;
}

.mc-specs-row {
  display: contents;
}

.mc-specs-label {
  color: #b0bec5;
  font-size: 15px;
  font-weight: 400;
  color: #b0bec5;
  white-space: nowrap;
  padding: 10px 16px 10px 2px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.mc-specs-value {
  font-size: 15px;
  font-weight: 400;
  color: #e2e8f0;
  text-align: left;
  padding: 10px 12px 10px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.mc-specs-row:last-child .mc-specs-label,
.mc-specs-row:last-child .mc-specs-value {
  border-bottom: none;
}


/* ═══ из mobile-bundle.css CAR MOBILE (распил 2026-09-24, визуал 1:1) ═══ */

/* =============================================
   CAR MOBILE — inline styles extracted
   ============================================= */
.mcar-bc-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 12px;
    color: #fff;
    padding: 12px 0px 0px 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mcar-bc-nav::-webkit-scrollbar { display: none; }

.mcar-bc-link {
    color: #5B9BD5;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.mcar-bc-link:hover {
    text-decoration: underline;
}

.mcar-bc-sep {
    color: #9ca3af;
    opacity: .5;
    flex-shrink: 0;
}

.mcar-bc-current {
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}

.mcar-pubdate-wrap {
    padding-top: 12px;
    padding-bottom: 4px;
    padding-left: 15px;
    padding-right: 15px;
}

.mcar-pubdate {
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.025em;
}

.mcar-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding-left: 5px;
    padding-bottom: 10px;
}

.mcar-spec-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
}

.mcar-spec-label {
    font-size: 13px;
    color: #6b7280;
}

.mcar-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
    margin-bottom: 8px;
}

.mcar-price-value {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

.mcar-price-gap {
    display: inline-block;
    width: 8px;
}

.mcar-price-gap-sm {
    display: inline-block;
    width: 3px;
}

.mcar-price-city {
    font-size: 12px;
    color: #6b7280;
}

.mcar-buy-wrap {
    margin-bottom: 10px;
}

.mcar-buy-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mcar-specs-wrap {
    margin-bottom: 10px;
    font-size: 14px;
}

.mcar-content-wrap {
}

.mcar-info-block {
    padding-left: 15px;
    padding-right: 15px;
}

.mcar-modal-handle {
    width: 48px;
    height: 6px;
    background: #374151;
    border-radius: 9999px;
    margin: 0 auto 24px;
    flex-shrink: 0;
}

.mcar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.mcar-modal-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: #fff;
}

.mcar-modal-title-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: #eab308;
}

.mcar-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border: none;
    cursor: pointer;
}

.mcar-modal-close-icon {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}

.mcar-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mcar-modal-op-name {
    font-weight: 700;
    color: #fff;
    font-size: 18px;
}

.mcar-modal-op-role {
    font-size: 14px;
    color: #6b7280;
}

.mcar-modal-op-center {
    text-align: center;
    margin-bottom: 16px;
}

.mcar-modal-unavailable {
    text-align: center;
    padding: 24px 0;
    color: #9ca3af;
}

.mcar-contact-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    transition: background 0.15s;
    text-decoration: none;
}

.mcar-contact-link-tg {
    background: rgba(0,136,204,0.1);
}

.mcar-contact-link-wa {
    background: rgba(37,211,102,0.1);
}

.mcar-contact-link-phone {
    background: rgba(255,255,255,0.05);
}

.mcar-contact-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mcar-contact-icon-wrap-tg {
    background: #0088cc;
}

.mcar-contact-icon-wrap-wa {
    background: #25D366;
}

.mcar-contact-icon-wrap-phone {
    background: #475569;
}

.mcar-contact-icon {
    width: 24px;
    height: 24px;
    color: #fff;
}

.mcar-contact-name {
    font-weight: 700;
    color: #fff;
}

.mcar-contact-detail {
    font-size: 14px;
    color: #6b7280;
}

.mcar-contact-arrow {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    margin-left: auto;
}

/* Price Modal (mobile) */
.mcar-price-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.mcar-price-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
}

.mcar-price-modal-sheet {
    position: relative;
    background: #f8f9fa;
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
}

.mcar-price-modal-handle-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
}

.mcar-price-modal-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
}

.mcar-price-modal-header {
    padding: 8px 20px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.mcar-price-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.mcar-price-modal-title-icon {
    width: 22px;
    height: 22px;
    color: #2563eb;
}

.mcar-price-modal-subtitle {
    font-size: 11px;
    color: #64748b;
    margin: 3px 0 0;
}

.mcar-price-modal-close {
    padding: 8px;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcar-price-modal-close-icon {
    width: 20px;
    height: 20px;
}

.mcar-price-modal-body {
    overflow-y: auto;
    padding: 16px 16px 20px;
    background: #f8f9fa;
    -webkit-overflow-scrolling: touch;
}

.mcar-price-info-box {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mcar-price-info-icon {
    width: 18px;
    height: 18px;
    color: #2563eb;
    flex-shrink: 0;
    margin-top: 2px;
}

.mcar-price-info-text {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
    margin: 0;
}

.mcar-price-section {
    margin-bottom: 20px;
}

.mcar-price-section:last-child {
    margin-bottom: 0;
}

.mcar-price-section-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

.mcar-price-section-badge-1 {
    background: #fef2f2;
    color: #b91c1c;
}

.mcar-price-section-badge-2 {
    background: #fffbeb;
    color: #b45309;
}

.mcar-price-section-badge-3 {
    background: #ecfdf5;
    color: #047857;
}

.mcar-price-section-card {
    background: #fff;
    border-radius: 8px;
    padding: 0 8px;
}

.mcar-price-row {
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
}

.mcar-price-row-bordered {
    border-bottom: 1px dashed #e5e7eb;
}

.mcar-price-row-name {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
}

.mcar-price-row-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}

.mcar-price-row-value {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin-top: 4px;
}

.mcar-price-modal-footer {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 16px 20px 28px;
}

.mcar-price-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
}

.mcar-price-total-label {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.mcar-price-total-value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.mcar-price-close-btn {
    width: 100%;
    margin-top: 14px;
    padding: 13px;
    background: #172554;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.faq-page .mcar-bc-nav { padding: 12px 0 0 5px !important; }

/* шапка: единая (тёмная) тема — показываем тёмный логотип */
.logo-light { display: none; }
.logo-dark { display: block; }

/* ===== MODULE car-specs-summary : modules/car-specs-summary/car-specs-summary.css ===== */
/* modules/car-specs-summary/car-specs-summary.css — вынесено из static/pages/car/car.css (однотемная тёмная тема, dark-перекрытия слиты) */
.car-specs-summary{display:flex;flex-direction:column;width:100%;padding:22px 22px;gap:14px;background:#242F3D;border-radius:12px;border:none;position:relative;z-index:100;font-family:var(--font-family);font-size:14px;font-weight:400;box-shadow:0 1px 4px 0px rgba(0,0,0,0.12),0 0px 1px rgba(0,0,0,0.08)}
.specs-summary-row{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,0.06);border-bottom-color:rgba(255,255,255,0.08)}
.specs-summary-row:last-child{padding-bottom:0;border-bottom:none}
.car-specs-summary .specs-label{font-size:14px;font-weight:400;color:#888}
.car-specs-summary .specs-value{font-size:14px;font-weight:400;color:#f1f5f9;text-align:right}

/* ===== MODULE comments : modules/comments/comments.css ===== */
/* comments — виджет отзывов (правая колонка): reviews-widget + бесконечная подгрузка.
   Перенесено из sidebar.css (2026-09-27): модуль comments = свой html+css+js. */
.reviews-widget{width:250px;height:510px;background:radial-gradient(100% 80% at 34% 37%, rgb(39 47 60), #00000000 105%);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;position:relative;border:none;box-shadow:0 1px 4px 0px rgba(0,0,0,0.12),0 0px 1px rgba(0,0,0,0.08);font-family:'Manrope',sans-serif;transition:box-shadow .3s ease,border-color .3s ease,transform .3s ease}
.reviews-widget.highlight{animation:reviewsHighlightDark 1.5s ease-out}
.reviews-widget-title{font-weight:600;font-size:14px;color:#f1f5f9;display:flex;align-items:center;gap:8px;margin:0;letter-spacing:-0.025em;text-transform:uppercase}
.reviews-widget-icon{width:16px;height:16px;color:#fff}
.reviews-widget-count{font-size:10px;font-family:'JetBrains Mono',monospace;color:#b8cce0;padding:2px 6px;border-radius:4px;border:1px solid rgb(44,55,67)}
.reviews-widget-list{flex:1;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:64px}
.reviews-widget-list::-webkit-scrollbar{width:0;background:transparent}
.reviews-widget-item{padding:22px 20px 0 20px;transition:background-color .15s;cursor:default}
.reviews-widget-item::after{content:"";display:block;height:0;border-bottom:1px solid #2c3743;margin-top:20px}
.reviews-widget-item-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.reviews-widget-author{display:flex;align-items:center;gap:12px}
.reviews-widget-avatar{width:32px;height:32px;border-radius:8px;border:none;background:#fefefe;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#c4d0d8;font-family:'JetBrains Mono',monospace;overflow:hidden;flex-shrink:0}
.reviews-widget-avatar img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.reviews-widget-avatar a{display:block;width:100%;height:100%;line-height:0}
.reviews-widget-author-info{display:flex;flex-direction:column}
.reviews-widget-name{font-weight:700;font-size:12px;color:#f1f5f9;line-height:1}
.reviews-widget-stars{display:flex;gap:2px;margin-top:6px}
.reviews-widget-stars svg{width:10px;height:10px}
.reviews-widget-stars svg.star-filled{fill:#d97706;stroke:#d97706;stroke-width:2}
.reviews-widget-stars svg.star-empty{fill:none;stroke:#475569;stroke-width:2}
.reviews-widget-date{font-size:9px;font-family:'JetBrains Mono',monospace;color:#c4d0d8;margin-top:2px}
.reviews-widget-content{margin-top:12px;display:flex;gap:12px}
.reviews-widget-text{font-size:12px;color:#b8c8d8;line-height:1.625;margin:0;flex:1;font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* текстовые ссылки-источники (возвращено 2026-10-02, с текстом «Смотреть …») */
.reviews-widget-source{margin-top:12px;display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.025em;text-transform:uppercase;text-decoration:none;color:#0088cc;opacity:.6;transition:opacity .15s}
.reviews-widget-item:hover .reviews-widget-source{opacity:1}
.reviews-widget-source svg{width:12px;height:12px}
.reviews-widget-source-2gis{color:#86A93C}
.reviews-widget-source-youtube{color:#dc2626}
.reviews-widget-fade{position:absolute;bottom:0;left:0;right:0;height:64px;background:linear-gradient(to top,rgba(36,47,61,0.9),transparent);pointer-events:none;transition:opacity .2s ease}
.comment_modal_wrapper.active{display:flex}
/* → перенесено из header.css через sidebar.css (консолидация 2026-09-09) */
.reviews-widget-header{flex-shrink:0;padding:20px;display:flex;align-items:center;justify-content:space-between;z-index:10;background:#283341}
.reviews-widget-header-right{display:flex;align-items:center;gap:8px}

/* ===== MODULE compare-panel : modules/compare-panel/panel.css ===== */
/* ═══ COMPARE-PANEL.CSS — плавающая панель сравнения (мобильная) ═══
   Перенесено 1:1 из mobile-bundle.css (прод-копия) в отдельный модуль. */
/* === Bottom panel (compare selection) — 1:1 из mobile-bundle.css === */
/* bottom-sheet: выезжает снизу на всю ширину, скруглены ВЕРХНИЕ края
   (стиль выезжающего блока фильтра «Марка») */
/* backdrop как у модалок: затемнение с анимацией */
.cmp-m-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:9998;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  pointer-events:none}
.cmp-m-backdrop.cmp-m-on{opacity:1;visibility:visible}
.cmp-m-panel{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#17212B;border-radius:12px 12px 0 0;padding:0 20px 15px}
.cmp-m-panel{transform:translateY(calc(100% + 40px));overflow-y:auto;
  font-family:var(--font-family, system-ui, sans-serif);
  overflow:visible;touch-action:none}
/* черточка-хэндл по центру сверху: палец кладётся сюда и тянет вниз */
.cmp-m-handle{width:52px;height:7px;border-radius:9999px;background:#7F7F7F;margin:16px auto 0;display:block}
.cmp-m-panel-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 0 6px}
.cmp-m-panel-count{font-size:20px;font-weight:700;color:#fff;margin-bottom:2px} /* mgr54-name с suifenheauto.ru */
.cmp-m-panel-toggle{border:none;background:#fff;color:#151E2A;font-size:12px;font-weight:500;cursor:pointer;
  padding:6px 12px;border-radius:8px;font-family:inherit;-webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.cmp-m-arrow{flex-shrink:0}
.cmp-m-panel-list{padding:0;margin-bottom:15px;background:#283341;border-radius:12px;overflow:hidden}
/* карточки — 1-в-1 модалка сравнения (mobile-compare-modal): блок списка
   #283341 со скруглением, карточки прозрачные, имя+комплектация слева,
   цена справа (владелец 2026-10-01) */
.cmp-m-panel-item{display:flex;align-items:center;gap:10px;padding:8px;margin:0;border-radius:0;
  background:transparent;box-shadow:none}
.cmp-m-panel-thumb{width:48px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#242F3D}
.cmp-m-panel-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cmp-m-panel-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-m-panel-trim{font-size:11px;color:#b8c8d8;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-m-panel-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.cmp-m-panel-price{font-size:13px;font-weight:700;color:#5B9BD5}
.cmp-m-panel-remove{width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:#94a3b8;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  -webkit-tap-highlight-color:transparent}
.cmp-m-panel-remove:active{background:rgba(255,255,255,0.1);color:#f88}
.cmp-m-panel-actions{display:flex;gap:8px;padding:0}
.cmp-m-panel-clear{padding:0 15px;height:40px;border:none;border-radius:12px;background:#ef4444;color:#fff;font-size:13px;
  font-weight:600;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.cmp-m-panel-clear:active{background:#dc2626}
.cmp-m-panel-go{flex:1;padding:0;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#FFB900;color:#1a1a1a;font-size:13px;
  font-weight:600;text-decoration:none;font-family:inherit;-webkit-tap-highlight-color:transparent}
.cmp-m-panel-go:active{background:#e5a800}

/* «Список»: плавное раскрытие (max-height) + вращение стрелки */
.cmp-m-panel-list{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.cmp-m-panel-list.cmp-m-open{overflow-y:auto;-webkit-overflow-scrolling:touch}
.cmp-m-panel-list.cmp-m-open{max-height:60vh}

/* Перейти к сравнению: при одном выбранном - серая и неактивная */
.cmp-m-panel-go.cmp-m-disabled{background:#3D4A5C;color:#8B9CB0;pointer-events:none}
.cmp-m-panel-go.cmp-m-disabled:active{background:#3D4A5C}

/* ═══ Модалка «Контакты» (mgr54): фото оператора слева перед именем/ролью ═══
   Высота аватара = две строки (имя 20px + роль 13px); фото Владимира —
   тот же файл, что в футере (v10-avatar--photo). */
.mgr54-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mgr54-person-text { min-width: 0; }
.mgr54-person .mgr54-name { margin-bottom: 0; }
.mgr54-person .mgr54-role { margin-bottom: 0; }
.mgr54-avatar {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #2C3743;
  color: #5B9BD5;
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mgr54-avatar--photo {
  background-image: url('https://img.suifenheauto.ru/team/vladimir.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent;
}

.mgr54-header { padding-bottom: 16px; }

/* ===== MODULE faq-teaser : modules/faq-teaser/faq-teaser.css ===== */
/* ═══ МОДУЛЬ faq-teaser — FAQ-блок на главной (со старого сайта, 2026-10-02).
   Префикс faq-* общий с инфо-страницей /faq — стили те же, модуль
   самодостаточен для главной. ═══ */
.faq-block{max-width:1230px;margin:0 auto 30px;background:#2B3643;border-radius:8px;overflow:visible;box-shadow:none}
.faq-block-title{font-size:24px;font-weight:700;margin:0;color:#fff;padding:20px;border-radius:8px 8px 0 0;line-height:1.4}
.faq-block-inner{padding:24px;background:#242F3D;border-radius:8px}
.faq-item{margin:0}
.faq-item + .faq-item{border-top:1px solid #2c3743;margin-top:16px;padding-top:16px}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#fff;line-height:1.5;text-align:left;gap:12px}
.faq-q::after{content:'';width:5px;height:9px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5-5 5' stroke='%237f91a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;background-size:contain;transition:transform .25s}
.faq-item.open .faq-q::after{transform:rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(0,1,0,1)}
.faq-item.open .faq-a{max-height:500px;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.faq-a p,.faq-a ul{margin:0;font-size:14px;line-height:1.7;color:#eeeeee}
.faq-a > p:first-child,.faq-a > ul:first-child{margin-top:10px}
.faq-a > p:last-child,.faq-a > ul:last-child{margin-bottom:10px}

.faq-a strong{color:#fff;font-weight:600}
.faq-a ul{margin:0;padding-left:0;list-style:none}
.faq-a ul li{position:relative;padding-left:16px;margin-bottom:6px}
.faq-a ul li:last-child{margin-bottom:0}
.faq-a ul li::before{content:'●';position:absolute;left:0;top:0;color:#4ade80;font-size:8px;line-height:inherit;transform:translateY(6px)}
.faq-a li{margin-bottom:4px;font-size:14px;line-height:1.6;color:#c9d4de}
.faq-a a{color:#5B9BD5;text-decoration:none}
.faq-a a:hover{text-decoration:underline}
/* моб: FAQ растянут от края до края, каждый вопрос — карточка-строка
   1-в-1 с аккордеоном параметров карточки авто (mob-accordion):
   фон #242F3D, разделители 1px #2c3743, заголовок 15px, паддинги те же */
@media (max-width:768px){
  /* заголовок — отдельный блок: без фона, без скруглений, крупным шрифтом */
  .faq-block{margin:0 0 24px;background:transparent;border-radius:0;max-width:none}
  .faq-block-title{background:transparent;border-radius:0;padding:10px 10px 6px;font-size:24px;font-weight:700}
  /* список вопросов — блок со скруглением 12, как «О компании» */
  .faq-block-inner{padding:0;background:#242F3D;border-radius:12px;overflow:hidden}
  .faq-item{background:transparent;border-radius:0;margin:0}
  .faq-item + .faq-item{border-top:1px solid #2c3743;margin-top:0;padding-top:0}
  .faq-item.open .faq-q{background:#2B3643;border-radius:0}
  .faq-q{padding:15px;font-size:14px;font-weight:500;color:#fff}
  .faq-a{padding:0 15px;background:transparent}
  .faq-a p,.faq-a ul,.faq-a li{color:#c9d4de}
  .faq-a ul{padding-left:0;list-style:none}
  
}

/* ===== MODULE heading : modules/heading/heading.css ===== */
/* ============================================================
   HEADING — заголовок страницы: h1 + крошки в обёртке .ph-block.
   Только правки заказчика (2026-09-09), ничего перенесённого:
   ============================================================ */

.ph-block h1{font-size:30px}
.idx-page-title{font-size:inherit}

.city-breadcrumbs{padding:20px 0 24px}

/* стрелки-шевроны крошек (svg stroke=currentColor) */
.city-breadcrumbs .bc-sep{color:#323B48;margin:0 5px}

/* ===== MODULE page-head : modules/page-head/page-head.css ===== */
/* ============================================================
   PAGE-HEAD (mobile) — H1 + хлебные крошки (midx-h1 / city-bc-mobile).
   Один модуль на все мобильные страницы: паддинги/шрифт правим здесь.
   ============================================================ */
.midx-h1 {
  padding: 15px 0 5px 0;
}

.city-bc-mobile {
  font-size: 14px;
  padding: 5px 0 15px 0;
}

/* без переноса текста: не хватает места — горизонтальный скролл;
   клик по крошкам без подчёркивания и подсветки тапа */
.midx-h1 {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.midx-h1::-webkit-scrollbar { display: none; }
.city-bc-mobile.city-breadcrumbs {
  /* старый стиль .city-breadcrumbs — flex-COLUMN с wrap → крошки в 3 строки.
     Ряд + nowrap + горизонтальный скролл: */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.city-bc-mobile.city-breadcrumbs::-webkit-scrollbar { display: none; }
.city-bc-mobile a,
.city-bc-mobile .bc-link {
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.city-bc-mobile a:active,
.city-bc-mobile a:focus { text-decoration: none !important; outline: none; }
.city-bc-mobile .bc-sep { flex: 0 0 auto; }

/* мигание крестика при тапе по «!»-ячейке (фильтр-модал) */
.fs-clear-icon.fm-cross-flash { animation: fmCrossFlash .9s ease-out 2; }
@keyframes fmCrossFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); color: #EAB308; }
  100% { transform: scale(1); }
}

/* родитель H1+крошек на страницах авто/параметров: единые боковые 10px */
.mcar-page-wrap {
  padding: 0 10px;
}

/* ===== MODULE youtube-block : modules/youtube-block/youtube-block.css ===== */
/* modules/youtube-block/youtube-block.css — вынесено из static/pages/car/car.css (однотемная тёмная тема, dark-перекрытия слиты) */
.youtube-block{background:var(--bg-secondary,#242F3D);border-radius:12px;padding:12px 0 0;border:none}
.youtube-block-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 12px}
.youtube-icon{width:20px;height:20px;flex-shrink:0}
.youtube-block-title{font-size:13px;font-weight:600;color:var(--text-primary,#e2e8f0)}
.yt-slideshow{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden;background:#000;cursor:pointer}
.yt-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease;pointer-events:none}
.yt-slide.active{opacity:1;pointer-events:auto}
.youtube-thumb{width:100%;height:100%;object-fit:cover}
.yt-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:24px;pointer-events:none}
.yt-play-btn svg{width:100%;height:100%}
.yt-dots{position:absolute;bottom:0;left:0;right:0;display:flex;z-index:2}
.yt-dot{flex:1;height:6px;background:rgba(255,255,255,.25);transition:background .3s;cursor:pointer}
.yt-dot.active{background:rgba(255,255,255,.9)}
.yt-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000}
.yt-modal.open{display:flex;align-items:center;justify-content:center}
.yt-modal-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85)}
.yt-modal-wrap{position:relative;z-index:1;width:90%;max-width:900px}
.yt-modal-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;line-height:1}
.yt-modal-video{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:8px;overflow:hidden}
.yt-modal-video iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.youtube-channel-link{display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:10px;border:none;border-radius:0 0 12px 12px;cursor:pointer;font-size:11px;font-weight:500;font-family:var(--font-family);color:var(--text-primary,#e2e8f0);background:var(--btn-bg,#2a3544);text-decoration:none;white-space:nowrap;transition:none}
.youtube-channel-link:hover{background:var(--btn-hover,#3a4a5e)}
