.as-megamenu-panel {
	position: absolute;
	width: 380px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border: 1px solid #eceff3;
	border-radius: 8px;
	z-index: 9999;
	padding: 12px;
	box-sizing: border-box;
}

.as-megamenu-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 8px;
}

.as-megamenu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.15s ease;
}

.as-megamenu-item:hover {
	background: #f6f8fb;
}

.as-megamenu-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8993a1;
	transition: color 0.15s ease;
}

.as-megamenu-item:hover .as-megamenu-icon {
	color: #0F4777;
}

.as-megamenu-icon svg {
	width: 20px;
	height: 20px;
}

.as-megamenu-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.as-megamenu-label {
	font-size: 12px;
	font-weight: 500;
	color: #1d2327;
	transition: color 0.15s ease;
}

.as-megamenu-item:hover .as-megamenu-label {
	color: #0F4777;
}

/* "Deals"-Eintrag immer rot hervorgehoben, damit er sofort auffällt —
   nicht erst beim Hovern wie die normalen Kategorien. */
.as-megamenu-item-deals .as-megamenu-icon,
.as-megamenu-item-deals .as-megamenu-label {
	color: #d63638;
	font-weight: 700;
}

.as-megamenu-item-deals:hover .as-megamenu-icon,
.as-megamenu-item-deals:hover .as-megamenu-label {
	color: #d63638;
}

/* Mega-Menü ist auf Hover ausgelegt — auf Touch-Geräten ohne Hover
   ausgeblendet, da die mobile Navigation ohnehin anders funktioniert. */
@media (max-width: 900px), (hover: none) {
	.as-megamenu-panel {
		display: none !important;
	}
}