/* 1. Исправляем форму: запрещаем превращать растянутые точки в овалы */
.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  /* Заменяем проценты на фиксированное скругление углов */
  border-radius: 4px !important; 
  /* Задаем стартовую ширину и высоту для дефолтных точек из шаблона */
  width: 8px !important;
  height: 8px !important;
  transition: all 0.3s ease-in-out !important;
}

/* 2. Задаем ширину для активного прямоугольника (как в дизайне Silicon) */
.swiper-pagination-bullet-active {
  width: 24px !important; /* Делает прямоугольник вытянутым */
  background-color: #007bff !important; /* Убеждаемся, что цвет применяется корректно */
}

/* 3. Защита от дубликатов: если в HTML все же вывелось два контейнера пагинации, 
   скрываем пустые и неинициализированные элементы */
.swiper-pagination:not(.swiper-pagination-lock):empty {
  display: none !important;
}