/* ============================================================
   SMALL MOBILE — max-width: 480px, но делаем до 980, т.к. нет планшета
   Дополнительные правки для совсем маленьких экранов
   ============================================================ */
@media (min-width: 981px) {
   .pc-hide{
      display: none !important;
   }
}
@media (max-width: 480px) {
    .btn-load-more {
        min-width: 100%;
        height: 40px;
        font-size: var(--fs-base);
    }
    .user-pagination__pages {
        gap: 6px;
    }
    .user-pagination__pages .page-link {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .user-pagination__pages .page-dots{
      height: 32px;
      width: 32px;
    }
}
@media (max-width: 980px) {
   :root{
      --fs-base: 10px;  /*main text*/
      --fs-xl: 12px;    /*h2*/
      --fs-md: 10px;
      --container-padding: 22px;
      --fs-2xl: 18px;
   }

   .mob-hide{
      display: none !important;
   }

   .header{
      padding: 20px;
   }
   .mobile-header{
      padding: 0px;
   }
   .mobile-header .search-input input{
      display: none;
   }
   .mobile-header .search-input{
      min-width: unset;
      width: auto;
      background: transparent;
   }
   .mobile-header .header-catalog-btn{
      width: auto;
      padding-left: 32px !important;
      background: none;
      padding: 0;
      margin: 0px;
   }
   .mobile-header .mob-header-right{
      margin-left: auto;
      display: flex;
   }
   .header-menu-links-light.pc-hide{
      padding: 0px;
      margin-bottom: 16px;
      justify-content: right;
   }
   .header{
      background-color: var(--color-white);
   }
   .subscription{
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding: 20px;
   }
   .bottom-subsctiption p{
      font-size: var(--fs-base);
   }
   .subscription .input-field{
      font-size: var(--fs-base);
      height: 40px;
      padding: 15px 20px 13px;
      max-width: 100%;
   }
   .top-subscription{
      gap: 25px;
   }
   .btn{
      height: 40px;
      border-radius: 1px;
      padding-top: 15px;
      padding-bottom: 13px;
      padding-left: 35.5px;
      max-width: 100%;
   }
   .absolute-img-left{
      left: -210px;
      max-width: calc(100% + 210px);
      height: 328px;
      bottom: 0px;
   }
   .first-section-slider.slider{
      width: 100%;
      min-height: calc(460px - 15px);/*header padding*/
      height: auto;
   }
   .mt-header,.mt-header-personal{
      margin-top: 115px;
      padding-top: 30px;
   }
   .slide__description{
      font-size: var(--fs-xl);
   }
   .slide__btn{
      font-size: var(--fs-xl);
      height: 42px;
      width: 233px;
      padding: unset;
   }
   .first-section-slider .slide__image{
      max-height: 260px;
      width: auto;
      margin-left: auto;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-top: 0px;
   }
   .slide__content{
      gap: 0px;
      margin: 0px;
      max-width: 100%;
   }
   .landing-section-1{
      height: auto;
      max-height: auto;
   }
   .slider__dots{
      left: 25px;
      bottom: 25px;
      right: unset;
   }
   .slide__title{
      font-weight: 600;
   }
   .mob-2-columns, .categories-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
   }

   .mt-100{
      margin-top: 30px;
   }
   .mob-mt-20{
      margin-top: 20px;
   }

   .product-slidering-block{
      margin-top: 12px;
   }
   .product-card{
      width: 100%;
      min-width: 100px;
      gap: 12px;
   }
   .product-card__image-wrap{
      height: 155px;
   }
   .about-certificates-block .product-card__image-wrap{
      height: 210px;
   }
   .right-arrows{
      display: none;
   }
   .product-slider-track{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
   }
   .landing-section-4 .slide__title{
      font-size: 8px;
      line-height: 1.25em;
   }
   .landing-section-4 .slide__description{
      font-size: 12px;
      line-height: 1.25em;
   }
   .landing-section-4 .slide__btn{
      width: 165px;
      font-size: 10px;
   }
   .landing-section-4 .slide__content{
      gap: 8px;
      width: 50%;
      margin-left: auto;
      margin-right: 0px;
   }
   .about-company-bg{
      height: 192px;
      background-size: cover;
      background-repeat: no-repeat;
   }
   .product-main-sect-header > div:first-child{
      width: 100%;
      justify-content: space-between;
   }
   .blog-column{
      width: 100%;
   }
   .blog-card{
      grid-template-columns: minmax(100px, 235px);
      gap: 10px;
      justify-content: center;
   }
   .blog-card__image-wrap{
      width: auto;
      height: 140px;
   }
   .blog-card__title,..first-product-blog .blog-card__title{
      font-size: 12px;
      height: 30px;
      line-height: 15px;
   }
   .blog-card__anot,.first-product-blog .blog-card__anot{
      font-size: 8px;
      height: 30px;
      line-height: 10px;
   }
   .blog-card__more{
      font-size: 12px;
   }
   .blog-card__image-wrap img{
      margin: auto;
   }
   .blog-card__body{
      gap: 8px;
   }
   .up-your-skills-block .container{
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: column;
   }
   .up-your-skills-block h2,.make-bussines-block h2{
      font-size: 10px;
   }
   .up-your-skills-block h1,.make-bussines-block h1{
      font-size: 12px;
   }
   .up-your-skills-block .slide__image{
      width: 100%;
      max-width: 100%;
   }
   .up-your-skills-block .slide__btn{
      width: 176px;
      margin: auto;
   }
   .up-your-skills-block .slide__content{
      gap: 8px;
   }
   .slide__btn img{
      width: 19px;
   }
   .make-bussines-block .wide-content-center{
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      min-height: unset;
   }

   .make-bussines-block h4{
      font-size: 8px;
      font-weight: 400;
      text-transform: unset;
   }
   .make-bussines-block .slide__btn{
      margin: 8px auto;
      width: 176px;
      font-size: 10px;
   }
   .make-bussines-block .slide__image{
      width: 100%;
      height: auto;
      max-width: 100%;
      padding: 22px;
      padding-bottom: 0px;
      position: relative;
   }
   .make-bussines-block .container{
      order: 1;
   }
   .make-bussines-block .slide__content{
      width: 287px;
      margin: auto;
      margin-bottom: 22px;
      gap: 8px;
      width: 100%;
      max-width: 100%;
      
   }
   .slide__text{
      gap: 8px;
   }
   .brands-grid.pc-hide{
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      margin-top: 16px;
   }
   .brands-grid.pc-hide .row{
      display: grid;
      grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
      gap: 12px;
   }
   .brand-item__name{
      font-size: 12px;
      line-height: 1.25em;
   }
   .brand-item__desc{
      margin-top: 8px;
      font-size: 10px;
      line-height: 1.25em;
   }
   .brand-item__info{
      margin: auto 0;
   }

   .blog-card__image-wrap img{
      width: 100%;
   }
   .blog-card__footer{
      padding-top: 16px;
   }
   .landing-section-7.mt-100{
      padding-top: 16px;
   }
   .btn-show-all{
      font-size: 10px;
      line-height: 1.25em;
      height: 28px;
   }
   .slider-blog-dots{
      bottom: 16px;
      left: 0;
      right: 0;
      justify-content: center;
   }
   .product-slidering-block{
      padding-bottom: 46px;
   }
   .no-mob-slider-dots .product-slidering-block{
      padding-bottom: 20px;
   }
   .slider__dot{
      width: 6px;
      height: 6px;
   }
   .btn-show-all img{
      width: 3px;
      height: 6px;
   }
   .product-main-sect-header{
      margin-bottom: 10px !important;
   }
   .landing-section-10 .blog-card{
      grid-template-columns: minmax(100px, 1fr);
   }
   .landing-section-10 .slide__image{
      width: 100%;
      max-height: 190px;
      max-width: 100%;
   }
   .landing-section-10 .slide__image img{
      width: 100%;
   }
   .landing-section-10 .blog-slider-column{
      gap: 16px;
   }
   .landing-section-10 .slide__btn{
      margin: auto;
   }
   .landing-section-10 .slide__content{
      display: flex;
      justify-content: center;
      gap: 16px;
      text-align: center;
   }
   .landing-section-10 .slider__dots{
      justify-content: center;
      left: 0 !important;
      right: 0 !important;
      bottom: 0px;
   }
   .landing-section-10 .product-slidering-block{
      padding-bottom: 22px;
   }

   .modal-body{
      top: 0px;
      margin: 0px;
      padding: 10px 20px;
      max-height: 100vh;
/*      height: calc(100% - 85px);*/
   }

   .header-search{
      max-width: 100%;
   }

   /* banner */
   .banner .banner-first-text{
       margin: 5px 0;
       font-size: 18px;
   }

   .banner .banner-second-text{
       font-size: 14px;
   }

   .banner .banner-third-text{
       font-size: 26px;
   }

   .banner .span-bold{
       font-size: 42px;
   }
   .banner-img{
      width: 58px;
   }
   .catalog-modal .banner .banner-body{
      margin-top: 0px;
      padding: 16px;  
   }
   .catalog-modal .banner{
      max-width: 235px;
   }
   .second-level-menu{
      font-size: 16px;
   }
   .first-level-menu-link{
      font-weight: 600;
      font-style: Semi Bold;
      font-size: 14px;
      text-transform: uppercase;
   }
   .prod-and-actions-row .label-text{
      font-weight: 600;
      font-style: Semi Bold;
      font-size: 14px;
   }
   .brands .modal-brands-title{
      font-size: 14px;
   }
   .modal.active .modal-body{
      transform: translateY(0%);
   }
   .product-card__image-wrap img{
      height: 100%;
      width: auto;
      margin: auto;
   }
   .mob-1-columns{
      grid-template-columns: 1fr;
      gap: 16px;
   }
   .about-leader-banner{
      grid-template-columns: 40px auto;
      gap: 12px;
   }
   .about-leader-banner .banner-text-bold{
      font-size: 14px;
   }
   .about-leader-banner img{
      height: auto;
   }  
   .about-leader-banner{
      padding: 20px;
      gap: 12px;
   }
   .advantage-item .advantage-title{
      font-size: 12px;
   }
   .advantage-item .advantage-text{
      font-size: 10px;
   }
   .advantage-item{
      grid-template-columns: 40px auto;
      gap: 12px;
   }
   .advantage-item .advantage-body{
      gap: 8px;
   }
   .about-leader-banner .banner-text-regular{
      font-size: 12px;
   }
   .about-leader-banner .banner-body .btn{
      margin-top: 20px;
   }
   .about-company-banner{
      height: auto;
      min-height: 150px;
      background-position: 0px;
      background-size: 50%;
      display: flex;
   }
   .about-company-banner > .container{
     margin-left: auto;
     margin-right: 10px;
     margin-top: auto;
     margin-bottom: auto;
   }
   .about-company-banner .slide__title{
      font-size: 12px;
   }
   .about-company-banner .slide__description{
      font-size: 10px;
   }
   .first-blog-image img {
     max-width: 100%; /* картинка не шире родителя */
     height: auto; /* сохраняет пропорции */
     display: block; /* убирает лишний отступ снизу */
   }
   .first-product-blog .blog-card__body{
      padding: 20px;
   }
   .first-product-blog .blog-card__text{
      max-width: 100%; 
   }
   .first-product-blog .blog-card__footer{
      display: flex;
   }
   .first-product-blog .blog-card__body{
      min-width: 0px;
   }
   .first-product-blog{
      padding: 1px;
   }
   .blog-card-useful .blog-card__more{
      width: 100%;
   }
   .connect-novel img{
      height: auto;
   }
   .mob-1-columns iframe{
      max-width: 100%;
   }
   .contacts-contact-form{
      padding: 20px;
   }
   .input-field, .input-textarea, .btn{
      max-width: 100%;
   }
   .bold-title{
      font-size: 26px;
   }
   .text-big{
      font-size: 16px;
   }
   .contact-form{
      max-width: 100%;
      padding: 10px;
   }
   .contact-form .input-field, .contact-form .input-textarea, .contact-form .btn{
      width: 100%;
   }
   .connect-novel-title{ 
      font-size: 12px;
   }
   .previlegie-item .previlegie-title, .previlegie-item .previlegie-text{
      font-size: 16px;
   }
   .seven-previlegies-block .seven-previlegies-inner span{
      font-size: 24px;
   }
   .partner-previlegies .two-columns, .previlegies-list{
      gap: 16px;
   }
   .work-steps-items,.delivery-steps-items{
      grid-template-columns: 1fr 1fr;
   }
   .work-step-item .work-step-title,.delivery-step-item .delivery-step-title{
      font-size: 14px;
      margin-top: 20px;
   }
   .work-step-item .work-step-text,.delivery-step-item .delivery-step-text{
      font-size: 12px;
      margin-top: 10px;
   }
   .partner-banner-bold, h1.partner-banner-title{
      font-size: 18px;
   }
   .partners-banner.bottom-block .partner-banner-bold{
      font-size: 18px;
   }
   .partner-banner-img{
      height: 100%;
      right: -100px;
   }
   .banner-partner-form{
      grid-template-columns: 1fr;
      gap: 16px;
   }
   .partners-banner{
      height: auto;
      overflow: hidden;
   }
   .partner-banner-text>img{
      width: 75px;
      height: auto;
   }
   .banner-partner-form .input-field, .banner-partner-form .input-field{
      height: 40px;
      min-width: 0px;
      padding: 0px 20px;
   } 
   .input-field{
      font-size: var(--fs-base);
      height: 40px;
      padding: 15px 5px 13px;
   }
   .input-textarea{
      color: var(--color-black);
      padding: 15px 5px;
   }
   .input-textarea{
      font-size: var(--fs-base);
   }
   .auth-modal-body-outer{
      padding: 0px;
      left: 0;
   }
   .auth-submit-btn{
      width: 100%;
   } 
   .close-auth-btn{
      right: 10px;
   }
   .offer-agreement-block, .delivery-block, .policy-block{
      font-size: 18px;
   }
   .offer-agreement-block h2, .delivery-block h2, .policy-block h2{
      font-size: 26px;
   }
   .cart-checkout-page .two-columns-first-2fr{
      grid-template-columns: 1fr;
      gap: 80px;
   }
   .cart-table .cart-row{
      grid-template-columns: 1fr 2fr;
   }
   .cart-item-img{
      height: 100px;
   }
   .cart-table .remove-item{
      position: absolute;
      right: 0px;
      top: 0px;
   }
   .cart-page .right-block .total-row{
      margin-top: 0px;
   }
   .right-block .total{
      padding: 10px 0px;
   }
   .right-block .order__total-block, .cart-table{
      padding: 20px 10px;
   }
   .cart-table .cart-row{
      padding-bottom: 10px;
   }
   .delivery__block, .payment{
      grid-template-columns: 1fr 1fr; 
   } 
   .time-item__time,.date-item__num,.delivery__name,.payment__text,.recipient-row__text,.client-avatar-row{
      font-size: 14px;
   }
   .time-item__price,.date-item__weekday,.delivery__price{
      font-size: 12px;
   } 
   .delivery__icon, .payment__icon{
      height: 20px;
      width: 20px;
   }
   .delivery__icon img, .payment__icon img{
      object-fit: contain;
   }
   .delivery__item{
      height: 120px;
   }
   .payment__item{
      height: 80px;
   }
   .date-item__body, .time-item__body{
      padding: 7.5px 10px;
   }
   .date-slider, .time-slider{
      gap: 8px;
   }
   .recipient-row__edit{
      width: 100px;
      font-size: 12px;
      padding: 10px 15px;
   }
   .cart-items-preview .product-slidering-block{
      margin-top: 0px;
   }
   .delivery-modal-panel{
      padding: 20px;
   }
   .delivery-modal-map{
      min-height: 25vh;
   }
   .delivery-modal-panel-inner{
      margin: 0 auto;
      max-width: 95%;
   }
   .pickup-search-wrap{
      width: auto;
   }
   .delivery-modal-panel .input-textarea{
      height: 80px;
   }
   .delivery-modal-panel-inner .buttons-row{
      margin-bottom: 20px;
   }
   .js-save-address-modal{
      margin-top: 20px;
   }
   .delivery-modal-panel .input-field-wrap{
      margin-top: 20px;
   }
   .personal-grid.grid-two-columns{
      grid-template-columns: 1fr;
   }
   .auth-modal-content .input-field{
      width: 100%;
   }
   .order-meta-info{
      display: grid;
      grid-template-columns: 1fr;
      text-align: center;
   }
   .about-certificates-block .certificates-track{
      display: flex;
      flex-wrap: nowrap;
      gap: 12px;
   }
   .about-certificates-block .certificate-item{
      width: calc(50% - 6px);
      min-width: unset;
      min-height: unset;
   }
   .brand-item__image{
      height: 115px;
      overflow: hidden;
   }
   .brand-item__image img{
      width: 100%;
      height: auto;
   }

   .cart-count-cont,.favorites-count-cont{
      width: 16px;
      height: 16px;
   }
   .cart-count-cont span,.favorites-count-cont span{
      font-size: 10px !important; 
   }
   .slide__image img{
      object-fit: contain;
   }
   .contacts-contact-form .mt-80{
      margin-top: 20px;
   }
   .contact-form-wide .header-link{
      gap: 12px;
   }
   .contact-form-wide .header-link a, .contact-form-wide .header-link img{
      height: 30px;
      width: 30px;
   }
   .email-login, .phone-login{
      font-size: 12px;
   }
   .personal-links{
      font-size: 14px;
   }
   .personal-grid .mt-60{
      margin-top: 20px;
   }
   .rounded-person-image{
      width: 50%;
      margin: 0 auto;
   }
   .personal-grid{
      gap: 20px;
   }
   .modal-body.personal-modal{
      padding: 50px 30px 30px;
   }
   .personal-modal-block{
      padding-bottom: 20px;
      margin-top: 20px;
   }
   .personal-modal-block + .personal-modal-block{
      margin-top: 40px;
   }
   .personal-modal-row{
      margin-top: 20px;
   }
   .pink-border-round.wide-container,.partners-banner,.partners-banner.bottom-block{
      width: calc(100% - 1px);
   }
   .who-partner-section .mt-60{
      margin-top: 20px;
   }
   .who-partner-item .text-text{
      font-size: 12px;
   }
   .cart-table .product-anot{
      font-size: 8px;
   }
   .auth-step .auth-form .grid-two-columns{
      grid-template-columns: 1fr;
   }
   .blog-detail-content{
      grid-template-columns: 1fr;
   }
   .blog-detail-content .blog-content{
      order: 2;
   }
   .blog-navigation{
      position: relative;
      top: 0;
      padding: 16px;
   }
   .nav-link{
      font-size: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
   }
   .nav-item{
      padding-left: 16px;
   }
   .navigation-title{
      margin-bottom: 16px;
   }
   .blog-post-metadata{
      grid-template-columns: 1fr 1fr;
   }
   .meta-rubric{
      flex-wrap: wrap;
   }
   .product-category-sect-header .blog-divider.mt-50{
      margin-top: 0px;
   }
}
/**
 * Планшеты и нетбуки
*/
@media (max-width: 1024px){
   h1,h2{
      line-height: 1.25em;
      font-weight: var(--fw-semibold);
   }
   .categories-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
   }
   .right-arrows{
      gap: 12px;
   }
   .product-card__btn{
      font-size: var(--fs-md);
   }
   .product-card__price{
      font-size: 12px;
   }
   .product-card__price-old{
      font-size: 8px;
   }
   .product-card__name{
      font-size: 10px;
   }
   .product-card__anot{
      font-size: 8px; 
   }
   .make-bussines-block .wide-content-center{
      min-height: unset;
      gap: 16px;
   }
   .landing-section-10 .two-columns{ 
      grid-template-columns: minmax(100px, 1fr);
      gap: 16px;
   }
   .one-post-column{
      min-height: unset;
   }
   .top-subscription h2{
      line-height: 1.25em;
   }
   .four-columns{
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
   }
   .payment-systems-img{
      margin: 32px 0;
   }
   .footer-logo-contacts>a>img{
      display: none;
   }
   .footer{
      padding: 32px 0px;
   }
   .pink-bordered{
      padding: 0px;
   }
   .product-card__badge {
      font-size: 7px;
      min-width: 36px;
      padding: 2px 3px;
   }
   .category-item__title{
      font-size: 12px;
      line-height: 1.25em;
   }
   .category-item{
      gap: 8px;
   }
   .subscription-block .bg-lightgray{
      gap: 30px;
      padding: 30px 0px;
   }
   .tile-block{
      padding: 12px;
   }
   .tile-block .tile-text-bold{
      font-size: 12px;
   }
   .tile-block .tile-text{
      font-size: 8px;
   }
   .footer-menu-title{
      font-size: 16px;
      line-height: 1.2em;
   }
   .footer-menu-links a{
      font-size: 14px;
      line-height: 26px;
   }
   .about-tiles-grid.pc-hide{/*mobile*/
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
   }
   .about-tiles-grid.pc-hide>div{
      min-height: 110px;
   }
   .tile-block .tile-text{
      margin-top: 0px;
   }
   .user-pagination{
      width: 100%;
   }
   .support-img{
      margin: auto 0;
   }
   .support-img img{
      height: 30px;
   }

   .support-gray-text{
      font-size: 10px;
   }
   .support-card .support-black-text{
      font-size: 14px;
   }

   .product-card__body .product-card__price{
      font-size: 14px;
   }
   .partners-banner-container{
      padding-top: 0px;
   } 
   .blog-card__title{
      font-size: 12px !important;
   }
}  


