/**
 * Mega menu for the header category navigation (desktop only).
 *
 * Hovering a top category (Makeup, Skincare, ...) opens a full-width panel:
 * subcategories become column headings with their groups listed underneath,
 * instead of Storefront's default three-level flyouts. Mobile keeps
 * Storefront's handheld accordion menu.
 */

@media (min-width: 768px) {
	/* Anchor the panel to the header content width. */
	.storefront-primary-navigation .col-full {
		position: relative;
	}

	.site-header .main-navigation ul.menu > li.menu-item-has-children {
		position: static;
	}

	/* Storefront's little hover arrow would jump to the panel edge. */
	.main-navigation ul.menu > li.menu-item-has-children:hover::after,
	.main-navigation ul.menu > li.menu-item-has-children.focus::after {
		display: none;
	}

	/* Level 2 → the panel. */
	.main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu {
		width: 100%;
		box-sizing: border-box;
	}

	.main-navigation ul.menu > li.menu-item-has-children:hover > ul.sub-menu,
	.main-navigation ul.menu > li.menu-item-has-children.focus > ul.sub-menu {
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
		gap: 1.25em 2em;
		align-items: start;
		padding: 1.75em 2em 2em;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
	}

	.main-navigation ul.menu > li > ul.sub-menu > li {
		display: block;
	}

	/* Subcategory headings. */
	.main-navigation ul.menu > li > ul.sub-menu > li > a {
		width: auto;
		padding: 0 0 0.4em;
		font-size: 0.8em;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #1a1a1a;
		background: none;
	}

	/* Level 3 → groups, always visible inside the panel. */
	.main-navigation ul.menu > li > ul.sub-menu ul.sub-menu,
	.main-navigation ul.menu > li:hover > ul.sub-menu li > ul.sub-menu,
	.main-navigation ul.menu > li.focus > ul.sub-menu li > ul.sub-menu,
	.main-navigation ul.menu > li:hover > ul.sub-menu li:hover > ul.sub-menu {
		position: static;
		float: none;
		left: auto;
		top: auto;
		display: block;
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.main-navigation ul.menu > li > ul.sub-menu ul.sub-menu li a {
		width: auto;
		padding: 0.22em 0;
		font-size: 0.85em;
		color: #6b6b6b;
		background: none;
	}

	.main-navigation ul.menu > li > ul.sub-menu li a:hover,
	.main-navigation ul.menu > li > ul.sub-menu li:hover > a {
		color: #1a1a1a;
		background: none;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}