css
/* =====================================================
   FUTURE FULLSCREEN MENU
   ===================================================== */

:root {
	--future-menu-top: 60px;
}


/* =====================================================
   WOODMART HEADER — BLACK WHEN MENU IS OPEN
   ===================================================== */

html.future-menu-header-open .whb-header,
html.future-menu-header-open .whb-main-header,
html.future-menu-header-open .whb-header-mobile,
html.future-menu-header-open .whb-general-header,
html.future-menu-header-open .whb-row,
html.future-menu-header-open .whb-flex-row,
html.future-menu-header-open .whb-general-header-inner,
html.future-menu-header-open .whb-column,
html.future-menu-header-open .whb-col-left,
html.future-menu-header-open .whb-col-right,
html.future-menu-header-open .container {
	background-color: #000 !important;
}


html.future-menu-header-open .whb-header .container,
html.future-menu-header-open .whb-main-header .container,
html.future-menu-header-open .whb-header-mobile .container,
html.future-menu-header-open .whb-header .whb-flex-row,
html.future-menu-header-open .whb-main-header .whb-flex-row,
html.future-menu-header-open .whb-header-mobile .whb-flex-row {
	background-color: #000 !important;
}


/*
 * Не меняем положение и высоту header.
 */

html.future-menu-header-open .whb-header,
html.future-menu-header-open .whb-main-header,
html.future-menu-header-open .whb-header-mobile {
	height: auto !important;
}


/* =====================================================
   MENU TRIGGER WRAPPER
   ===================================================== */

.wd-header-text:has(.future-menu-trigger) {
	margin-left: auto !important;
	margin-right: 10px !important;

	padding: 0 !important;

	width: auto !important;
	min-width: 24px !important;

	flex: 0 0 auto !important;

	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;

	background: transparent !important;
	background-color: transparent !important;

	border: 0 !important;
	box-shadow: none !important;
}


/* =====================================================
   MENU TRIGGER
   ===================================================== */

.future-menu-trigger {
	position: relative !important;

	display: block !important;

	width: 24px !important;
	height: 24px !important;

	min-width: 24px !important;
	min-height: 24px !important;

	margin: 0 0 0 auto !important;
	padding: 0 !important;

	box-sizing: border-box !important;

	border: 0 !important;
	border-radius: 0 !important;

	outline: none !important;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	box-shadow: none !important;

	color: transparent !important;

	font-size: 0 !important;
	line-height: 0 !important;

	text-indent: -9999px !important;

	cursor: pointer !important;

	appearance: none !important;
	-webkit-appearance: none !important;

	opacity: 1 !important;
	visibility: visible !important;
}


/*
 * Убираем возможные стандартные элементы Woodmart.
 */

.future-menu-trigger .future-menu-line {
	display: none !important;
}


/* =====================================================
   TWO MENU LINES
   ===================================================== */

.future-menu-trigger::before {
	content: "" !important;

	position: absolute !important;

	left: 0 !important;
	top: 50% !important;

	display: block !important;

	width: 24px !important;
	height: 2px !important;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box !important;

	background: #000 !important;
	background-color: #000 !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	transform: translateY(-6px) !important;

	transform-origin: center center !important;

	transition:
		transform 0.3s ease-in-out,
		background-color 0.3s ease-in-out !important;

	opacity: 1 !important;
	visibility: visible !important;
}


.future-menu-trigger::after {
	content: "" !important;

	position: absolute !important;

	left: 0 !important;
	top: 50% !important;

	display: block !important;

	width: 24px !important;
	height: 2px !important;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box !important;

	background: #000 !important;
	background-color: #000 !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	transform: translateY(6px) !important;

	transform-origin: center center !important;

	transition:
		transform 0.3s ease-in-out,
		background-color 0.3s ease-in-out !important;

	opacity: 1 !important;
	visibility: visible !important;
}


/* =====================================================
   HOVER
   ===================================================== */

@media (hover: hover) {

	.future-menu-trigger:not(.is-open):hover::before {
		transform: translateY(-8px) !important;
	}

	.future-menu-trigger:not(.is-open):hover::after {
		transform: translateY(8px) !important;
	}
}


/* =====================================================
   OPEN — X
   ===================================================== */

