/*
 * Mega Menu Builder — front-end styles
 * All colors/spacing are CSS custom properties on .mmb-menu-wrap so the
 * whole look can be re-themed by overriding them in Additional CSS —
 * no need to edit this file.
 */

.mmb-menu-wrap {
	--mmb-accent: #0b5fff;
	--mmb-accent-tint: #eef4ff;
	--mmb-text: #1c2733;
	--mmb-muted: #667085;
	--mmb-tabs-text: var(--mmb-muted);
	--mmb-bg: #ffffff;
	--mmb-panel-bg: #ffffff;
	--mmb-border: #e5e8ec;
	--mmb-radius: 10px;
	--mmb-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
	--mmb-gap: 20px;
	--mmb-container: 1180px;
	--mmb-anim: 180ms;
	--mmb-nav-text: var(--mmb-text);
	position: relative;
	font-family: inherit;
}

.mmb-menu-wrap * {
	box-sizing: border-box;
}

/* Defensive reset: some themes set a global `a { color: ...; text-decoration:
   underline; }` rule that can end up more specific (or simply declared later
   in the cascade) than this stylesheet's own descendant-class selectors,
   which would leak the theme's own link color/underline into every title
   and heading in here instead of the colors set below. Resetting to
   `inherit` up front means every link's real color comes from whichever
   more specific rule further down in this file actually targets it (e.g.
   .mmb-grid-item .mmb-title), not from the theme's bare `a` selector. */
.mmb-menu-wrap a {
	color: inherit;
	text-decoration: none;
}

/* ---------- top bar ---------- */

.mmb-nav {
	width: 100%;
}

.mmb-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}

.mmb-menu > li {
	/* deliberately NOT position:relative — the panel centers itself on
	   .mmb-menu-wrap (below), not on whichever item triggered it. */
}

.mmb-menu > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 14px;
	color: var(--mmb-nav-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--mmb-anim) ease, border-color var(--mmb-anim) ease;
}

.mmb-menu > li > a:hover,
.mmb-menu > li.current-menu-item > a,
.mmb-menu > li.mmb-open > a {
	color: var(--mmb-accent);
	border-bottom-color: var(--mmb-accent);
}

.mmb-caret {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	opacity: 0.6;
	transition: transform var(--mmb-anim) ease;
	flex: none;
}

.mmb-mega-item.mmb-open > a .mmb-caret {
	transform: rotate(-135deg);
	margin-top: 2px;
}

/* ---------- mobile toggle ---------- */

.mmb-mobile-toggle {
	display: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mmb-border);
	border-radius: 8px;
	background: var(--mmb-bg);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.mmb-mobile-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--mmb-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mmb-menu-wrap.mmb-mobile-open .mmb-mobile-toggle span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.mmb-menu-wrap.mmb-mobile-open .mmb-mobile-toggle span:nth-child(2) {
	opacity: 0;
}
.mmb-menu-wrap.mmb-mobile-open .mmb-mobile-toggle span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---------- panel ---------- */

.mmb-panel {
	/* Positioned relative to .mmb-menu-wrap (the nearest ancestor with
	   position:relative — see the base rule at the top of this file),
	   NOT relative to whichever <li> triggered it. That's what centers
	   the panel under the whole menu bar instead of just under one item,
	   and keeps it in normal page flow (it scrolls away with the page,
	   it isn't pinned to the viewport).

	   Horizontal centering deliberately uses left:0; right:0;
	   margin:auto (not left:50%; transform:translateX(-50%)) so that
	   `transform` never carries a horizontal component in ANY state -
	   closed, hovered/open, or JS-corrected. transform is reserved
	   purely for the vertical "slide down" reveal below. Mixing a
	   width-dependent translateX into the same transform that's also
	   being open/closed on a transition caused a real, visible glitch:
	   the instant a panel opened, the browser could briefly animate
	   from a stale/intermediate translateX (computed against the panel's
	   just-changed width) toward mmb-frontend.js's corrected `left`
	   value, so the panel visibly slid in from an off-center (sometimes
	   even off-screen) position for the first ~180ms before settling -
	   which looked exactly like "not equally spaced left/right" to
	   anyone who saw it mid-animation. With no translateX ever in the
	   mix, there's nothing left to glitch: `left` (set instantly, not
	   animated) is already correct on the very first painted frame. */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 200;
	background: var(--mmb-panel-bg);
	border: 1px solid var(--mmb-border);
	border-radius: var(--mmb-radius);
	box-shadow: var(--mmb-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--mmb-anim) ease, transform var(--mmb-anim) ease, visibility var(--mmb-anim);
}

.mmb-mega-item.mmb-open > .mmb-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* No real width while closed - see the desktop hover-intent block further
   down for where these actually get their width back. A panel that's only
   invisible (opacity/visibility above, not display:none - needed so the
   open/close can animate) still occupies its full width in the page's
   layout even while hidden. For .mmb-panel-full that width is 100vw, which
   on any page with a vertical scrollbar (i.e. almost every page) is wider
   than the visible viewport - the classic cause of an inexplicable
   right-side gap and horizontal page scroll that shows up the moment the
   plugin is active, before anyone has even opened a menu. mmb-frontend.js
   already computes the real, scrollbar-safe width in pixels the instant a
   panel opens (see centerPanel()); these two rules just make sure nothing
   is claiming space before that happens. */
.mmb-panel-wide,
.mmb-panel-full {
	width: 0;
	overflow: hidden;
}

.mmb-panel-full {
	border-left: none;
	border-right: none;
	border-radius: 0;
}

.mmb-panel-inner {
	padding: 28px 28px 24px;
}

/* "Custom height" panel setting: caps how tall this one panel can get and
   scrolls its own content once it's taller than that, instead of growing
   the panel (and pushing the page) taller and taller - handy for a
   section with a long list of links. --mmb-panel-height is set inline by
   the walker, same pattern as --mmb-container for Custom Width. */
.mmb-panel-height-custom .mmb-panel-inner {
	max-height: var(--mmb-panel-height, 480px);
	overflow-y: auto;
}

/* ---------- panel body layout (main content + optional featured card) ---------- */

.mmb-panel-body {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.mmb-panel-main {
	flex: 1;
	min-width: 0;
}

/* ---------- featured promo card (Infoblox's "Latest Report" card) ---------- */

.mmb-panel-featured {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	background: var(--mmb-accent-tint);
	border: 1px solid var(--mmb-border);
	border-radius: var(--mmb-radius);
	padding: 18px;
}

.mmb-panel-featured-img {
	width: 100%;
	max-height: 130px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
}

.mmb-panel-featured-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mmb-accent);
	margin-bottom: 6px;
}

.mmb-panel-featured-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--mmb-text);
	line-height: 1.35;
	margin-bottom: 8px;
}

.mmb-panel-featured-desc {
	display: block;
	font-size: 12.5px;
	color: var(--mmb-muted);
	line-height: 1.5;
	margin-bottom: 16px;
}

.mmb-panel-featured-btn {
	margin-top: auto;
	display: inline-block;
	text-align: center;
	padding: 10px 16px;
	background: var(--mmb-accent);
	color: #fff;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity var(--mmb-anim) ease;
}

.mmb-panel-featured-btn:hover {
	opacity: 0.88;
}

/* ---------- bottom CTA row (Infoblox's "Book a Demo / Try a Lab / Contact Us" row) ---------- */

.mmb-panel-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--mmb-border);
}

.mmb-footer-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid var(--mmb-accent);
	color: #fff;
	background: var(--mmb-accent);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: opacity var(--mmb-anim) ease;
}

.mmb-footer-btn:hover,
.mmb-footer-btn-primary:hover {
	opacity: 0.88;
}

.mmb-footer-btn-primary {
	/* same filled style as every other footer button by default (matches
	   Infoblox's row of identically-styled "Book a Demo / Try a Lab /
	   Contact Us" buttons) - kept as a distinct class in case you want to
	   restyle just the first one via Additional CSS. */
}

/* ---------- shared grid of link cards ---------- */

.mmb-grid {
	/* CSS multi-column, not CSS grid: items flow top-to-bottom and fill
	   each column before moving to the next, so columns can end up with
	   different item counts based on content height - this is what gives
	   the natural, unevenly-balanced-column look (like Infoblox's Products
	   menu) instead of a strict left-to-right row grid. */
	columns: var(--n, 3);
	column-gap: 24px;
}

.mmb-grid.mmb-cols-1 { --n: 1; }
.mmb-grid.mmb-cols-2 { --n: 2; }
.mmb-grid.mmb-cols-3 { --n: 3; }
.mmb-grid.mmb-cols-4 { --n: 4; }

.mmb-grid-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--mmb-text);
	transition: background 0.15s ease;
	break-inside: avoid;
	margin-bottom: 4px;
}

.mmb-grid-item:hover {
	background: var(--mmb-accent-tint);
}

.mmb-grid-item .mmb-icon {
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mmb-grid-item .mmb-icon img {
	max-width: 28px;
	max-height: 28px;
	object-fit: contain;
}

.mmb-grid-item-body {
	/* Title + description stack vertically here, instead of sitting side
	   by side - without this wrapper they'd be flex ROW siblings (of the
	   icon) and lay out horizontally instead of the description wrapping
	   below the title. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.mmb-grid-item .mmb-title {
	display: block;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var(--mmb-text);
	overflow-wrap: break-word;
}

.mmb-grid-item .mmb-desc {
	display: block;
	font-size: 12.5px;
	color: var(--mmb-muted);
	margin-top: 2px;
	line-height: 1.4;
	overflow-wrap: break-word;
}

.mmb-grid-item.mmb-featured {
	grid-column: 1 / -1;
	background: var(--mmb-accent-tint);
	border: 1px solid var(--mmb-border);
	position: relative;
	padding: 14px 16px;
}

.mmb-grid-item.mmb-featured .mmb-title {
	font-size: 15px;
}

/* ---------- tabs ---------- */

.mmb-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-bottom: 1px solid var(--mmb-border);
	margin-bottom: 20px;
	padding-bottom: 0;
}

.mmb-tab-btn {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 12px;
	text-align: left;
	color: var(--mmb-tabs-text);
	font-family: inherit;
}

.mmb-tab-btn .mmb-title {
	font-weight: 700;
	font-size: 13.5px;
	color: inherit;
}

.mmb-tab-btn .mmb-desc {
	display: none;
}

/* Shown for left/right tab position (see the block below) - a horizontal
   top tab row stays compact with just the title, but a vertical side nav
   has the room to show the tagline under each tab title too, matching
   layouts like Infoblox's left-hand category list. */
.mmb-tabpos-left .mmb-tab-btn,
.mmb-tabpos-right .mmb-tab-btn {
	flex-wrap: wrap;
	align-items: flex-start;
}

.mmb-tabpos-left .mmb-tab-btn .mmb-desc,
.mmb-tabpos-right .mmb-tab-btn .mmb-desc {
	display: block;
	width: 100%;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
}

.mmb-tab-btn.mmb-active {
	color: var(--mmb-accent);
	border-bottom-color: var(--mmb-accent);
}

.mmb-tab-btn .mmb-icon img {
	max-width: 22px;
	max-height: 22px;
}

.mmb-tab-panel {
	display: none;
}

.mmb-tab-panel.mmb-active {
	display: block;
	animation: mmb-fade 0.15s ease;
}

@keyframes mmb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------- tabs position: left / right (site-wide setting) ---------- */

.mmb-tabpos-left .mmb-tabs,
.mmb-tabpos-right .mmb-tabs {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.mmb-tabpos-right .mmb-tabs {
	flex-direction: row-reverse;
}

.mmb-tabpos-left .mmb-tabs-nav,
.mmb-tabpos-right .mmb-tabs-nav {
	flex: 0 0 220px;
	flex-direction: column;
	flex-wrap: nowrap;
	border-bottom: none;
	margin-bottom: 0;
}

.mmb-tabpos-left .mmb-tabs-nav {
	border-right: 1px solid var(--mmb-border);
	padding-right: 16px;
}

.mmb-tabpos-right .mmb-tabs-nav {
	border-left: 1px solid var(--mmb-border);
	padding-left: 16px;
}

.mmb-tabpos-left .mmb-tab-btn,
.mmb-tabpos-right .mmb-tab-btn {
	width: 100%;
	border-bottom: none;
	border-left: 2px solid transparent;
	border-radius: 6px;
}

.mmb-tabpos-right .mmb-tab-btn {
	border-left: none;
	border-right: 2px solid transparent;
}

.mmb-tabpos-left .mmb-tab-btn.mmb-active,
.mmb-tabpos-right .mmb-tab-btn.mmb-active {
	background: var(--mmb-accent-tint);
}

.mmb-tabpos-left .mmb-tab-btn.mmb-active { border-left-color: var(--mmb-accent); }
.mmb-tabpos-right .mmb-tab-btn.mmb-active { border-right-color: var(--mmb-accent); }

.mmb-tabpos-left .mmb-tabs-panels,
.mmb-tabpos-right .mmb-tabs-panels {
	flex: 1;
	min-width: 0;
}

/* ---------- grid-of-sections (plain mega menu) ---------- */

.mmb-grid-sections {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), 1fr);
	gap: 0 var(--mmb-gap);
}

.mmb-grid-sections.mmb-cols-2 { --n: 2; }
.mmb-grid-sections.mmb-cols-3 { --n: 3; }
.mmb-grid-sections.mmb-cols-4 { --n: 4; }

.mmb-section {
	padding-right: var(--mmb-gap);
	border-right: 1px solid var(--mmb-border);
}

.mmb-section:last-child {
	border-right: none;
	padding-right: 0;
}

.mmb-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--mmb-text);
	font-weight: 700;
	font-size: 14.5px;
	margin-bottom: 4px;
}

.mmb-section-title .mmb-icon img {
	max-width: 24px;
	max-height: 24px;
}

.mmb-section > .mmb-desc {
	display: block;
	font-size: 12.5px;
	color: var(--mmb-muted);
	margin-bottom: 10px;
}

/* "Link style: Compact list" (Mega Menu Settings) - applies to the
   deepest-level links inside any tab / section / slide, regardless of
   the top-level Display type, and regardless of whether they're in the
   automatic flowing grid (.mmb-grid) or manual columns (.mmb-columns,
   below) - both containers get this class from the same setting, so the
   descendant selector here (not scoped to .mmb-grid specifically) covers
   either one. Column count still comes from "Link columns" (--n /
   .mmb-cols-N above) for the automatic grid - Compact list is a visual
   style, not a forced single column, so it flows into multiple columns
   too. */
.mmb-grid.mmb-childstyle-list {
	column-gap: 32px;
}

.mmb-childstyle-list .mmb-grid-item {
	padding: 6px 0;
}

.mmb-childstyle-list .mmb-grid-item:hover {
	background: none;
	text-decoration: underline;
}

.mmb-childstyle-list .mmb-grid-item.mmb-featured {
	text-decoration: none;
	padding: 14px 16px;
}

/* ---------- manual columns (explicit, user-controlled) ---------- */
/* Built by nesting links under another link one level deeper on the
   Menus page - see render_manual_columns() in class-mmb-walker.php. Each
   column is exactly what was dragged into it, in that exact order; no
   automatic flow decides placement here. */

.mmb-columns {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

.mmb-column,
.mmb-column-single {
	flex: 1;
	min-width: 0;
	padding: 0 24px;
}

.mmb-column {
	display: flex;
	flex-direction: column;
}

.mmb-columns > :first-child {
	padding-left: 0;
}

.mmb-columns > :last-child {
	padding-right: 0;
}

/* Thin divider between columns - like Infoblox's Products menu - skipped
   on the very first column since there's nothing to its left to divide
   from. Plain links left un-nested (.mmb-column-single) sit in the same
   row and get the same treatment, so mixing headed columns and single
   links in one panel still looks like one consistent row of columns. */
.mmb-columns > :not(:first-child) {
	border-left: 1px solid var(--mmb-border);
}

/* A column heading + its optional tagline together, as one block - like
   Infoblox's "Networking Products" / "Security Products" category labels:
   a bold, normal-weight-case title with a muted description line right
   underneath, in a padded box that highlights on hover if it's a real
   link (a plain-text heading with no URL just sits there, unstyled on
   hover). This is deliberately NOT small-caps/eyebrow styling - it reads
   as a peer of the grid links next to it, not a label above them. */
.mmb-column-heading-block {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	margin-bottom: 4px;
	transition: background 0.15s ease;
}

.mmb-column-heading-block:has(a.mmb-column-heading:hover) {
	background: var(--mmb-accent-tint);
}

.mmb-column-heading {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--mmb-text);
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: break-word;
}

a.mmb-column-heading:hover {
	color: var(--mmb-accent);
}

.mmb-column-heading-block > .mmb-desc {
	display: block;
	margin-top: 3px;
}

.mmb-columns.mmb-childstyle-list .mmb-column-heading-block,
.mmb-columns.mmb-childstyle-list .mmb-column-single .mmb-grid-item {
	padding-left: 0;
	padding-right: 0;
}

.mmb-section-btn {
	display: inline-block;
	margin-top: 14px;
	padding: 8px 18px;
	border: 1px solid var(--mmb-accent);
	border-radius: 999px;
	color: var(--mmb-accent);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: background var(--mmb-anim) ease, color var(--mmb-anim) ease;
}

.mmb-section-btn:hover {
	background: var(--mmb-accent);
	color: #fff;
}

.mmb-tab-panel .mmb-section-btn,
.mmb-carousel-slide .mmb-section-btn {
	margin-top: 16px;
}

/* ---------- carousel ---------- */

.mmb-carousel {
	position: relative;
	padding: 0 44px;
}

.mmb-carousel-viewport {
	overflow: hidden;
}

.mmb-carousel-track {
	display: flex;
	transition: transform var(--mmb-anim) ease;
}

.mmb-carousel-slide {
	flex: 0 0 100%;
	max-width: 100%;
}

.mmb-carousel .mmb-section-title {
	font-size: 16px;
	margin-bottom: 6px;
}

.mmb-carousel .mmb-desc {
	margin-bottom: 14px;
}

.mmb-car-prev,
.mmb-car-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--mmb-border);
	background: var(--mmb-bg);
	color: var(--mmb-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mmb-car-prev { left: 0; }
.mmb-car-next { right: 0; }

.mmb-car-prev:hover,
.mmb-car-next:hover {
	background: var(--mmb-accent-tint);
	color: var(--mmb-accent);
}

.mmb-car-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.mmb-car-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--mmb-border);
	cursor: pointer;
	padding: 0;
}

.mmb-car-dot.mmb-active {
	background: var(--mmb-accent);
}

/* ---------- mobile-off fallback (Mega Menu Settings > Mobile) ---------- */
/* Rendered for every mega item alongside its real panel, but hidden unless
   "Use the full Mega Menu design on mobile too" is turned off - see the
   mobile block below for when it actually shows. Deliberately close to
   unstyled so it reads as the theme's normal default menu, not a second
   mega design. */

.mmb-mobile-fallback {
	display: none;
}

/* ---------- desktop hover intent ---------- */

@media (min-width: 993px) {
	/* The `:hover` half of each selector below is scoped to `html:not(.mmb-js)`
	   - i.e. it only ever applies if mmb-frontend.js failed to run at all
	   (JS disabled/blocked). mmb-frontend.js adds the `mmb-js` class to
	   <html> as the very first thing it does, so on every normal visit
	   this half is simply inactive and `.mmb-open` (fully JS-controlled)
	   is the only thing showing/positioning the panel.

	   This used to be a plain `.mmb-mega-item:hover > .mmb-panel` rule
	   with NO such guard, active at the same time as `.mmb-open` on every
	   visit - which caused a real, confusing bug: clicking a top-level
	   item that a hover had already opened toggles it *closed* in JS
	   (mmb-open removed, its inline left/width position cleared back to
	   nothing), but the mouse is still physically sitting on the item
	   the whole time you click it, so this bare CSS `:hover` rule kept
	   the panel showing anyway - just now with none of centerPanel()'s
	   corrected inline positioning left to override the stylesheet's own
	   plain default (centered against the menu bar itself, not the true
	   browser viewport). JS said "closed", CSS said "still visible, and
	   now in the wrong place" - which is exactly the panel-shifted-right
	   symptom, reproducible on every single click regardless of scroll
	   position, page, or theme, because it never depended on any of
	   those - only on JS and this CSS rule disagreeing with each other
	   the moment a click closes an already hover-opened panel. */
	html:not(.mmb-js) .mmb-mega-item:hover > .mmb-panel,
	.mmb-mega-item.mmb-open > .mmb-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Real width only while actually open/hovered - mmb-frontend.js
	   immediately replaces this with a precise inline pixel value (see
	   centerPanel()), but these cover the instant before JS runs and the
	   case where JS is unavailable and the plugin is relying on this
	   hover-only CSS fallback instead. */
	html:not(.mmb-js) .mmb-mega-item:hover > .mmb-panel.mmb-panel-wide,
	.mmb-mega-item.mmb-open > .mmb-panel.mmb-panel-wide {
		width: var(--mmb-container);
		max-width: calc(100vw - 32px);
		overflow: visible;
	}

	html:not(.mmb-js) .mmb-mega-item:hover > .mmb-panel.mmb-panel-full,
	.mmb-mega-item.mmb-open > .mmb-panel.mmb-panel-full {
		width: 100vw;
		overflow: visible;
	}
}

/* ---------- mobile ---------- */

