/* ----------------------------------------------------------
   1. Заголовок категории — по центру, крупный
   ---------------------------------------------------------- */

.category-header-block {
  text-align: center;
  padding: 1.1rem 0 1.1rem;
  position: relative;
}

.category-page-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.55rem;
  color: #1a1a1a;
  text-transform: none;
  letter-spacing: -0.02em;
  display: inline-block;
}

.category-page-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: #e87722;
  border-radius: 2px;
  margin: 0.45rem auto 0;
}

/* --- Кнопка «Назад» --- */
.ilze-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #888;
  text-decoration: none;
  margin-bottom: 0.65rem;
  transition: color 0.15s;
}

.ilze-back-btn:hover {
  color: #e87722;
  text-decoration: none;
}

.ilze-back-btn__arrow {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 767px) {
  .ilze-back-btn {
    font-size: 0.78rem;
  }
}

/* Убрать изображение и описание категории */
.page-category .category-cover,
.page-category .category-description,
#category-description {
  display: none !important;
}


/* ----------------------------------------------------------
   2. Подкатегории — горизонтальный ряд карточек
   ---------------------------------------------------------- */

.subcategory-cards {
  display: flex;
  gap: 14px;
  padding: 0 0 0.5rem;
  margin: 0 auto;
  max-width: 900px;
}

/* --- Десктоп: один ряд --- */
@media (min-width: 768px) {
  .subcategory-cards {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .subcategory-card {
    flex: 0 0 auto;
    width: 80px;
    max-width: 80px;
    min-width: 0;
  }

  .subcategory-card__image-wrap {
    width: 80px;
  }
}

/* --- Мобильный: горизонтальный свайп --- */
@media (max-width: 767px) {
  .subcategory-cards-wrapper .subcategory-cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 16px;
    padding-top: 0 !important;
    padding-right: 8px !important;
    padding-bottom: 0.15rem !important;
    padding-left: 8px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .subcategory-cards::-webkit-scrollbar {
    display: none;
  }

  .subcategory-card {
    flex: 0 0 auto;
    width: 80px;
    scroll-snap-align: start;
  }

  .subcategory-card:first-child {
    margin-left: 8px !important;
  }

  .subcategory-card__image-wrap {
    width: 80px;
  }

  .subcategory-card__name {
    font-size: 0.62rem;
  }
}

.subcategory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #1a1a1a;
  width: 80px;
  transition: transform 0.2s ease;
}

.subcategory-card:hover {
  transform: translateY(-3px);
  text-decoration: none;
}

.subcategory-card__image-wrap {
  width: 80px;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  border-radius: 12px;
  background: #f8f7f5;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.subcategory-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subcategory-card__no-image {
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

.subcategory-card__name {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.01em;
  color: #9a4a12;
  background: #fdeee0;
  padding: 2px 7px;
  border-radius: 20px;
  transition: background 0.2s ease, color 0.2s ease;
}

.subcategory-card:hover .subcategory-card__name {
  background: #fbe2c9;
  color: #7a3a0d;
}


/* ----------------------------------------------------------
   3. СТРОКА СОРТИРОВКИ
      Счётчик слева — сортировка справа, одна строка
   ---------------------------------------------------------- */

#js-product-list-top {
  margin-bottom: 1.25rem;
}

/* --- Отступы от краёв экрана — сортировка и карточки --- */
@media (min-width: 768px) {
  .page-category .products-selection-bar,
  .page-category #js-product-list .products.row,
  .page-category nav.pagination {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 767px) {
  .page-category .products-selection-bar {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* Карточки — отступ от краёв (компенсируем отрицательный margin row) */
  .page-category #js-product-list {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Новый флекс-контейнер */
.products-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: #f7f7f7;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  margin-bottom: 1.25rem;
}

/* Счётчик */
.products-count p {
  font-size: 0.82rem;
  font-weight: 400;
  color: #888;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Правая часть */
.products-sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Лейбл "Сортировать по:" */
.ilze-sort-label {
  font-size: 0.82rem;
  color: #666;
  white-space: nowrap;
}

/* Обёртка дропдауна */
.ilze-sort-wrap {
  position: relative;
}

/* Кнопка дропдауна */
.ilze-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 0.875rem;
  color: #333;
  cursor: pointer;
  min-width: 170px;
  justify-content: space-between;
  transition: border-color 0.15s;
}

.ilze-sort-btn:hover {
  border-color: #999;
}

/* Убираем синее Bootstrap-выделение при фокусе — все варианты */
.ilze-sort-btn:focus,
.ilze-sort-btn:focus-visible,
.ilze-sort-btn:focus-within,
.ilze-sort-btn:active,
button.ilze-sort-btn:focus {
  outline: 0 !important;
  box-shadow: none !important;
  border-color: #999 !important;
}

/* Стрелка внутри кнопки */
.ilze-sort-arrow {
  flex-shrink: 0;
  color: #666;
  transition: transform 0.2s;
}

.ilze-sort-wrap.show .ilze-sort-arrow,
.ilze-sort-wrap[aria-expanded="true"] .ilze-sort-arrow {
  transform: rotate(180deg);
}

/* Выпадающий список */
.ilze-sort-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  z-index: 200;
  padding: 4px 0;
}

/* Элемент списка */
.ilze-sort-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 0.875rem;
  color: #333;
  text-decoration: none;
  transition: background 0.12s;
}

