/* poisk-avto-model.css - доп. стили для страниц марка/модель */

/* Ссылки внутри страницы: фиксируем цвет, чтобы не было фиолетовых :visited */
.page-poisk-avto a{color:#9ec7ff;text-decoration:none}
.page-poisk-avto a:visited{color:#9ec7ff}
.page-poisk-avto a:hover{color:#cfe3ff}

/* Inline-ссылки в подсказках */
.page-poisk-avto .tp-inline-links a{border-bottom:1px dashed rgba(255,255,255,.35);padding-bottom:1px}
.page-poisk-avto .tp-inline-links a:hover{border-bottom-color:rgba(255,255,255,.7)}

/* Хлебные крошки */
.page-poisk-avto .tp-breadcrumbs{opacity:.85;font-size:14px;line-height:1.3;margin-top:var(--crumbs-mt);margin-bottom:var(--crumbs-mb)}
.page-poisk-avto .tp-breadcrumbs a{opacity:.9}

/* Карточки «Другие модели» (если используем tp-model-card из poisk-avto.css, это просто страховка) */
.page-poisk-avto .tp-model-card{text-decoration:none}

/* Универсальная карточка-ссылка, если где-то останется старый класс */
.page-poisk-avto .need-card{
  display:block;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.page-poisk-avto .need-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20)}
.page-poisk-avto .need-card__title{font-weight:700;margin-bottom:6px}
.page-poisk-avto .need-card__text{opacity:.85;font-size:13px;line-height:1.35}

/* Чуть мягче подчёркивание у заголовков-ссылок в блоках */
.page-poisk-avto .advant-card__title a{border-bottom:1px dashed rgba(255,255,255,.35)}
.page-poisk-avto .advant-card__title a:hover{border-bottom-color:rgba(255,255,255,.7)}


/* ==============================
   TP POISK-AUTO MODEL - hero image & typography align
   ============================== */

.page-poisk-avto .main__inner{ align-items: center; }

/* HERO columns ratio (text vs image).
   Use flex:1 to avoid '25%' effect from nested width constraints in main.css */
@media (min-width: 992px){
  .page-poisk-avto .main__inner > .main__l,
  .page-poisk-avto .main__inner > .main__r{
    flex: 1 1 0;
    max-width: none;
  }
}

.page-poisk-avto .main__car img{
  width: 100%;
  max-width: var(--car-max);
  height: auto;
  transform: translate(var(--car-x), var(--car-y)) scale(var(--car-scale));
  transform-origin: center right;
  will-change: transform;
}


/* prevent hero media from overlapping header/menu */
.page-poisk-avto .main__r{ margin-top: 10px; }
@media (max-width: 991px){
  .page-poisk-avto .main__r{ margin-top: 22px; }
  .page-poisk-avto .main__car img{
  width: 100%;
  max-width: var(--car-max);
  height: auto;
  transform: translate(var(--car-x), var(--car-y)) scale(var(--car-scale));
  transform-origin: center right;
  will-change: transform;
}

}

/* Primary CTA button like main */
.page-poisk-avto .main__btn{
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==============================
   TP POISK-AUTO MODEL - layout polish (no new css files)
   Targets classes from model.php: tp-section, tp-h2, tp-text, tp-list, tp-cards, tp-card, tp-faq, tp-cta-row
   ============================== */

/* Section rhythm */
.page-poisk-avto .tp-section{
  padding: 28px 0;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-section{ padding: 22px 0; }
}

/* Headings */
.page-poisk-avto .tp-h2{
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: 0.2px;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-h2{ font-size: 20px; margin-bottom: 12px; }
}

/* Body text */
.page-poisk-avto .tp-text{
  max-width: 920px;
}
.page-poisk-avto .tp-text p{
  margin: 0 0 12px;
  opacity: .9;
  font-size: 15px;
  line-height: 1.55;
}
.page-poisk-avto .tp-text p:last-child{ margin-bottom: 0; }
@media (max-width: 991px){
  .page-poisk-avto .tp-text p{ font-size: 14px; line-height: 1.6; }
}

/* Lists */
.page-poisk-avto .tp-list{
  max-width: 920px;
  margin: 10px 0 0;
  padding-left: 18px;
}
.page-poisk-avto .tp-list li{
  margin: 0 0 10px;
  opacity: .92;
  font-size: 15px;
  line-height: 1.5;
}
.page-poisk-avto ol.tp-list{ padding-left: 22px; }
.page-poisk-avto .tp-list li:last-child{ margin-bottom: 0; }
@media (max-width: 991px){
  .page-poisk-avto .tp-list li{ font-size: 14px; }
}

/* Cards */
.page-poisk-avto .tp-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-cards{
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
  }
}
.page-poisk-avto .tp-card{
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.page-poisk-avto .tp-card__title{
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.35;
}
.page-poisk-avto .tp-card__text{
  opacity: .9;
  font-size: 14px;
  line-height: 1.5;
}
.page-poisk-avto .tp-card__more{ margin-top: 10px; }

/* CTA row */
.page-poisk-avto .tp-cta-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.page-poisk-avto .tp-cta-note-inline,
.page-poisk-avto .tp-cta-note{
  opacity: .82;
  font-size: 13px;
  line-height: 1.35;
}
.page-poisk-avto .tp-link{
  border-bottom: 1px dashed rgba(255,255,255,.35);
  padding-bottom: 1px;
}
.page-poisk-avto .tp-link:hover{ border-bottom-color: rgba(255,255,255,.7); }

/* FAQ */
.page-poisk-avto .tp-faq{
  max-width: 920px;
  margin-top: 14px;
}
.page-poisk-avto .tp-faq__item{
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.page-poisk-avto .tp-faq__q{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  outline: none;
}
.page-poisk-avto .tp-faq__q::-webkit-details-marker{ display: none; }
.page-poisk-avto .tp-faq__a{
  margin-top: 10px;
  opacity: .9;
  font-size: 14px;
  line-height: 1.55;
}

/* Other models pills */
.page-poisk-avto .tp-models-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-models-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.page-poisk-avto .tp-model-pill{
  display: block;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.page-poisk-avto .tp-model-pill:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.page-poisk-avto .tp-model-pill__en{
  display: block;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.35;
}
.page-poisk-avto .tp-model-pill__ru{
  display: block;
  margin-top: 4px;
  opacity: .8;
  font-size: 13px;
  line-height: 1.35;
}

/* Hero H1 extra bits (if present) */
.page-poisk-avto .tp-h1-ru{ opacity: .85; font-weight: 700; }
.page-poisk-avto .tp-h1-sub{ display: inline-block; opacity: .85; font-weight: 700; margin-left: 6px; }

/* ==============================
   TP POISK-AUTO MODEL - fixes after screenshots
   ============================== */

/* 1) CTA buttons: make them look like real primary actions on model pages */
.page-poisk-avto .main__btn{
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.page-poisk-avto .tp-section{
  padding: 22px 0;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-section{ padding: 18px 0; }
}

/* 4) CTA rows tighter */
.page-poisk-avto .tp-cta-row{
  margin-top: 12px;
  gap: 12px;
}
.page-poisk-avto .tp-cta-note-inline{
  max-width: 640px;
}

/* 5) Checklists block: keep list close to CTA */
.page-poisk-avto .tp-list{
  margin-top: 8px;
}

/* ==============================
   HERO alignment to main page (universal for all models)
   Controls:
   - --car-scale, --car-max, --car-x, --car-y
   - --cta-x, --cta-y, --cta-scale
   - --crumbs-mt, --crumbs-mb
   ============================== */

.page-poisk-avto{
  /* Controls for model hero (works for all models) */
  --car-scale: 1.28;   /* size of car image */
  --car-x: 20px;      /* move car left/right */
  --car-y: -90px;       /* move car up/down */
  --car-max: 760px;    /* max-width of car image */

  --crumbs-mt: 28px;   /* distance from header to breadcrumbs */
  --crumbs-mb: 10px;   /* distance from breadcrumbs to H1 */

  --cta-x: 0px;        /* move CTA button left/right */
  --cta-y: 10px;        /* move CTA button up/down */
  --cta-scale: 1.1;      /* scale CTA button */

  --h1-sub-size: 20px; /* size of the first phrase under H1 */
  --h1-lead-size: 16px; /* size of the second text block */
  --h1-sub-mt: 14px;    /* H1 -> subtitle spacing */
  --h1-sub-mb: 12px;    /* subtitle -> lead spacing */
}


/* Breadcrumbs spacing and style */
.page-poisk-avto .tp-breadcrumbs,
.page-poisk-avto .breadcrumbs{
  margin-top: var(--crumbs-mt);
  margin-bottom: var(--crumbs-mb);
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255,255,255,.8);
}
.page-poisk-avto .tp-breadcrumbs a,
.page-poisk-avto .breadcrumbs a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.page-poisk-avto .tp-breadcrumbs a:hover,
.page-poisk-avto .breadcrumbs a:hover{
  border-bottom-color: rgba(255,255,255,.45);
}

/* H1 like main page (.h1): uppercase + pure white */
.page-poisk-avto .main__title{
  font-family: "Montserrat";
  font-size: 40px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.page-poisk-avto .main__title .tp-h1-ru,
.page-poisk-avto .main__title .tp-h1-sub{
  color: #fff;
  opacity: 1;
}



/* Subtitle under H1 like main page */
.page-poisk-avto .main__text{ color: rgba(255,255,255,.9); }
.page-poisk-avto .main__text p{ margin: 0; }

/* First phrase (subtitle) - larger, not bold. Controlled separately */
.page-poisk-avto .main__text--subtitle{ margin-top: var(--h1-sub-mt, 16px); }
.page-poisk-avto .main__text--subtitle p{ font-size: var(--h1-sub-size, 20px); line-height: 1.45; }
.page-poisk-avto .main__text--subtitle{ margin-bottom: var(--h1-sub-mb, 12px); }

/* Second block (lead/description) - normal size. Controlled separately */
.page-poisk-avto .main__text--lead p{ font-size: var(--h1-lead-size, 16px); line-height: 1.5; opacity: .92; }
.page-poisk-avto .main__text--lead{ margin-bottom: var(--h1-lead-mb, 18px); }


/* CTA button: make sure it's the same blue + white text */
.page-poisk-avto .main__btn{
  transform: translate(var(--cta-x), var(--cta-y)) scale(var(--cta-scale));
  transform-origin: left top;
}
.page-poisk-avto .main__btn .btn{
  color: #fff !important;
}

/* If template still uses legacy .btn-blue, force it to look like main */
.page-poisk-avto .btn.btn-blue{
  background-color: #1836be;
  border-color: #1836be;
  color: #fff !important;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
}

/* Car size & position controls */
.page-poisk-avto .main__car{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 360px;
}

.page-poisk-avto .main__car img{
  width: 100%;
  max-width: var(--car-max);
  height: auto;
  transform: translate(var(--car-x), var(--car-y)) scale(var(--car-scale));
  transform-origin: center right;
  will-change: transform;
}


/* Responsive tweaks similar to main */
@media (max-width: 768px){
  .page-poisk-avto .main__title{ font-size: 26px; }
  .page-poisk-avto{
    --car-scale: 1.38;
    --car-x: -60px;
    --car-y: -6px;
    --car-max: 760px;
  }
}



/* ==============================
   TP MODEL - premium polish below HERO
   (Hero and App QR block are NOT touched)
   ============================== */

.page-poisk-avto{
  --tp-section-pad: 32px;
  --tp-section-pad-m: 24px;

  --tp-panel-bg: rgba(255,255,255,.06);
  --tp-panel-bg-2: rgba(255,255,255,.08);
  --tp-panel-brd: rgba(255,255,255,.10);
  --tp-panel-brd-h: rgba(255,255,255,.18);
  --tp-panel-shadow: 0 16px 42px rgba(0,0,0,.25);

  --tp-radius: 18px;
  --tp-pad: 18px;
  --tp-pad-m: 14px;

  --tp-h2: 26px;
  --tp-h2-m: 22px;

  --tp-text: 15px;
  --tp-text-m: 14px;
}

/* 1) Section rhythm (only below hero) */
.page-poisk-avto .tp-section:not(.main){
  padding: var(--tp-section-pad) 0;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-section:not(.main){
    padding: var(--tp-section-pad-m) 0;
  }
}

/* Special: CTA only section (the single button block) */
.page-poisk-avto .tp-section--cta-only{
  padding: 16px 0 !important;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-section--cta-only{
    padding: 12px 0 !important;
  }
}

/* 2) Headings */
.page-poisk-avto .tp-h2{
  font-weight: 800;
  font-size: var(--tp-h2);
  line-height: 1.22;
  margin: 0 0 14px;
  letter-spacing: .2px;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-h2{
    font-size: var(--tp-h2-m);
    margin-bottom: 12px;
  }
}

/* 3) Body text (keep readable on dark) */
.page-poisk-avto .tp-text{
  max-width: 980px;
}
.page-poisk-avto .tp-text p{
  margin: 0 0 12px;
  opacity: .92;
  font-size: var(--tp-text);
  line-height: 1.65;
}
.page-poisk-avto .tp-text p:last-child{ margin-bottom: 0; }
@media (max-width: 991px){
  .page-poisk-avto .tp-text p{
    font-size: var(--tp-text-m);
    line-height: 1.7;
  }
}

/* 4) Premium panels for long text and lists (no text changes) */
.page-poisk-avto .tp-text{
  background: var(--tp-panel-bg);
  border: 1px solid var(--tp-panel-brd);
  border-radius: var(--tp-radius);
  padding: var(--tp-pad);
  box-shadow: var(--tp-panel-shadow);
}
@media (max-width: 991px){
  .page-poisk-avto .tp-text{
    padding: var(--tp-pad-m);
  }
}

/* Lists as panels */
.page-poisk-avto .tp-list{
  max-width: 980px;
  margin: 12px 0 0;
  background: var(--tp-panel-bg);
  border: 1px solid var(--tp-panel-brd);
  border-radius: var(--tp-radius);
  padding: 16px 18px 16px 38px;
  box-shadow: var(--tp-panel-shadow);
}
.page-poisk-avto ol.tp-list{
  padding-left: 46px;
}
.page-poisk-avto .tp-list li{
  margin: 0 0 10px;
  opacity: .92;
  font-size: var(--tp-text);
  line-height: 1.6;
}
.page-poisk-avto .tp-list li:last-child{ margin-bottom: 0; }
@media (max-width: 991px){
  .page-poisk-avto .tp-list{
    padding: 14px 14px 14px 34px;
  }
  .page-poisk-avto .tp-list li{
    font-size: var(--tp-text-m);
  }
}

/* 5) Cards block: slightly more premium */
.page-poisk-avto .tp-cards{
  margin-top: 14px;
  gap: 14px;
}
.page-poisk-avto .tp-card{
  background: var(--tp-panel-bg);
  border: 1px solid var(--tp-panel-brd);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-panel-shadow);
  padding: 18px;
}
.page-poisk-avto .tp-card:hover{
  border-color: var(--tp-panel-brd-h);
}
.page-poisk-avto .tp-card__title{
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 8px;
}
.page-poisk-avto .tp-card__text{
  font-size: var(--tp-text);
  line-height: 1.6;
  opacity: .92;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-card{
    padding: 14px;
  }
  .page-poisk-avto .tp-card__text{
    font-size: var(--tp-text-m);
  }
}

/* 6) CTA rows: consistent, looks like real action */
.page-poisk-avto .tp-cta-row{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.page-poisk-avto .tp-cta-row .btn{
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 800;
}
.page-poisk-avto .tp-cta-note-inline,
.page-poisk-avto .tp-cta-note{
  opacity: .82;
  font-size: 13px;
  line-height: 1.4;
  max-width: 720px;
}

/* 7) FAQ: make it a clean accordion (keeps your markup) */
.page-poisk-avto .tp-faq{
  max-width: 980px;
  margin-top: 14px;
}
.page-poisk-avto .tp-faq__item{
  background: var(--tp-panel-bg-2);
  border: 1px solid var(--tp-panel-brd);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-panel-shadow);
  padding: 0;
  overflow: hidden;
}
.page-poisk-avto .tp-faq__item + .tp-faq__item{ margin-top: 10px; }

.page-poisk-avto .tp-faq__q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.page-poisk-avto .tp-faq__q::-webkit-details-marker{ display: none; }

/* Chevron */
.page-poisk-avto .tp-faq__q::after{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.75);
  border-bottom: 2px solid rgba(255,255,255,.75);
  transform: rotate(45deg);
  flex: 0 0 auto;
  opacity: .85;
  transition: transform .18s ease, opacity .18s ease;
}

.page-poisk-avto .tp-faq__item[open] .tp-faq__q::after{
  transform: rotate(-135deg);
  opacity: 1;
}

.page-poisk-avto .tp-faq__a{
  padding: 0 16px 14px 16px;
  margin-top: 0;
  opacity: .92;
  font-size: var(--tp-text);
  line-height: 1.65;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-faq__a{
    font-size: var(--tp-text-m);
  }
}

/* 8) Other models: more compact, auto-fit grid */
.page-poisk-avto .tp-models-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.page-poisk-avto .tp-model-pill{
  background: var(--tp-panel-bg);
  border: 1px solid var(--tp-panel-brd);
  border-radius: 16px;
  box-shadow: var(--tp-panel-shadow);
  padding: 14px 14px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.page-poisk-avto .tp-model-pill:hover{
  transform: translateY(-2px);
  border-color: var(--tp-panel-brd-h);
  background: rgba(255,255,255,.07);
}
.page-poisk-avto .tp-model-pill__en{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.35;
}
.page-poisk-avto .tp-model-pill__ru{
  opacity: .82;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 4px;
}
/* ==============================
   TP MODEL - tweaks requested (CTA moved down, list markers, section accents)
   ============================== */

/* Final CTA spacing (after FAQ + Other models, before App section) */
.page-poisk-avto .tp-section--cta-final{
  padding-top: 10px;
  padding-bottom: 28px;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-section--cta-final{
    padding-top: 14px;
    padding-bottom: 22px;
  }
}

/* H2 accent line to visually differentiate sections */
.page-poisk-avto .tp-h2{
  position: relative;
  padding-bottom: 10px;
}
.page-poisk-avto .tp-h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
}

/* Lists: add clear markers (without changing text) */
.page-poisk-avto ul.tp-list{
  list-style: none;
}
.page-poisk-avto ul.tp-list li{
  position: relative;
  padding-left: 22px;
}
.page-poisk-avto ul.tp-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transform: translateY(-50%);
}

/* Ordered lists stay numbered */
.page-poisk-avto ol.tp-list{
  list-style: decimal;
}
.page-poisk-avto ol.tp-list li{
  padding-left: 0;
}
.page-poisk-avto ol.tp-list li::before{ content: none; }


/* Final CTA: centered + larger button */
.page-poisk-avto .tp-section--cta-final .tp-cta-row{
  justify-content: center;
  margin-top: 0;
}
.page-poisk-avto .tp-section--cta-final .btn{
  padding: 14px 28px;
  border-radius: 16px;
  font-size: 16px;
}
@media (max-width: 991px){
  .page-poisk-avto .tp-section--cta-final .btn{
    width: 100%;
    justify-content: center;
  }
}
/* ==============================
   FIXES: spacing + white text on CTAs
   ============================== */

/* 1) All CTA buttons must have white text (link color rule must not affect them) */
.page-poisk-avto .btn,
.page-poisk-avto a.btn{
  color: #fff !important;
}

/* 2) Reduce "empty air" around the final CTA block (button "Найти ... ниже рынка") */
.page-poisk-avto .tp-section--cta-final{
  padding-top: 5px !important;
  padding-bottom: 18px !important;
}

/* 3) DKP download: make it a real button-like link and add spacing from the чек-листы CTA row */
.page-poisk-avto .tp-doc-wrap{
  /* THIS is the spacing knob above the DKP link */
  margin-top: 30px;
}

.page-poisk-avto .tp-doc-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 42px rgba(0,0,0,.25);

  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
  text-decoration: none;
}

.page-poisk-avto .tp-doc-btn:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}


/* Меньше воздуха между CTA и следующей секцией */
.page-poisk-avto .tp-section--cta-final{
  padding-bottom: 6px !important; /* было 18px */
}

.page-poisk-avto .tp-section--cta-final + .tp-section{
  padding-top: 8px; /* было 22px по умолчанию */
}

/* Белый текст на всех CTA кнопках */
.page-poisk-avto .btn,
.page-poisk-avto .main__btn a,
.page-poisk-avto .main__btn button{
  color: #fff !important;
}


/* === FORCE FIX: убрать лишнюю пустоту вокруг финальной CTA === */
.page-poisk-avto .tp-section.tp-section--cta-final{
  padding-top: 8px !important;
  padding-bottom: 8px !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  min-height: 0 !important;
  height: auto !important;
}

.page-poisk-avto .tp-section.tp-section--cta-final *{
  margin-top: 0; /* на всякий, чтобы внутренние margin не раздували секцию */
}

/* уменьшить верх следующей секции ("Основные риски...") */
.page-poisk-avto .tp-section.tp-section--cta-final + .tp-section{
  padding-top: 10px !important;
}

/* Белый текст на всех CTA */
.page-poisk-avto .btn,
.page-poisk-avto a.btn,
.page-poisk-avto button.btn,
.page-poisk-avto .tp-btn-primary,
.page-poisk-avto a.tp-btn-primary{
  color: #fff !important;
}

/* ===== BG SPOTS (5 gradients) for /poisk-avto/* =====
   Files: /assets/img/gr1.svg ... gr9.svg (we use 5 of them)
   Control:
   - Move each spot via --grN-pos (X Y)
   - Disable a spot: set --grN-img: none;
*/

.page-poisk-avto{
  position: relative;
  z-index: 0;              /* create stacking context */
  overflow: hidden;
  background: #070b18;     /* base dark */
  --gr-opacity: 0.95;
  --gr-size: 980px;
  /* лёгкое размытие убирает видимые границы SVG ("квадраты") */
  --gr-blur: 36px;

  /* choose which files to use (disable any by setting to none) */
  --gr1-img: url("/assets/img/gr1.svg");
  --gr2-img: url("/assets/img/gr2.svg");
  --gr3-img: url("/assets/img/gr3.svg");
  --gr4-img: url("/assets/img/gr4.svg");
  --gr5-img: url("/assets/img/gr5.svg");
  --gr6-img: url("/assets/img/gr6.svg");


  /* Positions (X Y) - desktop defaults (px Y to span the whole page) */
  --gr1-pos: 18% 240px;    /* under HERO */
  --gr2-pos:  0% 780px;    /* under "Площадки" + "ТурбоПоиск быстрее" */
  --gr3-pos: 50% 1980px;   /* under "Основные риски" */
  --gr6-pos: 50% 1780px;   /* under "Основные риски" */
  --gr5-pos: 90% 1980px;   /* under QR block */
  --gr4-pos: 50% 3020px;   /* under FAQ */
  
}

/* One background layer for the whole page */
.page-poisk-avto::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;

  opacity: var(--gr-opacity);
  background-repeat: no-repeat;

  background-image:
    var(--gr1-img),
    var(--gr2-img),
    var(--gr3-img),
    var(--gr4-img),
    var(--gr5-img),
    var(--gr6-img);

  background-position:
    var(--gr1-pos),
    var(--gr2-pos),
    var(--gr3-pos),
    var(--gr4-pos),
    var(--gr5-pos),
    var(--gr6-pos);

  background-size:
    var(--gr-size),
    var(--gr-size),
    var(--gr-size),
    var(--gr-size),
    var(--gr-size),
    var(--gr-size);

  /* делает пятна мягче, без видимых прямоугольных границ */
  filter: blur(var(--gr-blur));
}

