/**
 * Shop mega menu.
 *
 * The panel is a descendant of the Shop <li>, so :hover on the item stays true
 * while the pointer is inside the panel — the whole open and close behaviour is
 * this file, with no timers. The script only sets --alcli-mega-top so a fixed
 * panel sits flush under the header.
 */

.menu-item.alcli-mega-parent {
	position: relative;
}

/* An invisible tail below the menu item, the exact height of the gap between
   it and the panel. Only while hovering: once the pointer is on the tail the
   item is still hovered, so it keeps itself alive. Without it the pointer
   crosses dead space and the panel shuts under the cursor. */
.menu-item.alcli-mega-parent:hover::after,
.menu-item.alcli-mega-parent:focus-within::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline: 0;
	height: var(--alcli-mega-bridge, 12px);
}

.alcli-mega {
	position: fixed;
	z-index: 9999;
	top: var(--alcli-mega-top, 96px);
	left: 50%;
	width: min(1280px, calc(100vw - 40px));
	max-height: calc(100vh - var(--alcli-mega-top, 96px) - 24px);
	/* overflow-y:auto alone makes the browser compute overflow-x as auto too, so
	   a single sub-pixel of horizontal overflow draws a scrollbar across the
	   bottom of the panel. Nothing here should ever scroll sideways. */
	overflow-x: hidden;
	overflow-y: auto;
	padding: 26px 26px 22px;
	background: #fff;
	border: 1px solid rgba(20, 17, 15, 0.1);
	border-radius: 16px;
	box-shadow: 0 30px 70px -34px rgba(20, 17, 15, 0.6);
	/* Hidden but still measurable, so the first hover has no layout jump. */
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.2s;
	pointer-events: none;
}

.menu-item.alcli-mega-parent:hover .alcli-mega,
.menu-item.alcli-mega-parent:focus-within .alcli-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.alcli-mega__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
	gap: 24px 20px;
}

.alcli-mega__cat {
	display: flex;
	flex-direction: column;
	min-width: 0;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(min(var(--alcli-mega-i, 0), 8) * 28ms + 60ms);
}

.menu-item.alcli-mega-parent:hover .alcli-mega__cat,
.menu-item.alcli-mega-parent:focus-within .alcli-mega__cat {
	opacity: 1;
	transform: none;
}

.alcli-mega .alcli-mega__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 11px;
	border-radius: 10px;
	overflow: hidden;
	background: #f4efe3;
	text-decoration: none;
}

.alcli-mega .alcli-mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.alcli-mega__cat:hover .alcli-mega__thumb img {
	transform: scale(1.05);
}

.alcli-mega .alcli-mega__name {
	display: block;
	margin-bottom: 7px;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.3;
	overflow-wrap: anywhere;
	color: #14110f !important;
	text-decoration: none !important;
	transition: color 0.18s ease;
}

.alcli-mega .alcli-mega__name:hover {
	color: #cd4547 !important;
}

.alcli-mega__subs {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.alcli-mega__subs li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.alcli-mega .alcli-mega__subs a {
	display: block;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.45;
	color: #57514a !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.alcli-mega .alcli-mega__subs a:hover {
	color: #cd4547 !important;
}

.alcli-mega .alcli-mega__all {
	margin-top: 2px;
	font-weight: 700 !important;
	color: #cd4547 !important;
}

/* Touch and small screens: the header menu collapses to a burger there, and a
   hover panel has no meaning without a pointer. */
@media (max-width: 1024px), (hover: none) {
	.alcli-mega {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alcli-mega,
	.alcli-mega__cat,
	.alcli-mega__thumb img {
		transition: none !important;
		transform: translateX(-50%) !important;
	}

	.alcli-mega__cat {
		transform: none !important;
	}
}