.ilze-sort-item:hover {
  background: #f5f5f5;
  color: #111;
  text-decoration: none;
}

/* Активный элемент (current) */
.ilze-sort-item.current {
  font-weight: 600;
  color: #111;
}

.ilze-sort-item.current svg {
  color: #111;
  flex-shrink: 0;
}


/* ----------------------------------------------------------
   4. ПАГИНАЦИЯ — по центру, компактные кнопки
      Таргетируем реальные классы PrestaShop classic
   ---------------------------------------------------------- */

/* Контейнер пагинации */
#js-product-list-bottom {
  margin-top: 1.5rem;
}

/* Bootstrap nav ul.pagination */
.pagination {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 1.5rem 0 0.5rem;
  margin: 0;
  border-top: 1px solid #e0e0e0;
}

/* Каждая кнопка */
.pagination .page-item .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 0.875rem;
  color: #333 !important;
  background: #fff !important;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  margin: 0 !important;
}

.pagination .page-item .page-link:hover {
  background: #f0f0f0 !important;
  border-color: #999 !important;
  color: #111 !important;
}

/* Активная страница */
.pagination .page-item.active .page-link,
.pagination .page-item.current .page-link {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
  font-weight: 600;
  pointer-events: none;
}

/* Отключённые */
.pagination .page-item.disabled .page-link {
  opacity: 0.35;
  pointer-events: none;
}

/* Кнопки Назад/Вперёд */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 500;
}

.pagination .page-item:first-child .page-link:hover,
.pagination .page-item:last-child .page-link:hover {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

/* Счётчик "Показано 1-20 из 158" под пагинацией */
#js-product-list-bottom .pagination + *,
.products-pagination-summary {
  text-align: center;
  font-size: 0.78rem;
  color: #999;
  padding-bottom: 1rem;
  display: block;
}


/* ----------------------------------------------------------
   5. Кастомная пагинация (pagination.tpl — верхняя)
   ---------------------------------------------------------- */

.pagination-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0 1rem;
  border-top: 1px solid #e0e0e0;
  margin-top: 1rem;
}

.page-list-custom {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.page-list-custom li a,
.page-list-custom li span.spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #333;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.page-list-custom li a:hover {
  background: #f0f0f0;
  border-color: #999;
  color: #111;
}

.page-list-custom li.current a {
  background: #222;
  border-color: #222;
  color: #fff;
  font-weight: 600;
  pointer-events: none;
}

.page-list-custom li a.prev-btn,
.page-list-custom li a.next-btn {
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 500;
}

.page-list-custom li a.prev-btn:hover,
.page-list-custom li a.next-btn:hover {
  background: #222;
  border-color: #222;
  color: #fff;
}

.page-list-custom li a.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.page-list-custom li span.spacer {
  border: none;
  color: #aaa;
  background: transparent;
}

.pagination-summary {
  font-size: 0.78rem;
  color: #999;
  margin: 0;
  text-align: center;
}


/* ----------------------------------------------------------
   6. Адаптив
   ---------------------------------------------------------- */

@media (max-width: 991px) {
  .ilze-sort-btn {
    min-width: 140px;
  }
}