.future-menu-trigger.is-open {
	color: transparent !important;

	background: transparent !important;
	background-color: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


.future-menu-trigger.is-open::before {
	background: #fff !important;
	background-color: #fff !important;

	transform: translateY(0) rotate(45deg) !important;
}


.future-menu-trigger.is-open::after {
	background: #fff !important;
	background-color: #fff !important;

	transform: translateY(0) rotate(-45deg) !important;
}


/* =====================================================
   FOCUS / ACTIVE
   ===================================================== */

.future-menu-trigger {
	outline: none !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =====================================================
   MOBILE TRIGGER
   ===================================================== */

@media (max-width: 1024px) {

	.wd-header-text:has(.future-menu-trigger) {
		display: flex !important;

		align-items: center !important;
		justify-content: flex-end !important;

		width: auto !important;

		margin-left: auto !important;
		margin-right: 10px !important;

		flex: 0 0 auto !important;

		visibility: visible !important;
		opacity: 1 !important;
	}


	.future-menu-trigger {
		display: block !important;

		margin-left: auto !important;
		margin-right: 0 !important;

		visibility: visible !important;
		opacity: 1 !important;
	}
}


/* =====================================================
   FULLSCREEN MENU
   ===================================================== */

.future-menu {
	position: fixed !important;

	top: var(--future-menu-top, 60px) !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	z-index: 90 !important;

	display: block !important;

	width: 100% !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box !important;

	background: #000 !important;
	background-color: #000 !important;

	opacity: 0 !important;
	visibility: hidden !important;

	transform: translateY(-15px) !important;

	pointer-events: none !important;

	overflow: hidden !important;

	transition:
		opacity 0.35s ease,
		visibility 0.35s ease,
		transform 0.35s ease !important;
}


/* =====================================================
   OPEN MENU
   ===================================================== */

.future-menu.is-open {
	opacity: 1 !important;

	visibility: visible !important;

	transform: translateY(0) !important;

	pointer-events: auto !important;
}


/* =====================================================
   MENU INNER
   ===================================================== */

.future-menu-inner {
	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;

	padding: 40px 5vw 50px !important;

	box-sizing: border-box !important;

	display: flex !important;

	align-items: flex-end !important;

	overflow-y: auto !important;
	overflow-x: hidden !important;
}


/* =====================================================
   NAVIGATION
   ===================================================== */

.future-menu-nav {
	display: block !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =====================================================
   MAIN WORDPRESS MENU
   ===================================================== */

.future-menu .future-menu-list {
	display: flex !important;

	flex-direction: column !important;

	align-items: flex-start !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


/* =====================================================
   MAIN MENU ITEMS
   ===================================================== */

.future-menu .future-menu-list > li {
	position: relative !important;

	display: block !important;

	width: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


/*
 * Убираем Woodmart decorations.
 */

.future-menu .future-menu-list li::before,
.future-menu .future-menu-list li::after {
	content: none !important;

	display: none !important;
}


/* =====================================================
   MAIN LINKS
   ===================================================== */

.future-menu .future-menu-list > li > a {
	display: block !important;

	width: auto !important;

	margin: 0 !important;

	padding: 8px 0 !important;

	box-sizing: border-box !important;

	color: #fff !important;

	font-family: inherit !important;

	font-size: clamp(32px, 5vw, 64px) !important;

	font-weight: 500 !important;

	line-height: 1.05 !important;

	letter-spacing: -0.02em !important;

	text-align: left !important;

	text-decoration: none !important;

	white-space: nowrap !important;

	opacity: 1 !important;

	visibility: visible !important;

	background: transparent !important;
	background-color: transparent !important;

	border: 0 !important;

	box-shadow: none !important;

	transition:
		color 0.25s ease,
		opacity 0.25s ease !important;
}


/*
 * Main menu hover.
 */

.future-menu .future-menu-list > li > a:hover {
	color: #70ac90 !important;

	opacity: 1 !important;

	text-decoration: none !important;
}


/* =====================================================
   DESKTOP SUBMENU
   ===================================================== */

@media (min-width: 1025px) {

	.future-menu .future-menu-list > li > .sub-menu {
		position: absolute !important;

		left: 100% !important;
		top: 50% !important;

		display: flex !important;

		flex-direction: row !important;

		align-items: center !important;

		gap: 0 25px !important;

		width: max-content !important;

		margin: 0 !important;

		padding: 0 0 0 35px !important;

		list-style: none !important;

		opacity: 0 !important;

		visibility: hidden !important;

		pointer-events: none !important;

		transform: translateX(-20px) translateY(-50%) !important;

		transition:
			opacity 0.35s ease,
			transform 0.35s ease,
			visibility 0.35s ease !important;
	}


	.future-menu .future-menu-list > li:hover > .sub-menu {
		opacity: 1 !important;

		visibility: visible !important;

		pointer-events: auto !important;

		transform: translateX(0) translateY(-50%) !important;
	}


	.future-menu .future-menu-list > li > .sub-menu > li {
		display: block !important;

		width: auto !important;

		margin: 0 !important;

		padding: 0 !important;

		list-style: none !important;
	}


	.future-menu .future-menu-list > li > .sub-menu > li > a {
		display: block !important;

		width: auto !important;

		margin: 0 !important;

		padding: 5px 0 !important;

		color: #70ac90 !important;

		font-family: inherit !important;

		font-size: 20px !important;

		font-weight: 400 !important;

		line-height: 1.2 !important;

		letter-spacing: 0 !important;

		text-align: left !important;

		text-decoration: none !important;

		white-space: nowrap !important;

		opacity: 1 !important;

		visibility: visible !important;

		background: transparent !important;
		background-color: transparent !important;

		border: 0 !important;

		box-shadow: none !important;

		transition: color 0.25s ease !important;
	}


	/*
	 * Submenu hover.
	 */

	.future-menu .future-menu-list > li > .sub-menu > li > a:hover {
		color: #5b9278 !important;

		opacity: 1 !important;
	}


	/* =================================================
	   DESKTOP SUBMENU SEPARATOR
	   ================================================= */

	.future-menu .future-menu-list > li > .sub-menu > li:not(:last-child)::after {
		content: "|" !important;

		display: inline-block !important;

		margin: 0 18px !important;

		color: rgba(112, 172, 144, 0.55) !important;

		font-size: 18px !important;

		font-weight: 300 !important;

		line-height: 1 !important;

		pointer-events: none !important;
	}


	/*
	 * Because the separator belongs to the LI,
	 * keep submenu items horizontal.
	 */

	.future-menu .future-menu-list > li > .sub-menu > li {
		display: flex !important;

		align-items: center !important;
	}
}


/* =====================================================
   MOBILE MENU
   ===================================================== */

@media (max-width: 1024px) {

	.future-menu-inner {
		padding: 35px 25px 50px !important;

		align-items: center !important;
	}


	.future-menu .future-menu-list > li {
		width: 100% !important;
	}


	.future-menu .future-menu-list > li > a {
		font-size: clamp(30px, 9vw, 48px) !important;

		line-height: 1.05 !important;

		padding: 8px 0 !important;
	}


	/* =================================================
	   MOBILE SUBMENU
	   ================================================= */

	.future-menu .future-menu-list > li > .sub-menu {
		position: static !important;

		display: flex !important;

		flex-direction: column !important;

		align-items: flex-start !important;

		width: auto !important;

		margin: 0 !important;

		padding: 0 0 10px 25px !important;

		list-style: none !important;

		opacity: 1 !important;

		visibility: visible !important;

		pointer-events: auto !important;

		transform: none !important;
	}


	.future-menu .future-menu-list > li > .sub-menu > li {
		display: block !important;

		width: auto !important;

		margin: 0 !important;

		padding: 0 !important;

		list-style: none !important;
	}


	.future-menu .future-menu-list > li > .sub-menu > li > a {
		display: block !important;

		padding: 6px 0 !important;

		color: #70ac90 !important;

		font-family: inherit !important;

		font-size: 20px !important;

		font-weight: 400 !important;

		line-height: 1.25 !important;

		white-space: nowrap !important;

		opacity: 1 !important;

		visibility: visible !important;

		background: transparent !important;

		border: 0 !important;

		box-shadow: none !important;

		transition: color 0.25s ease !important;
	}


	.future-menu .future-menu-list > li > .sub-menu > li > a:hover {
		color: #5b9278 !important;

		opacity: 1 !important;
	}


	/*
	 * Mobile main menu hover.
	 */

	.future-menu .future-menu-list > li > a:hover {
		color: #70ac90 !important;

		opacity: 1 !important;
	}


	/*
	 * NO SEPARATORS ON MOBILE.
	 */

	.future-menu .future-menu-list > li > .sub-menu > li::after {
		content: none !important;
	}
}


/* =====================================================
   BODY LOCK
   ===================================================== */

html.future-menu-open,
body.future-menu-open {
	overflow: hidden !important;
}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {

	.future-menu-inner {
		padding-left: 20px !important;

		padding-right: 20px !important;
	}


	.future-menu .future-menu-list > li > .sub-menu {
		padding-left: 15px !important;
	}
}


/* =====================================================
   DISABLE ALL MENU CLICKS WHEN MENU IS CLOSED
   ===================================================== */

#future-menu {
	pointer-events: none !important;
}


#future-menu.is-open {
	pointer-events: auto !important;
}


#future-menu:not(.is-open) a {
	pointer-events: none !important;
}


#future-menu.is-open a {
	pointer-events: auto !important;
}


/* =====================================================
   WHITE LOGO WHEN FULLSCREEN MENU IS OPEN
   ===================================================== */

html.future-menu-header-open .whb-header img,
html.future-menu-header-open .whb-main-header img,
html.future-menu-header-open .whb-header-mobile img {
	filter: brightness(0) invert(1) !important;
}


/* =====================================================
   END
   ===================================================== */