/* Страница модели. Использует токены, кнопки, карточки и сетку из style.css */

/* Первый экран */
.m-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.m-hero-in{position:relative;padding-top:6.5rem;padding-bottom:2.5rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font:300 .75rem/1 var(--font-t);color:rgba(255,255,255,.5)}
.crumbs a:hover{color:#fff}
.crumbs a::after{content:'/';margin-left:.5rem;opacity:.5}
.crumbs span{color:#fff}
/* Текст слева, справа фото и строка наличия: она стоит по правому краю на уровне низа кнопок */
.m-hero-grid{display:grid;grid-template-columns:minmax(0,36.8rem) minmax(0,1fr);gap:.75rem;margin-top:1.5rem}
.m-hero h1 .h1-slash,.m-hero h1 .h1-tag{font-weight:300;font-size:1.25rem;line-height:1;letter-spacing:-.03em;opacity:.5}
.m-hero h1 .h1-slash{margin:0 .25rem 0 .5rem}
/* на компьютере название, слэш и подпись — всегда в одну строку (длинное название может зайти за колонку текста) */
@media (min-width:1024px){.m-hero h1{white-space:nowrap}}
/* подзаголовок первого экрана — того же размера, что подзаголовки экранов (.sec-sub); отступ до цены прежний */
.m-lead{margin-top:.5rem;max-width:30rem;font:300 var(--desc-size)/var(--desc-lh) var(--font-t)}
/* Заголовок и описание остаются под крошками, цена с кнопками прижаты к плашке;
   высота экрана прежняя — снятые отступы ушли в промежуток над ценой */
.m-price{margin-top:5.625rem}
/* цена «от – до» — всегда в одну строку: плотнее межбуквенный интервал, на узких экранах шрифт чуть меньше */
.m-price b{display:block;font:500 1.75rem/2rem var(--font-h);letter-spacing:-.05em;white-space:nowrap}
.m-price span{display:block;margin-top:.25rem;font:400 .625rem/1rem var(--font-t);opacity:.5}
.m-hero .hero-btns{margin-top:.875rem}
.m-hero-side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;min-width:0}
/* Фото не растягивает колонку: висит над строкой наличия и чуть выходит вверх и вправо */
.m-hero-car{position:absolute;right:-4%;bottom:2.75rem;width:108%}
.m-hero-car img{width:100%;height:auto}
.m-hero-car img.full{aspect-ratio:16/9;object-fit:cover;border-radius:8px}
/* Зона нажатия 40px, линия под текстом стоит ровно по низу кнопок */
.stock-line{display:inline-flex;align-items:flex-end;min-height:2.5rem;padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.3);font:400 .75rem/1.25rem var(--font-t);white-space:nowrap}
.stock-line:hover{border-color:#fff}
/* Линии сетки на странице модели вдвое тише, чем на главной: здесь нет видео, которое их приглушает */
.m-hero .grid-lines i,.final .grid-lines i{background:rgba(255,255,255,.025)}

.kpis{display:grid;grid-template-columns:repeat(6,1fr);margin-top:1.5rem;border:1px solid rgba(249,249,249,.08);border-radius:var(--r);
  background:rgba(255,255,255,.04);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.kpi{display:flex;flex-direction:column;gap:.375rem;min-width:0;padding:1rem .65rem;border-right:1px solid var(--line-w)}
.kpi:last-child{border-right:0}
.kpi span{font:300 .75rem/1 var(--font-t);opacity:.6}
.kpi b{font:400 .8125rem/1.2 var(--font-t);white-space:nowrap}

/* Липкая навигация */
.subnav{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(249,249,249,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-d);transform:translateY(calc(-100% - var(--hh, 4.5rem)));transition:transform .3s}
.subnav.on{transform:none}
.subnav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:4rem}
.subnav-links{display:flex;gap:1.75rem;font:400 .75rem/1 var(--font-t);overflow-x:auto;scrollbar-width:none}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{position:relative;padding:.75rem 0;white-space:nowrap;opacity:.6;transition:opacity .2s}
.subnav-links a:hover,.subnav-links a.cur{opacity:1}
.subnav-links a.cur::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--red)}
.subnav-links sup{font-size:.625rem;color:var(--red)}
html{scroll-padding-top:5rem}

/* Общие для секций */
/* Две колонки: «Характеристики» (фото и цвета слева, таблица справа) и «Вопросы» (заголовок слева, ответы справа) */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
/* Обзор: описание под заголовком, слева, как подзаголовки других экранов; переносится на ~65% ширины сетки (на телефоне — во всю) */
.about-sub{max-width:65%;text-wrap:pretty}

