/* car.css — КОНТЕНТ страницы-карточки авто (Фаза 3). Хедер/футер/cookie — РОДНЫЕ с главной
   (страница строится клоном index-оболочки), поэтому здесь стилизуем ТОЛЬКО контент внутри <main>.
   Всё скоупим под .cr-content / .cr-band / .cr-sim, чтобы не задеть Tilda-хедер/футер.
   Токены берём из дизайн-системы сайта. */
:root{
  --cr-accent:#cefe46; --cr-accent-dark:#bdf02c; --cr-ink:#1d1d1d; --cr-black:#0e100f; --cr-white:#fff;
  --cr-muted:#f2f4f5; --cr-line:#e9ebec; --cr-grey:#6f7570; --cr-grey2:#a7a9ac; --cr-wa:#25d366;
  --cr-r-lg:24px; --cr-r-md:16px; --cr-r-sm:12px; --cr-maxw:1800px; --cr-gutter:clamp(20px,3.6vw,80px);
  --cr-shadow:0 14px 50px rgba(14,16,15,.10); --cr-shadow-sm:0 4px 18px rgba(14,16,15,.06);
}
/* контейнер контента = как .av-wrap на главной (полная ширина сайта) */
.cr-content{width:100%;max-width:var(--cr-maxw);margin:0 auto;padding:0 var(--cr-gutter);
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--cr-ink);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.cr-content,.cr-content *,.cr-content *::before,.cr-content *::after{box-sizing:border-box}
.cr-content img{max-width:100%;display:block}
.cr-content a{color:inherit;text-decoration:none}

/* плавающий хедер (как на главной) имеет нулевую высоту в потоке → даём контенту отступ сверху,
   чтобы он не наезжал под бар (на главной этот зазор «съедает» высокий hero). car.css грузится только
   на страницах-карточках, поэтому таргет main безопасен. */
main{padding-top:62px;overflow-x:clip}   /* clip — страховка от горизонтального скролла, без side-effect на sticky */
@media(max-width:640px){ main{padding-top:70px} }

/* Футер: убрать B2B-полосу «Нужно авто для компании» ТОЛЬКО на карточках (на главной остаётся).
   Футер — единый Tilda-артборд, поэтому прячем именно её группы (полоса+кнопка и заголовок+подзаголовок). */
#rec2142351541 .tn-group[data-group-id="1775746785857000047"],
#rec2142351541 .tn-group[data-group-id="1775746737968000045"]{display:none!important}
/* …и подтягиваем футер-колонки + копирайт вверх и ужимаем белую карточку, чтобы закрыть дыру (десктоп). */
@media(min-width:960px){
  #rec2142351541 .tn-group[data-group-id="1775747645717000075"],
  #rec2142351541 .tn-group[data-group-id="1775747964695000082"]{transform:translateY(-196px)!important}
  #rec2142351541 .tn-elem[data-elem-id="1775748002175"],
  #rec2142351541 .tn-elem[data-elem-id="1775748002175"] .tn-atom{height:286px!important;min-height:286px!important}
  #rec2142351541 .t396__artboard,
  #rec2142351541 .t396__filter,
  #rec2142351541 .t396__carrier{height:728px!important;min-height:728px!important;max-height:728px!important}
}
/* МОБАЙЛ — белый отступ B2B-зоны: ПОКА НЕ ТРОГАЕМ (revert). Грабли: белая карточка 002175 — это ЧИТАЕМЫЙ
   фон футера (текст контактов тёмный); спрятать → текст «тёмное на тёмном», нечитаемо. А подтянуть контакты
   вверх/кропнуть артборд нельзя надёжно: мобильный Tilda-футер = десятки взаимозависимых absolute-групп с
   РАЗНЫМ масштабированием по брейкпоинтам (375/640), любой сдвиг ломает раскладку на части ширин (проверено).
   Правильное решение — РЕВОРК футера в чистый компонент (Фаза 2, общий WP-партиал), тогда B2B убирается одной
   правкой и на главной, и на карточках. Десктоп-сбор (выше, px) — заказчик принял на своей ширине. */

/* breadcrumb */
.cr-bc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px;color:var(--cr-grey);
  padding:22px 0 8px}
