/* TASK-0584 — полоски-индикаторы кадров в карточке листинга каталога.
   Парный файл к catalog-2026-gallery.js. Работает только там, где скрипт
   поставил класс .c26-gal-on, поэтому у карточек с одним фото ничего не
   меняется. Правки в catalog-2026.css нет — откат снимает один <link>.

   ⚠️ В теме heavytop любой div внутри .goods-item получает display:flex
   (см. комментарий в catalog-2026.css у .c26-card__specs) — здесь это как раз
   то, что нужно, но задаём явно, чтобы не зависеть от чужого правила. */

.c26 .goods-item .c26-card__photo.c26-gal-on { position: relative; }

.c26 .goods-item .c26-card__photo.c26-gal-on .c26-gal-dots {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  display: flex;
  gap: 3px;
  z-index: 2;
  pointer-events: none;   /* клик по карточке остаётся кликом по товару */
  opacity: 0;
  transition: opacity .15s ease;
}

.c26 .goods-item:hover .c26-card__photo.c26-gal-on .c26-gal-dots { opacity: 1; }

.c26 .goods-item .c26-card__photo.c26-gal-on .c26-gal-dots i {
  flex: 1 1 0;
  height: 2px;
  border-radius: 2px;
  background: #dfe3e8;
  transition: background .12s ease;
}

.c26 .goods-item .c26-card__photo.c26-gal-on .c26-gal-dots i.is-on {
  background: var(--c26-orange, #ff6a13);
}

/* На тач-экране hover не наступает — подсказка о том, что кадров несколько,
   должна быть видна сразу. */
@media (hover: none), (max-width: 760px) {
  .c26 .goods-item .c26-card__photo.c26-gal-on .c26-gal-dots { opacity: 1; }
  .c26 .goods-item .c26-card__photo.c26-gal-on .c26-gal-dots { left: 6px; right: 6px; gap: 2px; }
}

/* ---------------------------------------------------------------------------
   TASK-0591 — кроссфейд кадров.

   Два слоя лежат поверх штатной обложки и перекрывают друг друга по opacity:
   один гаснет, второй проявляется, обложка снизу остаётся видна всё это время.
   Раньше JS подменял src самой <img> — смена была мгновенной («моргание»), а на
   непрогретом кэше между кадрами успевала мелькнуть пустота.

   Размеры НЕ задаём: слой — тот же <img> внутри .c26-card__photo, и правило
   `.c26-card__photo img {max-height:…;max-width:100%;object-fit:contain}` из
   catalog-2026.css применяется к нему само. Отсюда совпадение с обложкой и в
   обычной карточке (210/196 px), и в широкой .c26-wide (max-height:100%).
   Центрируем так же, как flex-контейнер центрирует обложку.

   Длительность: .2s -> .38s (правка Дмитрия 08.09.2026, «замедли ещё немного»). */

.c26 .goods-item .c26-card__photo.c26-gal-on img.c26-gal-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;             /* над обложкой, под полосками-индикаторами (z-index:2) */
  opacity: 0;
  pointer-events: none;   /* клик по карточке остаётся кликом по товару */
  transition: opacity .38s ease;
}

.c26 .goods-item .c26-card__photo.c26-gal-on img.c26-gal-fx.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .c26 .goods-item .c26-card__photo.c26-gal-on img.c26-gal-fx { transition: none; }
}