/* Мобильная адаптация */
@media (max-width: 1800px) {
  section,
  .breadcrambs {
    padding-left: 20px;
    padding-right: 20px;
  }

  .header_top_nav ul {
    gap: 10px;
    list-style: none;
    flex-wrap: wrap;
  }

  .header_top_nav ul li a {
    font-size: 14px;
  }

  .header_top_nav ul li {
    font-size: 14px;
  }

  .btn-credit {
    font-size: 14px;
    padding: 10px 10px;
  }

  .btn-details {
    font-size: 14px;
  }

  .brand_card,
  .similar_card {
    padding: 16px;
  }

  .brand_card .label,
  .similar_card .label {
    margin-left: 200px;
    font-size: 14px;
    padding: 5px;
  }

  .brand_card button,
  .similar_card button {
    padding: 10px 20px;
    font-size: 14px;
    margin-top: 20px;
  }

  .footer_content {
    flex-direction: column-reverse;
  }

  .footer_info {
    width: 100%;
  }
}

@media (max-width: 1200px) {

  h1,
  h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  h3 {
    font-size: 24px;
  }

  .slide {
    height: auto;
  }

  .catalog-mark{
      grid-template-columns: repeat(4, 1fr);
   }

  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .gallery img {
    width: 49%;
  }

  .header_top_nav {
    padding: 10px;
  }

  .header_top_nav ul li a {
    font-size: 12px;
  }

  .header_top_nav ul li {
    font-size: 12px;
  }

  .brand_card,
  .similar_card {
    padding: 16px;
  }

  .brand_card h3,
  .similar_card h3 {
    font-size: 16px;
  }

  .brand_card p,
  .similar_card p {
    font-size: 14px;
  }
  .used_marks_cars {
      grid-template-columns: repeat(6, 1fr);
    }
  
  .footer_cars {
      grid-template-columns: repeat(6, 1fr);
  }

  .brand_card .label,
  .similar_card .label {
    margin-left: 130px;
    font-size: 14px;
    padding: 5px;
  }

  .brand_card button,
  .similar_card button {
    padding: 10px 20px;
    font-size: 14px;
    margin-top: 20px;
  }

  .cards-container {
    flex-direction: column;
  }

  .card {
    width: 100%;
  }

  .info-card {
    width: 98%;
  }

  .info-card__img {
    width: 65%;
  }

  .form_cart {
    background: #7598B8;
  }

  .footer_content {
    flex-direction: column-reverse;
  }
  
  .top_cars {
      grid-template-columns: repeat(6, 1fr);
    }

  .footer_info {
    width: 100%;
  }
    .thumbsSwiper .swiper-slide {
        width: 20%;
    }
    
    .sub_mark_cont{
        grid-template-columns: repeat(5, 1fr);
    }
    .mark_models{
        padding: 2px 6px;
        font-size: 12px;
    }
    .car-container {
        grid-template-columns: repeat(2, 1fr);;
    }
    .banks_info {
      grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 920px) {
    .car-container {
        grid-template-columns: repeat(1, 1fr);;
    }
    .banks_info {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

  /* Общие стили */
  body {
    font-size: 14px;
  }

  h1,
  h2 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 300;
  }

  h3 {
    font-size: 24px;
  }

  .conteiner {
    padding: 20px;
  }

  .breadcrambs li {
    font-size: 10px;
    margin-right: 5px;
  }

  .breadcrambs ul {
    padding-top: 20px;
  }

  .breadcrambs li a {
    font-size: 10px;
  }

  /* Шапка */
  .header_top_menu {
    gap: 10px;
  }

  .header_top_logo {
    width: 150px;
    padding: 20px;
  }

  .header_top_logo img {
    width: 150px;
  }

  .nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }
  .banks_info {
      grid-template-columns: repeat(1, 1fr);
    }

  .header_top_nav {
    background: none;
  }

  .nav_mobile {
    padding: 30px;
  }

  .nav_mobile .header_top_nav ul {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav_mobile .header_top_nav ul li {
    margin-bottom: 0;
  }

    .header_top {
        margin-top: 10px;
    }

  .header_top_logo {
    order: 1;
    padding: 15px;
  }
  .header_top_menu {
    grid-template-columns: 3fr 0fr 0fr 0fr;
  }

    section, .breadcrambs {
        padding-left: 5px;
        padding-right: 5px;
    }

  .mobile-menu-btn {
    order: 4;
    padding: 15px 20px;
    margin-right: -10px;
  }

    .header_top_phone{
        padding: 15px 20px;
    }
  .header_top_phone,
  .header_top_cars:not(.mobile-menu-btn) {
    order: 3;
    width: fit-content;
    padding: 15px 20px;
  }
  
  .header_top_cars:not(.mobile-menu-btn) {
    display: none;
  }

  .header_akcii {
    display: none;
  }

  .search {
    padding: 10px 0 10px 20px;
    gap: 15px;
  }

  .search input {
    font-size: 14px;
  }

  /* Баннеры */
  .banner-slider {
    flex-direction: column;
  }

  .banner {
    display: none;
  }

  .credit_banner,
  .trade-in_banner {
    height: auto;
  }

  .credit_banner_content {
    width: auto;
    padding: 20px;
  }

  .credit_banner_content p {
    font-size: 16px;
  }
  .catalog-mark{
      grid-template-columns: repeat(3, 1fr);
   }

  /* Выбор новые/с пробегом */
  .main_marks_buttons {
    width: 100%;
  }

    .slide-img {
        margin-left: 10px;
    }
    #new .slider{
        display: none;
    }
    .catalogNewMark{
        display: grid !important;
    }
    .contacts_box button{
        margin-right: 0;
    }
  .main_marks_buttons button {
    padding: 10px 5px;
    font-size: 14px;
    width: 50%;
  }

  .toggle-button.active {
    width: 50%;
  }

  .main_auto {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 10px;
  }

  .slider-wrapper,
  .used_marks {
    margin-top: 20px;
  }

  .slider {
    flex-wrap: wrap;
  }

  .slide {
    padding: 10px 10px;
    border-radius: 10px;
    height: auto;
  }

  .slide h2 {
    font-size: 14px;
  }

  .used_marks_cars {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  #hideUsedMarksBtn, #showAllUsedMarksBtn{
      display:block;
  }
  .top_cars {
      grid-template-columns: repeat(3, 1fr);
    }
    
  .footer_cars {
      grid-template-columns: repeat(4, 1fr);
  }
  
  .more-mark-used{
      display: none !important;
      opacity: 0 !important;
  }

  .used_car {
    padding: 10px;
    background: #F5F8FC;
  }

  .used_car p {
    font-size: 14px;
  }

  .used_car img {
    display: none;
  }

  .kusov {
    flex-wrap: wrap;
  }

  .kusov_cart {
    width: 47%;
  }

  /* Инфо баннеры */
  .cards-container {
    flex-direction: column;
  }

  .card {
    width: 100%;
  }

  .info-card {
    width: 97%;
  }

  .info-card__img {
    width: 65%;
  }

  .estimate-card {
    width: 83%;
  }

  .gallery img {
    width: auto;
  }

  .vacancy-item button {
    font-size: 18px;
    text-align: left;
  }
  
  .sub_mark_cont{
      display: none;
  }

  .vacancy-content {
    padding: 20px;
  }

  /* Контакты */

  .contacts_mobile {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  margin-top: 20px;
}

.contacts {
  display: none;
}

  .contacts h2 {
    font-size: 18px;
  }

  .contacts_p {
    font-size: 14px;
    color: #00000080;
  }

  .contacts-card img {
    display: none;
  }

  .contacts-card-info {
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .contacts-card-info h3 {
    display: none;
  }

  .contacts_info {
    display: none;
  }

  /* Страница новые авто */
  .brand_main {
    grid-template-columns: repeat(1, 1fr);
  }

  .brand_card,
  .similar_card {
    padding: 16px;
  }

  .brand_card h3,
  .similar_card h3 {
    font-size: 18px;
    min-height: auto;
  }

  .brand_card p,
  .similar_card p {
    font-size: 18px;
  }

  .brand_card .label,
  .similar_card .label {
    margin-left: 250px;
    font-size: 14px;
    padding: 5px;
    background: none;
    color: #78B927;
  }

  .brand_card a,
  .similar_card a {
    padding: 10px 20px;
    font-size: 14px;
    margin-top: 20px;
  }

  .model_image {
    flex-direction: column;
  }

  .model_img {
    width: 100%;
    padding: 0;
    padding-bottom: 20px;
  }

  .model_img p {
    font-size: 55px;
  }

  .colors .color-name {
    font-size: 14px;
  }

  .model_offer {
    width: 100%;
    border: none;
    padding: 0;
  }

  .model_offer_title {
    align-items: center;
  }

  .model_offer_credit {
    gap: 10px;
  }

  .model_offer_label {
    background: none;
    color: #D69265;
    padding: 0;
    text-align: right;
    font-weight: 300;
  }

  .model_offer_credit .car-credit {
    display: none;
  }

  .model_offer_credit .car-credit_mobile {
    display: block;
  }

  .model_offer_credit .car-credit_mobile span {
    color: #0571D5;
  }

  .model_buttons {
    flex-direction: column;
  }

  .model_offer_title h1 {
    font-weight: 700;
    line-height: 150%;
  }

  .model_advantages {
    flex-direction: column;
    background: none;
    padding: 0;
  }

  .model_advantage {
    background: #F5F8FC;
    width: 95%;
    padding: 10px;
    border-radius: 10px;
    flex-direction: row;
  }

  .color-option {
    width: 20px;
    height: 20px;
  }

  .car-image {
    margin-top: -60px;
  }

  .model_offer .car_buttons {
    margin-top: 10px;
  }

  .img_adv {
    display: none;
  }

  .model_top {
    display: none;
  }

  .model_top_mobile {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
  }

  .model_content button {
    width: 100%;
  }

  .model_content button p {
    font-size: 16px;
  }

  .model_top_mobile .model_content {
    flex-direction: row;
    justify-content: space-between;
  }

  .model_box.active {
    padding: 10px;
  }

  .price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .price p {
    font-size: 16px;
    font-weight: 300;
    line-height: 130%;
    color: #1B1C1E80;
  }

  .model_content p span {
    font-size: 16px;
    font-weight: 500;
  }

  .model h3 {
    font-size: 16px;
  }

  /* бу */

  .car_title {
    display: none;
  }

  .car_title_mobile {
    display: flex;
    flex-direction: column;
  }

  .car_title_mobile h1 {
    margin-bottom: 0;
  }

  .car_title_mobile .car_gallery {
    display: flex;
    margin-top: 20px;
    flex-direction: row;
  }

  .car_title_mobile .car_gallery_object {
    width: 300px;
    height: 230px;
  }

  .car_title_mobile .car_gallery_sub {
    flex-direction: column;
  }

  .car_title_mobile .car_gallery_sub .car_gallery_object {
    width: auto;
    height: 70px;
  }

  .h1 {
    font-size: 18px;
    font-weight: 700;
  }

  .car_title_mobile .car-credit {
    background: none;
  }

  .gallery {
    flex-wrap: nowrap;
  }
  .gallery_main .gallery_object{
      height: 70px;
  }
  .gallery_sub .gallery_object{
        height: 120px;
  }

  .gallery_object,
  .gallery_sub .gallery_object {
    width: 100%;
  }

  .car_rate {
    display: none;
  }

  .specifications_form {
    padding: 20px;
    flex-direction: column;
    gap: 20px;
  }

  .specifications_form p {
    font-size: 18px;
  }

  .specifications_buttons {
    justify-content: space-between;
    margin-top: 20px;
  }

  .specification_first {
    flex-direction: column;
    gap: 10px;
  }

  .used_form {
    flex-direction: column;
    padding: 20px;
  }

  .used_form img {
    width: 100%;
  }

  .btn-credit,
  .btn-details {
    width: 100%;
    text-align: center;
  }

  /* Кредит */
  .credit {
    flex-direction: column;
  }

  .credit_content {
    padding: 10px;
    background: #F5F8FC;
    display: flex;
    gap: 10px;
  }

  .credit_left {
    display: none;
  }

  .credit_right {
    width: 100%;
    padding: 0;
    background: none;
  }

  .credit_right h2 {
    font-size: 24px;
  }

  .credit_right p {
    font-size: 16px;
    margin: 0;
  }

  .credit_choose {
    padding: 0;
  }

  .credit_info .credit_count {
    font-size: 22px;
  }

  .vikup_container {
    width: 100%;
    padding: 20px;
  }

  .vikup_container p {
    font-size: 18px;
  }

  .vikup_item img {
    display: none;
  }

  .vikup_item h3 {
    font-size: 22px;
  }

  .vikup_text {
    padding: 20px;
  }

  .vikup_item p {
    font-size: 14px;
  }

  .credit_info input {
    margin: 20px 0;
  }

  .credit_form {
    padding: 0;
    margin-top: 20px;
  }

  .model-form {
    flex-direction: column;
  }

  /* Трейд-ин */

  .trade-in {
    flex-direction: column;
  }

  .trade-in_top {
    flex-direction: column;
    align-items: flex-start;
  }

  .trade-in_top_card {
    flex-direction: column;
    width: 100%;
  }

  .traid-in_content {
    flex-direction: column;
  }

  .trade-in_left,
  .trade-in_right {
    width: 100%;
  }

  .trade-in-flex {
    flex-direction: column;
  }

  .trade-in-flex .traid-in-group {
    width: 100%;
  }

  .btn-tradein {
    padding: 20px;
  }

  /* FAQ */
  .faq-question {
    padding: 20px 0;
    font-size: 20px;
  }

  .faq-question h2 {
    font-size: 18px;
  }

  .faq-question img {
    width: 16px;
  }

  .faq-answer {
    font-size: 14px;
  }

  .used {
    flex-direction: column-reverse;
  }

  .used_title_mobile {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
  }

  .used_content h1 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 20px;
  }

  .used_title_mobile .model-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
  }

  .sort {
    margin-bottom: 20px;
  }

  .sort img {
    width: 15px;
  }

  .filter {
    width: 100%;
  }
  .used_filter_side{
      display: none;
  }

  .used_content {
    width: 100%;
    padding: 10px;
  }

  .car-container {
    flex-direction: column;
  }

  .used section {
    padding-left: 0;
  }

  .car-info {
    display: none;
  }

  .car-info_mobile {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    border-radius: 20px;
  }

  .car-info_mobile h3,
  .car-info_mobile a,
  .related-car_info a {
    font-size: 18px;
    font-weight: 200;
    line-height: 120%;
    color: #1B1C1E;
  }

  .car-info_mobile a:hover,
  .related-car_info a:hover {
    color: #0571D5;
  }

  .car-info_mobile .car-price {
    font-size: 18px;
    font-weight: 700;
    color: #1B1C1E;
    line-height: 120%;
  }

  .car-info_mobile .car-credit span {
    font-size: 16px;
  }

  .car-info_mobile p {
    font-size: 14px;
    font-weight: 300;
    color: #00000080;
  }

  .page {
    flex-direction: column;
  }

  .others {
    display: none;
  }

  .related {width: auto;}

  .page_content {
    width: auto;
  }

  .page_content h1 {
    font-size: 26px;
  }

  .page_box h2 {
    font-size: 22px;
  }

  .page_box h3 {
    font-size: 20px;
  }

  .main-page_img {
    height: 200px;
    margin: 20px 0;
  }

  .page_box p,
  .page_box ul,
  .page_box ol {
    font-size: 14px;
  }

  .image-grid img {
    max-width: 100%;
  }

  .service_content,
  .vikup_content {
    flex-direction: column;
  }

  .card-vikup h1 {
    font-size: 24px;
  }

  .service_item {
    width: 100%;
    padding: 20px 0;
  }

  .vikup_item {
    width: 100%;
    padding: 0;
  }

  .service_item img,
  .vikup_item img {
    width: 25%;
  }

  .service_item p {
    font-size: 20px;
  }

  .contacts_container {
    flex-direction: column;
  }

  .contact_card {
    width: 100%;
  }

  .map_container {
    width: auto;
  }

  .map_container img {
    width: 100%;
  }

  .contact_card_info .contacts_img {
    width: 150px;
    height: auto;
  }

  .contact_card_info .contacts_img img {
    width: 100%;
    height: auto;
  }

  /* отзывы */

  .otzyv_title {
    margin-bottom: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .otzyv_title a {
    color: #0571D5;
    background: none;
    padding: 0;
    text-decoration: underline;
    font-size: 12px;
  }

  .otzyv_card {
    width: auto;
  }

  .review {
    flex-direction: column;
  }

  .otziv-images {
    width: 100%;
  }

  .otziv_image {
    width: 100%;
    height: auto;
  }

  /* новости */
  .news_title {
    flex-direction: column;
    align-items: flex-start;
  }

  .news_title h1 {
    margin-bottom: 40px;
  }

  .news_tabs a {
    font-size: 12px;
  }

  .news_buttons {
    flex-direction: column;
  }

  .news_buttons .btn-credit {
    width: 100%;
    padding: 16px 0;
  }

  .news_box {
    flex-direction: column;
  }

  .news_box_one,
  .news_box_two,
  .news_box_three,
  .news_box_four {
    width: 100%;
    height: 185px;
  }

  .information_box {
    flex-direction: column;
    width: 100%;
  }

  .information_content {
    width: auto;
    gap: 20px;
  }

  .information_content a {
    font-size: 14px;
  }

  .information_date {
    font-size: 14px;
  }

  .container_button {
    font-size: 16px;
  }

  .image-grid img,
  .image-grid.three img {
    flex: 1 1 100%;
  }

  img.float-left,
  img.float-right {
    float: none;
    display: block;
    margin: 1em 0;
    width: 100%;
  }

  /* Футер */
  .footer_content {
    flex-direction: column-reverse;
  }

  .footer_info p {
    font-size: 10px;
  }

  .footer_car img {
    display: none;
  }

  .footer_car p {
    font-size: 12px;
  }

  .mt-5 {
    margin-top: 20px;
  }

  .header_top_phone img {
    width: 20px;
  }
}