.mobile-menu-header button.close-catalog-btn{
   display: block;
}
.mobile-menu-header{
   font-weight: 600;
   font-style: Semi Bold;
   font-size: 14px;
   text-transform: uppercase;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
}
.mobile-menu-header .close-catalog-btn{
   width: 18px;
   height: 18px;
}

.header-menu-mobile{
   display: grid;
   gap: 15px;
}

.header-menu-mobile a{
   font-weight: 600;
   font-style: Semi Bold;
   font-size: 14px;
   text-transform: uppercase;
}
.catalog-modal-mobile .header-links{
   display: grid;
   gap: 40px;
   margin: 40px 0;
   grid-template-columns: 40px 40px;
}
.catalog-modal-mobile .header-link a{
   width: 40px;
   height: 40px;
}
.header-menu-mobile img{
   display: inline;
   margin-left: 10px;
}
.back-mobile-menu{
   cursor: pointer;
}
.back-mobile-menu img{
   transform: rotate(180deg);
   display: inline;
   margin-right: 10px;
}
/* Общие стили для обоих окон внутри мобильного меню */
.modal-body.catalog-modal-mobile,
.modal-body.catalog-categories-modal {
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    /* Позиционируем абсолютно, чтобы они лежали в одном месте экрана */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
}

/* --- СОСТОЯНИЯ ГЛАВНОГО МЕНЮ --- */

