/**
 * Фікс мобільного підменю JetMenu («Послуги» → Обсмажування/Фасування)
 * у головному хедері сайту (Elementor, віджет jet-nav-menu, widget e3c20b1).
 *
 * Причина бага: підменю налаштоване як флаут-вивід праворуч
 * (клас jet-nav--vertical-sub-right-side) — це коректно для десктопної
 * вертикальної навігації, але на вузькому мобільному екрані підменю
 * "вилазить" вузькою смужкою за межі екрана замість розкриття під пунктом.
 *
 * Власний мобільний фікс плагіна (.jet-mobile-menu.jet-nav-wrap …) не
 * спрацьовує, бо клас .jet-mobile-menu на цьому сайті ніколи не додається
 * до .jet-nav-wrap (тригер мобільного меню тут — JetPopup, а не штатний
 * "мобільний" режим JetMenu). Тому додаємо той самий ефект напряму,
 * без залежності від .jet-mobile-menu, з !important — щоб гарантовано
 * перебити авто-згенерований інлайновий CSS конкретного інстансу віджета.
 */
@media (max-width: 1024px) {
	.jet-nav-wrap.m-layout-mobile .menu-item.jet-nav-hover > .jet-nav__sub,
	.jet-nav-wrap.m-layout-mobile .menu-item.jet-nav-hover-out > .jet-nav__sub {
		position: static !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		width: 100% !important;
		max-width: none !important;
		transform: none !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 18px !important;
		opacity: 1 !important;
		visibility: visible !important;
		background: transparent !important;
		box-shadow: none !important;
		margin: 20px 0 0 !important;
	}
	/* Підпункти («Обсмажування», «Фасування») в десктопному флауті мають
	   білий фон, тому їхній колір ніде явно не заданий — успадковується
	   загальний темний колір тексту сайту. На прозорому мобільному оверлеї
	   це давало ледь помітний сірий текст. Форсуємо колір/непрозорість
	   одразу на li, на посиланні і на самому тексті — з !important на
	   кожному рівні, щоб не залежати від того, звідки саме успадковується
	   сірий колір. Приводимо до вигляду решти пунктів меню: білий,
	   центрований, та сама вага шрифту. */
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub,
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub .menu-item-link-sub,
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub .jet-nav-link-text {
		color: #fff !important;
		opacity: 1 !important;
	}
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub {
		margin: 0 !important;
	}
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub .menu-item-link-sub {
		justify-content: center !important;
		padding: 0 !important;
	}
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub .jet-nav-link-text {
		width: auto !important;
		text-align: center !important;
		font-size: 18px !important;
		font-weight: 500 !important;
	}
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub.current-menu-item,
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub.current-menu-item .menu-item-link-sub,
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub.current-menu-item .jet-nav-link-text,
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub .menu-item-link-sub:hover,
	.jet-nav-wrap.m-layout-mobile .jet-nav-item-sub .menu-item-link-sub:hover .jet-nav-link-text {
		color: var( --e-global-color-accent, #af0000 ) !important;
	}
}

/**
 * «Інші послуги» на головній: картки «Обсмажування» і «Фасування» мають
 * по ДВІ кнопки-віджети («Надіслати заявку» + «Детальніше» на реальну
 * сторінку послуги) — інші картки лише одну. Батьківський Elementor-
 * контейнер цих двох карток — flex-column (заголовок/опис/кнопка/кнопка
 * стовпчиком), тому кнопки виводились одна під одною.
 *
 * Знаходимо потрібний контейнер через :has() за URL кнопки «Детальніше»
 * (стабільний, на відміну від авто-згенерованих ID віджетів Elementor,
 * які можуть змінитися при редагуванні в конструкторі) і переводимо його
 * в row+wrap: заголовок і опис примусово займають 100% (тому й далі кожен
 * на своєму рядку), а дві кнопки — авто-ширини, тому лягають в один
 * спільний рядок.
 */
.e-con:has(> .elementor-widget-button a.elementor-button[href*="обсмажування"]),
.e-con:has(> .elementor-widget-button a.elementor-button[href*="фасування"]) {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	column-gap: 16px !important;
}
.e-con:has(> .elementor-widget-button a.elementor-button[href*="обсмажування"]) > .elementor-widget-text-editor,
.e-con:has(> .elementor-widget-button a.elementor-button[href*="фасування"]) > .elementor-widget-text-editor {
	flex: 1 1 100% !important;
}
.e-con:has(> .elementor-widget-button a.elementor-button[href*="обсмажування"]) > .elementor-widget-button,
.e-con:has(> .elementor-widget-button a.elementor-button[href*="фасування"]) > .elementor-widget-button {
	flex: 0 0 auto !important;
	width: auto !important;
}

/**
 * «Надіслати заявку» і «Детальніше» на цих двох картках виглядали
 * непослідовно: href="#" у «Надіслати заявку» вказує сам на себе (на
 * поточну сторінку), тому браузер трактує його як "відвіданий", і
 * глобальне elementor-правило (:focus,:hover,:visited{color:#fff})
 * білить його ЗАВЖДИ, незалежно від наведення — випадковий побічний
 * ефект, а не свідомий стиль. «Детальніше» веде на реальну сторінку
 * послуги, тому лишається в базовому темному кольорі — і губиться на
 * бордовому фоні картки при наведенні.
 *
 * Явно фіксуємо ОБИДВІ кнопки: темні за замовчуванням (перебиваємо
 * випадковий :visited), білі — тільки коли дійсно навели на картку. */
.e-con:has(.elementor-widget-button a.elementor-button[href*="обсмажування"]) a.elementor-button,
.e-con:has(.elementor-widget-button a.elementor-button[href*="фасування"]) a.elementor-button {
	color: var( --e-global-color-text, #161616 ) !important;
	border-color: var( --e-global-color-text, #161616 ) !important;
}
.e-con:has(.elementor-widget-button a.elementor-button[href*="обсмажування"]):hover a.elementor-button,
.e-con:has(.elementor-widget-button a.elementor-button[href*="фасування"]):hover a.elementor-button {
	color: #fff !important;
	border-color: #fff !important;
}