/* ----------------------------------------------------------
   МОБИЛЬНЫЙ БАР: счётчик слева, сортировка/фильтр справа
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  .products-selection-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Счётчик — слева, та же строка что и фильтр */
  .products-count {
    order: 1;
    flex: 1;
    width: auto;
    padding-top: 0;
  }

  .products-count p {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: #aaa !important;
    margin: 0 !important;
  }

  /* Сортировка/фильтр — справа */
  .products-sort-wrap {
    order: 2;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Кнопка сортировки — тёмный пилл, как у Filtras */
  .ilze-sort-btn {
    background: #2d2d2d !important;
    color: #fff !important;
    border-color: #2d2d2d !important;
    border-radius: 20px !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    min-width: unset !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
  }

  .ilze-sort-btn:hover {
    background: #444 !important;
    border-color: #444 !important;
  }

  .ilze-sort-btn:focus,
  .ilze-sort-btn:focus-visible,
  .ilze-sort-btn:active {
    background: #2d2d2d !important;
    border-color: #2d2d2d !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .ilze-sort-arrow {
    color: rgba(255,255,255,0.8) !important;
  }

  /* Дропдаун прижат вправо */
  .ilze-sort-dropdown {
    right: 0 !important;
    left: auto !important;
    min-width: 210px !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 768px) {
  .category-page-title {
    font-size: 1.5rem;
  }

  .pagination .page-item .page-link {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}


/* ----------------------------------------------------------
   ПАГИНАЦИЯ — новый ilze-стиль
   ---------------------------------------------------------- */

.ilze-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.ilze-page-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

/* Общий стиль кнопок */
.ilze-page-list li a,
.ilze-page-list li span.ilze-page-spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #333;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ilze-page-list li a:hover {
  background: #f0f0f0;
  border-color: #999;
  color: #111;
  text-decoration: none;
}

/* Активная страница */
.ilze-page-list li.current a {
  background: #222;
  border-color: #222;
  color: #fff;
  font-weight: 600;
  pointer-events: none;
}

/* Многоточие */
.ilze-page-list li span.ilze-page-spacer {
  border: none;
  color: #aaa;
  background: transparent;
  min-width: 20px;
}

/* Кнопки Назад / Вперёд */
.ilze-page-btn {
  padding: 0 14px !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  min-width: auto !important;
}

.ilze-page-btn:hover {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

/* Отключённые кнопки */
.ilze-page-list li a.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* Счётчик под пагинацией */
.ilze-page-summary {
  font-size: 0.78rem;
  color: #999;
  margin: 0;
  text-align: center;
}


/* ----------------------------------------------------------
   НОВАЯ ПАГИНАЦИЯ ilze-pagination
   ---------------------------------------------------------- */

/* Новая пагинация */
.ilze-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.ilze-page-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

/* Все кнопки */
.ilze-page-list li a,
.ilze-page-list li span.ilze-spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #333;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ilze-page-list li a:hover {
  background: #f0f0f0;
  border-color: #999;
  color: #111;
  text-decoration: none;
}

/* Активная страница */
.ilze-page-list li.current a {
  background: #222;
  border-color: #222;
  color: #fff;
  font-weight: 600;
  pointer-events: none;
}

/* Многоточие */
.ilze-page-list li span.ilze-spacer {
  border: none;
  background: transparent;
  color: #aaa;
  min-width: 20px;
}

/* Кнопки Назад / Вперёд */
.ilze-page-list li a.ilze-page-prev,
.ilze-page-list li a.ilze-page-next {
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 500;
  min-width: auto;
}

.ilze-page-list li a.ilze-page-prev:hover,
.ilze-page-list li a.ilze-page-next:hover {
  background: #222;
  border-color: #222;
  color: #fff;
}

/* Отключённые кнопки */
.ilze-page-list li a.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* Счётчик под пагинацией */
.ilze-page-summary {
  font-size: 0.78rem;
  color: #999;
  margin: 0;
  text-align: center;
}


/* ----------------------------------------------------------
   ПАГИНАЦИЯ — стили под реальную разметку PrestaShop
   nav.pagination > .col-md-4 (счётчик) + .col-md-6 (кнопки)
   ---------------------------------------------------------- */

nav.pagination {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e0e0e0;
  background: transparent !important;
}

/* Скрыть Bootstrap-колонки, сделать всё по центру */
nav.pagination .col-md-4,
nav.pagination .col-md-6,
nav.pagination [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Счётчик "Показано 1-20 из 158" */
nav.pagination .col-md-4 {
  font-size: 0.78rem;
  color: #999;
  margin-bottom: 10px !important;
  order: 2;
}

/* Список страниц */
nav.pagination ul.page-list {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 0 8px !important;
  padding: 0 !important;
  order: 1;
  background: transparent !important;
}

/* Каждая кнопка */
nav.pagination ul.page-list li a,
nav.pagination ul.page-list li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 0.875rem;
  color: #333 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  float: none !important;
}

nav.pagination ul.page-list li a:hover {
  background: #f0f0f0 !important;
  border-color: #999 !important;
  color: #111 !important;
}

/* Активная страница */
nav.pagination ul.page-list li.current a,
nav.pagination ul.page-list li a.disabled[href="javascript:void(0)"],
nav.pagination ul.page-list li a.disabled:not([href]) {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
  font-weight: 600;
  pointer-events: none;
}

/* Многоточие */
nav.pagination ul.page-list li span.spacer {
  border: none !important;
  background: transparent !important;
  color: #aaa !important;
  min-width: 20px;
}

/* Кнопки Назад / Вперёд (.next, .previous) */
nav.pagination ul.page-list li a.next,
nav.pagination ul.page-list li a.previous {
  padding: 0 14px !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  min-width: auto !important;
}

nav.pagination ul.page-list li a.next:hover,
nav.pagination ul.page-list li a.previous:hover {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

/* Скрыть иконки material-icons в кнопках навигации */
nav.pagination ul.page-list li a.next i,
nav.pagination ul.page-list li a.previous i {
  display: none !important;
}

/* Кнопка "Atgal į viršų" — скрыть */
.hidden-md-up.up {
  display: none !important;
}

/* ============================================================
   МОБИЛЬНАЯ ПАГИНАЦИЯ
   ============================================================ */
@media (max-width: 767px) {

  nav.pagination {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.25rem 0 0.75rem !important;
  }

  nav.pagination [class*="col-"] {
    margin-left: 0 !important;
    width: 100% !important;
  }

  nav.pagination ul.page-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    background: transparent !important;
  }

  nav.pagination ul.page-list li a,
  nav.pagination ul.page-list li span {
    border: none !important;
    background: transparent !important;
    min-width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #555 !important;
  }

  nav.pagination ul.page-list li a:hover {
    background: rgba(0,0,0,0.07) !important;
    color: #111 !important;
  }

  nav.pagination ul.page-list li.current a,
  nav.pagination ul.page-list li a.disabled {
    background: #222 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    pointer-events: none !important;
  }

  nav.pagination ul.page-list li span.spacer {
    background: transparent !important;
    border: none !important;
    color: #bbb !important;
    min-width: 20px !important;
  }

  nav.pagination ul.page-list li a.previous,
  nav.pagination ul.page-list li a.next {
    font-size: 0 !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1.5px solid #ccc !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #333 !important;
  }

  nav.pagination ul.page-list li a.previous:hover,
  nav.pagination ul.page-list li a.next:hover {
    background: #222 !important;
    border-color: #222 !important;
    color: #fff !important;
  }

  nav.pagination ul.page-list li a.previous::before {
    content: "\2039";
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    color: inherit;
  }

  nav.pagination ul.page-list li a.next::after {
    content: "\203A";
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    color: inherit;
  }

  nav.pagination .col-md-4 {
    font-size: 0.72rem !important;
    color: #bbb !important;
    margin-top: 4px !important;
  }
}





/* ----------------------------------------------------------
   ФИХ БАГА С ЗАГОЛОВКОМ И ФОТО ПРИ ПАГИНАЦИИ
   Скрываем изображение категории агрессивнее —
   на случай AJAX-перерисовки
   ---------------------------------------------------------- */

/* Блок с изображением категории — скрыть везде */
.category-cover,
.category-cover img,
#category-description,
.page-category .category-cover,
.page-category #category-description {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Пустой белый блок слева (изображение категории в левой колонке) */
#left-column .category-cover,
#left-column img[loading] {
  display: none !important;
}

