/* Purpose: Layered hamburger mega menu. L1 list → L2 Performance Lab (50:50) → L3 variants. From Figma 2379:3190. */

/* L1 leaves the right side as a see-through overlay; L2/L3 panels cover full width. */
.nav-overlay--mega { background: rgba(0, 0, 0, 0.55); }

.mega {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---- Panels (layers) ---- */
.mega-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateX(24px);
	transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out);
	pointer-events: none;
}
.mega-panel.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.mega-panel[hidden] { display: none; }

/* L1 = left half panel, sticky, page visible (overlay) on the right. */
.mega-panel--l1 {
	right: auto;
	width: min(50%, 760px);
	background: var(--color-bg);
	border-right: 1px solid #2a2a2e;
}
@media (max-width: 900px) {
	.mega-panel--l1 { width: 100%; border-right: 0; }
}
/* L2/L3 cover the full width so the page underneath is hidden. */
.mega-panel--split { background: var(--color-bg); }

/* ---- Top bar ---- */
.mega__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	padding-inline: var(--space-8);
	border-bottom: 1px solid #2a2a2e;
	flex-shrink: 0;
}
.mega__logo { display: inline-flex; }
.mega__logo-img { height: 36px; width: auto; }
.mega__wordmark {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	color: var(--color-text-strong);
}
.mega__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text);
}
.mega__close:hover { border-color: var(--color-primary); color: var(--color-primary); }

.mega__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-6);
}

/* ---- L1 list ---- */
.mega-l1 {
	flex: 1;
	overflow-y: auto;
	width: 100%;
	padding: var(--space-12) var(--space-16) var(--space-16);
}
.mega-l1__nav { display: flex; flex-direction: column; }
.mega-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	height: 80px;
	border-bottom: 1px solid #2a2a2e;
	color: inherit;
	text-align: left;
	width: 100%;
}
.mega-l1__nav .mega-row:first-child { border-top: 1px solid #2a2a2e; }
.mega-row__title {
	font-size: clamp(1.5rem, 4vw, 2rem);
	letter-spacing: -0.05em;
	color: var(--color-text);
	transition: color var(--duration-base) var(--ease-out);
}
.mega-row__meta {
	margin-left: auto;
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #5c5a55;
}
.mega-row__arrow {
	color: var(--color-primary);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.mega-row:hover .mega-row__title,
.mega-row:focus-visible .mega-row__title { color: var(--color-primary); }
.mega-row:hover .mega-row__arrow,
.mega-row:focus-visible .mega-row__arrow { opacity: 1; transform: none; }

/* ---- Split (L2 / L3) ---- */
.mega-split {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 0;
}
@media (max-width: 900px) {
	.mega-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

.mega-split__nav {
	display: flex;
	flex-direction: column;
	padding: var(--space-10) var(--space-8);
	border-right: 1px solid #2a2a2e;
	overflow-y: auto;
}
@media (max-width: 900px) {
	.mega-split__nav { border-right: 0; border-bottom: 1px solid #2a2a2e; }
}

.mega-back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	align-self: flex-start;
}
.mega-back:hover { color: var(--color-primary); }
.mega-back__icon { font-size: var(--text-base); }

/* Series / variant rows */
.mega-series { display: flex; flex-direction: column; }
.mega-series__row {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	min-height: 80px;
	padding-block: var(--space-5);
	border-bottom: 1px solid #2a2a2e;
	color: inherit;
	text-align: left;
	width: 100%;
}
.mega-series .mega-series__row:first-child { border-top: 1px solid #2a2a2e; }
.mega-series__index {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	color: #5c5a55;
}
.mega-series__main {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	min-width: 0;
}
.mega-series__name {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	letter-spacing: -0.03em;
	color: var(--color-text);
	white-space: nowrap;
	transition: color var(--duration-base) var(--ease-out);
}
.mega-series__sub {
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.mega-series__arrow {
	justify-self: end;
	color: var(--color-primary);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.mega-variant__price {
	justify-self: end;
	font-size: var(--text-sm);
	color: var(--color-text);
	white-space: nowrap;
}
/* Active / hover row */
.mega-series__row.is-active .mega-series__index,
.mega-series__row.is-active .mega-series__name,
.mega-series__row:hover .mega-series__name,
.mega-series__row:focus-visible .mega-series__name { color: var(--color-primary); }
.mega-series__row.is-active .mega-series__arrow { opacity: 1; transform: none; }

/* ---- Right media pane ---- */
.mega-media {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	min-height: 0;
}
.mega-media__stage {
	position: relative;
	flex: 1;
	min-height: 280px;
	overflow: hidden;
	background: var(--gradient-hero);
}
.mega-media__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}
.mega-media__item.is-active { opacity: 1; transform: none; }
.mega-media__video,
.mega-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mega-media__img { object-fit: contain; padding: var(--space-12); }
.mega-media__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 60% at 50% 45%, rgba(255, 0, 18, 0.12), transparent 70%),
		repeating-linear-gradient(133deg, transparent 0 26px, rgba(255, 42, 42, 0.04) 26px 27px);
}
.mega-media__corner {
	position: absolute;
	width: 17px;
	height: 17px;
	z-index: 2;
}
.mega-media__corner--tl { top: 32px; left: 40px; border-top: 1px solid var(--color-primary); border-left: 1px solid var(--color-primary); }
.mega-media__corner--br { bottom: 32px; right: 40px; border-bottom: 1px solid var(--color-primary); border-right: 1px solid var(--color-primary); }
.mega-media__kicker {
	position: absolute;
	top: 42px;
	left: 72px;
	z-index: 2;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.mega-media__bar {
	position: relative;
	border-top: 1px solid #2a2a2e;
	padding: var(--space-8);
	min-height: 132px;
}
.mega-media__info {
	display: none;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
}
.mega-media__info.is-active { display: flex; }
.mega-media__text { display: flex; flex-direction: column; gap: var(--space-2); }
.mega-media__title {
	font-size: var(--text-2xl);
	letter-spacing: -0.04em;
	color: var(--color-primary);
}
.mega-media__desc {
	max-width: 46ch;
	font-size: var(--text-sm);
	line-height: 1.55;
	color: var(--color-text-muted);
}
.mega-media__price { font-size: var(--text-md); color: var(--color-text); }
.mega-media__actions { display: flex; gap: var(--space-3); flex-shrink: 0; }

.mega-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text);
	white-space: nowrap;
	transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.mega-pill:hover { border-color: var(--color-text-muted); }
.mega-pill--primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-strong);
}
.mega-pill--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }