/**
 * Image mega-menu — full-width dropdown panels of product image tiles for the
 * Windows / Doors / Conservatories nav items. Revealed by assets/mega-menu.js.
 */

.wpwd-mega-root {
	position: relative;
	z-index: 200;
}

.wpwd-mega {
	position: fixed;
	left: 0;
	right: 0;
	top: 120px; /* set precisely by JS to the header bottom */
	background: #fff;
	box-shadow: 0 24px 48px rgba(20, 40, 45, 0.20);
	border-top: 1px solid var(--border, #e7ecec);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 200;
}
.wpwd-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wpwd-mega-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 26px 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.wpwd-mega-tile {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 16 / 10;
	background: #dfe7e9;
}
.wpwd-mega-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.35s ease;
}
.wpwd-mega-tile:hover .wpwd-mega-img {
	transform: scale(1.06);
}
.wpwd-mega-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 32, 33, 0.72) 0%, rgba(20, 32, 33, 0) 55%);
}
.wpwd-mega-label {
	position: absolute;
	left: 14px;
	bottom: 12px;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.wpwd-mega-tile:focus-visible {
	outline: 3px solid var(--primary, #039d96);
	outline-offset: 2px;
}

/* Below the desktop nav breakpoint the theme's hamburger handles navigation. */
@media (max-width: 1024px) {
	.wpwd-mega-root {
		display: none !important;
	}
}