/* Если заголовок дублируется при AJAX — убрать второй */
#js-product-list-header:not(:first-of-type) {
  display: none !important;
}


/* ----------------------------------------------------------
   ФИХ: хук displayHeaderCategory — убрать полностью
   Это пространство между подкатегориями и товарами
   ---------------------------------------------------------- */

/* Хук выводит изображение категории — скрыть без остатка */
#main .category-cover,
#main .category-cover img,
#main [id*="category"] img:not(.subcategory-card__image-wrap img),
.page-category .category-top-menu {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Контейнер хука displayHeaderCategory — убрать высоту */
#main > section > .category-cover,
.displayHeaderCategory,
[data-hook="displayHeaderCategory"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Пустой белый блок слева (изображение категории в левой колонке) */
#left-column .category-cover,
#left-column > div:empty,
#left-column > div > div:empty {
  display: none !important;
  height: 0 !important;
}

/* Убрать отступ у #products когда нет обложки */
#products {
  margin-top: 0 !important;
}

/* Разделитель между подкатегориями и строкой сортировки */
.subcategory-cards-wrapper {
  margin-bottom: 0.2rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #e0e0e0;
}

@media (max-width: 767px) {
  .subcategory-cards-wrapper {
    margin: 0 14px 0.6rem;
    padding: 10px 0 6px;
    overflow: hidden;
  }
}

