/*
 * Пожелания владельца к интерфейсу (2026-08-04).
 *
 * Отдельный файл: cls.css гасит сдвиги вёрстки, hero.css оформляет герой,
 * здесь — точечные решения по виду. Всё скрытое здесь остаётся в разметке и
 * редактируется в Elementor как раньше; правило можно убрать — элемент
 * вернётся.
 */

/*
 * Кнопка «Filters» в тулбаре каталога. Владелец фильтрами не пользуется:
 * за кнопкой — офканвас с облаком тегов, и без настроенных фильтров она
 * только смущает. Сортировка и «Rodyti N» остаются.
 */
.woocommerce-archive-toolbar .nova-product-filter {
	display: none;
}

/*
 * Левая колонка каталога, зарезервированная под те же фильтры. Без них это
 * пустая полоса с разделителем на треть экрана. Прячем колонку и отдаём
 * сетке товаров всю ширину; селекторы по data-id шаблона каталога (2083),
 * сами виджеты в Elementor не тронуты — правило можно снять, и колонка
 * вернётся.
 */
.elementor-2083 .elementor-element.elementor-element-47abefcf {
	display: none;
}

/* Двойной .elementor-element — специфичность над правилом самого Elementor,
 * которое задаёт колонке проценты тем же селектором. border-left рисовал
 * разделитель между колонкой фильтров и товарами; без фильтров это
 * бесхозная линия у левого края. */
.elementor-2083 .elementor-element.elementor-element-67a110ed {
	--width: 100%;
	border-left: 0;
}

/*
 * Маркеры-хотспоты («крестики») на картинке блока с интерьером на главной.
 * Сама картинка и список точек в виджете (repeater) не тронуты — прячем
 * только отрисовку маркеров.
 */
.elementor-widget-kitify-hotspots .kitify-hotspot {
	display: none;
}

/*
 * Галерея товара: одинаковая коробка для всех фото.
 *
 * У товаров вперемешку портретные (1000x1500) и альбомные (1000x667)
 * снимки. FlexSlider подгоняет высоту под каждый кадр, и при переключении
 * фото вся страница прыгает на сотни пикселей; заодно у каждого товара
 * галерея своего роста. Фиксируем пропорцию кадра 4:5 (как у карточек
 * каталога, woocommerce_thumbnail 700x854) — высота галереи перестаёт
 * зависеть от кадра и товара.
 *
 * cover кадрирует, а не вписывает: на фотографиях с интерьерным фоном
 * letterbox-полосы от contain выглядят хуже лёгкой обрезки. Полный кадр
 * остаётся по клику (лайтбокс) и в миниатюрах.
 */
/*
 * Не прятать галерею до инициализации слайдера.
 *
 * WooCommerce печатает инлайновый стиль .woocommerce-product-gallery
 * { opacity: 0 } и показывает галерею только после инициализации flexslider —
 * а тот едет в самом конце цепочки отложенных скриптов «пейджспида». Замер:
 * первое фото загружено к ~1.3 c, но галерея стояла невидимой до ~4.3 c
 * (CPU x4). Показываем сразу; !important — против того инлайнового стиля.
 *
 * До инициализации слайды — обычные блоки в потоке, и без слайдера они
 * встали бы стопкой друг под другом. Прячем все кадры, кроме первого,
 * цепочкой прямых потомков: после инициализации flexslider вставляет между
 * галереей и обёрткой свой .flex-viewport, селектор перестаёт совпадать —
 * и все кадры снова в деле. Миниатюры генерирует сам слайдер, до него их
 * в разметке нет.
 */
.kitify-product-images .woocommerce-product-gallery {
	opacity: 1 !important;
}

.kitify-product-images .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
	display: none;
}

/*
 * Страховка на миг инициализации: flexslider сначала оборачивает слайды в
 * .flex-viewport (правило выше перестаёт совпадать — все кадры на мгновение
 * в потоке стопкой), и только следующим шагом задаёт вьюпорту высоту. Под
 * троттлингом Lighthouse эта стопка успевала отрисоваться и двигала всё, что
 * ниже (CLS 0.55 на мобильном). Кэп по высоте первого кадра прячет стопку;
 * после инициализации высота обёртки и так равна кадру — кэп не мешает.
 * 50px в мобильной формуле — боковые поля колонки (25 + 25 при 412px).
 */
.kitify-product-images .woocommerce-product-gallery__wrapper {
	overflow: hidden;
	max-height: calc((100vw - 50px) * 1.25);
}

/* Класс wp-post-image есть только у первого кадра, поэтому селектор — по
 * обёртке слайда: он накрывает все кадры, но не миниатюры (те лежат в
 * .flex-control-thumbs, вне __image). */
.kitify-product-images .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 50%;
}

/*
 * Десктоп: галерея целиком (кадр + миниатюры) помещается в экран и липнет
 * при скролле — фото остаётся на виду, пока читают описание справа.
 *
 * Высота кадра от вьюпорта: 295px = шапка, которая при скролле становится
 * fixed высотой 101px (запас до 120) + миниатюры с отбивкой ~135 + нижняя
 * отбивка. Потолок 930px — прежний кадр 4:5 на всю колонку 744px, выше
 * которого расти некуда; пол 400px на случай низких окон. Ширина при явной
 * высоте следует из aspect-ratio; кадр уже колонки и лежит inline-block'ом
 * в ссылке зума на всю ширину, поэтому центрируем наследуемым text-align.
 *
 * Порог 1025px — десктопный брейкпоинт Elementor: ниже колонки товара
 * складываются в столбец и липкость теряет смысл.
 */
@media (min-width: 1025px) {
	.kitify-product-images .woocommerce-product-gallery__image img {
		height: clamp(400px, calc(100vh - 295px), 930px);
		width: auto;
		max-width: 100%;
	}

	.kitify-product-images .woocommerce-product-gallery__image {
		text-align: center;
	}

	.elementor-widget.elementor-kitify-wooproduct-images {
		position: sticky;
		top: 120px;
	}

	/* Кэп стопки (см. выше) — десктопная высота кадра. */
	.kitify-product-images .woocommerce-product-gallery__wrapper {
		max-height: clamp(400px, calc(100vh - 295px), 930px);
	}

	/*
	 * У .site-wrapper темы стоит overflow:hidden — предок с ним не даёт
	 * sticky работать. clip обрезает так же, но не делает обёртку
	 * контейнером прокрутки (тот же приём, что у героя на главной).
	 */
	body.single-product .site-wrapper {
		overflow: clip;
	}
}