/* !important — перебить глобальный tilda-цвет ссылок (#ff8562 оранжевый) */
.cr-bc a{color:var(--cr-grey)!important}
.cr-bc a:hover{color:var(--cr-ink)!important}
.cr-bc span[aria-current]{color:var(--cr-ink);font-weight:500}
.cr-bc>span{color:var(--cr-grey2)}

/* ---------- hero: галерея (главное фото + миниатюры СНИЗУ) + инфо-панель ---------- */
/* колонка галереи = auto (по ширине самой галереи) → нет пустоты между фото и инфо-панелью */
.cr-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(36px,3.4vw,60px);
  align-items:start;padding:14px 0 48px}
.cr-gallery{display:flex;flex-direction:column;gap:12px;width:clamp(420px,50vw,728px)}  /* главное фото +30% (560→728) */
.cr-gallery__main{aspect-ratio:4/3;border-radius:var(--cr-r-lg);overflow:hidden;
  background:var(--cr-muted);box-shadow:var(--cr-shadow)}
.cr-gallery__main img{width:100%;height:100%;object-fit:cover}
.cr-gallery__thumbs{display:flex;flex-direction:row;gap:12px}              /* миниатюры в ряд под фото */
.cr-thumb{flex:0 0 100px;aspect-ratio:4/3;border:2px solid transparent;border-radius:var(--cr-r-sm);  /* миниатюры мелкие (не растут вместе с главным фото) */
  overflow:hidden;padding:0;cursor:pointer;background:var(--cr-muted);transition:border-color .15s}