/* Ensure content stays above background */
.page-poisk-avto > *{
  position: relative;
  z-index: 1;
}

/* Mobile: smaller spots + center X for cleaner look */
@media (max-width: 900px){
  .page-poisk-avto{
    --gr-size: 720px;

    --gr1-pos: 120% 540px;
    --gr2-pos: 180% 1500px;
    --gr3-pos: 15% 2700px;
    --gr4-pos: 5% 3600px;
    --gr5-pos: 0% 5600px;
  }
}



/* ===== Model hero image: mobile centering ===== */
@media (max-width: 575px) {
  /* Правая колонка: пусть картинка центрируется */
  .main__r{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
  }

  /* Сбрасываем “десктопный увод” и ставим в центр */
  .main__img{
    transform: translate(0, 0) scale(1.06) !important;
    transform-origin: 50% 50%;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }
}

/* ===== Model hero image: center on mobile ===== */
@media (max-width: 575px) {

  /* чтобы не было обрезаний из-за контейнеров */
  .main__r { overflow: visible; }

  /* если картинка позиционируется как блок */
  .main__img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 92vw;
    height: auto;
    transform: none !important;
  }

  /* если картинка внутри main__img как <img> */
  .main__img img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 92vw;
    height: auto;
    transform: none !important;
  }
}


