/* Header account icon hover dropdown */

:root {
	--axonfit-header-account-lime: var(--e-global-color-primary, #bad531);
	--axonfit-header-account-lime-soft: #f2f7d6;
	--axonfit-header-account-ink: #000a00;
	--axonfit-header-account-line: #d5d5d5;
}

.kitify-menu-account__box,
.header-account {
	position: relative;
}

.kitify-menu-account__box::after,
.header-account::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 32px;
	z-index: 999;
}

.kitify-menu-account__box .sub-menu.axonfit-header-account-menu,
.header-account .sub-menu.axonfit-header-account-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: -30px !important;
	left: auto !important;
	min-width: 330px;
	margin: 0;
	padding: 0 15px 15px !important;
	list-style: none;
	background: #fff;
	border: 1px solid var(--axonfit-header-account-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 25px 70px rgba(9, 16, 11, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) !important;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	pointer-events: none;
	z-index: 1000;
}

.kitify-menu-account__box:hover .sub-menu.axonfit-header-account-menu,
.kitify-menu-account__box:focus-within .sub-menu.axonfit-header-account-menu,
.header-account:hover .sub-menu.axonfit-header-account-menu,
.header-account:focus-within .sub-menu.axonfit-header-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) !important;
	pointer-events: auto;
}

.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li,
.header-account .sub-menu.axonfit-header-account-menu li {
	display: block;
	margin: 0;
	padding: 0;
}

.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li a,
.header-account .sub-menu.axonfit-header-account-menu li a {
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 64px;
	padding: 0 18px !important;
	border-bottom: 1px solid var(--axonfit-header-account-line);
	font-size: 17px !important;
	line-height: 1.3 !important;
	font-weight: 400;
	color: var(--axonfit-header-account-ink) !important;
	text-decoration: none;
	background: #fff;
	transition: background 0.18s ease;
}

.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li:first-child a,
.header-account .sub-menu.axonfit-header-account-menu li:first-child a {
	margin: 0 -15px;
	padding-left: 33px !important;
	padding-right: 33px !important;
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
}

.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li:last-child a,
.header-account .sub-menu.axonfit-header-account-menu li:last-child a {
	margin: 0 -15px;
	padding-left: 33px !important;
	padding-right: 33px !important;
	border-bottom: 0;
	border-bottom-left-radius: 18px;
	border-bottom-right-radius: 18px;
}

.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li a:hover,
.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li a:focus,
.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li.is-active > a,
.header-account .sub-menu.axonfit-header-account-menu li a:hover,
.header-account .sub-menu.axonfit-header-account-menu li a:focus,
.header-account .sub-menu.axonfit-header-account-menu li.is-active > a {
	background: var(--axonfit-header-account-lime-soft);
	font-weight: 800;
	color: var(--axonfit-header-account-ink) !important;
}

.axonfit-header-account-icon {
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--axonfit-header-account-ink);
}

.axonfit-header-account-icon::before {
	content: "";
	width: 23px;
	height: 23px;
	background: currentColor;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li a:hover .axonfit-header-account-icon,
.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li a:focus .axonfit-header-account-icon,
.kitify-menu-account__box .sub-menu.axonfit-header-account-menu li.is-active > a .axonfit-header-account-icon,
.header-account .sub-menu.axonfit-header-account-menu li a:hover .axonfit-header-account-icon,
.header-account .sub-menu.axonfit-header-account-menu li a:focus .axonfit-header-account-icon,
.header-account .sub-menu.axonfit-header-account-menu li.is-active > a .axonfit-header-account-icon {
	background: var(--axonfit-header-account-lime);
}

.axonfit-header-account-menu .axonfit-account-icon--dashboard::before {
	mask-image: var(--axonfit-header-account-icon-dashboard);
	-webkit-mask-image: var(--axonfit-header-account-icon-dashboard);
}

.axonfit-header-account-menu .axonfit-account-icon--orders::before {
	mask-image: var(--axonfit-header-account-icon-orders);
	-webkit-mask-image: var(--axonfit-header-account-icon-orders);
}

.axonfit-header-account-menu .axonfit-account-icon--details::before {
	mask-image: var(--axonfit-header-account-icon-details);
	-webkit-mask-image: var(--axonfit-header-account-icon-details);
}

.axonfit-header-account-menu .axonfit-account-icon--logout::before {
	mask-image: var(--axonfit-header-account-icon-logout);
	-webkit-mask-image: var(--axonfit-header-account-icon-logout);
}

.axonfit-header-account-label {
	display: block;
}

@media (max-width: 900px) {
	.kitify-menu-account__box .sub-menu.axonfit-header-account-menu,
	.header-account .sub-menu.axonfit-header-account-menu {
		display: none !important;
	}

	.kitify-menu-account__box::after,
	.header-account::after {
		display: none;
	}
}