/* Оптимизации для устранения моргания при переключении представлений */

/* Плавные переходы для контейнеров представлений */

.products-list,
.products-table,
.subcollections-list-new,
.pagination {
  transition: opacity 0.1s ease-out;
  will-change: opacity;
}

/* Улучшенное скрытие элементов без layout shift */
.products-list.hidden,
.products-table.hidden,
.subcollections-list-new.hidden,
.collection-toolbar.is-bottom.hidden {
  display: none !important;
}

.pagination.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Состояние загрузки при переключении */
.collection-loading .products-list,
.collection-loading .products-table,
.collection-loading .subcollections-list-new {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Убираем моргание при первоначальной загрузке */
#js-collection:not(.collection-initialized) .products-list,
#js-collection:not(.collection-initialized) .products-table,
#js-collection:not(.collection-initialized) .subcollections-list-new {
  opacity: 0;
}

/* Маркер инициализации */
#js-collection.collection-initialized .products-list:not(.hidden),
#js-collection.collection-initialized .products-table:not(.hidden),
#js-collection.collection-initialized .subcollections-list-new:not(.hidden) {
  opacity: 1;
  transform: translateX(0);
}

/* Фикс для плавного переключения между grid и list представлениями */
.products-list {
  transition: all 0.2s ease-in-out;
}

.products-list.products-list--list-view {
  /* Специфичные стили для list view */
  transition: all 0.2s ease-in-out;
}

/* Предотвращение двойной анимации */
.no-transition {
  transition: none !important;
}

/* Оптимизация производительности GPU */
.products-table,
.products-list,
.subcollections-list-new {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== МОБИЛЬНЫЕ ТЕХНИКИ ДЛЯ УСТРАНЕНИЯ CLS ===== */

/* 1. Изоляция layout с помощью CSS contain */
.product-card-wrapper {
  contain: layout style paint;
  /* Изолируем каждую карточку, чтобы изменения внутри не влияли на соседние */
}

.product-card {
  contain: layout paint;
  /* Дополнительная изоляция для самой карточки */
}

/* 2. Фиксированные пропорции для контейнеров изображений */
.product-photo .image-container.is-square {
  aspect-ratio: 1 / 1;
  /* Гарантируем квадратную форму контейнера */
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

/* 3. Object-fit для изображений */
.product-photo .image-container img,
.product-photo .image-container picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Изображение вписывается в контейнер без искажений */
  object-position: center;
}

/* 4. Фиксация размеров для карточек товара */
.product-card .card-inner {
  contain: layout;
  /* Изолируем внутреннюю структуру карточки */
}

/* 5. Предотвращение layout shift при загрузке изображений */
.product-photo .image-container picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-photo .image-container source,
.product-photo .image-container img {
  display: block;
}

/* 6. Оптимизация для табличного представления */
.products-table .product-photo .image-container {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 120px;
  /* Ограничиваем размер в таблице */
}

.products-table .product-photo .image-container img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* 7. Оптимизация для списочного представления */
.products-list--list-view .product-photo .image-container {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 160px;
}

.products-list--list-view .product-photo .image-container img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* 8. Плавный переход контейнера при смене представлений */
.page-content {
  transition: min-height 0.3s ease-out;
}

.page-content.view-switching {
  /* Индикатор переключения для отладки */
  position: relative;
}

/* 9. Дополнительная стабилизация для контейнера товаров */
.products-list,
.products-table {
  min-height: 200px;
  /* Минимальная высота для предотвращения коллапса */
}

/* ===== ОТЛОЖЕННЫЙ ПОКАЗ FOOTER ДЛЯ УСТРАНЕНИЯ CLS ===== */

/* Скрываем footer на мобильных устройствах до готовности контента */
@media (max-width: 1023px) {
  body.template-collection .footer {
    opacity: 0;
    visibility: hidden;
    /* Задержка visibility для плавного перехода */
    transition: opacity 0.4s ease, visibility 0s 0.4s;
  }

  /* Показываем footer после стабилизации контента */
  body.template-collection.footer-ready .footer {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
  }

  /* Fallback: автоматический показ через 2 секунды если JS не сработал */
  body.template-collection .footer {
    animation: footer-reveal 0.4s ease 2s forwards;
  }

  /* Отключаем fallback анимацию если JS сработал */
  body.template-collection.footer-ready .footer {
    animation: none;
  }
}

/* Анимация для fallback показа footer */
@keyframes footer-reveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* ===== УСТРАНЕНИЕ ОСТАВШИХСЯ ПРОБЛЕМ CLS ===== */

@media (max-width: 1023px) {
  /* Скрываем блок "Последние просмотренные товары" до загрузки */
  body.template-collection .js-recently-view {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
  }

  /* Скрываем нижний toolbar с селектором "Показывать по" */
  body.template-collection .collection-toolbar.is-bottom {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
  }

  /* Показываем элементы вместе с footer после готовности контента */
  body.template-collection.footer-ready .js-recently-view,
  body.template-collection.footer-ready .collection-toolbar.is-bottom {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
  }

  /* Fallback: автоматический показ через 2 секунды если JS не сработал */
  body.template-collection .js-recently-view,
  body.template-collection .collection-toolbar.is-bottom {
    animation: element-reveal 0.4s ease 2s forwards;
  }

  /* Отключаем fallback анимацию если JS сработал */
  body.template-collection.footer-ready .js-recently-view,
  body.template-collection.footer-ready .collection-toolbar.is-bottom {
    animation: none;
  }
}

/* Анимация для fallback показа дополнительных элементов */
@keyframes element-reveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}