/* Дополнительные стили для страницы каталога Halora.
   Основная раскладка остаётся на Tailwind-классах в HTML. */

.catalog-page {
  /* Хук для специфичных правок под каталог, если будут нужны в будущем. */
}


/* Кнопки-фильтры категорий каталога */
.catalog-page .catalog-filter-button {
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.catalog-page .catalog-filter-button.catalog-filter--active {
  background-image: linear-gradient(135deg, #D8A04A, #C8895A);
  color: #3A2715;
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.85);
  transform: translateY(-0.5px);
}

.catalog-page .catalog-filter-button.catalog-filter--active [data-catalog-count] {
  background-color: rgba(58, 39, 21, 0.12);
  color: #3A2715;
}

/* Грид каталога: высота строк равна высоте самой высокой карточки в строке.
   Карточки внутри сами растягиваются за счёт flex и h-full (см. catalog.js). */


/* Активная страница пагинации */
.catalog-page [data-catalog-page][data-current="true"] {
  background-image: linear-gradient(135deg, #D8A04A, #C8895A);
  color: #3A2715;
  border-color: transparent;
}

/* Сортировка — базовый вид опций в выпадающем меню */
.catalog-page [data-catalog-sort-option] {
  border-radius: 9999px;
  background: transparent;
}

/* Текст внутри опций сортировки — плавные hover/active эффекты по тексту, не по области */
.catalog-page [data-catalog-sort-option] span {
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.catalog-page [data-catalog-sort-option]:hover,
.catalog-page [data-catalog-sort-option]:focus-visible {
  background: transparent;
}

.catalog-page [data-catalog-sort-option]:hover span {
  color: rgba(255, 249, 239, 0.96);
  text-shadow: 0 0 10px rgba(246, 242, 237, 0.55);
}

/* Активная опция сортировки — лёгкий акцент только по тексту */
.catalog-page [data-catalog-sort-option][data-active="true"] span {
  color: rgba(246, 242, 237, 0.98);
  font-weight: 700;
}