@media (max-width: 575px) {
  .main__img {
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }
}

/* ===== Model HERO: center car on mobile (Corolla etalon) ===== */
@media (max-width: 575px) {

  /* правая колонка с картинкой */
  .main__r{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
  }

  /* контейнер картинки */
  .main__car{
    width: 100%;
    display: flex;
    justify-content: center;
    transform: none !important;
    margin: 0 auto;
  }

  /* сама картинка */
  .main__car img{
    max-width: 92vw;
    height: auto;
    transform: none !important;
  }
}

@media (max-width: 575px) {
  .main__r { margin-top: 12px; }
  .main__car { margin-top: 8px; }
}

@media (max-width: 575px) {
  .main__car img { max-width: 96vw; }
}

/* ===== Mobile HERO spacing: remove extra air around car ===== */
@media (max-width: 575px) {

  /* Сжимаем сам hero */
  .tp-hero {
    padding-top: 74px !important;
    padding-bottom: 16px !important;
  }

  /* Сжимаем расстояние между левой частью и правой (обычно gap или padding) */
  .main__inner {
    gap: 12px !important;
    padding-bottom: 0 !important;
  }

  /* Убираем лишний нижний отступ у текста слева, который толкает картинку вниз */
  .main__l {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Притягиваем блок с картинкой вверх */
  .main__r {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .main__car {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Чтобы под картинкой не было огромного хвоста от line-height или пустых блоков */
  .main__car img {
    display: block;
  }
}

@media (max-width: 575px) {
  .tp-section:first-of-type { padding-top: 24px !important; }
}

/* ===== FIX: remove oversized hero height on mobile ===== */
@media (max-width: 575px) {

  /* Сбрасываем десктопную высоту hero */
  .page-poisk-avto .tp-section.main {
    min-height: auto !important;
    height: auto !important;
    padding-top: 88px !important;   /* под фиксированную шапку */
    padding-bottom: 24px !important;
  }

}

@media (max-width: 575px) {
  .page-poisk-avto .main__inner {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 575px) {
  body.page-poisk-avto section.main.tp-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 88px !important;
    padding-bottom: 24px !important;
  }
}


@media (max-width: 575px) {
  section.main.tp-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 88px !important;
    padding-bottom: 20px !important;
  }

  .main__inner {
    gap: 12px !important;
  }
}

@media (max-width: 575px) {
  body.page-poisk-avto section.main.tp-section {
    min-height: 0 !important;
    height: auto !important;
  }
  body.page-poisk-avto section.main.tp-section .container {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 575px) {
  body.page-poisk-avto .tp-hero,
  body.page-poisk-avto .main {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ===== MOBILE FIX: reset car transforms ===== */
@media (max-width: 575px) {
  .page-poisk-avto {
    --car-x: 0px;
    --car-y: 0px;
    --car-scale: 1;
    --car-max: 96vw;
  }

  .page-poisk-avto .main__car img {
    transform-origin: center center;
  }
}

/* ===== FORCE MOBILE: ignore car CSS variables ===== */
@media (max-width: 575px) {

  .page-poisk-avto .main__car img{
    max-width: 96vw !important;
    transform: translate(0, 0) scale(1) !important;
    transform-origin: center center !important;
  }

}

/* ===== MOBILE: remove hero stretching and vertical centering ===== */
@media (max-width: 575px) {

  /* Сам hero не должен быть "экраном" */
  .page-poisk-avto section.main.tp-section{
    min-height: 0 !important;
    height: auto !important;
    padding-top: 86px !important;   /* под фикс.шапку */
    padding-bottom: 18px !important;
  }

  /* Контент в hero прижимаем вверх (часто там align-items:center) */
  .page-poisk-avto section.main.tp-section .main__inner{
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Убираем возможные нижние отступы, которые раздувают секцию */
  .page-poisk-avto .main__l,
  .page-poisk-avto .main__r,
  .page-poisk-avto .main__car{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* ===== FINAL: hero must not be 100vh on mobile ===== */
@media (max-width: 575px) {

  /* снимаем растяжение со всех возможных контейнеров hero */
  .page-poisk-avto .tp-hero,
  .page-poisk-avto section.main.tp-section,
  .page-poisk-avto section.main,
  .page-poisk-avto .tp-section.main,
  .page-poisk-avto .main__container,
  .page-poisk-avto .main__inner {
    min-height: 0 !important;
    height: auto !important;
  }

  /* фиксируем нормальные отступы под шапку */
  .page-poisk-avto .tp-hero,
  .page-poisk-avto section.main.tp-section {
    padding-top: 86px !important;
    padding-bottom: 18px !important;
  }

  /* контент в hero прижимаем вверх */
  .page-poisk-avto .main__inner {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}

/* ===== MOBILE: kill extra bottom space under car ===== */
@media (max-width: 575px) {

  /* сжимаем нижние отступы всех контейнеров героя */
  .page-poisk-avto .tp-hero,
  .page-poisk-avto section.main.tp-section,
  .page-poisk-avto .main__container,
  .page-poisk-avto .main__inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* правая колонка и блок машины не должны добавлять "хвост" */
  .page-poisk-avto .main__r,
  .page-poisk-avto .main__car {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* возвращаем небольшой аккуратный отступ снизу всему hero */
  .page-poisk-avto section.main.tp-section {
    padding-bottom: 18px !important;
  }
}

@media (max-width: 575px) {
  .page-poisk-avto section.main.tp-section + section {
    padding-top: 24px !important;
    margin-top: 0 !important;
  }
}

/* ==========================================================
   UNIFIED MOBILE HERO SPACING (brand + model pages)
   Goal: same distance from header to hero like Support/Home.
   Tweak only --tp-mob-hero-pt if needed.
   ========================================================== */
.page-poisk-avto{
  --tp-mob-hero-pt: 18px; /* header is fixed on mobile (main.css), so we keep a safe top padding */
}

@media (max-width: 991px){
  /* Breadcrumbs should not start too low on mobile */
  .page-poisk-avto{
    --crumbs-mt: 16px;
    --crumbs-mb: 10px;
  }
}

@media (max-width: 575px){
  /* Final authority: kill the "86px" and other experimental paddings */
  body.page-poisk-avto .tp-hero,
  body.page-poisk-avto .main,
  body.page-poisk-avto section.main.tp-section,
  body.page-poisk-avto section.main,
  body.page-poisk-avto .tp-section.main{
    padding-top: var(--tp-mob-hero-pt) !important;
    padding-bottom: 18px !important;
    margin-top: 0 !important;
  }

  /* Prevent any hidden spacer from pushing content down */
  body.page-poisk-avto .tp-breadcrumbs,
  body.page-poisk-avto .breadcrumbs{
    margin-top: var(--crumbs-mt) !important;
  }

  /* Keep hero content aligned to the top */
  body.page-poisk-avto .main__inner{
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}

/* =====================================================================

/* =====================================================================
   FINAL OVERRIDE (single source of truth for header -> hero spacing)
   Fixes:
   - Desktop: breadcrumbs/hero must not sit under the header
   - Mobile: predictable distance from header to hero (no margin-collapsing)
   Notes:
   - On your project the class .page-poisk-avto is sometimes on <main>, not <body>.
     Поэтому ниже дублируем селекторы и для body.page-poisk-avto, и для main.page-poisk-avto.
   Tune only these 4 variables.
   ===================================================================== */

:root{
  /* change here if needed */
  --tp-mob-header-h: 62px;
  --tp-mob-hero-gap: 12px;
  --tp-desk-header-h: 84px;
  --tp-desk-hero-gap: 68px;
}

/* MOBILE */
@media (max-width: 768px){
  /* one and only top offset: on MAIN */
  body.page-poisk-avto main,
  main.page-poisk-avto{
    padding-top: calc(var(--tp-mob-header-h) + var(--tp-mob-hero-gap)) !important;
  }

  /* hero itself must not add extra top spacing */
  body.page-poisk-avto .tp-hero,
  body.page-poisk-avto section.main.tp-section,
  main.page-poisk-avto .tp-hero,
  main.page-poisk-avto section.main.tp-section{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* breadcrumbs: no top margin (it collapses and creates glitches) */
  body.page-poisk-avto .tp-breadcrumbs,
  body.page-poisk-avto .breadcrumbs,
  main.page-poisk-avto .tp-breadcrumbs,
  main.page-poisk-avto .breadcrumbs{
    margin-top: 0 !important;
  }
}

/* DESKTOP */
@media (min-width: 769px){
  body.page-poisk-avto main,
  main.page-poisk-avto{
    padding-top: calc(var(--tp-desk-header-h) + var(--tp-desk-hero-gap)) !important;
  }

  body.page-poisk-avto .tp-hero,
  body.page-poisk-avto section.main.tp-section,
  main.page-poisk-avto .tp-hero,
  main.page-poisk-avto section.main.tp-section{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.page-poisk-avto .tp-breadcrumbs,
  body.page-poisk-avto .breadcrumbs,
  main.page-poisk-avto .tp-breadcrumbs,
  main.page-poisk-avto .breadcrumbs{
    margin-top: 0 !important;
  }
}
   - On your project the class .page-poisk-avto is sometimes on <main>, not <body>.
     Поэтому ниже дублируем селекторы для body.page-poisk-avto и main.page-poisk-avto.
   How to tune (ONE place):
   - --tp-mob-header-h / --tp-mob-hero-gap
   - --tp-desk-header-h / --tp-desk-hero-gap
   ===================================================================== */

:root{
  /* tweak only these 4 values */
  --tp-mob-header-h: 62px;
  --tp-mob-hero-gap: 12px;
  --tp-desk-header-h: 84px;
  --tp-desk-hero-gap: 68px;
}

/* Helper: scope for pages where class lives on <main> */
main.page-poisk-avto{
  /* no visual change here, but allows variable overrides if needed later */
}

/* MOBILE */
@media (max-width: 768px){
  /* The only reliable top offset: add padding to MAIN (prevents margin-collapsing) */
  body.page-poisk-avto main,
  main.page-poisk-avto{
    padding-top: calc(var(--tp-mob-header-h) + var(--tp-mob-hero-gap)) !important;
  }

  /* Hero must not add its own top spacing */
  body.page-poisk-avto .tp-hero,
  body.page-poisk-avto section.main.tp-section,
  main.page-poisk-avto .tp-hero,
  main.page-poisk-avto section.main.tp-section{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Breadcrumbs: no top margin (it collapses visually under fixed header) */
  body.page-poisk-avto .tp-breadcrumbs,
  body.page-poisk-avto .breadcrumbs,
  main.page-poisk-avto .tp-breadcrumbs,
  main.page-poisk-avto .breadcrumbs{
    margin-top: 0 !important;
  }
}

/* DESKTOP */
@media (min-width: 769px){
  /* Compensate fixed header so breadcrumbs never overlap it */
  body.page-poisk-avto main,
  main.page-poisk-avto{
    padding-top: calc(var(--tp-desk-header-h) + var(--tp-desk-hero-gap)) !important;
  }

  body.page-poisk-avto .tp-hero,
  body.page-poisk-avto section.main.tp-section,
  main.page-poisk-avto .tp-hero,
  main.page-poisk-avto section.main.tp-section{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.page-poisk-avto .tp-breadcrumbs,
  body.page-poisk-avto .breadcrumbs,
  main.page-poisk-avto .tp-breadcrumbs,
  main.page-poisk-avto .breadcrumbs{
    margin-top: 0 !important;
  }
}

/* ==================================================
   FINAL HERO CAR CONTROL
   Single source of truth for ALL brand/model pages
   ================================================== */

/* DESKTOP */
.page-poisk-avto{
  --car-scale: 0.85;
  --car-x: -20px;
  --car-y: -115px;     /* ← ТУТ опускаем / поднимаем машину */
  --car-max: 760px;
}

/* FORCE APPLY (wins over legacy rules) */
.page-poisk-avto .main__car img{
  width: 100% !important;
  max-width: var(--car-max) !important;
  height: auto !important;
  transform: translate(var(--car-x), var(--car-y)) scale(var(--car-scale)) !important;
  transform-origin: center right !important;
}

/* =========================================
   FIX: hero must NOT move when car moves
   ========================================= */

/* Прижимаем контент hero к верху */
.page-poisk-avto .main__inner{
  align-items: flex-start !important;
}

/* Убираем искусственную высоту у блока машины */
.page-poisk-avto .main__car{
  min-height: 0 !important;
  align-items: flex-start !important;
}

/* Немного контролируем отступ сверху у картинки */
.page-poisk-avto .main__car img{
  margin-top: 0 !important;
}

/* MOBILE */
@media (max-width: 575px){
  .page-poisk-avto{
    --car-scale: 1.05;
    --car-x: 0px;
    --car-y: 12px;     /* ← ТУТ положение машины на мобилке */
    --car-max: 92vw;
  }

  .page-poisk-avto .main__car{
    min-height: 0 !important;
    justify-content: center !important;
  }

  .page-poisk-avto .main__car img{
    transform-origin: center center !important;
  }
}







/* FORCE: синяя кнопка "Скачать договор" (марка/модель) */
.page-poisk-avto a.tp-doc-btn{
  background: linear-gradient(135deg, #2f5cff, #3b82f6) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(47, 92, 255, 0.35) !important;
}

.page-poisk-avto a.tp-doc-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(47, 92, 255, 0.45) !important;
}