/* ==========================================================
   7. КОМПАКТНЫЕ КАРТОЧКИ ТОВАРОВ — только страница категорий
   ========================================================== */

.page-category .products.row > .js-product {
  flex: 0 0 25% !important; max-width: 25% !important;
  width: 25% !important; display: flex !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .page-category .products.row > .js-product {
    flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important;
  }
}
@media (max-width: 767px) {
  .page-category .products.row > .js-product {
    flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important;
    padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 12px !important;
  }
  .page-category .products.row { margin-left: -6px !important; margin-right: -6px !important; }
  .page-category .ilze-card-img-wrap { height: auto !important; min-height: unset !important; }
  .page-category .ilze-main-photo    { width: 100% !important; height: auto !important; }
}

/* Bootstrap's stock .row carries margin-left/-right:-15px, meant to be
   absorbed by a parent's own matching 15px padding — but this site runs
   #content-wrapper/.container full-bleed (0 padding) site-wide, so
   nothing ever cancels it here. Harmless on the left (bleeds into empty
   gutter space) but on the right it pushed 15px past the viewport,
   forcing a permanent horizontal scrollbar on every category page. */
@media (min-width: 768px) {
  .page-category .products.row { margin-left: 0 !important; margin-right: 0 !important; }
}

.page-category .ilze-product-card {
  display: flex !important; flex-direction: column !important; height: 100% !important;
}
.page-category .ilze-card-body {
  display: flex !important; flex-direction: column !important;
  flex: 1 !important; padding: 8px 8px 10px !important;
}
.page-category .ilze-card-footer { margin-top: auto !important; padding-top: 8px !important; }

.page-category .ilze-product-title {
  font-size: 0.78rem !important; line-height: 1.3 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 4px !important;
}
.page-category .ilze-code         { font-size: 0.72rem !important; }
.page-category .ilze-availability { font-size: 0.7rem  !important; }
.page-category .ilze-price        { font-size: 0.9rem  !important; }
.page-category .ilze-add-btn      { width: 32px !important; height: 32px !important; padding: 6px !important; flex-shrink: 0 !important; }

@media (max-width: 767px) {
  .page-category .ilze-product-title { font-size: 0.75rem !important; }
  .page-category .ilze-code          { font-size: 0.68rem !important; }
  .page-category .ilze-price         { font-size: 0.85rem !important; }
  .page-category .ilze-add-btn       { width: 30px !important; height: 30px !important; }
}

/* ══════════════════════════════════════════════════════
   ДЕСКТОП: центрирование галочки в чекбоксе (#search_filters)
   Реальное правило нашлось в themes/classic/assets/css/theme.css:

     .custom-checkbox input[type=checkbox]+span{
       display:inline-block; width:1.125rem; height:1.125rem;
       border:1px #979797 solid
     }
     .custom-checkbox input[type=checkbox]+span .checkbox-checked{
       display:none; margin:-.125rem; font-size:1.25rem; color:#232323
     }
     .custom-checkbox input[type=checkbox]:checked+span .checkbox-checked{
       display:block
     }

   Иконка (20px) больше квадрата (18px) и центрируется хрупким
   отрицательным margin без flex/line-height — отсюда кривизна.

   НЕ трогаем display:none/block — это переключение работает верно
   и ломать его снова нельзя (два предыдущих правки уже наступали
   на эти грабли). Добавляем ТОЛЬКО position:absolute + transform,
   которые включаются лишь когда элемент УЖЕ показан существующим
   правилом :checked — сама видимость управляется как и раньше.
══════════════════════════════════════════════════════ */
#search_filters .custom-checkbox input[type="checkbox"] + span {
  position: relative; /* якорь для центрирования галочки внутри квадрата */
}
#search_filters .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /* убираем хрупкий трюк с отрицательным margin из базовой темы */
}

