/**
 * assets/css/nav-dropdown.css
 * Копіювати у /wp-content/themes/{тема}/assets/css/nav-dropdown.css
 */

.menu-item {
	position: relative;
}
.menu-item.is-nmenu-open {
	z-index: 99999;
}

.sf-nmenu {
	display: none !important;
	position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 99999;
    background: #fff;
    border-radius: 0 0 1.4rem 1.4rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    min-width: 26rem;
    overflow: hidden;
    margin-top: 1rem;
}
.menu-item.is-nmenu-open > .sf-nmenu {
	display: block !important;
}

.sf-nmenu__inner {
	display: flex;
	flex-direction: column;
}

/* ---------------- Акордеон верхнього рівня ---------------- */

.sf-nmenu__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #32302E;
	color: #fff;
	border: none;
	padding: 1rem 1.5rem;
   font-size: 1.3rem;
   font-weight: 600;
	text-align: left;
	cursor: pointer;
	border-radius: 0;
}
.sf-nmenu__group.is-open > .sf-nmenu__head {
	background: var(--sf-green, #2fa84f);
}

.sf-nmenu__chevron {
	font-size: 12px;
	transition: transform .15s ease;
}
.sf-nmenu__group.is-open > .sf-nmenu__head .sf-nmenu__chevron {
	transform: rotate(180deg);
}

/* тіло акордеона — приховане, поки group не .is-open */
.sf-nmenu__body {
	display: none !important;
}
.sf-nmenu__group.is-open > .sf-nmenu__body {
	display: block !important;
}

.sf-nmenu ul.sf-nmenu__products,
.sf-nmenu ul.sf-nmenu__subcats,
.sf-nmenu-flyout ul.sf-nmenu__products {
	position: static !important;
	top: auto !important;
	left: auto !important;
	float: none !important;
	box-shadow: none !important;
	z-index: auto !important;
	padding-right: 0 !important;
}

/* На випадок, якщо тема ще й ховає товари через display — керуємо
   is-active перемиканням для sf-nmenu__products (в т.ч. у флайауті).
   sf-nmenu__subcats НЕ чіпаємо тут — її видимість повністю визначається
   батьківським .sf-nmenu__body (is-open), окреме правило тут раніше
   примусово показувало список повз цю умову. */
.main-navigation .sf-nmenu ul.sf-nmenu__products {
	display: none !important;
}
.main-navigation .sf-nmenu ul.sf-nmenu__products.is-active {
	display: block !important;
}
/* простий (не split) список товарів CAD-SOFTWARE — завжди видимий, коли body видиме */
.sf-nmenu__body:not(.sf-nmenu__body--split) ul.sf-nmenu__products {
	display: block !important;
}

/* ---------------- Простий список товарів (CAD-SOFTWARE) ---------------- */
.sf-nmenu__products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-nmenu__products a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 1.2rem;
    color: #221E1B !important;
    text-decoration: none;
    background: #F6FFF8;
    text-transform: unset;
    font-weight: 400;
    font-family: "Mukta", sans-serif;
}

.sf-nmenu__products a:hover,
.sf-nmenu__products li.is-active a {
	background: #c8f3d6;
}
.sf-nmenu__products img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* ---------------- Zusatzmodule: список підкатегорій на всю ширину ----------------
   (видимість самого .sf-nmenu__body контролюється правилом
   .sf-nmenu__group.is-open > .sf-nmenu__body вище — тут лише layout, без display) */

.sf-nmenu__subcats {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sf-nmenu__subcat-item {
	border-bottom: 1px solid #eef7f0;
}
.sf-nmenu__subcat-item:last-child {
	border-bottom: none;
}
.sf-nmenu__subcat-link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: #f3fdf6;
	border: none;
	padding: 12px 16px;
	font-size: 13.5px;
	color: #1c2530;
	text-align: left;
	cursor: pointer;
}
.sf-nmenu__subcat-item.is-active .sf-nmenu__subcat-link {
	background: #c8f3d6;
	font-weight: 600;
}
.sf-nmenu__dash {
	color: var(--sf-green, #2fa84f);
	font-weight: 700;
}

/* ---------------- Плаваюча панель товарів (поза .sf-nmenu) ----------------
   Позиціонується відносно .menu-item (position:relative), праворуч від
   .sf-nmenu (left:100%). Точний top виставляє JS — навпроти клікнутого
   пункту зі списку підкатегорій. За замовчуванням прихована повністю,
   і жоден sf-nmenu__products всередині не активний, поки не клікнути. */
.sf-nmenu-flyout {
	display: none !important;
	position: absolute;
	top: 0;
	left: 100%;
	margin-left: 8px;
	z-index: 99999;
	background: #f3fdf6;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
	min-width: 300px;
	overflow: hidden;
}
.sf-nmenu-flyout.is-visible {
	display: block !important;
}

.sf-nmenu-flyout .sf-nmenu__products {
	display: none !important;
}
.sf-nmenu-flyout .sf-nmenu__products.is-active {
	display: block !important;
}
.sf-nmenu-flyout .sf-nmenu__products a {
	background: transparent;
}
.sf-nmenu-flyout .sf-nmenu__products a:hover {
	background: #c8f3d6;
}
.sf-nmenu-flyout img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* ---------------- Сума кошика в шапці ---------------- */
[data-role="sf-cart-total"] {
	color: #262626;
}

/* ---------------- Minicart for WooCommerce: показ по кліку, не по hover ----------------
   Плагін сам показує .wmc-content по :hover — курсор губиться, коли ведеш
   мишку від іконки до випадаючого списку (розрив між елементами). Перебиваємо
   hover-поведінку плагіна і керуємо видимістю через клас sf-wmc-open (JS). */
.wmc-cart-wrapper:hover .wmc-content {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
.wmc-cart-wrapper.sf-wmc-open .wmc-content {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}