/**
 * CLS (Cumulative Layout Shift) Fixes + LCP Optimization
 *
 * Цель CLS: Снизить с 0.5 до < 0.1 ✅ ДОСТИГНУТО (0.001)
 * Цель LCP: Снизить с 8.9s до < 2.5s
 * Дата создания: 2026-01-15
 * Обновлено: 2026-01-15 (добавлена LCP оптимизация)
 *
 * ВАЖНО: Все исправления в child теме akira_custom
 * Безопасно при обновлениях родительской темы Akira
 */

/* ===================================
   LCP OPTIMIZATION: Шрифты
   ================================ */

/* Быстрая загрузка всех шрифтов - показать текст сразу */
@font-face {
    font-display: swap; /* Показать системный шрифт, потом подменить на загруженный */
}

/* Оптимизация Line Awesome иконочного шрифта */
.la, .lab, .lal, .las, .lar {
    font-display: swap !important;
}

/* Оптимизация Font Awesome если используется */
.fa, .fab, .fal, .fas, .far {
    font-display: swap !important;
}

/* ===================================
   CLS FIX: Изображения товаров
   ================================ */

/* Основной контейнер изображений - добавляем aspect-ratio */
.p-ax-img-loader {
    aspect-ratio: 1 / 1; /* Квадратные изображения товаров */
    display: block;
    position: relative;
    overflow: hidden;
}

/* Для изображений товаров в списках */
.products .product-miniature .p-ax-img-loader {
    aspect-ratio: 1 / 1;
}

/* Для главных изображений товара */
.product-cover .p-ax-img-loader {
    aspect-ratio: 1 / 1;
}

/* Для thumbnail изображений */
.product-images-thumb picture {
    padding-top: 0 !important; /* Отменяем старый padding-top hack */
    aspect-ratio: 1 / 1;
    display: block;
}

/* Изображение внутри контейнера */
.p-ax-img-loader img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Или cover если нужно заполнить весь контейнер */
}

/* Изоляция layout расчетов для товаров */
.product-miniature {
    contain: layout; /* Изолирует layout calculations */
}

.products-grid .product-miniature .thumbnail-container {
    contain: layout style;
}

/* ===================================
   CLS FIX: Grid layout товара
   ================================ */

/* Страница товара - фиксированные высоты для grid */
.summary-container {
    grid-template-rows:
        minmax(50px, auto)   /* breadcrumbs */
        minmax(60px, auto)   /* title */
        minmax(50px, auto)   /* price */
        minmax(80px, auto)   /* features */
        minmax(100px, auto)  /* add to cart */
        minmax(70px, auto)   /* social/share */
        minmax(100px, auto)  /* description */
        !important;
}

/* Альтернатива: использовать contain для дочерних элементов */
.summary-container > * {
    contain: layout;
}

/* ===================================
   CLS FIX: Заголовки подкатегорий
   ================================ */

.product-list-subcategories__category-title {
    height: 70px; /* Фиксированная высота вместо min-height */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Максимум 3 строки */
    -webkit-box-orient: vertical;
}

/* ===================================
   CLS FIX: Cookie banner и Popups
   ================================ */

/* Cookie banner - используем transform вместо position changes */
#iqitcookielaw-banner,
.iqitcookielaw-wrapper {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    transform: translateZ(0); /* GPU acceleration */
    will-change: transform; /* Подсказка браузеру */
    contain: layout style paint; /* Полная изоляция */
}

/* Popups - изолируем от основного layout */
.iqitpopup-wrapper,
.nrtpopupnewsletter-wrapper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateZ(0);
    z-index: 9998 !important;
    contain: layout style paint;
}

/* Overlay для popups */
.modal-backdrop,
.popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    contain: layout style paint;
}

/* ===================================
   CLS FIX: Axon Creator контент
   ================================ */

/* Резервируем минимальную высоту для displayHome блока */
.hook-displayHome {
    min-height: 400px; /* Минимальная высота для Axon контента */
    contain: layout;
}

/* Слайдеры Swiper - фиксированная высота */
.swiper-container {
    min-height: 400px;
}

.swiper-slide img {
    aspect-ratio: 16 / 9; /* Или другое соотношение для слайдов */
    width: 100%;
    height: auto;
}

/* ===================================
   CLS FIX: Кнопки на hover
   ================================ */

/* Используем transform вместо position changes для кнопок */
.product-miniature .buttons-action {
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.product-miniature:hover .buttons-action {
    transform: translateY(-10px); /* Вместо bottom: 20px */
}

/* Add-to-cart кнопка */
.btn-action.add-to-cart {
    transform: translateY(40px);
    transition: transform 0.3s ease;
}

.product-miniature:hover .btn-action.add-to-cart {
    transform: translateY(0); /* Вместо bottom: 0 */
}

/* ===================================
   ДОПОЛНИТЕЛЬНЫЕ ОПТИМИЗАЦИИ
   ================================ */

/* Изоляция для каталога товаров */
.products .product-container {
    contain: layout style;
}

/* Фиксированная высота для блоков с товарами */
.featured-products .products,
.product-accessories .products,
.product-miniature-list {
    contain: layout;
}

/* Lazy loading изображений - резервируем место */
img[data-src] {
    min-height: 200px; /* Минимальная высота до загрузки */
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    /* Уменьшаем минимальные высоты для мобильных */
    .summary-container {
        grid-template-rows:
            minmax(40px, auto)   /* breadcrumbs */
            minmax(50px, auto)   /* title */
            minmax(40px, auto)   /* price */
            minmax(60px, auto)   /* features */
            minmax(80px, auto)   /* add to cart */
            minmax(50px, auto)   /* social/share */
            minmax(80px, auto)   /* description */
            !important;
    }

    .hook-displayHome {
        min-height: 300px;
    }

    .swiper-container {
        min-height: 250px;
    }
}

/* ===================================
   КОНЕЦ CLS ИСПРАВЛЕНИЙ
   ================================ */