@media (max-width: 992px) {

	.mmb-mobile-toggle {
		display: flex;
	}

	.mmb-nav {
		display: none;
		width: 100%;
	}

	.mmb-menu-wrap.mmb-mobile-open .mmb-nav {
		/* position:fixed (top/max-height set by JS to sit exactly below the
		   real header, see positionMobileNav() in mmb-frontend.js) so an
		   open mobile menu never participates in the theme header's own
		   flex sizing - a header that vertically centers its flex children
		   (a very common pattern: logo + nav, align-items:center) would
		   otherwise center the tall expanded menu inside its own fixed
		   height and clip half of it above the header. */
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 300;
		background: var(--mmb-bg);
		box-shadow: var(--mmb-shadow);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mmb-menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.mmb-menu > li {
		border-bottom: 1px solid var(--mmb-border);
	}

	.mmb-menu > li > a {
		padding: 14px 4px;
		justify-content: space-between;
	}

	.mmb-panel,
	.mmb-panel-full,
	.mmb-panel-wide {
		position: static;
		width: 100%;
		max-width: 100%;
		overflow: visible;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background: var(--mmb-accent-tint);
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mmb-mega-item.mmb-open > .mmb-panel {
		display: block;
		/* Belt-and-braces: the desktop open-state rules only ever set
		   transform: translateY(...) now (no horizontal component), but
		   pin this to none explicitly anyway since it's position:static
		   here and doesn't need any transform at all. */
		transform: none;
	}

	.mmb-panel-inner {
		padding: 12px 4px 18px;
	}

	.mmb-tabs-nav {
		flex-direction: column;
		border-bottom: none;
		gap: 2px;
	}

	.mmb-tab-btn {
		border-bottom: none;
		border-left: 3px solid transparent;
		background: var(--mmb-bg);
		border-radius: 6px;
	}

	.mmb-tab-btn.mmb-active {
		border-left-color: var(--mmb-accent);
		background: var(--mmb-panel-bg);
	}

	.mmb-tabpos-left .mmb-tabs,
	.mmb-tabpos-right .mmb-tabs {
		flex-direction: column;
	}

	.mmb-tabpos-left .mmb-tabs-nav,
	.mmb-tabpos-right .mmb-tabs-nav {
		flex: none;
		width: 100%;
		border-right: none;
		border-left: none;
		padding: 0;
	}

	.mmb-grid {
		columns: 1 !important;
	}

	.mmb-grid-sections {
		grid-template-columns: 1fr !important;
	}

	.mmb-columns {
		flex-direction: column;
		gap: 4px;
	}

	.mmb-column,
	.mmb-column-single {
		padding: 0;
	}

	.mmb-columns > :not(:first-child) {
		border-left: none;
		border-top: 1px solid var(--mmb-border);
		padding-top: 10px;
	}

	.mmb-column {
		margin-bottom: 10px;
	}

	.mmb-section {
		border-right: none;
		border-bottom: 1px solid var(--mmb-border);
		padding: 12px 0;
	}

	.mmb-carousel {
		padding: 0;
	}

	.mmb-car-prev,
	.mmb-car-next {
		display: none;
	}

	.mmb-carousel-track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.mmb-carousel-slide {
		scroll-snap-align: start;
	}

	.mmb-panel-body {
		/* Desktop uses align-items:flex-start (row direction, don't stretch
		   vertically). In column direction the cross axis is horizontal, so
		   flex-start would shrink-wrap each child to its own content width
		   instead of filling the menu's width - override to stretch. */
		flex-direction: column;
		align-items: stretch;
	}

	.mmb-panel-featured {
		flex: none;
		width: 100%;
	}

	.mmb-panel-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.mmb-footer-btn {
		text-align: center;
	}

	/* "Use the full Mega Menu design on mobile too" turned OFF: hide the
	   real panel and show the plain fallback list instead, once its item
	   is open. Desktop/laptop are never affected by this setting - these
	   rules only exist inside this mobile breakpoint. */
	.mmb-menu-wrap.mmb-mobile-mega-off .mmb-panel {
		display: none !important;
	}

	.mmb-mobile-fallback {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mmb-menu-wrap.mmb-mobile-mega-off .mmb-mega-item.mmb-open > .mmb-mobile-fallback {
		display: block;
	}

	.mmb-mobile-fallback ul {
		list-style: none;
		margin: 0;
		padding-left: 14px;
	}

	.mmb-mobile-fallback a {
		display: block;
		padding: 10px 4px;
		color: var(--mmb-text);
		text-decoration: none;
		border-bottom: 1px solid var(--mmb-border);
	}
}