/* Обзор */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.75rem;height:32rem;margin-top:var(--head-gap)}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden}
.g-main{grid-row:span 2}
.g-main img{width:100%;height:100%;object-fit:cover}
.gallery figure img{display:block;width:100%;height:100%;object-fit:cover}
.g-cut{display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--soft)}
.gallery .g-cut img{width:100%;height:100%;object-fit:contain}
.g-cut img{object-fit:contain}
.gallery figure>.ph{height:100%}
.ph-hero{aspect-ratio:16/8;height:auto;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.15)}
.ph-dark{position:absolute;left:1.5rem;right:1.5rem;bottom:4.75rem;height:9rem;width:auto;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.15);color:#fff}
.car-ph .ph{border-radius:0;align-items:center;justify-content:center}
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top:3.75rem}
.feat h3{margin-top:1.5rem;font:500 1.25rem/1.5rem var(--font-h);letter-spacing:-.03em}
.feat p{margin-top:.5rem;font:300 1rem/1.25rem var(--font-t)}

/* Версии */
.versions{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:.75rem;margin-top:var(--head-gap)}
/* заголовок версии → описание: 6px, как у всех карточек (--desc-gap) */
.ver-note{margin-top:var(--desc-gap);max-width:26rem;font:300 .875rem/1.25rem var(--font-t)}
.ver-one{max-width:36.8rem}
.ver{display:flex;flex-direction:column;padding:1.5rem;border-radius:var(--r);background:var(--soft);color:var(--ink-2)}
.ver-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ver h3{font:500 1.5rem/1.75rem var(--font-h);letter-spacing:-.03em}
.ver-seats{padding:.4rem .75rem;border-radius:var(--r);background:var(--ink);color:#fff;font:400 .75rem/1.25rem var(--font-t)}
/* Не больше трёх плашек в ряд — карточки версий остаются одинаковыми по ширине текста */
.ver .chips{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start;max-width:none;margin-top:.625rem}
.ver-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:2.5rem}
/* Карточка версии: слева текст, кнопка под описанием (28px, как кнопки везде на сайте) и цена внизу —
   отступ цены от левого и нижнего края одинаковый (1.5rem); справа ~1/3 — фото комплектации */
.ver{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);padding:0;overflow:hidden}
.ver:not(.has-ph){grid-template-columns:1fr}
.ver-main{display:flex;flex-direction:column;min-width:0;padding:1.5rem}
.ver-btn{align-self:flex-start;margin-top:1.75rem}
/* чипы и цена со старой ценой не заходят на фото: переносятся внутри своей колонки */
.ver-main .chips{display:flex;flex-wrap:wrap}
.ver-main .price{display:flex;flex-wrap:wrap;column-gap:.75rem;white-space:nowrap}
.ver-main .price s{margin-left:0}
.ver-main .ver-bottom{display:block;padding-top:2.5rem}
.ver-ph{display:flex;align-items:center;justify-content:center;min-width:0;margin:0;padding:1.5rem 1.5rem 1.5rem 0}
.ver-ph img{display:block;width:100%;height:100%;max-height:14rem;object-fit:contain}
.ver-ph.full{padding:0}
.ver-ph.full img{max-height:none;object-fit:cover}
.ver .price{white-space:nowrap}
.ver .price{padding-top:0}

/* Характеристики */
/* Слева: заголовок, фото и цвета; цвета стоят на уровне последней строки таблицы */
.specs-l{display:flex;flex-direction:column}
.specs-car{flex:1 1 0;min-height:0;display:flex;align-items:center;padding:1.5rem 0}
.specs-car img{width:100%;max-width:30rem;max-height:100%;object-fit:contain;object-position:left center}
.specs-car img.full{border-radius:8px}
.colors-t{margin-top:0;font:500 1.25rem/1.5rem var(--font-h);letter-spacing:-.03em}
.colors{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.color{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem .4rem .4rem;border-radius:var(--r);background:var(--soft);font:400 .75rem/1.25rem var(--font-t)}
.color i{width:1.25rem;height:1.25rem;border-radius:2px;border:1px solid rgba(44,47,54,.12)}
.specs{margin:1.75rem 0 0;align-self:end}
.spec{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:.75rem;padding:1rem 0;border-top:1px solid rgba(44,47,54,.1)}
.spec:last-child{border-bottom:1px solid rgba(44,47,54,.1)}
.spec dt{font:300 .75rem/1.25rem var(--font-t);opacity:.6}
.spec dd{margin:0;font:400 .875rem/1.25rem var(--font-t)}

/* В наличии */
.car-cta{justify-content:space-between;padding:1.5rem;background:var(--ink);color:#fff}
.car-cta p{margin-top:.75rem;max-width:18rem;font:300 1rem/1.25rem var(--font-t);opacity:.8}
.car-cta-b{margin-top:2rem}

/* Покупка — как «Быстрый старт» */
.buy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top:var(--head-gap)}

/* Вопросы */
.faq-btn{margin-top:1.75rem} /* подзаголовок → кнопка: 28px, как везде */
.faq{display:flex;flex-direction:column;gap:.5rem;margin-top:1.75rem}

/* Похожие модели */
.similar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:var(--head-gap)}
.sim{height:23rem}
.sim .brand-img:not(.full){left:50%;bottom:4.75rem;height:10rem}
.sim p{max-width:17rem;margin-top:.25rem}

