/* One car's page — shared by every catalog/<marque>/<model>/ page. */
body{background:var(--color-pure-black)}

.car-head{padding:calc(60px + var(--spacing-56)) 0 var(--spacing-48)}
.car-head .crumbs{margin-bottom:var(--spacing-56)}
.car-titles{text-align:center}
.car-brand{font-size:var(--text-body);color:var(--color-steel);letter-spacing:.02em;margin-bottom:var(--spacing-8)}
.car-title{font-size:clamp(40px,6.4vw,80px);font-weight:var(--w-semibold);letter-spacing:-.036em;
  line-height:1.05;color:var(--color-graphite)}
.car-sub{margin-top:var(--spacing-16);font-size:var(--text-body-lg);color:var(--color-steel)}

/* the catalogue photo, large and centred */
/* never stretched past the original photo: --hero-max is the source width */
.car-hero{max-width:min(var(--hero-max,1200px),1200px);margin:0 auto;padding:0 var(--spacing-40)}
.car-hero img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius-images);background:var(--color-chalk)}

/* characteristics — a quiet grid of label/value cells */
.cp-specs{max-width:1200px;margin:var(--spacing-80) auto 0;padding:0 var(--spacing-40)}
.cp-specs h2,.car-gallery h2{font-size:var(--text-heading-sm);font-weight:var(--w-semibold);
  letter-spacing:-.01em;color:var(--color-graphite);margin-bottom:var(--spacing-24)}
.cp-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);
  border-top:1px solid var(--color-concrete)}
.cp-spec{padding:var(--spacing-24) var(--spacing-24) var(--spacing-24) 0;border-bottom:1px solid var(--color-concrete)}
.cp-k{font-size:var(--text-fine);color:var(--color-fog);margin-bottom:6px}
.cp-v{font-size:var(--text-subheading);line-height:var(--leading-subheading);
  font-weight:var(--w-medium);color:var(--color-graphite)}
.cp-cta{margin-top:var(--spacing-40);padding:var(--spacing-32);border-radius:var(--radius-cards);
  background:var(--color-chalk);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-24)}
.cp-cta-note{max-width:44ch;color:var(--color-steel);font-size:var(--text-body-lg);line-height:var(--leading-body-lg)}
.cp-actions{display:flex;flex-wrap:wrap;gap:10px}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:14px 26px;border-radius:12px;font-size:var(--text-body-lg);font-weight:var(--w-medium);
  background:var(--color-concrete);color:var(--color-graphite);text-decoration:none;
  transition:background-color .2s,transform .2s}
.cp-btn:hover{background:var(--color-ash)}
.cp-btn:active{transform:scale(.98)}
.cp-btn-main{background:var(--color-accent);color:var(--color-accent-ink)}
.cp-btn-main:hover{background:var(--color-accent-hover)}
.cp-btn:focus-visible{outline:2px solid var(--color-graphite);outline-offset:3px}

/* photo album — four in a row, exterior first then interior (file order) */
.car-intl{font-size:.5em;font-weight:var(--w-medium);color:var(--color-fog);letter-spacing:0;white-space:nowrap}
.cp-about{max-width:1200px;margin:var(--spacing-80) auto 0;padding:0 var(--spacing-40)}
.cp-about h2{font-size:var(--text-heading-sm);font-weight:var(--w-semibold);letter-spacing:-.01em;
  color:var(--color-graphite);margin-bottom:var(--spacing-24)}
.cp-about p{max-width:760px;color:var(--color-steel);line-height:1.6;margin-bottom:var(--spacing-16)}
.cp-faq{max-width:1200px;margin:var(--spacing-80) auto 0;padding:0 var(--spacing-40)}
.cp-faq h2{font-size:var(--text-heading-sm);font-weight:var(--w-semibold);letter-spacing:-.01em;
  color:var(--color-graphite);margin-bottom:var(--spacing-16)}
.cp-faq-i{max-width:760px;border-bottom:1px solid var(--color-concrete)}
.cp-faq-i summary{cursor:pointer;list-style:none;padding:var(--spacing-16) 32px var(--spacing-16) 0;position:relative;
  color:var(--color-graphite);font-weight:var(--w-medium)}
.cp-faq-i summary::-webkit-details-marker{display:none}
.cp-faq-i summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--color-fog);font-size:20px}
.cp-faq-i[open] summary::after{content:'–'}
.cp-faq-i p{color:var(--color-steel);line-height:1.6;padding-bottom:var(--spacing-16)}
.car-gallery{max-width:1200px;margin:var(--spacing-112) auto 0;padding:0 var(--spacing-40) var(--spacing-112)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-16)}
.gallery-grid button{all:unset;cursor:zoom-in;display:block;border-radius:var(--radius-images);overflow:hidden;
  background:var(--color-chalk)}
.gallery-grid button:focus-visible{outline:2px solid var(--color-graphite);outline-offset:3px}
.gallery-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery-grid button:hover img{transform:scale(1.035)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(92vw,1600px);max-height:86vh;border-radius:12px;object-fit:contain;
  touch-action:none;               /* the browser must not steal the pinch */
  transform-origin:center center;will-change:transform;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.lb button{all:unset;position:absolute;cursor:pointer;color:#fff;font-size:28px;line-height:1;
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08)}
.lb button:hover{background:rgba(255,255,255,.16)}
.lb .lb-close{top:20px;right:20px}
.lb .lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lb .lb-count{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--color-steel);font-size:var(--text-fine);
  pointer-events:none}   /* a full-width strip over the phone's arrows: taps go through to them */

@media(max-width:900px){
  .cp-grid{--cols:2 !important}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-8)}
}
@media(max-width:760px){
  .car-head{padding:calc(60px + var(--spacing-32)) 0 var(--spacing-32)}
  .car-head .crumbs{margin-bottom:var(--spacing-32)}
  .car-hero,.cp-specs,.cp-about,.cp-faq,.car-gallery{padding-left:var(--spacing-16);padding-right:var(--spacing-16)}
  .cp-specs,.cp-about,.cp-faq{margin-top:var(--spacing-48)}
  .car-gallery{margin-top:var(--spacing-80);padding-bottom:var(--spacing-80)}
  .cp-v{font-size:var(--text-body-lg)}
  .cp-cta{padding:var(--spacing-24)}
  .cp-actions{width:100%}
  .cp-btn{flex:1 1 100%}
  .lb .lb-prev,.lb .lb-next{top:auto;bottom:14px;transform:none}
}

/* ---------- «Сейчас доступны варианты в Telegram» in the CTA panel ---------- */
.cp-cta-text{max-width:40ch}
.cp-cta-title{font-size:var(--text-subheading);line-height:var(--leading-subheading);
  font-weight:var(--w-semibold);color:var(--color-graphite);margin-bottom:6px}
.cp-cta-text .cp-cta-note{max-width:none}
/* «Смотреть варианты» — a real button, the same red one as «Оставить заявку» */
.cp-tg-btn{margin-top:var(--spacing-16)}
@media(max-width:760px){.cp-tg-btn{display:flex;width:100%}}

/* the request form and its dialog: assets/lead.css */