.cr-thumb img{width:100%;height:100%;object-fit:cover}
.cr-thumb.is-active{border-color:var(--cr-ink)}
.cr-thumb:hover{border-color:var(--cr-grey2)}
.cr-gallery--empty{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f3f5f6,#e9edee);border-radius:var(--cr-r-lg);width:100%}
.cr-gallery--empty .cr-silh{width:58%;height:auto}

.cr-info__badges{display:flex;gap:8px;margin-bottom:16px}
.cr-badge{display:inline-block;background:var(--cr-muted);color:var(--cr-ink);font-weight:600;font-size:14px;
  padding:7px 15px;border-radius:100px}
.cr-badge--hit{background:var(--cr-accent);color:var(--cr-black)}
.cr-info__name{font-size:clamp(30px,3.2vw,46px);line-height:1.06;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.cr-info__rate{display:flex;align-items:center;gap:6px;font-size:17px;margin-bottom:20px}
.cr-info__rate .s{color:var(--cr-accent-dark)}
.cr-info__rate b{font-weight:700}
.cr-info__rev{color:var(--cr-grey)}
.cr-info__price{display:flex;align-items:baseline;gap:10px;margin-bottom:24px}
.cr-info__price b{font-size:clamp(30px,3vw,40px);font-weight:800;letter-spacing:-.02em}
.cr-info__price span{color:var(--cr-grey);font-size:17px}
.cr-info__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.cr-chip{display:inline-flex;align-items:center;gap:7px;background:var(--cr-muted);border-radius:100px;
  padding:10px 17px;font-size:15px;font-weight:500}
.cr-chip svg{width:17px;height:17px;fill:none;stroke:var(--cr-ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cr-info__note{color:var(--cr-grey);font-size:15px;margin:14px 0 0}
/* «что входит в аренду» — перенесено в инфо-панель, между чипами и кнопкой */
.cr-info__incl{margin:0 0 26px}
.cr-info__incl-h{display:block;font-size:15px;font-weight:600;color:var(--cr-grey);margin-bottom:20px}
/* колонки по контенту (justify start) → правый столбец вплотную к левому, без большой пустоты на широких экранах;
   minmax(0,max-content) даёт тексту переноситься на узких инфо-панелях (нет overflow). */
.cr-info__incl-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content));justify-content:start;gap:12px clamp(20px,1.6vw,32px)}
.cr-info__incl-list li{display:flex;align-items:center;gap:10px;font-size:15px}
.cr-info__incl-list li::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--cr-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='13' height='13' fill='none' stroke='%230e100f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}

/* CTA — переиспользуем .seo-art__cta (как «по всему сайту»). Тут только override цвета текста,
   т.к. белый цвет в arenda.css скоуплен под section#article. car.css грузится последним. */
main a.seo-art__cta,main a.seo-art__cta .seo-art__cta-txt{color:#fff!important}
.cr-info a.seo-art__cta{margin-top:0}

/* ---------- секции ---------- */
.cr-section{padding:38px 0;border-top:1px solid var(--cr-line)}
.cr-h2{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.01em;margin:0 0 20px}
.cr-eyebrow{display:inline-block;font-size:16px;font-weight:500;color:var(--cr-grey);margin-bottom:12px}
.cr-about__lead{font-size:clamp(18px,1.5vw,21px);margin:0 0 14px;max-width:880px}
.cr-about__fit{color:var(--cr-grey);margin:0;max-width:880px;font-size:18px}

/* характеристики */
.cr-specs{width:100%;border-collapse:collapse;max-width:760px}
.cr-specs th,.cr-specs td{text-align:left;padding:15px 0;border-bottom:1px solid var(--cr-line);font-size:17px}
.cr-specs th{color:var(--cr-grey);font-weight:500;width:46%}
.cr-specs td{font-weight:600}

/* что входит */
/* ---------- похожие авто — слайдер (заголовок сверху; точки + стрелки СНИЗУ) ---------- */
.cr-sim{padding-top:48px}
.cr-sim__viewport{overflow:hidden}
.cr-sim__controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.cr-sim__arrows{display:flex;gap:10px}
.cr-sim__arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--cr-line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex:0 0 auto}
.cr-sim__arrow:hover{background:var(--cr-ink);border-color:var(--cr-ink)}
.cr-sim__arrow:hover svg{stroke:#fff}
.cr-sim__arrow svg{width:20px;height:20px;fill:none;stroke:var(--cr-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-sim__arrow[disabled]{opacity:.35;pointer-events:none}
/* 4 карточки в ряд (десктоп — все влезают, без стрелок); слайдер активируется на узких */
.cr-sim__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:4px}
.cr-sim__track::-webkit-scrollbar{display:none}
.cr-sim__card{scroll-snap-align:start;background:#fff;border:1px solid var(--cr-line);border-radius:var(--cr-r-md);
  overflow:hidden;transition:box-shadow .15s,transform .12s;display:block;color:var(--cr-ink)!important}
.cr-sim__card:hover{box-shadow:var(--cr-shadow);transform:translateY(-2px)}
.cr-sim__media{aspect-ratio:4/3;background:var(--cr-muted);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cr-sim__media img{width:100%;height:100%;object-fit:cover}
.cr-sim__media .cr-silh{width:58%}
.cr-sim__row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 16px 0}
.cr-sim__name{font-weight:700;font-size:17px}
.cr-sim__rate{color:var(--cr-grey);font-size:14px;white-space:nowrap}
.cr-sim__price{padding:6px 16px 16px}
.cr-sim__price b{font-size:19px;font-weight:800}
.cr-sim__price span{color:var(--cr-grey);font-size:14px;margin-left:4px}
.cr-sim__dots{display:flex;gap:9px}
.cr-sim__dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:var(--cr-line);cursor:pointer;transition:.15s}
.cr-sim__dot.is-active{background:var(--cr-ink);width:26px;border-radius:5px}

/* ============ адаптив ============ */
@media(max-width:960px){
  .cr-hero{grid-template-columns:1fr;gap:26px}
  .cr-gallery{width:100%}                     /* на мобайле фото на всю ширину */
  .cr-sim__track{grid-auto-columns:calc((100% - 20px)/2)}
}
@media(max-width:640px){
  .cr-content{font-size:16px}
  /* CTA — как ВСЕ кнопки сайта: компактная пилюля, НЕ на всю ширину (см. правило в CLAUDE.md) */
  .cr-info a.seo-art__cta{width:auto}
  .cr-info__incl-list{grid-template-columns:1fr}
  .cr-sim__track{grid-auto-columns:100%}     /* ровно 1 карточка на экран — соседнюю не видно */
  .cr-sim__controls{justify-content:space-between}  /* точки слева, стрелки справа — под карточкой */
}