.asg-mega-menu {
	--asg-mega-columns: 2;
	--asg-mega-panel-width: 1023px;
	position: relative;
	display: inline-block;
	font-family: 'Manrope', sans-serif;
}

.asg-mega-trigger {
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-weight: 600;
	color: inherit;
	padding: 8px 4px;
}

.asg-mega-trigger-chevron {
	transition: transform .2s ease;
}

.asg-mega-menu.asg-mega-open .asg-mega-trigger-chevron {
	transform: rotate(180deg);
}

.asg-mega-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: var(--asg-mega-panel-width, 900px);
	max-width: 92vw;
	background: #fff;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
	border-radius: 6px;
	overflow: hidden;
	z-index: 9999;
}

.asg-mega-menu.asg-mega-open .asg-mega-panel {
	display: flex;
}

/* Used when the panel is placed inside a saved Elementor Template that
   your nav menu plugin (e.g. ElementsKit) shows as a specific menu item's
   mega menu dropdown - that plugin handles positioning/open-close, so the
   panel itself should just render inline and full width, always visible,
   rather than the floating/hidden-by-default behavior above. */
.asg-mega-panel--static {
	display: flex;
	position: relative;
	width: auto;
	max-width: 100%;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
	border-radius: 6px;
	font-family: 'Manrope', sans-serif;
}

/* ---- Left: top-level categories only. Hovering (or tapping, on touch)
   one switches which subcategory panel shows in the middle column -
   see .asg-mega-subcat-panel below and the matching logic in
   mega-menu.js. ---- */
.asg-mega-left {
	width: 320px;
	flex-shrink: 0;
	background: linear-gradient(180deg, #AF1B24 0%, #70151B 100%);
	color: #fff;
	padding: 32px 0;
	box-sizing: border-box;
	max-height: 480px;
	overflow-y: auto;
	border-right: 1px solid #F3F4F6;
}

.asg-mega-left-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0 32px 16px;
	opacity: .85;
}

.asg-mega-shop-all-left {
	display: block;
	margin-top: 8px;
	padding: 12px 32px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	transition: background .15s ease;
}

.asg-mega-shop-all-left:hover {
	background: var(--asg-maroon-dark, #4d1010) !important;
	color: #fff;
}

.asg-mega-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.asg-mega-cat-row {
	display: flex;
	align-items: stretch;
	transition: background .15s ease;
}

.asg-mega-cat-item.active .asg-mega-cat-row,
.asg-mega-cat-item:hover .asg-mega-cat-row {
	background: #500F13;
}

.asg-mega-cat-link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 12px 0 12px 32px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
}

.asg-mega-cat-item.active .asg-mega-cat-link,
.asg-mega-cat-item:hover .asg-mega-cat-link {
	font-weight: 600;
}

.asg-mega-cat-toggle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 12px 32px 12px 12px;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.asg-mega-cat-toggle:focus,
.asg-mega-cat-toggle:active {
	background: none;
}

.asg-mega-cat-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.asg-mega-chevron {
	flex-shrink: 0;
	opacity: .9;
	transition: transform .15s ease;
}

/* ---- Middle: sub-categories for whichever left category is active.
   All panels render up front; only the active one is shown - no AJAX,
   instant switching. ---- */
.asg-mega-middle {
	width: 288px;
	flex-shrink: 0;
	background: var(--asg-cream, #f7f0e6);
	padding: 32px 16px;
	box-sizing: border-box;
	border: 1px solid #D1D5DC;
}

/* When the active category has no subcategories, collapse this column
   entirely rather than showing an empty cream box. */
.asg-mega-middle.asg-mega-middle-empty {
	display: none;
}

.asg-mega-subcat-panel {
	display: none;
	flex-direction: column;
	gap: 24px;
}

.asg-mega-subcat-panel.active {
	display: flex;
}

.asg-mega-shop-all-mid {
	display: block;
	align-self: stretch;
	margin: 0 -12px;
	padding: 4px 12px;
	border-radius: 4px;
	color: var(--asg-maroon, #70151b);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	transition: background .15s ease;
}

.asg-mega-shop-all-mid:hover {
	width: 100%;
	background: rgba(112, 21, 27, .08);
	color: var(--asg-maroon, #70151b);
}

.asg-mega-subcat-link {
	display: block;
	margin: 0 -12px;
	padding: 4px 12px;
	border-radius: 4px;
	color: #333;
	text-decoration: none;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	transition: background .15s ease, color .15s ease;
}

.asg-mega-subcat-link:hover {
	background: rgba(112, 21, 27, .08);
	color: var(--asg-maroon, #70151b);
}

/* ---- Right: one fixed products panel - always the same category's
   products, regardless of which left category is being hovered ---- */
.asg-mega-right {
	flex: 0 1 auto;
	min-width: 340px;
	padding: 32px;
}

.asg-mega-products-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #999;
	margin-bottom: 16px;
}

.asg-mega-shop-all {
	display: inline-block;
	margin-top: 20px;
	font-size: 12px;
	font-weight: 600;
	color: var(--asg-maroon, #70151b);
	text-decoration: none;
	border: 1px solid var(--asg-maroon, #70151b);
	border-radius: 999px;
	padding: 5px 14px;
	transition: background .15s ease, color .15s ease;
}

.asg-mega-shop-all:hover {
	background: var(--asg-maroon, #70151b);
	color: #fff;
}

.asg-mega-products-grid {
	display: grid;
	grid-template-columns: repeat(var(--asg-mega-columns, 2), minmax(0, 260px));
	justify-content: start;
	gap: 16px 24px;
}

.asg-mega-product-card {
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

.asg-mega-product-thumb {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 4px;
	background: #f2ede4;
}

.asg-mega-product-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asg-mega-product-info {
	min-width: 0;
}

.asg-mega-product-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #1b1c1c;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asg-mega-product-cta {
	display: block;
	font-size: 12px;
	color: var(--asg-maroon, #70151b);
}

.asg-mega-empty {
	padding: 24px;
	color: #777;
}

/* ---- Mobile: stack all three columns instead of side by side. The
   middle panel still only shows whichever category is active (tap a
   left category to switch it - see mega-menu.js), it just renders
   beneath the left list instead of beside it. ---- */
@media (max-width: 900px) {
	.asg-mega-panel,
	.asg-mega-panel--static {
		flex-direction: column;
		position: static;
		width: 100%;
		max-width: none;
		box-shadow: none;
		border-radius: 0;
	}

	.asg-mega-left {
		width: 100%;
		max-height: none;
	}

	.asg-mega-middle {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid rgba(0, 0, 0, .06);
	}

	.asg-mega-right {
		padding: 20px;
		/* BUGFIX: the desktop rule sets min-width:340px on this panel and
		   the mobile block never cleared it. Once the columns stack, that
		   340px is wider than a 320px or 375px screen, so the whole menu
		   forced a horizontal scrollbar and the panel ran off the edge. */
		min-width: 0;
		max-width: 100%;
	}

	.asg-mega-cat-item.active .asg-mega-chevron {
		transform: rotate(90deg);
	}

	.asg-mega-products-grid {
		grid-template-columns: 1fr;
	}

	/* ---- Nested sub-categories.
	   mega-menu.js moves each .asg-mega-subcat-panel out of the middle
	   column and into its own <li> at this breakpoint, so a parent's
	   sub-categories expand directly underneath that parent instead of
	   after the entire category list. The now-empty middle column is
	   hidden while the panels are relocated. ---- */
	.asg-mega-middle.asg-mega-middle--relocated {
		display: none;
	}

	.asg-mega-cat-item--has-sub {
		display: block;
	}

	.asg-mega-subcat-panel--inline {
		gap: 0;
		background: var(--asg-cream, #f7f0e6);
		border-top: 1px solid rgba(0, 0, 0, .08);
		border-bottom: 1px solid rgba(0, 0, 0, .08);
		padding: 4px 32px 8px;
		box-sizing: border-box;
	}

	.asg-mega-subcat-panel--inline .asg-mega-shop-all-mid,
	.asg-mega-subcat-panel--inline .asg-mega-subcat-link {
		margin: 0;
		padding: 11px 0;
		border-radius: 0;
		font-size: 15px;
		line-height: 20px;
	}

	.asg-mega-subcat-panel--inline .asg-mega-subcat-link + .asg-mega-subcat-link,
	.asg-mega-subcat-panel--inline .asg-mega-shop-all-mid + .asg-mega-subcat-link {
		border-top: 1px solid rgba(0, 0, 0, .06);
	}

	.asg-mega-subcat-panel--inline .asg-mega-shop-all-mid:hover,
	.asg-mega-subcat-panel--inline .asg-mega-subcat-link:hover {
		width: auto;
		background: transparent;
	}

	/* The chevron is the accordion control on mobile, so give it a
	   comfortable tap target across the full row height. */
	.asg-mega-cat-toggle {
		padding: 14px 28px 14px 16px;
	}
}

/* ---- Small phones (320-400px) ----
   32px of inset on the sub-category panel left only 224px of text
   width at 320px, so category names wrapped mid-word. */

@media (max-width: 400px) {
	.asg-mega-cat-link {
		padding: 12px 14px;
		font-size: 14px;
	}

	.asg-mega-cat-toggle {
		padding: 12px 20px 12px 10px;
	}

	.asg-mega-subcat-panel--inline {
		padding: 4px 18px 8px;
	}

	.asg-mega-subcat-panel--inline .asg-mega-shop-all-mid,
	.asg-mega-subcat-panel--inline .asg-mega-subcat-link {
		padding: 10px 0;
		font-size: 14px;
	}

	.asg-mega-heading {
		font-size: 12px;
		letter-spacing: .1em;
	}
}