/* Стиль для заголовка раздела "Подборки" */
.dop-cat-title {
  font-size: 18px; /* Размер шрифта */
  font-weight: 600; /* Жирность текста */
  color: #333; /* Цвет текста */
  margin-bottom: 15px; /* Отступ снизу перед списком */
  padding-left: 15px; /* Левый отступ для выравнивания с рамкой списка */
  text-transform: uppercase; /* Делаем текст заглавными буквами */
}

/* Основной стиль для списка подборок */
.dop-cat-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10px 0;
  list-style: none;
  margin: 20px 0;
  border: 1px solid #cecece; /* Общая рамка */
  border-radius: 4px; /* Легкое скругление углов */
  padding: 15px; /* Внутренний отступ */
  background-color: #fff; /* Фон для контраста с рамкой */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* Стиль для элементов списка */
.dop-cat-links li {
  background: #007bff; /* Цвет фона кнопки */
  color: #fff; /* Цвет текста */
  padding: 8px 12px; /* Внутренние отступы */
  border-radius: 8px; /* Скругление углов */
  font-size: 14px; /* Размер шрифта */
  font-weight: 500; /* Жирность текста */
  margin: 5px; /* Отступы между элементами */
  cursor: pointer; /* Указатель мыши при наведении */
  transition: background 0.3s ease-in-out; /* Плавное изменение фона */
  white-space: nowrap; /* Предотвращает перенос текста */
}

/* Стиль при наведении на элемент списка */
.dop-cat-links li:hover {
  background: #0056b3; /* Темно-синий цвет при наведении */
}

/* Стиль ссылок внутри элементов списка */
.dop-cat-links li a {
  text-decoration: none; /* Убираем подчёркивание */
  color: white; /* Цвет текста */
  display: block; /* Блоковый элемент */
}

/* Адаптивный дизайн для мобильных устройств */
@media screen and (max-width: 480px) {
  .dop-cat-links {
    flex-wrap: nowrap; /* Отключаем перенос строк */
    overflow-x: auto; /* Горизонтальная прокрутка */
    padding-bottom: 10px; /* Нижний отступ */
    -webkit-overflow-scrolling: touch; /* Плавная прокрутка */
  }

  .dop-cat-links li {
    white-space: nowrap; /* Запрещаем перенос текста */
    flex-shrink: 0; /* Предотвращаем уменьшение элементов */
    margin: 5px; /* Сохраняем отступы */
  }
}