/* ═══════════════════════════════════════════════════════════════════════
 * CLS-FIX — Предотвращение Cumulative Layout Shift (главная страница)
 *
 * Подключение: inline <style> в <head> ПЕРЕД <link> на основные CSS,
 *              или отдельным файлом с высоким приоритетом загрузки.
 *
 * Брейкпоинты (совпадают с текущими в проекте):
 *   575px  — мобильный / планшет
 *   768px  — планшет
 *   991px  — десктоп (малый)
 *   1260px — десктоп (большой)
 * ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
 * 1. HERO-СЛАЙДЕР (.slider-index-box)
 *
 * Проблема: до инициализации Slick все слайды рендерятся стопкой
 * вертикально. overflow:hidden + vw-height уже в style.css, но
 * adaptiveHeight:true меняет высоту .slick-list при переключении
 * слайдов. Также нужно скрыть слайды 2..N до инита.
 * ───────────────────────────────────────────────────────────────────── */

/* CSS Containment: изолирует reflow/repaint внутри контейнера.
   Изменения внутри slider-index-box не вызывают пересчёт layout
   для элементов за его пределами.
   max-width:100% — защита от horizontal overflow: Slick округляет
   ширину слайдов вверх (напр. 1475px вместо 1470.5px), и без
   ограничения .slider-index-box растягивается шире <main>, создавая
   ~5px скролл на документе. */
.slider-index-box {
    contain: layout style paint;
    max-width: 100%;
}

/* Принудительно фиксируем высоту .slick-list на 100% контейнера.
   Это нейтрализует adaptiveHeight:true, который динамически
   меняет height при смене слайда. Контейнер уже имеет vw-высоту
   через style.css компонента, поэтому 100% — корректное значение.
   max-width:100% — не даёт .slick-list выйти за .slider-index-box. */
.slider-index-box .slick-list {
    height: 100% !important;
    max-width: 100%;
}

/* Slick-track: flex-выравнивание слайдов по высоте для устранения
   скачков при разной высоте контента (изображение vs видео). */
.slider-index-box .slick-track {
    display: flex !important;
    align-items: stretch;
}

/* До инициализации Slick: горизонтальная раскладка вместо стопки.
   overflow:hidden скрывает все слайды, выходящие за ширину контейнера. */
.slider-index:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}

/* Первый слайд hero: занимает 100% ширины до инициализации Slick.
   Обеспечивает корректное отображение без скачка. */
