/* Mega menu: Products Collection */
.ma-mega-item > a { cursor: pointer; }
.ma-mega-item > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.ma-mega-item.is-open > a::after { transform: rotate(225deg) translate(-1px, -1px); }

.ma-mega {
	--ma-mega-top: 90px;
	--ma-mega-bg: #04070C;
	position: fixed;
	top: var(--ma-mega-top);
	left: 0;
	right: 0;
	z-index: 9999;
	background: var(--ma-mega-bg);
	border-top: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	text-align: left;
	cursor: default;
}
.ma-mega-item.is-open > .ma-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.ma-mega__inner {
	/* Full width, lined up with the header logo / search edges (set by JS), capped on ultrawide screens. */
	max-width: 1800px;
	margin: 0 auto;
	padding: 40px var(--ma-mega-side-r, var(--ma-mega-side, clamp(24px, 2.8vw, 48px))) 44px var(--ma-mega-side, clamp(24px, 2.8vw, 48px));
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: clamp(28px, 3vw, 56px);
	align-items: start;
}
.ma-mega__cols {
	display: grid;
	grid-template-columns: repeat(var(--ma-cols, 4), minmax(0, 1fr));
	gap: 8px clamp(20px, 2.4vw, 40px);
}
.ma-mega a { text-decoration: none; }
.ma-mega__title {
	display: inline-block;
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff !important;
	padding-bottom: 6px;
	margin-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.ma-mega__col:hover .ma-mega__title,
.ma-mega__title:hover { border-color: #FF5A1F; }
.ma-mega__list { list-style: none; margin: 0; padding: 0; }
.ma-mega__list li { margin: 0; padding: 0; }
.ma-mega__list a {
	display: block;
	padding: 3px 0;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .05em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62) !important;
	transition: color .15s, transform .15s;
}
.ma-mega__list a:hover { color: #FF5A1F !important; transform: translateX(4px); }
.ma-mega__all a { color: #fff !important; font-weight: 500; margin-top: 6px; }

.ma-mega__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: #0B1426;
	overflow: hidden;
}
.ma-mega__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: opacity .22s ease;
}
.ma-mega__media img.is-fading { opacity: 0; }
.ma-mega__cap {
	position: absolute; left: 0; bottom: 0;
	padding: 10px 16px;
	background: #FF5A1F; color: #fff;
	font: 700 12px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.ma-mega__cap:empty { display: none; }

/* Staggered entrance: columns, then their links, one after another; image slides in last */
.ma-mega__title,
.ma-mega__list li {
	opacity: 0;
	transform: translateY(14px);
}
.ma-mega-item.is-open .ma-mega__title,
.ma-mega-item.is-open .ma-mega__list li {
	opacity: 1;
	transform: none;
	transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1), color .15s, border-color .15s;
}
.ma-mega-item.is-open .ma-mega__title { transition-delay: calc(60ms + var(--c, 0) * 90ms); }
.ma-mega-item.is-open .ma-mega__list li { transition-delay: calc(140ms + var(--c, 0) * 90ms + var(--l, 1) * 55ms); }
.ma-mega__media { opacity: 0; transform: translateX(24px) scale(.97); }
.ma-mega-item.is-open .ma-mega__media {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease .2s, transform .55s cubic-bezier(.2, .7, .2, 1) .2s;
}
/* keep link hover motion snappy once visible */
.ma-mega-item.is-open .ma-mega__list li a { transition: color .15s, transform .15s; }

@media (max-width: 1024px) {
	.ma-mega { display: none !important; }
	.ma-mega-item > a::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ma-mega, .ma-mega-item.is-open > .ma-mega, .ma-mega__media img { transition: none; }
	.ma-mega__title, .ma-mega__list li, .ma-mega__media { opacity: 1; transform: none; transition: none !important; }
}