/**
 * AF Commerce — dropdowns and mega menu panels.
 *
 * Panels are hidden with the `hidden` attribute in the markup so they are
 * unavailable to every user agent, not just sighted ones, before they open.
 * CSS then re-shows them on hover for pointer users; the toggle button removes
 * the attribute for keyboard and touch. Both paths reach the same panel, which
 * is why the rules below always pair :hover with :focus-within.
 */

/* -------------------------------------------------------------------------
 * 1. Standard submenus
 * ---------------------------------------------------------------------- */

.af-submenu-wrap {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 65;
	min-width: 220px;
	padding: var(--af-space-sm);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-md);
	background: var(--af-background);
	box-shadow: var(--af-shadow-3);
}

.af-submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-submenu .af-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--af-space-sm);
	padding: 8px var(--af-space-sm);
	border-radius: var(--af-radius-sm);
	font-size: var(--af-fs-small);
}

.af-submenu .af-menu-link:hover {
	background: var(--af-surface);
}

.af-menu-toggle {
	display: none;
	padding: 4px;
	border: 0;
	background: transparent;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * 2. Desktop behaviour
 * ---------------------------------------------------------------------- */

@media (min-width: 1100px) {
	.af-nav .af-menu-item--parent {
		position: relative;
	}

	/*
	 * A mega panel spans the viewport rather than its menu item, so it anchors
	 * to the header row instead of the list item.
	 */
	.af-nav .af-submenu-wrap--mega {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		width: 100vw;
		max-width: 100vw;
		margin-inline-start: calc(50% - 50vw);
		padding: 0;
		border-radius: 0;
		border-inline: 0;
	}

	.af-nav .af-menu-item--parent:hover > .af-submenu-wrap,
	.af-nav .af-menu-item--parent:focus-within > .af-submenu-wrap {
		display: block;
	}

	/* Only reveal on hover; the attribute still governs the resting state. */
	.af-nav .af-menu-item--parent > .af-submenu-wrap[hidden] {
		display: none;
	}

	.af-nav .af-menu-item--parent:hover > .af-submenu-wrap[hidden],
	.af-nav .af-menu-item--parent:focus-within > .af-submenu-wrap[hidden] {
		display: block;
	}

	/* Second-level menus open to the side. */
	.af-submenu .af-menu-item--parent > .af-submenu-wrap {
		inset-block-start: calc(var(--af-space-sm) * -1);
		inset-inline-start: 100%;
	}

	.af-menu-toggle {
		/* Pointer users get hover; the button would be redundant furniture. */
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. Mega panel body
 * ---------------------------------------------------------------------- */

.af-mega {
	border-top: 1px solid var(--af-border);
	background: var(--af-background);
	box-shadow: var(--af-shadow-3);
}

.af-mega__inner {
	display: grid;
	gap: var(--af-space-xl);
	padding-block: var(--af-space-xl);
}

.af-mega__inner--aside {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
	.af-mega__inner--aside {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
	}
}

.af-mega__columns {
	display: grid;
	gap: var(--af-space-lg) var(--af-space-xl);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (min-width: 1100px) {
	.af-mega__columns {
		grid-template-columns: repeat(var(--af-mega-cols, 4), minmax(0, 1fr));
	}
}

.af-mega__column {
	min-width: 0;
}

.af-mega__heading {
	margin: 0 0 var(--af-space-sm);
	font-size: var(--af-fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.af-mega__heading a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.af-mega__heading a:hover {
	color: var(--af-accent);
}

.af-mega__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-mega__links li + li {
	margin-top: 6px;
}

.af-mega__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--af-secondary);
	font-size: var(--af-fs-small);
	text-decoration: none;
}

.af-mega__links a:hover {
	color: var(--af-accent);
	text-decoration: underline;
}

.af-mega__links--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-space-xs) var(--af-space-md);
}

.af-mega__links--inline li + li {
	margin-top: 0;
}

.af-mega__aside {
	display: grid;
	gap: var(--af-space-lg);
	align-content: start;
	padding-inline-start: var(--af-space-xl);
	border-inline-start: 1px solid var(--af-border);
}

.af-mega__brands {
	min-width: 0;
}

.af-mega__aside-title {
	margin: 0 0 var(--af-space-sm);
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.af-mega__banner img {
	width: 100%;
	border-radius: var(--af-radius-md);
	object-fit: cover;
}

.af-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--af-accent);
	font-size: var(--af-fs-small);
	font-weight: 600;
	text-decoration: none;
}

.af-mega__all:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 4. Below desktop: everything becomes an in-flow accordion
 * ---------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.af-submenu-wrap,
	.af-submenu-wrap--mega {
		position: static;
		width: auto;
		padding: 0 0 var(--af-space-sm) var(--af-space-md);
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.af-menu-toggle {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: var(--af-radius-sm);
		color: var(--af-muted);
	}

	.af-menu-toggle[aria-expanded="true"] .af-icon {
		transform: rotate(180deg);
	}

	.af-menu-item--parent {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.af-menu-item--parent > .af-submenu-wrap {
		grid-column: 1 / -1;
	}

	.af-mega {
		border: 0;
		box-shadow: none;
	}

	.af-mega__inner {
		padding-block: 0;
		padding-inline: 0;
		gap: var(--af-space-md);
	}

	.af-mega__aside {
		padding-inline-start: 0;
		border: 0;
	}

	.af-mega__products,
	.af-mega__banner {
		display: none;
	}
}