/********CATEGORIES*******/

@media only screen and (min-width: 768px) {
  .dmt-2 {
    margin-top: .5rem !important;
  }
  .categories__blockcats {
    height: 180px;
   }
}


.categories__blockcats {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .catsblock {
        overflow-x: scroll;
        background: none;
        scrollbar-width: none;
        background-color: rgb(246 250 245 / 63%);
        border-radius: 12px;
    }
    .sBg3WyA {
        min-width: 70px;
        min-height: 70px;
    }
    .catimg {
    padding: 5px;
    margin-bottom: -5px;
    }
    .rm1{
        min-width: 125px !important;
        width: 125px;
    }
    .rm2 {
        min-width: 79px !important;
        width: 79px;
    }
    .rm3 {
        min-width: 125px !important;
        width: 125px;
    }
}
@media screen and (min-width: 767px) {
.cats__link {
    height: 90px;
    }
    .rd1{
        min-width: 165px !important;
        width: 165px;
    }
    .rd2 {
        min-width: 150px !important;
        width: 150px;
    }
    .rd3 {
        min-width: 190px !important;
        width: 190px;
    }
    .mdm45 {
        margin-bottom: 45px;
    }
    .scroll-stat {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 10px;
    }
    .wimg {
        margin: 5px 3px;
        max-height: 55px;
        object-fit: contain;
    }
}
.catsgrid {
    --columns: 19;
    display: grid;
    grid-template-columns: repeat(var(--columns), [col] 1fr);
    grid-template-rows: repeat(2, [row] 90px);
    gap: 8px;
}
.cats__link  {
    box-shadow: rgba(24, 26, 32, 0.05) 0px 2px 5px 0px;
    display: block;
    position: relative;
    cursor: pointer;
    font-weight: 500;
    color: rgb(25, 29, 40) !important;
    font-size: 12px !important;
    background: var(--cats__link);
    border-radius: 12px;
    overflow: hidden;
    padding: 7px 14px 10px 7px;
    text-decoration: none;
    height: 79px;
}

.Dagora-Cat-Title-home {
    white-space: pre-wrap;
    color: var(--featured-title-color);
}



.scroll-stat {
        display: flex;
}

@media screen and (max-width: 767px) {
    .cats__link {
        flex-shrink: 0; /* ЗАПРЕЩАЕМ плитке сжиматься меньше ширины */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        z-index: 1;
    }
    
    /* Исправляем конкретно плитку с Грузотакси (где обычный img) */
    .wimg {
        position: absolute;
        bottom: 5px !important;
        right: 0;
        z-index: -1;
    }
}

/* ПАТЧ-МИНИМУМ: убрать «рывок» и не менять дизайн */

/* 1) Убираем лэйаут-анимации у плиток.
      Оставляем только безопасную подсветку по hover (фон и тень). */
.cats__link {
  transition-property: background-color, box-shadow;
  transition-duration: .2s;
  transition-timing-function: ease;
}

/* Если хотите полностью отключить любые анимации — раскомментируйте:
.cats__link { transition: none !important; }
*/

/* 2) Мобильные: единое поведение иконки.
      НИЧЕГО не меняем в размерах и прокрутке, только снимаем конфликт top/z-index. */
@media (max-width: 767px) {
 .scroll-stat {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  }
}

/* Base */
.categories__blockcats { width: 100%; }
.catsblock {
  display: block;
}
.scroll-stat {
  flex-wrap: nowrap;
}

.cats__link {
  box-shadow: rgba(24, 26, 32, 0.05) 0 2px 5px 0;
  display: block;
  position: relative;
  cursor: pointer;
  font-weight: 500;
  color: rgb(25, 29, 40) !important;
  font-size: 12px !important;
  background: rgb(149 140 168 / 13%);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  line-height: 1.2;
  user-select: none;
  /* по умолчанию отключаем любые лэйаут-анимации */
  transition: none;
}

.Dagora-Cat-Title-home {
  white-space: pre-wrap;
  color: var(--featured-title-color);
}
/* Отдельная картинка .wimg, если используется IMG вне .svgimg */
.wimg {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Мобильные: до 767px включительно */
@media (max-width: 767px) {
  .catsblock {
    background: none;
    padding: 8px 2px 15px 2px;
    /*background-color: rgba(246, 250, 245, 0.63);*/
  }
  .scroll-stat {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    border-radius: 12px;
  }
  .scroll-stat::-webkit-scrollbar { display: none; }

  .cats__link {
    flex: 0 0 auto;         /* запрещаем сжатие плитки */
    height: 79px;           /* жесткая высота */
    padding-right: 84px;    /* резерв под иконку справа */
  }

  /* Жесткие ширины для мобильных модификаторов */
  .cats__link.rm1 { width: 125px; min-width: 125px; }
  .cats__link.rm2 { width: 79px;  min-width: 79px;  }
  .cats__link.rm3 { width: 125px; min-width: 125px; }

  .wimg   {margin-right: 3px; max-height: 45px; object-fit: contain; }

}

/* Десктоп и планшеты: от 768px и выше */
@media (min-width: 768px) {
  .dmt-2 { margin-top: .5rem !important; }
  .mdm45 { margin-bottom: 45px; }
  .categories__blockcats { height: 180px; }

  .cats__link {
    height: 100px;          /* жесткая высота */
    padding-right: 96px;   /* резерв под иконку справа */
  }

  /* Жесткие ширины для десктопных модификаторов */
  .cats__link.rd1 { width: 176px; min-width: 165px; }
  .cats__link.rd2 { width: 150px; min-width: 150px; }
  .cats__link.rd3 { width: 198px; min-width: 190px; }
  
  .wimg {height: 70px;}

}

/* Безопасная подсветка при наведении (только там, где есть ховер) */
@media (hover: hover) and (pointer: fine) {
  .cats__link {
    transition: background-color .2s ease, box-shadow .2s ease; /* не анимируем размеры */
  }
  .cats__link:hover {
    background-color: var(--cats__link-hover, rgba(0,0,0,0.04));
    box-shadow: 0 4px 10px rgba(24,26,32,0.08);
  }
  .cats__link:active {
    box-shadow: 0 2px 6px rgba(24,26,32,0.06);
  }
}