/* ══════════════════════════════════════════════════════
   ДЕСКТОП: аккордеон групп фильтров (см. facets.tpl, initDesktopAccordion)
══════════════════════════════════════════════════════ */
#search_filters .facet-title.sf-desk-toggle {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: 14px 28px 14px 4px;
  margin: 0;
  border-bottom: 1px solid #e8e8e8;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#search_filters .facet:first-child .facet-title.sf-desk-toggle {
  border-top: 1px solid #e8e8e8;
}
#search_filters .facet-title.sf-desk-toggle:hover {
  color: #e87722;
}
#search_filters .facet-title.sf-desk-toggle.sf-desk-open {
  color: #e87722;
  font-weight: 700;
}
#search_filters .facet-title.sf-desk-toggle::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease, color 0.15s ease;
  opacity: 0.55;
}
#search_filters .facet-title.sf-desk-toggle.sf-desk-open::after {
  transform: translateY(-30%) rotate(-135deg);
  opacity: 1;
}
#search_filters .facet-title.sf-desk-toggle.sf-desk-open + ul[id^="facet_"] {
  padding-top: 6px;
  padding-bottom: 14px;
}

/* ══════════════════════════════════════════════════════
   МОБИЛЬНАЯ ШТОРКА ФИЛЬТРОВ: плавная анимация раскрытия групп
   Раньше сворачивание шло через inline style.display (мгновенно,
   без анимации) и было эксклюзивным (открытие одной сворачивало
   остальные). Теперь: (а) каждая группа независима — открытие
   одной не трогает другие, (б) плавная высота через grid-trick
   (grid-template-rows: 0fr/1fr) — не требует JS-расчёта scrollHeight
   и одинаково плавно работает для любого контента внутри.
══════════════════════════════════════════════════════ */
#sfSheet .sf-sheet-facet-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
#sfSheet .sf-sheet-facet-body.sf-group-open {
  grid-template-rows: 1fr;
}
#sfSheet .sf-sheet-facet-body-inner {
  overflow: hidden;
  min-height: 0;
}

/* Стрелочка группы плавно поворачивается, а не мгновенно скачет */
#sfSheet .sf-sheet-facet-head .sf-chevron {
  transition: transform 0.28s ease;
}
#sfSheet .sf-sheet-facet-head.open .sf-chevron {
  transform: rotate(180deg);
}

/* Цена — всегда открыта, не выглядит сворачиваемой (без стрелочки,
   курсор обычный, не hover-реагирует как остальные заголовки) */
#sfSheet .sf-sheet-facet-head.sf-locked-head {
  cursor: default;
}
#sfSheet .sf-sheet-facet.sf-price-locked .sf-sheet-facet-body {
  grid-template-rows: 1fr; /* всегда развёрнута, transition ей не нужен */
}

/* ══════════════════════════════════════════════════════
   Значения, недостижимые при текущей комбинации стейджинга
   (live-preview) — не исчезают, а становятся серыми и
   некликабельными. Одинаково для чекбоксов и тегов.
══════════════════════════════════════════════════════ */
#sfSheet .sf-chk-item {
  transition: opacity 0.2s ease, color 0.2s ease;
}
#sfSheet .sf-chk-item.sf-value-unavailable {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
#sfSheet .sf-chk-item.sf-value-unavailable .search-link,
#sfSheet .sf-chk-item.sf-value-unavailable .sf-chk-box,
#sfSheet .sf-chk-item.sf-value-unavailable .sf-radio-dot {
  color: #b5b5b5;
}
#sfSheet .facet-tag {
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Недоступно при текущей комбинации фильтров — видно, но серое и некликабельно */
#sfSheet .facet-tag.sf-value-unavailable {
  color: #b5b5b5 !important;
  background-color: #f2f2f2 !important;
  border-color: #e0e0e0 !important;
  pointer-events: none;
  cursor: default;
}

/* ----------------------------------------------------------
   8. Нижняя панель «Фильтр» / корзина (мобильный fixed-бар)
   ---------------------------------------------------------- */

