/* ============================================================================
   Avontus Products Menu - the approved Products mega menu.

   Every selector is inside .avpm-panel, the class this plugin puts on the
   Products dropdown. Nothing here can style the other menu tabs, the rest of
   the header, or any page content.

   The !important flags are deliberate and limited: QuadMenu ships deep
   descendant selectors for everything inside a dropdown panel
   (".quadmenu-navbar-nav li.quadmenu-item > .quadmenu-dropdown-menu ...") and
   those outrank a plain class. They are used only to take the panel back from
   that styling, never to fight another stylesheet of ours.
   ==========================================================================*/

/* --- the panel itself ---------------------------------------------------
   QuadMenu positions, shows and hides this element, and this file leaves all
   of that alone: no position, no opacity, no visibility, no transition, no
   max-height here. Only what is inside it is ours. */
.avpm-panel .avpm-inner {
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 0 44px;
	font-family: "Open Sans", system-ui, sans-serif;
	text-align: left;
}

/* --- left: what this menu is -------------------------------------------- */
.avpm-panel .avpm-left {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 300px;
	padding-right: 24px;
}

.avpm-panel .avpm-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 16px;
	color: #0005EE;
	text-transform: uppercase;
}

.avpm-panel .avpm-title {
	margin-top: 14px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 38px;
	color: #000;
}

.avpm-panel .avpm-body {
	margin-top: 14px;
	font-size: 15px;
	line-height: 24px;
	color: #1E2535;
}

.avpm-panel .avpm-note {
	margin-top: 18px;
	font-size: 14px;
	line-height: 22px;
	color: #697385;
}

.avpm-panel .avpm-sales {
	color: #0005EE;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.avpm-panel .avpm-sales:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- the angled rule between the two halves ----------------------------- */
.avpm-panel .avpm-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 100px;
	align-self: stretch;
}

.avpm-panel .avpm-divider svg {
	width: 40px;
	height: 100%;
	max-height: 420px;
}

/* --- right: one row per product ----------------------------------------- */
.avpm-panel .avpm-rows {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.avpm-panel .avpm-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	border-radius: 12px;
	border-bottom: 1px solid #E4E8EF;
	transition: background-color .18s ease-out;
}

.avpm-panel .avpm-row--last {
	border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
	.avpm-panel .avpm-row:hover {
		background: #F2F4F7;
	}
}

.avpm-panel .avpm-mark-img {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
}

.avpm-panel .avpm-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 400px;
	flex-shrink: 0;
	min-width: 0;
}

/* The name is a flex row so the NEW pill can sit beside it. The ® / ™ is
   wrapped with the name in .avpm-word so that the row's 10px gap opens up
   before the pill, never in front of the mark. */
.avpm-panel .avpm-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 28px;
	color: #0005EE !important;
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.avpm-panel .avpm-name:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.avpm-panel .avpm-word {
	display: inline;
}

/* 13% smaller than the name, lifted to superscript */
.avpm-panel .avpm-reg {
	font-size: .87em;
	line-height: 1;
	vertical-align: .42em;
	letter-spacing: 0;
}

.avpm-panel .avpm-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 14px;
	color: #0005EE;
	border: 1.5px solid #0005EE;
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}

.avpm-panel .avpm-desc {
	font-size: 15px;
	line-height: 22px;
	color: #1E2535;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avpm-panel .avpm-links {
	display: flex;
	flex-direction: column;
	width: 232px;
	flex-shrink: 0;
}

.avpm-panel .avpm-link {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: #0005EE !important;
	text-decoration: none;
	white-space: nowrap;
	opacity: 1 !important;      /* QuadMenu dims icon rows to .55 */
}

.avpm-panel .avpm-link svg {
	transition: transform .18s cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
	.avpm-panel .avpm-link:hover {
		text-decoration: underline;
	}
	.avpm-panel .avpm-link:hover svg {
		transform: translateX(3px);
	}
}

.avpm-panel :focus-visible {
	outline: 2px solid #0005EE;
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- below QuadMenu's 992px breakpoint ----------------------------------
   The panel becomes part of the collapsed accordion, so the two halves stack
   and each row becomes name over description over links. The intro column is
   dropped: in a narrow accordion it is a wall of text in front of the links
   people actually came for. */
@media (max-width: 991px) {
	.avpm-panel .avpm-inner {
		display: block;
		padding: 8px 0 16px;
	}

	.avpm-panel .avpm-left,
	.avpm-panel .avpm-divider {
		display: none;
	}

	.avpm-panel .avpm-row {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: 14px;
		row-gap: 6px;
		align-items: center;
		padding: 14px 4px;
		border-radius: 0;
	}

	.avpm-panel .avpm-text {
		width: auto;
	}

	.avpm-panel .avpm-name {
		font-size: 17px;
		line-height: 24px;
		white-space: normal;
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.avpm-panel .avpm-desc {
		font-size: 14px;
		line-height: 20px;
		white-space: normal;
		overflow: visible;
	}

	.avpm-panel .avpm-links {
		grid-column: 2;
		width: auto;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px 18px;
	}

	.avpm-panel .avpm-link {
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.avpm-panel .avpm-row,
	.avpm-panel .avpm-link svg {
		transition: none;
	}
}