/**
 * IGSHOP Shop Kit — mega menu, shared rules.
 *
 * Loaded at every screen width. The panel layout lives in
 * mega-menu-desktop.css and mega-menu-mobile.css, which the browser applies
 * on either side of the Mobile breakpoint setting.
 *
 * Themes can restyle everything through these custom properties:
 *   --qav-mm-badge-size   Badge text size (all badges share one size).
 *   --qav-mm-panel-bg     Panel background.
 *   --qav-mm-line         Panel top border.
 *   --qav-mm-gutter       Panel side padding.
 *   --qav-mm-max          Inner width for "Content width" panels.
 *   --qav-mm-col-gap      Space between columns.
 */

/* One badge. Its colours come from the menu item, as inline custom
   properties, so each item can have its own. */
.qav-mm-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	padding: 2px 4px;
	border-radius: 2px;
	font-size: var(--qav-mm-badge-size, 8px);
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--qav-mm-badge-color, #fff);
	background: var(--qav-mm-badge-bg, #c2255c);
}

/* Wraps a top-level name and its badge, so the desktop bubble can centre
   itself over the word rather than over the whole link box. */
.qav-mm-title {
	position: relative;
	display: inline-block;
}

/* Open/close buttons are added by mega-menu.js and only shown on mobile.
   !important because themes style every <button> (display: inline-block)
   with rules stronger than one class, which would show them on desktop. */
.qav-mm-toggle {
	display: none !important;
}