/*
 * Divi DigiMart: Header actions.
 *
 * Theme.css section 9: the account item, its dropdown, the wishlist counter and the
 * mobile cluster beside the hamburger.
 *
 * Ported from the QuikNexa child theme's theme.css (Phase 2b, Task 3): qn- became qndm-,
 * its tokens read the panel's (QNDM_Tokens), and the 1280 / 980 / 767 / 480 queries are
 * rewritten by QNDM_Tokens_Compile when the Breakpoint pane differs from Divi's.
 * Generated by tools/theme-css: edit the additions there, not this file.
 */

#et-boc .qndm-wish-menu-item,
#et-boc li.qndm-account-item,
#et-boc #top-menu li.qndm-account-item,
#et-boc .et_pb_menu li.qndm-account-item,
.qndm-account-mobile,
.qndm-wish-mobile {
	position: relative;
	display: flex;
	align-items: center;
}

#et-boc #top-menu .qndm-wish-menu-item > a,
#et-boc .qndm-wish-menu-item .qndm-wish-count,
#et-boc li.qndm-account-item .qndm-account-link,
#et-boc #top-menu li.qndm-account-item .qndm-account-link {
	padding: 0;
	color: inherit;
	opacity: 1;
}

/*
 * Divi's #top-menu a { display: block } carries ID specificity and beats a
 * bare class, which drops the chevron onto its own line under the avatar.
 */

#et-boc li.qndm-account-item .qndm-account-link,
#et-boc #top-menu li.qndm-account-item .qndm-account-link,
#et-boc .et_pb_menu li.qndm-account-item .qndm-account-link,
.qndm-mobile-actions .qndm-account-link {
	display: flex;
	align-items: center;
	gap: var(--qndm-sp-2);
	line-height: 1;
	white-space: nowrap;
}

#et-boc .qndm-wish-menu-item .qndm-wish-count:hover,
#et-boc li.qndm-account-item .qndm-account-link:hover,
.qndm-account-link:hover {
	color: inherit;
	opacity: .7;
}

#et-boc .qndm-wish-count {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

#et-boc .qndm-wish-count svg {
	width: var(--qndm-icon-lg);
	height: var(--qndm-icon-lg);
	stroke-width: 1.8;
}

#et-boc .qndm-wish-count-value {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding: 0 var(--qndm-sp-1);
	border-radius: 20px;
	background: var(--qndm-primary);
	color: var(--qndm-surface);
	font-size: 10px;
	font-weight: var(--qndm-fw-bold);
	line-height: 17px;
	text-align: center;
}

#et-boc .qndm-wish-count.is-empty .qndm-wish-count-value {
	display: none;
}

.qndm-account-user {
	position: relative;
	display: flex;
	align-items: center;
}

.qndm-account-link {
	display: flex;
	align-items: center;
	gap: var(--qndm-sp-2);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: var(--qndm-fs-md);
	font-weight: var(--qndm-fw-medium);
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	opacity: 1;
}

.qndm-account-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: var(--qndm-r-circle);
	background: var(--qndm-muted-bg);
	background: color-mix( in srgb, currentColor 12%, transparent );
	line-height: 0;
}

.qndm-account-avatar img,
.qndm-account-photo {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: cover;
	border-radius: var(--qndm-r-circle);
}

.qndm-account-name {
	max-width: 130px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.qndm-account-icon {
	width: 16px;
	height: 16px;
}

.qndm-account-icon--chevron {
	width: 12px;
	height: 12px;
	transition: transform var(--qndm-dur-fast) var(--qndm-ease);
}

.qndm-account-user.is-open .qndm-account-icon--chevron {
	transform: rotate(180deg);
}

.qndm-account-menu {
	position: absolute;
	top: calc( 100% + 16px );
	right: 0;
	left: auto;
	z-index: var(--qndm-z-sticky);
	display: block;
	width: 200px;
	padding: 6px;
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-md);
	background: var(--qndm-surface);
	box-shadow: var(--qndm-sh-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--qndm-dur-fast) var(--qndm-ease), transform var(--qndm-dur-fast) var(--qndm-ease), visibility var(--qndm-dur-fast) var(--qndm-ease);
}

.qndm-account-user.is-open .qndm-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Bridges the gap so the pointer can travel down to the panel. */

.qndm-account-menu::before {
	content: "";
	position: absolute;
	inset: -16px 0 100%;
}

#et-boc .qndm-account-menu .qndm-account-menu__link,
.qndm-account-menu__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px var(--qndm-sp-3);
	border-radius: 8px;
	color: var(--qndm-body);
	font-size: var(--qndm-fs-base);
	font-weight: var(--qndm-fw-medium);
	line-height: var(--qndm-lh-tight);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	opacity: 1;
	transition: background var(--qndm-dur-fast) var(--qndm-ease), color var(--qndm-dur-fast) var(--qndm-ease);
}

#et-boc .qndm-account-menu .qndm-account-menu__link:hover,
.qndm-account-menu__link:hover {
	background: var(--qndm-wash);
	color: var(--qndm-primary);
	opacity: 1;
}

.qndm-account-menu__link:last-child {
	margin-top: var(--qndm-sp-1);
	padding-top: var(--qndm-sp-3);
	border-top: 1px solid var(--qndm-border);
	border-radius: 0 0 8px 8px;
}

/* Mobile cluster: account, wishlist, cart, then the hamburger. */

.qndm-mobile-actions {
	display: none;
	align-items: center;
	gap: 18px;
	margin-right: var(--qndm-sp-4);
}

.qndm-mobile-actions .qndm-account-mobile {
	order: 1;
}

.qndm-mobile-actions .qndm-wish-mobile {
	order: 2;
}

.qndm-account-mobile,
.qndm-wish-mobile {
	display: none;
}

.qndm-mobile-actions .qndm-account-mobile,
.qndm-mobile-actions .qndm-wish-mobile {
	display: flex;
	margin: 0;
}

@media (hover: hover) {
	/*
	 * Pointer devices open the account panel on hover. Scoped to (hover: hover)
	 * because touch browsers fire a synthetic hover on tap, which would stick the
	 * panel open and fight the click toggle.
	 */

	.qndm-account-user:hover .qndm-account-menu,
	.qndm-account-user:focus-within .qndm-account-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.qndm-account-user:hover .qndm-account-icon--chevron,
	.qndm-account-user:focus-within .qndm-account-icon--chevron {
		transform: rotate(180deg);
	}
}

@media (max-width: 980px) {
	.qndm-mobile-actions {
		display: flex;
	}

	#et-boc #mobile_menu .qndm-wish-menu-item,
	#et-boc .et_mobile_menu .qndm-wish-menu-item,
	#et-boc #mobile_menu li.qndm-account-item,
	#et-boc .et_mobile_menu li.qndm-account-item {
		display: none;
	}

	.qndm-mobile-actions .qndm-account-name {
		display: none;
	}
}