/*
 * Гашение сдвигов вёрстки (CLS).
 *
 * Здесь был резерв высоты под Slider Revolution: он отрисовывался с высотой 0 и
 * скачком получал настоящую. Слайдер с главной убран, герой задаёт свою высоту
 * сам в hero.css — резервировать нечего.
 */

/*
 * Меню шапки: не ждать JS, чтобы схлопнуться в бургер.
 *
 * kitify/assets/js/addons/nova-menu.js вешает класс kitify-active--mbmenu
 * только по событию elementor/frontend/init. Под CPU x4 это происходило на
 * 13-й секунде, а до тех пор меню отрисовано как десктопное и занимает 300 px
 * вместо 21 — вся строка шапки выше на 220 px, и весь #site-content уезжает
 * вниз, а затем возвращается. Два сдвига по 0.426 и 0.250.
 *
 * Ниже продублировано ровно то, что делает сам класс (kitify-base.css), но
 * через медиазапрос с тем же порогом, что и в JS: data-mobile-breakpoint=1279.
 * Когда класс наконец появится, визуально ничего не изменится.
 */
@media (max-width: 1279px) {
	.kitify-nova-menu.kitify-nova-mobile-menu .main-navigation {
		display: none;
	}

	.kitify-nova-menu.kitify-nova-mobile-menu .kitify-nova-menu__mobile-trigger {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/*
 * Меню шапки, часть 2: не прятать его до полной загрузки страницы.
 *
 * app.css темы держит ряд элементов невидимыми, пока JS не повесит на body
 * класс body-completely-loaded: content-visibility:hidden на виджете меню,
 * а до 882px виджет вообще display:none. Класс вешается в самом конце цепочки
 * отложенных скриптов «пейджспида» novaworks — под CPU x4 это ~12-я секунда,
 * на быстрой машине заметные доли секунды. Пока герой был медленным, дыра
 * сливалась с общей загрузкой; теперь страница видна на первой секунде, и
 * шапка стоит без меню у всех на глазах.
 *
 * Прятать виджет незачем: его статичный вид полностью описан CSS. Десктопную
 * раскладку даёт kitify-base.css, мобильную (бургер) — фолбэк выше в этом
 * файле. Выпадающие списки не разгейчиваем: у них свои opacity/visibility по
 * hover, гейт им не мешает, а трогать лишнее не надо.
 *
 * Класс .elementor-widget добавлен в селектор ради специфичности над правилом
 * темы — оно с тем же префиксом body:not():not().
 */
body:not(.elementor-editor-active):not(.body-completely-loaded) .elementor-widget.elementor-kitify-nova-menu,
body:not(.elementor-editor-active):not(.body-completely-loaded) .kitify-nova-menu .kitify-nova-menu__mobile-trigger {
	content-visibility: visible;
}

/*
 * Счётчики корзины и избранного в шапке — тот же гейт: тема держит
 * .count-badge/.count-text невидимыми до body-completely-loaded. Значение «0»
 * отрисовано сервером и корректно с первого кадра; реальное число WooCommerce
 * подставляет фрагментом, когда доедет JS. Ждать весь отложенный код ради
 * кружка с цифрой незачем.
 */
body:not(.elementor-editor-active):not(.body-completely-loaded) .header-cart-box .count-badge,
body:not(.elementor-editor-active):not(.body-completely-loaded) .header-cart-box .count-text {
	content-visibility: visible;
}

@media (max-width: 882px) {
	body:not(.elementor-editor-active):not(.body-completely-loaded) .elementor-widget.elementor-kitify-nova-menu {
		display: block;
	}
}

/*
 * Карточки товаров: не прятать до отработки JS.
 *
 * app.css темы держит каждую карточку прозрачной (opacity:0, scale(.95)),
 * а app.js раскрывает их по одной — после imagesLoaded на всём списке и
 * проверки видимости при скролле; фолбэк-анимация в CSS стартует лишь через
 * 2 секунды. На деле сетки товаров (главная, каталог) подолгу стояли пустыми
 * и проявлялись вразнобой. Карточка полностью свёрстана сервером — прятать
 * её незачем. Селектор тот же, что у правила темы; наш файл грузится позже
 * и при равной специфичности выигрывает.
 */
ul.products:not(.swiper-wrapper) li.product {
	opacity: 1;
	transform: none;
	animation: none;
}

/*
 * Баннеры kitify печатаются шаблоном плагина как
 * <img src class="kitify-banner__img"> — без width/height, место под них не
 * резервируется. Фильтр kitify/banner/image-format размеры пробросить не даёт:
 * в формат передаются только src и alt. Все используемые файлы квадратные
 * (варианты -1100x1100), поэтому соотношение задаётся здесь.
 */
.kitify-banner__img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
}