/**
 * Phadin native menu v3.
 *
 * Content and hierarchy are managed in Appearance > Menus. These rules only
 * present items explicitly opted in with v3 editor classes.
 */

.phadin-menu-v3 {
	--phadin-menu-v3-primary: var(--fs-color-primary, var(--primary-color, #0f6b4b));
	--phadin-menu-v3-secondary: var(--fs-color-secondary, var(--secondary-color, #ef6c2f));
	--phadin-menu-v3-text: var(--fs-color-base, #22312a);
	--phadin-menu-v3-border: rgba(34, 49, 42, 0.13);
	--phadin-menu-v3-hover: rgba(15, 107, 75, 0.075);
	--phadin-menu-v3-surface: #fff;
	--phadin-menu-v3-shadow: 0 18px 44px rgba(20, 48, 37, 0.14);
}

.phadin-menu-v3 #phadin-category-menu-panel,
.phadin-menu-v3 #phadin-category-menu-toggle {
	display: none;
}

@media (min-width: 850px) and (hover: hover) and (pointer: fine) {
	.phadin-menu-v3 #wide-nav,
	.phadin-menu-v3 #wide-nav > .container {
		overflow: visible;
	}

	.phadin-menu-v3 #wide-nav > .container {
		position: relative;
	}

	.phadin-menu-v3 #wide-nav .header-bottom-nav {
		position: static;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 {
		position: static;
		display: flex;
		align-items: stretch;
	}

	/*
	 * The primary menu belongs to #wide-nav. If a stale Header Builder/cache
	 * combination also injects its items into the green masthead, suppress only
	 * those duplicated WordPress menu items and retain search/CTA elements.
	 */
	.phadin-menu-v3 #masthead .header-nav:has(> li.phadin-mega-menu-v3) > li.menu-item {
		display: none;
	}

	.phadin-menu-v3 #masthead .header-block:has(.phadin-mega-menu-v3) {
		display: none;
	}

	/*
	 * Keep the existing Header Builder search, keyword block and cart inside
	 * the fixed 80px green masthead instead of allowing its flex list to wrap
	 * over the single white navigation row.
	 */
	.phadin-menu-v3 #masthead .hide-for-medium.flex-right > .header-nav {
		/* Flatsome declares .nav as display:flex!important. */
		display: grid !important;
		grid-template-columns: minmax(320px, 1fr) auto;
		grid-template-rows: 52px 28px;
		align-items: center;
		/* Flatsome's nav-spacing rule also sets an !important gap. */
		row-gap: 0 !important;
		column-gap: 10px !important;
		width: 100%;
		height: 80px;
		margin: 0;
		flex-wrap: nowrap;
	}

	.phadin-menu-v3 #masthead .hide-for-medium.flex-right > .header-nav > .header-search-form {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		margin: 0;
	}

	.phadin-menu-v3 #masthead .hide-for-medium.flex-right > .header-nav > .header-block {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		min-width: 0;
		margin: 0;
		overflow: hidden;
	}

	.phadin-menu-v3 #masthead .hide-for-medium.flex-right > .header-nav > .header-divider {
		display: none;
	}

	.phadin-menu-v3 #masthead .hide-for-medium.flex-right > .header-nav > .cart-item {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: center;
		margin-left: 18px;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > a {
		flex: 1 1 auto;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > a > .icon-angle-down {
		display: none;
	}

	.phadin-menu-v3 .phadin-menu-v3__toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		min-width: 40px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: currentColor;
	}

	.phadin-menu-v3 .phadin-menu-v3__toggle > span {
		width: 8px;
		height: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.14s ease;
	}

	.phadin-menu-v3 .phadin-mega-menu-v3.phadin-is-open > .phadin-menu-v3__toggle > span {
		transform: translateY(2px) rotate(225deg);
	}

	.phadin-menu-v3 .phadin-menu-v3__toggle:hover {
		background: rgba(255, 255, 255, 0.08);
	}

	.phadin-menu-v3 .phadin-menu-v3__toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -4px;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul.nav-dropdown,
	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul.sub-menu {
		box-sizing: border-box;
		position: absolute;
		top: 100%;
		left: 50%;
		right: auto;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		gap: 24px 30px;
		width: min(1180px, calc(100vw - 32px));
		max-width: 1180px;
		max-height: min(680px, calc(100vh - 112px));
		margin: 0;
		padding: 26px;
		border: 1px solid var(--phadin-menu-v3-border);
		border-radius: 12px;
		background: var(--phadin-menu-v3-surface);
		box-shadow: var(--phadin-menu-v3-shadow);
		z-index: 999;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		white-space: normal;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate(-50%, -4px);
		transition:
			opacity 0.14s ease,
			transform 0.14s ease,
			visibility 0s linear 0.14s;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3.phadin-is-open > ul.nav-dropdown,
	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3.phadin-is-open > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul > li.phadin-menu-v3__column {
		display: block;
		min-width: 0;
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		white-space: normal;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul > li.phadin-menu-v3__column > a {
		display: flex;
		align-items: center;
		min-height: 42px;
		margin: 0 0 8px;
		padding: 9px 11px;
		border-radius: 9px;
		background: var(--phadin-menu-v3-hover);
		color: var(--phadin-menu-v3-primary);
		font-size: 15px;
		font-weight: 800;
		line-height: 1.4;
		text-transform: none;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul > li.phadin-menu-v3__column > ul {
		position: static;
		display: block;
		width: 100%;
		max-height: none;
		margin: 0;
		padding: 0;
		opacity: 1;
		visibility: visible;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul > li.phadin-menu-v3__column > ul > li {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul > li.phadin-menu-v3__column > ul > li > a {
		display: block;
		min-height: 40px;
		margin: 1px 0;
		padding: 9px 11px;
		border-radius: 8px;
		color: var(--phadin-menu-v3-text);
		font-size: 14.5px;
		font-weight: 500;
		line-height: 1.45;
		text-transform: none;
		white-space: normal;
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul a:hover,
	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul a:focus-visible {
		background: var(--phadin-menu-v3-hover);
		color: var(--phadin-menu-v3-primary);
	}

	.phadin-menu-v3 .header-nav > li.phadin-mega-menu-v3 > ul a:focus-visible {
		outline: 2px solid var(--phadin-menu-v3-primary);
		outline-offset: 2px;
	}

	.phadin-menu-v3 .phadin-menu-v3__link--all > a {
		color: var(--phadin-menu-v3-primary);
		font-weight: 750;
	}
}

@media (min-width: 850px) and (hover: none), (min-width: 850px) and (pointer: coarse) {
	.phadin-menu-v3 #masthead .header-inner > .hide-for-medium,
	.phadin-menu-v3 #wide-nav {
		display: none;
	}

	.phadin-menu-v3 #masthead .header-inner > .show-for-medium {
		display: flex !important;
	}
}

@media (max-width: 849px), (hover: none), (pointer: coarse) {
	.phadin-menu-v3 {
		--phadin-mobile-menu-bg: #fff;
		--phadin-mobile-menu-text: #222824;
		--phadin-mobile-menu-muted: #69736d;
		--phadin-mobile-menu-brand: var(--phadin-menu-v3-primary, #1f6047);
		--phadin-mobile-menu-brand-dark: #174a38;
		--phadin-mobile-menu-brand-light: #edf6f1;
		--phadin-mobile-menu-level-two: #f3f8f5;
		--phadin-mobile-menu-border: #e3e9e5;
	}

	.phadin-menu-v3 .phadin-mobile-menu-v3-shell.mfp-wrap.off-canvas .mfp-content {
		width: min(92vw, 390px);
		max-width: 390px;
		height: 100dvh;
		max-height: 100dvh;
		overflow: hidden;
		background: var(--phadin-mobile-menu-bg);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	/*
	 * Flatsome owns this control and still receives the delegated close click.
	 * It is visually replaced only after the v3 shell is marked at runtime.
	 */
	.phadin-menu-v3 .phadin-mobile-menu-v3-shell.mfp-wrap.off-canvas > .mfp-close {
		position: absolute;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		padding: 0 0 env(safe-area-inset-bottom);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: var(--phadin-mobile-menu-bg);
		color: var(--phadin-mobile-menu-text);
		font-family: inherit;
		-webkit-font-smoothing: antialiased;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__header {
		position: sticky;
		top: 0;
		z-index: 20;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: calc(64px + env(safe-area-inset-top));
		min-height: calc(64px + env(safe-area-inset-top));
		padding: env(safe-area-inset-top) 10px 0 16px;
		border-bottom: 1px solid var(--phadin-mobile-menu-border);
		background: var(--phadin-mobile-menu-bg);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__brand {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
		max-width: calc(100% - 54px);
		height: 64px;
		margin: 0;
		padding: 8px 0;
		color: var(--phadin-mobile-menu-brand);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.2;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__logo {
		display: block;
		width: auto;
		max-width: 172px;
		height: auto;
		max-height: 38px;
		object-fit: contain;
		filter: brightness(0) saturate(100%) invert(31%) sepia(29%) saturate(939%) hue-rotate(104deg) brightness(88%) contrast(91%);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__brand-name {
		overflow: hidden;
		color: var(--phadin-mobile-menu-brand-dark);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__close {
		display: inline-flex;
		flex: 0 0 44px;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: var(--phadin-mobile-menu-text);
		font-size: 28px;
		font-weight: 400;
		line-height: 1;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__close:hover,
	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__close:focus-visible {
		background: var(--phadin-mobile-menu-brand-light);
		color: var(--phadin-mobile-menu-brand-dark);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .sidebar-menu {
		width: 100%;
		min-height: 0;
		max-width: 100%;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu ul {
		list-style: none;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .sidebar-menu > ul.nav-sidebar {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar li.menu-item {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li.menu-item {
		position: relative;
		display: block;
		overflow: visible;
		border-bottom: 1px solid var(--phadin-mobile-menu-border);
		background: var(--phadin-mobile-menu-bg);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar li.menu-item-has-children {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 44px;
		align-items: center;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li.menu-item > a {
		box-sizing: border-box;
		display: flex;
		grid-column: 1;
		grid-row: 1;
		align-items: center;
		min-width: 0;
		min-height: 52px;
		margin: 0;
		padding: 12px 16px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--phadin-mobile-menu-text);
		font-size: 17px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: 0;
		overflow: visible;
		overflow-wrap: normal;
		text-overflow: unset;
		text-transform: none;
		white-space: normal;
		word-break: normal;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > button.toggle {
		position: static;
		display: inline-flex;
		grid-column: 2;
		grid-row: 1;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--phadin-mobile-menu-brand);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > button.toggle > .icon-angle-down {
		display: inline-block;
		transform-origin: 50% 50%;
		transition: transform 0.2s ease;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item.active > button.toggle > .icon-angle-down {
		transform: rotate(180deg);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > button.toggle:hover,
	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > button.toggle:focus-visible {
		background: var(--phadin-mobile-menu-brand-light);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li.menu-item.active {
		background: var(--phadin-mobile-menu-brand-light);
		color: var(--phadin-mobile-menu-brand-dark);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > a:focus-visible,
	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > button.toggle:focus-visible,
	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-mobile-menu__close:focus-visible {
		outline: 2px solid var(--phadin-mobile-menu-brand);
		outline-offset: -3px;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > ul.sub-menu,
	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item > ul.children {
		box-sizing: border-box;
		grid-column: 1 / -1;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item:not(.active) > ul.sub-menu,
	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item:not(.active) > ul.children {
		display: none;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item.active > ul.sub-menu,
	.phadin-menu-v3 #main-menu.phadin-mobile-menu li.menu-item.active > ul.children {
		display: block;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li > ul > li.menu-item {
		position: relative;
		border-bottom: 1px solid #e2ebe6;
		background: var(--phadin-mobile-menu-level-two);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li > ul > li.menu-item > a {
		box-sizing: border-box;
		display: flex;
		grid-column: 1;
		grid-row: 1;
		align-items: center;
		min-width: 0;
		min-height: 48px;
		margin: 0;
		padding: 11px 14px 11px 28px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--phadin-mobile-menu-brand);
		font-size: 16px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: 0;
		overflow: visible;
		text-overflow: unset;
		text-transform: none;
		white-space: normal;
		word-break: normal;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li > ul > li.menu-item.active {
		background: var(--phadin-mobile-menu-brand-light);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li > ul > li > ul {
		background: var(--phadin-mobile-menu-bg);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li > ul > li > ul > li.menu-item {
		display: block;
		border-bottom: 1px solid #edf0ee;
		background: var(--phadin-mobile-menu-bg);
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .nav-sidebar > li > ul > li > ul > li.menu-item > a {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		min-width: 0;
		min-height: 44px;
		margin: 0;
		padding: 10px 16px 10px 42px;
		border: 0;
		border-radius: 0;
		background: var(--phadin-mobile-menu-bg);
		box-shadow: none;
		color: #252b28;
		font-size: 15.5px;
		font-weight: 400;
		line-height: 1.4;
		letter-spacing: 0;
		overflow: visible;
		overflow-wrap: normal;
		text-overflow: unset;
		text-transform: none;
		white-space: normal;
		word-break: normal;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-menu-v3__link--all > a {
		color: var(--phadin-mobile-menu-brand);
		font-weight: 600;
	}

	.phadin-menu-v3 #main-menu.phadin-mobile-menu .phadin-menu-v3__link--all > a::after {
		margin-left: 7px;
		content: "\2192";
	}

}

@media (prefers-reduced-motion: reduce) {
	.phadin-menu-v3 .nav-dropdown,
	.phadin-menu-v3 #main-menu *,
	.phadin-menu-v3 #main-menu *::before,
	.phadin-menu-v3 #main-menu *::after {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}