nav > ul > [class*='ct-mega-menu'] > .sub-menu {
	display: grid;
	grid-template-columns: var(--grid-template-columns, 1fr);
	width: var(--mega-menu-width, var(--theme-container-width-base));
	max-width: var(--mega-menu-max-width, var(--theme-normal-container-max-width));
}

nav > ul > [class*='ct-mega-menu'] > .sub-menu {
	.menu-item {
		flex-direction: column;
		align-items: initial;
	}

	> li {
		min-width: 0;
		padding: var(--columns-padding, 20px 30px);

		[class*='children']:not(:first-child) {
			padding-top: 20px;
		}
	}
}

nav > ul > .ct-mega-menu-content-width,
nav > ul > .ct-mega-menu-custom-width {
	> .sub-menu > li {
		overflow: hidden;

		&:first-child {
			border-top-left-radius: inherit;
			border-bottom-left-radius: inherit;
		}

		&:last-child {
			border-top-right-radius: inherit;
			border-bottom-right-radius: inherit;
		}
	}
}

// position & width
nav > ul > .ct-mega-menu-content-width,
nav > ul > .ct-mega-menu-full-width {
	> .sub-menu {
		inset-inline: 0;
		margin-inline: auto;
	}
}

// full width
nav > ul > .ct-mega-menu-full-width {
	> .sub-menu {
		box-shadow: none;
		background-color: transparent;

		&:after {
			position: absolute;
			content: '';
			z-index: 0;
			width: 100vw;
			inset-block: 0;
			inset-inline-start: 50%;
			inset-inline-end: 0;
			margin-inline-start: -50vw;
			box-shadow: var(--theme-box-shadow);
			background-color: var(--dropdown-background-color, var(--theme-palette-color-4));
		}

		li {
			z-index: 2;
		}
	}

	&[class*="columns-1"] > .sub-menu > li {
		padding-inline: 0;
	}

	&[class*="columns-2"] > .sub-menu > li:nth-child(2n + 1),
	&[class*="columns-3"] > .sub-menu > li:nth-child(3n + 1),
	&[class*="columns-4"] > .sub-menu > li:nth-child(4n + 1),
	&[class*="columns-5"] > .sub-menu > li:nth-child(5n + 1),
	&[class*="columns-6"] > .sub-menu > li:nth-child(6n + 1) {
		padding-inline-start: 0;
	}

	&[class*="columns-2"] > .sub-menu > li:nth-child(2n),
	&[class*="columns-3"] > .sub-menu > li:nth-child(3n),
	&[class*="columns-4"] > .sub-menu > li:nth-child(4n),
	&[class*="columns-5"] > .sub-menu > li:nth-child(5n),
	&[class*="columns-6"] > .sub-menu > li:nth-child(6n) {
		padding-inline-end: 0;
	}
}

nav > ul > .ct-mega-menu-content-full {
	--mega-menu-width: calc(100vw - 60px);
	--mega-menu-max-width: 100%;
}

// custom width + centered dropdown
nav > ul > .ct-mega-menu-centered:not([data-submenu]) {
	justify-content: center;
}