/* Класс, который сдвигает главное меню влево и скрывает */
.modal-body.catalog-modal-mobile.slide-out {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
}

/* --- СОСТОЯНИЯ МЕНЮ КАТЕГОРИЙ --- */
/* По умолчанию меню категорий сдвинуто вправо и скрыто */
.modal-body.catalog-categories-modal {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
}

/* Класс, который вытягивает меню категорий в центр */
.modal-body.catalog-categories-modal.slide-in {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
.catalog-categories-modal .menu-links-modal{
   gap: 32px;
   display: grid;
}
.mobile-header-bottom{
   top: auto;
   bottom: 0;
   right: 0;
   left: 0;
   width: 100%;
}
.mobile-header-bottom .header-buttons{
   gap: 45px;
   justify-content: space-between;
}
.mobile-header-bottom .header-buttons span{
   font-weight: 400;
   font-size: 10px;
   letter-spacing: 2%;
   text-align: center;
}
@media (max-width: 980px) {

    /* ===== Общая раскладка ===== */
    .product-detail-columns {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "slider"
            "right";
        gap: 20px;
        position: relative;
    }

    /* ===== Основное изображение ===== */
    .product-detail-main {
        grid-area: main;
        margin-left: 0;
        width: 100%;
    }

    .product-detail-main .product-card__image-wrap {
        width: 100%;
        max-height: none;
        height: auto;
        padding-right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--color-semi-gray, #f5f5f5);
        border-radius: 4px;
    }

    .product-detail-main .product-card__image-wrap img {
        width: 100%;
        max-width: 420px;
        height: auto;
        object-fit: contain;
    }

    /* ===== Слайдер миниатюр: горизонтальная лента под фото ===== */
    .product-detail-slider {
        grid-area: slider;
        position: static;      /* убираем absolute */
        width: 100%;
        display: flex;
        flex-direction: row;   /* было column */
        align-items: center;
        gap: 12px;
    }

    .slider-thumbs-track-wrap {
        flex: 1;
        width: auto;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .slider-thumbs-track-wrap::-webkit-scrollbar {
        display: none;
    }

    .slider-thumbs-track {
        display: flex;
        flex-direction: row;   /* было column */
        gap: 12px;
        transform: none !important; /* отключаем JS-сдвиг по Y */
    }

    .slider-thumb {
        width: 72px;
        height: 72px;
        flex-shrink: 0;
    }

    /* ===== Стрелки: поворачиваем горизонтально ===== */
    .slider-thumbs-arrow {
        padding: 0 6px;
        flex-shrink: 0;
    }
    .slider-thumbs-arrow--down svg {
        transform: rotate(-90deg); /* вправо */
    }
    .slider-thumbs-arrow--up svg {
        transform: rotate(90deg);  /* влево */
    }

    /* ===== Правая колонка ===== */
    .product-detail-right {
        gap: 12px;
        width: 100%;
    }

    .product-detail-right .exclusive-btn {
        margin-bottom: 12px;
        justify-content: center;
    }

    .product-detail-right .price-and-btns {
        display: flex;
        flex-wrap: wrap;
    }

    .product-card__prices {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

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

    /* Кнопка "в корзину" / счётчик — на всю ширину */
    .add-cart-and-favorite-btn.product-card {
        display: flex;
        align-items: stretch;
        gap: 10px;
        width: 100% !important;
    }

    .add-cart-and-favorite-btn .product-card__action-slot {
        flex: 1;
    }

    .product-card__counter-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 8px;
        border: 1px solid var(--color-primary, #ccc);
        border-radius: 4px;
    }

    .product-card__counter-action {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .favorite-btn-in-card {
        flex-shrink: auto;
    }

    .prod-detail-auth-btn {
        display: block;
        text-align: left;
    }
   .shop-product .tabs-nav{
      margin-left: 0px;
      gap: 16px;
   }
   .product-detail-right .share-btn{
      width: 100%;
      max-width: 100%;
   }
   .prod-detail-auth-btn{
      width: 50%
   }
   .product-detail-right .product-card__stock{
      margin: 0px;
      width: 50%;
      justify-content: right;
   }
   .product-detail-right .product-card__price{
      font-size: 22px;
   }
   .product-detail-advantages{
      font-size: 10px;
   }
}
@media(max-width: 1200px){
   .header-search .search-input{
      width: auto;
      min-width: 50px;
   }
}