@media (min-width: 921px) {
	.site-header .main-navigation {
		position: relative;
		z-index: 250;
	}

	.site-header .nav-menu > li {
		position: relative;
	}

	.site-header .nav-menu li.menu-item-has-children > a,
	.site-header .nav-menu li:has(.sub-menu) > a {
		padding-right: 30px;
	}

	.site-header .nav-menu li.menu-item-has-children > a::after,
	.site-header .nav-menu li:has(.sub-menu) > a::after {
		content: "";
		position: absolute;
		right: 12px;
		top: 50%;
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-65%) rotate(45deg);
		opacity: 0.68;
	}

	.site-header .nav-menu .sub-menu {
		display: block;
		position: absolute;
		left: 0;
		top: calc(100% + 8px);
		min-width: 230px;
		margin: 0;
		padding: 10px;
		border: 1px solid var(--border, #e5e7eb);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 20px 48px rgba(17, 24, 39, 0.16);
		list-style: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
		z-index: 999;
	}

	.site-header .nav-menu .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}

	.site-header .nav-menu li:hover > .sub-menu,
	.site-header .nav-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.site-header .nav-menu .sub-menu li {
		position: relative;
	}

	.site-header .nav-menu .sub-menu li a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 11px 12px;
		border-radius: 10px;
		color: var(--text, #111827);
		font-size: 14px;
		line-height: 1.35;
		white-space: nowrap;
	}

	.site-header .nav-menu .sub-menu li a:hover,
	.site-header .nav-menu .sub-menu li.current-menu-item > a {
		background: var(--primary-light, #e6f6ff);
		color: var(--primary-dark, #006fc9);
	}

	.site-header .nav-menu .sub-menu .sub-menu {
		left: calc(100% + 10px);
		top: -10px;
	}

	.site-header .nav-menu .sub-menu .sub-menu::before {
		left: -12px;
		right: auto;
		top: 0;
		width: 12px;
		height: 100%;
	}
}