/*
 * Amless Store Core: mega menu (see AmlessStore\MegaMenu / MegaMenuWalker).
 *
 * Structure rendered by MegaMenuWalker for a "mega-menu" marked item:
 *
 * <ul class="sub-menu amless-mega-menu">           (this whole dropdown)
 *   <li class="amless-mega-menu__columns">          (80% - categories)
 *     <ul class="amless-mega-menu__columns-inner">
 *       <li class="amless-mega-menu__column">        (one category)
 *         <a>Category name</a>
 *         <ul class="sub-menu amless-mega-menu__column-list">
 *           <li><a>Link</a></li>
 *         </ul>
 *       </li>
 *       ...
 *     </ul>
 *   </li>
 *   <div class="amless-mega-menu__banner">           (20% - promo image)
 *     <a><img></a>
 *   </div>
 * </ul>
 *
 * The .amless-mega-menu* classes are added alongside the theme's own
 * .sub-menu classes (not instead of), so every selector here is written to
 * match or exceed the specificity of the theme's ".mbf-header__nav-inner
 * .sub-menu[...]" rules it needs to override — otherwise the theme's rules
 * win regardless of load order.
 */

/*
 * Every menu item is `position: relative` in the theme (style.css), so that a
 * regular dropdown anchors under just that item. That makes the item itself
 * the containing block for our absolutely-positioned mega menu too, which
 * confines it to the item's own (narrow) width. Overriding it back to static
 * for just the mega-menu trigger bubbles the containing block up to
 * .mbf-header__inner (full header width, same top edge), so left/width
 * below resolve against the whole header instead of the nav item.
 */
.mbf-header__nav-inner > li.mega-menu {
	position: static;
}

.mbf-header__nav-inner .sub-menu.amless-mega-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: 32px 40px;
}

.mbf-header__nav-inner .amless-mega-menu > li.amless-mega-menu__columns {
	flex: 0 1 80%;
	padding-right: 40px;
}

.mbf-header__nav-inner .amless-mega-menu__columns-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbf-header__nav-inner .amless-mega-menu__columns-inner > li.amless-mega-menu__column {
	flex: 1 1 160px;
}

.mbf-header__nav-inner .amless-mega-menu__columns-inner > li.amless-mega-menu__column > a {
	display: block;
	padding: 0 0 12px;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--mbf-color-border, rgba(0, 0, 0, 0.1));
	margin-bottom: 8px;
}

.mbf-header__nav-inner .amless-mega-menu .sub-menu.amless-mega-menu__column-list {
	position: static;
	display: block;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: none;
	border-top: none;
	filter: none;
	padding: 0;
}

.mbf-header__nav-inner .amless-mega-menu .amless-mega-menu__column-list > li > a {
	min-width: 0;
	padding: 6px 0;
}

.mbf-header__nav-inner .amless-mega-menu__banner {
	flex: 0 0 20%;
	border-left: 1px solid var(--mbf-color-border, rgba(0, 0, 0, 0.1));
	padding-left: 40px;
}

.mbf-header__nav-inner .amless-mega-menu__banner a {
	display: block;
	height: 100%;
}

.mbf-header__nav-inner .amless-mega-menu__banner-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}