/*
 * Раскрытое меню категорий на главной — правки поверх темы UpStore.
 * Грузится только на главной (OCMOD zoomagazin_home_vmenu_css).
 *
 * Тема рисует это меню блоком .m_type_header_1 с position: absolute —
 * то есть ВНЕ ПОТОКА. В демке вендора это незаметно: справа стоит высокий
 * баннер, он и держит высоту первого экрана. Как только правая колонка
 * оказывается ниже меню, меню ложится на следующий блок.
 *
 * Здесь три правки, каждая со своей причиной. Правим только состояние
 * mm_open_hp (раскрыто на главной) — обычное выпадающее меню не трогаем.
 */

:root {
	/*
	 * Высота меню = число включённых пунктов верхнего уровня.
	 * Считается так: пункт 48px + разделитель 1px между пунктами
	 * + 5px верхнего отступа списка. Сейчас 8 пунктов: 8*48 + 7 + 5 = 396.
	 *
	 * ⚠️ ЭТО ЕДИНСТВЕННОЕ ЧИСЛО, КОТОРОЕ НАДО ПРАВИТЬ, если заказчик включит
	 * ещё пункты меню (в oc_megamenuvh их 23 выключенных про запас).
	 * Оно же резервирует место справа, чтобы меню ничего не накрыло, и оно же
	 * ограничивает меню сверху: если пунктов станет больше, чем влезает,
	 * меню начнёт скроллиться внутри себя, а НЕ полезет на товары.
	 */
	--zm-vmenu-h: 400px;
}

@media (min-width: 992px) {
	/*
	 * 1. Раскладку включаем с 992px, а не с 1200px как тема.
	 *    Причина: на ноутбуках ширина окна в CSS-пикселях часто 1000–1100
	 *    (Retina отдаёт 2х), и на них вся раскладка просто не включалась —
	 *    меню оставалось absolute поверх контента и с высотой 60vh.
	 */
	.home-page-content-top {
		margin-left: 25%;
		width: 75%;
		/* Меню вне потока — резервируем под него высоту, иначе следующий
		   блок уезжает под меню. Пока баннер выше этого значения,
		   правило ни на что не влияет. */
		min-height: var(--zm-vmenu-h);
	}

	.menu-header-box.mm_open_hp:not(.m-sticky) {
		display: block;
		position: relative;
		z-index: 1007;
		overflow: visible;
	}

	.menu-header-box.mm_open_hp:not(.m-sticky) .menu-box {
		right: auto;
		top: 30px;
		width: calc(25% - 20px);
		display: block;
		overflow: unset;
		background: var(--up-bg-wd);
		box-shadow: none;
		border-radius: 20px;

		/*
		 * 2. Высота ровно по числу категорий.
		 *    У темы .m_type_header_1 { height: 60vh; min-height: 285px }
		 *    — отсюда и скролл, и пустое место. Снимаем обе, ставим auto
		 *    с потолком: перерастёт — заскроллится внутри, но не накроет
		 *    соседний блок.
		 */
		height: auto;
		min-height: 0;
		max-height: var(--zm-vmenu-h);
	}

	/*
	 * 3. Внутренний скролл списка.
	 *    Тема: .m_type_header_1 #menu-vertical #menu-vertical-list
	 *          { height: 100%; overflow-y: auto }
	 *    При height:auto у родителя эти 100% схлопываются, и список всё равно
	 *    получал полосу прокрутки. Отдаём высоту содержимому.
	 *
	 *    overflow у #menu-vertical НЕ трогаем: он оставлен hidden ради
	 *    скругления углов, а выпадающие подменю им не режутся — их
	 *    containing block выше по дереву (.menu-header-box с position:relative).
	 */
	.menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical,
	.menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical #menu-vertical-list {
		height: auto;
		max-height: var(--zm-vmenu-h);
	}

	.menu-header-box.mm_open_hp:not(.m-sticky) #menu-vertical #menu-vertical-list {
		overflow-y: auto;
		overflow-x: hidden;
	}
}

/*
 * 4. Скругление баннеров под тему.
 *
 * Мегаслайдер отдаёт картинку прямыми углами, а всё вокруг — меню, карточки
 * товара, блоки — скруглено на 20px (самый ходовой радиус темы: 53 вхождения
 * в stylesheet.css против 21 у 8px). Баннер с прямыми углами выбивается.
 *
 * Радиус вешаем на САМУ КАРТИНКУ, а не на контейнер с overflow: hidden.
 * Причина: стрелки «вперёд/назад» и пагинация лежат внутри слайдера и заходят
 * за его край — обрезка контейнером срезала бы их. Скругление изображения
 * такого побочного эффекта не даёт.
 *
 * Без media-запроса: баннер скруглён на любой ширине, это чистая косметика.
 */
.megasliderpro img.bg-image-slider,
.megasliderpro .small-slider img {
	border-radius: 20px;
}