/**
 * IGSHOP Shop Kit — mega menu, desktop panel.
 *
 * Enqueued with media="(min-width: breakpoint + 1px)", so none of this
 * applies on phones.
 *
 * A few rules carry !important on purpose: most themes animate their
 * dropdowns with visibility, opacity, transform and a fixed width on
 * .sub-menu, and those would otherwise squeeze the panel back into a narrow
 * dropdown or keep it invisible.
 */

/* The top-level <li> steps out of the way, so the panel positions against
   the header (the nearest positioned ancestor) and spans its full width. */
.qav-mm {
	position: static !important;
}

.qav-mm > .sub-menu {
	position: absolute !important;
	top: 100%;
	left: 0 !important;
	right: 0 !important;
	z-index: 60;
	display: none;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--qav-mm-col-gap, 28px);
	box-sizing: border-box;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0;
	padding: 32px var(--qav-mm-gutter, 24px) 36px;
	list-style: none;
	background: var(--qav-mm-panel-bg, #fff);
	border-top: 1px solid var(--qav-mm-line, rgba(0, 0, 0, .08));
	box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

.qav-mm:hover > .sub-menu,
.qav-mm:focus-within > .sub-menu,
.qav-mm.qav-mm-open > .sub-menu {
	display: grid !important;
}

/* Esc closes the panel even while the mouse or focus is still inside. */
.qav-mm.qav-mm-closed > .sub-menu {
	display: none !important;
}

.qav-mm-cols-2 > .sub-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qav-mm-cols-3 > .sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qav-mm-cols-4 > .sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qav-mm-cols-5 > .sub-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Content width: same full-width background, columns kept to the site's
   content width. 100% here is the panel's own width. */
.qav-mm-content > .sub-menu {
	padding-left: max(var(--qav-mm-gutter, 24px), calc((100% - var(--qav-mm-max, 1200px)) / 2));
	padding-right: max(var(--qav-mm-gutter, 24px), calc((100% - var(--qav-mm-max, 1200px)) / 2));
}

/* Each column. */
.qav-mm > .sub-menu > li {
	position: static;
	display: block;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Column heading, linked or plain. */
.qav-mm-heading > a,
.qav-mm-nolink {
	display: block;
	margin: 0 0 12px;
	padding: 0;
	font-weight: 700;
	text-transform: uppercase;
}

/* The links under each heading: always visible inside the open panel,
   never a dropdown of their own. */
.qav-mm .sub-menu .sub-menu {
	position: static !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	box-shadow: none;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

.qav-mm .sub-menu .sub-menu > li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}

.qav-mm .sub-menu .sub-menu a {
	display: block;
	padding: 5px 0;
}

/* "Show its links in 2 columns": the heading takes two panel columns and
   its list flows down the first column, then the second. */
.qav-mm > .sub-menu > .qav-mm-heading-2col {
	grid-column: span 2;
}

.qav-mm .qav-mm-heading-2col > .sub-menu {
	column-count: 2;
	column-gap: var(--qav-mm-col-gap, 28px);
}

.qav-mm .qav-mm-heading-2col > .sub-menu > li {
	break-inside: avoid;
}

/* Top-level badge: a bubble centred above the word, with a small pointer. */
.qav-mm-badge--bubble {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin: 0 0 6px;
	padding: 3px 7px;
	border-radius: 3px;
	font-weight: 700;
	transform: translateX(-50%);
}

.qav-mm-badge--bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -4px;
	border: 4px solid transparent;
	border-bottom: 0;
	border-top-color: var(--qav-mm-badge-bg, #c2255c);
}