/*==================================================*/
/* ЧИСТЫЙ НАТИВНЫЙ СКРОЛЛ БОКОВОЙ КОЛОНКИ БАННЕРОВ */
/*==================================================*/

div.wrapper.attention-banners.banners {
  display: block !important;
  height: 500px !important;       /* Намертво фиксируем высоту фрейма */
  max-height: 500px !important;   /* Защита от растягивания движком CMS */
  
  /* Скроллбар включен ВСЕГДА: это на 100% исключает прыжки контента влево! */
  overflow-y: scroll !important;  
  
  border: 1px solid #ccc !important;
  padding: 25px 15px !important;  /* Увеличили верхний/нижний паддинг, чтобы текст не обрезался сразу */
  box-sizing: border-box !important;
  position: relative !important;

  /* ЭФФЕКТ РАСТВОРЕНИЯ СВЕРХУ И СНИЗУ */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Все ссылки-баннеры стоят жестко друг за другом, без клонов и трансформаций */
div.wrapper.attention-banners.banners a {
  display: block !important;
  margin-bottom: 15px !important;
  text-align: center !important;
  transform: none !important;     /* Полный сброс старых стилей */
  animation: none !important;
}

div.wrapper.attention-banners.banners img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block !important;
}

/*------*/
/* Настройки кастомного скроллбара */
/*------*/

/* Настройки для Firefox */
div.wrapper.attention-banners.banners {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; 
  transition: scrollbar-color 0.3s ease;
}
div.wrapper.attention-banners.banners:hover {
  scrollbar-color: #288AC8 transparent; 
}

/* Настройки для Chrome, Яндекс.Браузера, Edge */
div.wrapper.attention-banners.banners::-webkit-scrollbar {
  width: 8px; 
}

div.wrapper.attention-banners.banners::-webkit-scrollbar-track {
  background: transparent;
}
 
/* ИСПРАВЛЕНИЕ АНИМАЦИИ: Скроллбар скрыт через color, так как background не анимируется в webkit */
div.wrapper.attention-banners.banners::-webkit-scrollbar-thumb {
  background-color: currentColor; 
  color: transparent;
  border-radius: 4px;
  transition: color 0.3s ease; /* Анимация цвета работает корректно */
}

/* При наведении мыши на блок баннеров ползунок становится ярко-синим */
div.wrapper.attention-banners.banners:hover::-webkit-scrollbar-thumb {
  color: #288AC8; 
}

/* При наведении курсора непосредственно на сам ползунок — делаем его чуть темнее */
div.wrapper.attention-banners.banners::-webkit-scrollbar-thumb:hover {
  color: #555555 !important; 
}