@media (max-width: 663px) {
  .header__navigation {
    display: none;
  }
}





@media (max-width: 820px) {
  .sidebar {
    display: none !important;
    /* Прячем меню категорий */
  
  }


  
@media (max-width: 820px) {
  #sidebar-activ {
    padding-top: 30px;
    /* Прячем меню категорий */
  
  }

  .main-iner {
    justify-content: center;
    /* Центрируем весь блок на мобильном */
  }

  .main-content {
    flex-basis: 100%;
    /* Карточки занимают всю доступную ширину экрана */
    width: 100%;
  }


/*--------------------------------------------------------------------------------------------------------------------------------*/



  /*-----------------------------------------------------------------------------------------------------------------------------------*/


  @media (max-width: 37.5rem) {
    .card {
      width: 100% !important;
      max-width: 100%;
    }

    .card__btn-iner {
      flex-direction: column ;
      align-items: center ;
      gap: 0.5rem ;
    }

    .card__description-btn,
    .card__down-btn {
      width: auto;
      min-width: 8.125rem;
      max-width: 11.25rem ;
      padding: 0.625rem 0.875rem;
    }
  }







  @media (max-width: 18.5rem) {
    .card {
      padding: 0.375rem !important;
      gap: 0.5rem !important;
      width: 100% !important;
    }

    .card__img {
      margin-bottom: 0.5em !important;
    }

    .card__title {
      font-size: 1.05rem !important;
    }

    .card__btn-iner {
      gap: 0.375rem !important;
      align-items: center !important;
      width: 100% !important;
    }

    .card__description-btn,
    .card__down-btn {
      width: auto !important;
      min-width: 0 !important;
      max-width: 8.75rem !important;
      flex-shrink: 1 !important;

      padding: 0.375rem 0.625rem !important;
      font-size: clamp(0.5625rem, 3.8vw, 0.6875rem) !important;
    }
  }

  /*-----------------------------------------------------------------------------------------------------------------------------------*/






  @media (max-width: 48rem) {

    /* Перестраиваем в вертикальную стопку по центру */
    .card-specification {
      flex-direction: column !important;
      align-items: center !important;
      /* Центрируем блоки на странице */
      gap: 1.5rem !important;
      flex-wrap: wrap;
    }

    /* Картинка становится центральной и широкой */
    .card-specification__img {
      width: 100% !important;
      max-width: 31.25rem !important;
      /* Максимальная ширина картинки (~500px) */
      flex: 1 1 100% !important;
      margin: 0 auto !important;
    }

    /* ГЛАВНОЕ: Таблица теперь раздвинута СТРОГО вширь по краям картинки (вровень) */
    .card__specification-table-iner {
      width: 100% !important;
      max-width: 31.25rem !important;
      /* Раздвигаем края таблицы ровно до границ картинки */
      flex: 1 1 100% !important;
      margin: 0 auto !important;
      /* Центрируем таблицу ровно под логотипом */
    }

    /* Строки таблицы остаются горизонтальными, а точки красиво растягиваются */
    .card__specification-item {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-end !important;
      width: 100% !important;
      flex-wrap: wrap;
    }



    .card__specification-item::after {
      display: block !important;
      /* Точки сочно тянутся от края до края широкой таблицы */
    }
  }



  @media (max-width: 18.5rem) {
    .card-specification {
      padding: 0.25rem !important;
      gap: 1rem !important;
    }

    .card-specification__img {
      max-width: 12rem !important;
      /* Ужимаем картинку на микро-экранах */
    }

    /* Только на микро-экранах разворачиваем строки вертикально, чтобы спасти верстку */
    .card__specification-item {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 0.125rem !important;
      padding-bottom: 0.375rem !important;
      border-bottom: 0.0625rem dashed rgba(128, 128, 128, 0.2) !important;
    }

    .card__specification-item::after {
      display: none !important;
      /* Прячем точки, когда надписи встали друг под друга */
    }
  }

  
  @media (max-width: 370px) {
 .card-specification__table {
      width: 100%;
    }
  }



@media (max-width: 515px) {
    .search-desktop {
      display: none;
    }
  }

  @media (max-width: 515px) {
    .search_mobile {
      display: block;
      
    }
  }






  @media (max-width: 820px) {

    /* ==========================================================================
       1. БЛОКИРОВКА СКРОЛЛА ОСНОВНОГО САЙТА
       ========================================================================== */
    body.no-scroll {
      overflow: hidden !important;
      height: 100vh !important;
    }

    /* ==========================================================================
       2. КНОПКА ОТКРЫТИЯ (ФИКСИРОВАННАЯ В ШАПКЕ)
       ========================================================================== */
    aside#sidebar-activ .menu-open-btn {
      display: inline-block !important;
      padding: 10px 15px;
      background-color: #1f1f2e;
      color: #ffffff;
      border: none;
      cursor: pointer;
      font-weight: bold;

      position: fixed !important;
      top: 15px !important;
      left: 15px !important;

      z-index: 200000 !important;
    }

    /* ==========================================================================
       3. НАСТРОЙКИ САЙДБАРА (ПРИЖАТ СТРОГО ПОД ШАПКУ)
       ========================================================================== */
    aside#sidebar-activ {
      display: block !important;
      visibility: visible !important;
      position: fixed !important;

      /* Встает строго под шапкой и игнорирует флекс-выравнивание родителей */
      top: 60px !important;
      /* Высота твоей шапки */
      align-self: flex-start !important;
      /* Запрещает родителю пинать сайдбар вниз сайта */

      left: -280px !important;
      /* Спрятан за левый край экрана */
      width: 280px !important;
      /* Ширина самого меню */
      height: calc(100vh - 60px) !important;
      /* Растягивается до самого низа дисплея */


      z-index: 10 !important;
      /* Слой ниже контента, чтобы быть ЗА ним */
      overflow-y: auto !important;
      /* Разрешает скролл только категорий внутри меню */
      transition: left 0.4s ease !important;
    }

    /* Анимация выезда самого сайдбара */
    aside#sidebar-activ.active {
      left: 0 !important;
      /* Меню плавно встает на экран */
    }

    /* ==========================================================================
       4. НАСТРОЙКИ ГЛАВНОГО КОНТЕНТА И СЕТКИ
       ========================================================================== */
    .main-iner {
      justify-content: center;
      /* Центрируем весь блок на мобильном */
    }

    .main-content {
      flex-basis: 100%;
      /* Карточки занимают всю доступную ширину экрана */
      width: 100%;
    }

    /* Твой главный контент, который двигается */
    main#main-activ {
      width: 100% !important;
      position: relative !important;
      z-index: 20 !important;
      /* Идет ПОВЕРХ сайдбара */
      transition: transform 0.4s ease !important;
      /* Скорость как у сайдбара */
    }

    /* Анимация сдвига контента вправо */
    main#main-activ.active {
      transform: translateX(280px) !important;
      /* Отъезжает на ширину меню */
    }
  }

  /* На компьютерах (больше 820px) кнопку внутри сайдбара полностью скрываем */
  @media (max-width: 820px) {
    .menu-open-btn {
      display: block;
    }
  }



































  /* Этот код сработает ТОЛЬКО на экранах от 1920px (большие мониторы и ТВ) */
@media (min-width: 1920px) {
  .container {
    max-width: 1300px; /* Чуть-чуть расширяем, но не до пугающих 1440px */
  }
  
  html {
    font-size: 115%; /* Магия! Увеличивает ВСЕ тексты и иконки на сайте на 15% */
  }
}