@media (max-width: 480px) {

  /* Еще более мелкие экраны */

  .banks_cart {
    text-align: center;
    padding: 20px;
  }

  .credit_zayavka__form {
    flex-direction: column;
  }

  .credit_zayavka__form input[type="text"],
  .credit_zayavka__form input[type="tel"],
  .credit_zayavka__form button {
    width: 100%;
  }
}



:root{
  --qs-bg:#f3f6fa; --qs-card:#fff; --qs-text:#222; --qs-muted:#6b7280;
  --qs-primary:#1457ff; --qs-border:#e5e7eb; --qs-radius:16px;
}

.qs-header{padding:6px 4px 18px;}
.qs-search{display:flex; align-items:center; gap:10px;}
.qs-input{
    background: #FFFFFF;
    border-radius: 10px;
    padding: 14px 14px;
    color: #828282;
    width: 100%;
    font-size: 16px;
    letter-spacing: 0;
    paragraph-spacing: 0;
    paragraph-indent: 0;
    text-transform: none;
    text-decoration: none;
    line-height: 18px;
}
.qs-input:focus{box-shadow:0 0 0 3px rgba(20,87,255,.15); border-color:var(--qs-primary);}
.qs-btn{
    padding: 14px 14px;
    background-color: #0571D5;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    line-height: 130%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.qs-close{background:transparent; border:0; color:var(--qs-muted); cursor:pointer;}
.qs-body{display:grid; grid-template-columns:280px 1fr; gap:24px;}
.qs-sidebar{background:transparent;}
.qs-block{background:transparent; margin-bottom:24px;}
.qs-block-title{display:flex; align-items:center; justify-content:space-between; font-weight:700; margin-bottom:10px;}
.qs-clear{background:none;border:0;color:var(--qs-primary);font-size:13px;cursor:pointer}
.qs-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.qs-link{background:none;border:0; padding:2px 0; color:var(--qs-text); text-align:left; cursor:pointer;}
.qs-link:hover{ text-decoration:underline; }
.qs-muted{color:var(--qs-muted); font-size:14px;}
.qs-results-title{margin:4px 0 12px; font-size:20px; font-weight:800;}
.qs-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.qs-card{background:var(--qs-card); border-radius:var(--qs-radius); overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.06); border:1px solid #f1f5f9;}
.qs-card-media{aspect-ratio:16/9; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fafafa;}
.qs-card-media img{width:100%; height:100%; object-fit:cover;}
.qs-card-ph{color:var(--qs-muted); font-size:14px;}
.qs-card-body{padding:14px 16px 16px;}
.qs-card-name{font-weight:700; margin-bottom:8px;}
.qs-card-price{font-weight:800; margin-bottom:8px;}
.qs-card-spec{color:var(--qs-muted); font-size:14px; line-height:1.4;}
.qs-empty{color:var(--qs-muted); padding:8px;}
@media (max-width:1100px){ .qs-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){
  .qs-body{grid-template-columns:1fr;}
  .qs-sidebar{order:2}
  .qs-cards{grid-template-columns:1fr;}
  .qs-close{display: none;}
  .pagination__item {
    padding: 10px 12px;
    font-size: 16px;
}