.slider-index:not(.slick-initialized) .slider-index-item:first-child {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Слайды 2..N hero: скрыты до инициализации.
   visibility:hidden + width:0 = элемент невидим и не влияет на layout.
   Не используем display:none чтобы Slick корректно подхватил DOM. */
.slider-index:not(.slick-initialized) .slider-index-item:not(:first-child) {
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}


/* ─────────────────────────────────────────────────────────────────────
 * 2. КАТЕГОРИЙНЫЕ СЛАЙДЕРЫ (.index-category-slider-wrap)
 *    *** КРИТИЧНЫЙ БЛОК — основной источник CLS ***
 *
 * Проблема: без фиксированной высоты контейнер растягивается до
 * ~1112px (4 карточки стопкой), затем Slick сжимает до ~433px.
 * Решение: задаём точную высоту для каждого брейкпоинта,
 * совпадающую с финальной высотой после инициализации Slick.
 * ───────────────────────────────────────────────────────────────────── */

/* Мобильные (<768px): 1 карточка, slidesToShow:1 при variableWidth.
   Высота = высота одной product-item карточки + margin.
   overflow:hidden обрезает выступающий контент.
   contain: layout style paint — изоляция reflow. */
.index-category-slider-wrap {
    height: 319px;
    overflow: hidden;
    contain: layout style paint;
}

/* Планшет (768–990px): slidesToShow:2, карточки чуть выше. */
@media (min-width: 768px) {
    .index-category-slider-wrap {
        height: 355px;
    }
}

/* Десктоп малый (991–1259px): slidesToShow:2, полноразмерные карточки. */
@media (min-width: 991px) {
    .index-category-slider-wrap {
        height: 430px;
    }
}

/* Десктоп большой (≥1260px): slidesToShow:3, финальная высота. */
@media (min-width: 1260px) {
    .index-category-slider-wrap {
        height: 433px;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 3. PRE-INIT РАСКЛАДКА КАРТОЧЕК КАТЕГОРИЙ (single-slide 100%)
 *
 * До инициализации Slick категорийный слайдер показывает РОВНО ОДНУ
 * первую карточку на всю ширину контейнера — аналогично hero-слайдеру
 * .slider-index. Это устраняет FOUC: раньше 3 карточки собирались
 * в flex-ряд и на мобильном (360px) выползали/сжимались, затем Slick
 * пересчитывал ширины и визуально «скакал».
 *
 * overflow:hidden обрезает слайды 2..N; они в потоке, чтобы Slick
 * при инициализации корректно подхватил DOM. visibility:hidden +
 * width:0 = без влияния на layout, но элементы присутствуют.
 * ───────────────────────────────────────────────────────────────────── */

.index-category__slider:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.index-category__slider:not(.slick-initialized) .index-category__slider-cell:first-child {
    flex: 0 0 100%;
    max-width: 100%;
}

.index-category__slider:not(.slick-initialized) .index-category__slider-cell:not(:first-child) {
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}


/* ─────────────────────────────────────────────────────────────────────
 * 3a. FADE-IN ИНИЦИАЛИЗАЦИИ КАТЕГОРИЙНЫХ СЛАЙДЕРОВ
 *
 * До момента, пока main.js не инициализирует все .slick(...) и
 * не поставит body.sliders-ready, весь блок со стрелками + слайдером
 * скрыт через opacity:0. После установки класса — плавное появление.
 * Устраняет видимый «скачок» при пересборке карточек.
 *
 * Стрелки .slick-arrow имеют отдельное правило с задержкой —
 * они появляются чуть позже, когда Slick проставит свои позиции.
 * ───────────────────────────────────────────────────────────────────── */

.index-category-slider-wrap-arrows {
    opacity: 0;
    transition: opacity .3s ease;
}

body.sliders-ready .index-category-slider-wrap-arrows {
    opacity: 1;
}

.index-category-slider-wrap-arrows .slick-arrow {
    opacity: 0;
    transition: opacity .2s ease .1s;
}

body.sliders-ready .index-category-slider-wrap-arrows .slick-arrow {
    opacity: 1;
}


/* ─────────────────────────────────────────────────────────────────────
 * 4. СТАБИЛЬНАЯ ВЫСОТА БЛОКА .index-category
 *
 * Вторичная защита: min-height на родительском контейнере
 * предотвращает скачок всего блока при любых внутренних изменениях.
 * Значения соответствуют высоте slider-wrap + h3 заголовок + отступы.
 * ───────────────────────────────────────────────────────────────────── */

/* <768px: колонки стекаются (col-sm-12), min-height = h3 + slider.
   h3 ≈ 29px + margin 22px = ~51px. slider = 319px. Итого ~370px.
   Ставим 340px — консервативно, т.к. slider-wrap уже фиксирован. */
.index-category {
    min-height: 340px;
}

/* 768–990px: колонки рядом (col-md-4 + col-md-8).
   Высота определяется slider-wrap = 355px. */
@media (min-width: 768px) {
    .index-category {
        min-height: 355px;
    }
}

/* 991–1259px: slider-wrap = 430px. */
@media (min-width: 991px) {
    .index-category {
        min-height: 430px;
    }
}

/* ≥1260px: slider-wrap = 433px. */
@media (min-width: 1260px) {
    .index-category {
        min-height: 433px;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 5. CSS CONTAINMENT ДЛЯ КОНТЕЙНЕРОВ НАВИГАЦИИ
 *
 * .index-category-slider-wrap-arrows содержит абсолютно позиционированные
 * кнопки-стрелки. contain: layout style изолирует их влияние на layout.
 * ───────────────────────────────────────────────────────────────────── */
.index-category-slider-wrap-arrows {
    contain: layout style;
}


/* ─────────────────────────────────────────────────────────────────────
 * 6. PRELOADER PLACEHOLDER
 *
 * .preloader-item-wrap удаляется JS'ом при инициализации Slick
 * (contentSlider.find('.preloader-item-wrap').remove()).
 * Абсолютное позиционирование гарантирует, что удаление не вызывает
 * сдвиг — элемент не участвует в нормальном потоке документа.
 * ───────────────────────────────────────────────────────────────────── */
.index-category__slider-cell .preloader-item-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────────
 * 7. ИЗОБРАЖЕНИЯ: СТАБИЛЬНЫЕ РАЗМЕРЫ
 *
 * Элементы без width/height атрибутов вызывают CLS при загрузке:
 * браузер не может зарезервировать место до получения файла.
 * ───────────────────────────────────────────────────────────────────── */

/* Декоративное изображение «бумажный самолётик» в блоке подписки.
   CSS-размеры предотвращают reflow при загрузке.
   ВАЖНО: скорректировать если реальные размеры img отличаются. */
img.paper-airplane {
    width: 106px;
    height: 79px;
}

/* Логотипы брендов: контейнер .barands-slider__item уже имеет
   height:75px, а .barands-slider__img — position:absolute.
   Добавляем object-fit для предотвращения искажений при загрузке. */
.barands-slider__img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}


/* ─────────────────────────────────────────────────────────────────────
 * 8. ШРИФТЫ: font-display ДЛЯ НЕКРИТИЧНЫХ НАЧЕРТАНИЙ
 *
 * LatoLight и LatoSemibold используются реже (описания, второстепенный
 * текст). font-display:optional загружает шрифт только если он успел
 * скачаться за ~100ms, иначе использует fallback без FOUT.
 *
 * ВНИМАНИЕ: эти правила переопределяют @font-face из main.css.
 * Для работы необходимо точное совпадение font-family и src.
 * ───────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "LatoLight";
    font-weight: 400;
    font-style: normal;
    font-display: optional;
    src: url('fonts/LatoLight/LatoLight.woff2') format('woff2');
}

@font-face {
    font-family: "LatoSemibold";
    font-weight: 400;
    font-style: normal;
    font-display: optional;
    src: url('fonts/LatoSemibold/LatoSemibold.woff2') format('woff2');
}


/* ═══════════════════════════════════════════════════════════════════════
 * 9. ACCESSIBILITY: COLOR CONTRAST
 *
 * Lighthouse color-contrast: все текстовые элементы должны иметь
 * соотношение контрастности >= 4.5:1 (AA) для обычного текста
 * и >= 3:1 для крупного (18px+ / 14px+ bold).
 * ═══════════════════════════════════════════════════════════════════════ */

/* NEW label: #fff на #4caf50 = 3.0:1 (FAIL).
   #fff на #2e7d32 = 5.2:1 (PASS). */
.product-item .item__new {
    background-color: #2e7d32;
}

/* ПОЗВОНИТЕ МНЕ button: #fff на #ed3833 = 4.0:1 (FAIL).
   #fff на #c62828 = 5.65:1 (PASS). */
.list-btn {
    background-color: #c62828;
}
.list-btn:hover {
    background-color: #d32f2f;
}
.list-btn:active {
    background-color: #b71c1c;
}

/* Footer copyright: opacity:0.4 + #000 = effective ~#999 on #fff = 2.8:1 (FAIL).
   opacity:1 + #767676 on #fff = 4.54:1 (PASS). */
.info-copy {
    opacity: 1;
    color: #767676;
}

/* Footer category headers: #a2a2a2 on #fff = 2.6:1 (FAIL).
   14px bold = large text (needs 3:1), but #a2a2a2 still fails.
   #757575 on #fff = 4.6:1 (PASS AA). */
.footer-category__h {
    color: #757575;
}

/* Product price: вернули чёрный цвет (по дизайну). */
.product-item:not(.product-item--style-sm) .price__p,
.product-item.product-item--style-sm .price__p {
    color: #333;
}

/* Slick dots: увеличиваем область прикосновения до 44x44px (WCAG)
   для прохождения audit tap-targets */
.slick-dots li {
    width: 44px;
    height: 44px;
}
.slick-dots li button {
    width: 44px;
    height: 44px;
    padding: 10px;
}
.slick-dots li button:before {
    width: 44px;
    height: 44px;
    line-height: 44px;
}