/* Финальная заявка */
#s-final{padding-bottom:5rem}
.final{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;padding:3.5rem 2.5rem;border-radius:8px;overflow:hidden;
  background:linear-gradient(127deg,#272A30 0.7%,#23334B 90.6%);color:#fff}
.final .grid-lines{padding:0 2.5rem}
.final-text{position:relative}
.eyebrow-w{color:#fff}
.final h2{color:#fff}
.final-text p:not(.eyebrow){margin-top:1rem;max-width:26rem;font:300 1rem/1.25rem var(--font-t);opacity:.8}
.final-text .btn{margin-top:2rem}

.lead-form{position:relative;display:flex;flex-direction:column;gap:1rem;max-width:26rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field span{font:300 .75rem/1 var(--font-t);opacity:.7}
.field input{height:2.5625rem;padding:0 1rem;border-radius:var(--r);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);
  color:inherit;font:400 .875rem/1 var(--font-t);outline:none;transition:border-color .2s}
.field input::placeholder{color:currentColor;opacity:.4}
.field input:focus{border-color:#fff}
.field.err input{border-color:#E5484D}
.check{display:flex;gap:.625rem;align-items:flex-start;font:300 .75rem/1rem var(--font-t);cursor:pointer}
.check input{flex:none;width:1rem;height:1rem;margin:0;accent-color:var(--red)}
.check a{text-decoration:underline;text-underline-offset:2px}
.check.err span{color:#E5484D}
.lead-form .btn{align-self:flex-start}
.form-micro{font:300 .625rem/1rem var(--font-t);opacity:.6}
.form-msg{font:400 .75rem/1.1rem var(--font-t)}
.form-msg.bad{color:#E5484D}
.form-msg.ok{padding:.75rem 1rem;border-radius:var(--r);background:rgba(255,255,255,.08)}
.lead-form.sent .field,.lead-form.sent .check,.lead-form.sent .btn,.lead-form.sent .form-micro{display:none}

/* Поп-ап */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(20,22,26,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.modal-box{position:relative;width:100%;max-width:26rem;padding:2rem;border-radius:8px;background:var(--bg);color:var(--ink)}
.modal-x{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem;border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.modal-car{display:flex;align-items:center;gap:1rem;padding:.75rem;border-radius:var(--r);background:var(--soft)}
.modal-car-ph{flex:none;width:5.5rem;height:3rem}
.modal-car-ph:empty{display:none}
.modal-car img{width:5.5rem;height:3rem;object-fit:contain}
.modal-car b{display:block;font:500 1rem/1.25rem var(--font-h)}
.modal-car span{font:400 .75rem/1rem var(--font-t);opacity:.6}
.modal-box h3{margin-top:1.5rem;font:500 1.5rem/1.75rem var(--font-h);letter-spacing:-.03em}
.modal-d{margin-top:.75rem;font:300 .875rem/1.25rem var(--font-t)}
.modal-box .lead-form{margin-top:1.5rem;max-width:none}
.modal-box .field input{border-color:rgba(44,47,54,.2);background:#fff}
.modal-box .field input:focus{border-color:var(--ink)}
.modal-box .form-msg.ok{background:var(--soft)}

/* Мобильная панель */
.mbar{display:none}

/* Узкий ноутбук: характеристики в 2 ряда по 3, чтобы значения не переносились */
@media (max-width:1199px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi:nth-child(3n){border-right:0}
  .kpi:nth-child(-n+3){border-bottom:1px solid var(--line-w)}
}
/* Планшет */
@media (max-width:1023px){
  .m-hero-grid{grid-template-columns:1fr}
  .m-price{margin-top:2rem}
  .m-hero-side{align-items:flex-start;gap:1.25rem}
  .m-hero-car{position:relative;right:auto;bottom:auto;width:100%;max-width:40rem;margin:1rem auto 0}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi:nth-child(3){border-right:0}
  .kpi:nth-child(-n+3){border-bottom:1px solid var(--line-w)}
  .features,.buy{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:3rem}
  .similar{grid-template-columns:1fr 1fr}
  .versions{grid-template-columns:repeat(min(var(--n,2),2),minmax(0,1fr))}
  .final{grid-template-columns:1fr;gap:2.5rem}
}
/* Мобайл */
@media (max-width:640px){
  .m-price b{font-size:min(1.75rem,7.2vw)}
  .m-hero-in{padding-top:5.5rem;padding-bottom:1rem}
  .m-hero-grid{margin-top:2rem}
  .m-hero h1 .h1-slash{display:none}
  .m-hero h1 .h1-tag{display:block;margin-top:.5rem;font-size:1rem}
  .m-hero .hero-btns{margin-bottom:0}
  .kpis{grid-template-columns:repeat(2,1fr);margin-top:1.5rem}
  .kpi{padding:.9rem .75rem;border-right:1px solid var(--line-w)!important;border-bottom:1px solid var(--line-w)!important}
  .kpi:nth-child(2n){border-right:0!important}
  .kpi:nth-last-child(-n+2){border-bottom:0!important}
  .subnav-btn,.subnav-in>.btn{display:none}
  .subnav-in{height:3.25rem}
  .split,.similar{grid-template-columns:1fr}
  .versions{grid-template-columns:1fr}
  .split{gap:0}
  /* «Характеристики» в одну колонку: фото машины — после подзаголовка и до цветов, по своей высоте */
  .specs-car{flex:none;padding:1.5rem 0 .5rem}
  .specs-car img{max-height:none;height:auto;max-width:30rem}
  .about-sub{max-width:none}
  .feat h3{margin-top:.75rem}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .g-main{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .g-ph{aspect-ratio:1}
  .features,.buy{grid-template-columns:1fr;row-gap:2.5rem}
  .ver .chips{display:flex;flex-wrap:wrap}
  .ver-bottom{flex-direction:column;align-items:flex-start}
  .ver-bottom .btn{width:100%}
  /* телефон: фото комплектации — под карточкой во всю её ширину */
  .ver{grid-template-columns:1fr}
  .ver-btn{align-self:stretch}
  /* телефон: цена — сразу после описания, кнопка — под ценой (28px, как кнопки везде) */
  .ver-main .ver-bottom{order:1;margin-top:1.25rem;padding-top:0}
  .ver-btn{order:2}
  .ver-ph{padding:0 1.5rem 1.5rem}
  .ver-ph img{height:auto;max-height:none}
  .ver-ph.full{padding:0}
  .ver-ph.full img{aspect-ratio:16/9}
  .final{padding:2.5rem 1rem}
  .final .grid-lines{padding:0 1rem}
  .lead-form .btn{align-self:stretch}
  .footer{padding-bottom:6rem}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1.6fr;gap:.75rem;padding:.75rem 1rem;
    background:rgba(249,249,249,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line-d)}
}

/* Линии скорости — правый нижний угол тёмных блоков страницы модели */

/* Экран на серой подложке (как «Выгодные предложения» на главной): 80px до края и от края */
.band{margin-top:5rem;padding:5rem 0;background:#F1F1F1}
.band + .sec{padding-top:5rem}
@media (max-width:640px){.band{margin-top:4rem;padding:4rem 0}.band + .sec{padding-top:4rem}}
.band .fq{background:#E7E7E7}

/* Первый экран с фотографией на весь фон (для фото с фоном, не вырезанных) */
.m-hero.has-bg::before{content:'';position:absolute;inset:0;background:var(--hero-bg) center / cover no-repeat}
.m-hero.has-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(37,40,46,.94) 0%,rgba(37,40,46,.78) 38%,rgba(37,40,46,.2) 70%,rgba(37,40,46,.05) 100%),linear-gradient(0deg,rgba(37,40,46,.85) 0%,rgba(37,40,46,0) 35%)}
.m-hero.has-bg > *{position:relative;z-index:1}
.m-hero.has-bg .m-hero-car{visibility:hidden}
.m-hero.has-bg .grid-lines{display:none}
@media (max-width:1023px){.m-hero.has-bg::after{background:linear-gradient(0deg,rgba(37,40,46,.95) 0%,rgba(37,40,46,.7) 60%,rgba(37,40,46,.35) 100%)}.m-hero.has-bg .m-hero-car{display:none}}
/* версии на серой подложке */
.band .ver{background:#E7E7E7}