.page-category .filter-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 10px !important;
}

.page-category #search_filter_toggler {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  padding: 0 16px !important;
  background: #e87722 !important;
  box-shadow: 0 1px 6px rgba(232, 119, 34, 0.22) !important;
  transition: background 0.15s ease, transform 0.1s ease;
}

.page-category #search_filter_toggler:active {
  background: #d16c1e !important;
  transform: scale(0.98);
}

.page-category .filter-button #ilze-fab-cart {
  background: #f8f7f5 !important;
  border: 1px solid #ece9e4 !important;
  transition: background 0.15s ease;
}

.page-category .filter-button #ilze-fab-cart:hover,
.page-category .filter-button #ilze-fab-cart:active {
  background: #efece5 !important;
}

.page-category .filter-button #ilze-fab-badge {
  background: #e87722 !important;
}
/* Десктоп — та же логика недоступных значений (см. Converter.php патч):
   значение с magnitude=0 остаётся в разметке, но серое и некликабельное,
   вместо того чтобы пропадать из HTML целиком. */
#search_filters .facet-label.sf-value-unavailable {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
#search_filters .facet-tag.sf-value-unavailable {
  color: #b5b5b5 !important;
  background-color: #f2f2f2 !important;
  border-color: #e0e0e0 !important;
  pointer-events: none;
  cursor: default;
}

/* ══════════════════════════════════════════════════════
   Слайдер "Высота" — самодостаточный стиль.
   ВАЖНО: jQuery UI .slider() сам навешивает свои классы
   (ui-slider, ui-widget, ui-widget-content, ui-corner-all...)
   на элемент трека и на хэндлы — если где-то на сайте подключена
   базовая тема jQuery UI (jquery-ui.css), она стилизует ЭТИ классы
   своими бордерами/градиентами, которые накладываются поверх моих
   правил — отсюда "двойная рамка" и чужой цвет. Сбрасываем всё
   через !important, ничего не оставляя на волю внешних стилей.
══════════════════════════════════════════════════════ */
.sf-height-slider-wrap {
  padding: 4px 4px 8px;
}
.sf-height-track,
.sf-height-track.ui-slider,
.sf-height-track.ui-widget,
.sf-height-track.ui-widget-content {
  position: relative !important;
  height: 4px !important;
  margin: 20px 6px 6px !important;
  padding: 0 !important;
  background: #e0e0e0 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.sf-height-track .ui-slider-range,
.sf-height-track .ui-widget-header {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  background: #e87722 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.sf-height-track .ui-slider-handle,
.sf-height-track .ui-state-default {
  position: absolute !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: -9px !important;
  transform: translateY(-50%) !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  outline: none !important;
  touch-action: none !important;
  z-index: 2;
}
.sf-height-track .ui-slider-handle:active,
.sf-height-track .ui-state-active {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25) !important;
  background: #fff !important;
}
.sf-height-in {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  color: #232323;
}
.sf-height-in::-webkit-outer-spin-button,
.sf-height-in::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sf-height-in[type="number"] {
  -moz-appearance: textfield;
}

/* ══════════════════════════════════════════════════════
   FIX: убираем двойную обводку у полей слайдера высоты.
   Сбрасываем любые рамки/тени/outline у обёртки
   и у самих input'ов, оставляя только одну рамку.
══════════════════════════════════════════════════════ */
.sf-height-slider-wrap .sf-price-field,
.sf-height-slider-wrap .sf-price-inputs {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.sf-height-in,
.sf-height-in:focus,
.sf-height-in:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
  border: 1px solid #e0e0e0 !important;
  background: #fff !important;
}

.sf-height-in:focus {
  border-color: #e87722 !important;
}

/* Дополнительно убираем outline у хэндлов слайдера */
.sf-height-track .ui-slider-handle,
.sf-height-track .ui-slider-handle:focus,
.sf-height-track .ui-slider-handle:active,
.sf-height-track .ui-state-default,
.sf-height-track .ui-state-default:focus,
.sf-height-track .ui-state-active {
  outline: none !important;
}

/* ══════════════════════════════════════════════════════
   FIX: скрываем серый блок активных фильтров
   ("Aktīvie filtri" / "Active filters").
══════════════════════════════════════════════════════ */
#js-active-search-filters,
#js-active-search-filters.active_filters {
  display: none !important;
}