/* Header account (person) icon - see header-account.php. Styled to match
   the nav cart icon it sits beside. */

.nav-account {
	list-style: none;
}

.nav-account .nav-account-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	color: inherit;
	line-height: 1;
	transition: color 0.15s ease;
}

.nav-account .nav-account-icon i {
	font-size: 18px;
}

.nav-account .nav-account-icon:hover,
.nav-account .nav-account-icon:focus {
	color: var( --hestia-primary-color, #e91e63 );
}

/* Visibility mirrors the theme's nav-cart split so exactly ONE shows per
   viewport (the theme's mobile/desktop boundary is 768/769px):
   - desktop account (in the primary nav) is hidden on mobile;
   - responsive account (in the navbar-toggle wrapper) is hidden on
     desktop, same as the theme hides the responsive cart there.
   IMPORTANT: the responsive account's positioning styles live INSIDE the
   mobile media query below - keeping them out of it (as a plain
   .navbar-toggle-wrapper ... rule) made them out-specify the desktop
   display:none and the mobile icon showed on desktop too, duplicating it
   below the logo (bug fixed 2026-07-21). */
@media ( max-width: 768px ) {
	li.nav-account:not( .responsive-nav-account ) {
		display: none;
	}

	/* On mobile the account sits between the menu toggle and the cart
	   inside .navbar-toggle-wrapper. */
	.navbar-toggle-wrapper .nav-account.responsive-nav-account {
		display: inline-flex;
		align-items: center;
		margin: 0 4px;
	}

	.navbar-toggle-wrapper .nav-account.responsive-nav-account .nav-account-icon i {
		font-size: 20px;
	}
}

@media ( min-width: 769px ) {
	li.nav-account.responsive-nav-account {
		display: none !important;
	}
}

/* ---- defensive: keep the basket visible ----
   Some site setups (a caching layer, another plugin, or a "hide empty
   cart" tweak) can suppress the cart nav item so the basket vanishes even
   though the theme still outputs it. Re-assert its visibility, matched to
   the theme's own 768/769 breakpoint so EXACTLY ONE basket shows per
   viewport (the desktop one on desktop, the responsive one on mobile) and
   never both at once. Covers display / visibility / opacity since any of
   those can be the thing hiding it. */
@media ( min-width: 769px ) {
	li.nav-cart:not( .responsive-nav-cart ) {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

@media ( max-width: 768px ) {
	.navbar-toggle-wrapper li.nav-cart.responsive-nav-cart {
		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* ---- fancy dividers between the header action icons ----
   A soft, centred vertical hairline (fades top+bottom) between the
   controls, instead of just a gap:
   - mobile: toggle | account | basket
   - desktop: account | basket
   currentColor picks up the header text colour. */
@media ( max-width: 768px ) {
	.navbar-toggle-wrapper .nav-cart.responsive-nav-cart {
		display: inline-flex;
		align-items: center;
	}

	.navbar-toggle-wrapper .nav-account.responsive-nav-account::before,
	.navbar-toggle-wrapper .nav-cart.responsive-nav-cart::before {
		content: "";
		flex: none;
		width: 1px;
		height: 20px;
		margin-right: 9px;
		border-radius: 1px;
		background: linear-gradient( to bottom, transparent, currentColor, transparent );
		opacity: 0.4;
	}
}

@media ( min-width: 769px ) {
	/* Clear gap so the divider reads as a separator, not part of the cart. */
	li.nav-account:not( .responsive-nav-account ) .nav-account-icon {
		position: relative;
		margin-right: 20px;
	}

	/* Divider sitting in the middle of that gap - stronger and taller than
	   before, with a solid middle section so it's actually visible (the
	   earlier faint currentColor gradient read as empty space). */
	li.nav-account:not( .responsive-nav-account ) .nav-account-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -11px;
		width: 1px;
		height: 22px;
		transform: translateY( -50% );
		border-radius: 1px;
		background: linear-gradient( to bottom, transparent 0%, rgba( 60, 72, 88, 0.5 ) 22%, rgba( 60, 72, 88, 0.5 ) 78%, transparent 100% );
	}
}

/* ---- account hover dropdown (desktop) ----
   Extra links configured in the Customizer ("Account menu" section),
   shown on hover/focus of the desktop account icon. Only the desktop
   account gets this markup, so it never appears on mobile. */
.nav-account.has-account-dropdown {
	position: relative;
}

.nav-account .hestia-account-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 190px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #ffffff;
	border: 1px solid #eceaf0;
	border-radius: 12px;
	box-shadow: 0 16px 34px -12px rgba( 40, 20, 50, 0.28 ), 0 4px 10px rgba( 40, 20, 50, 0.06 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 1000;
}

/* hover bridge over the small gap so moving to the menu doesn't close it */
.nav-account .hestia-account-dropdown::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}

/* Desktop: hover / keyboard focus opens the dropdown. Scoped to desktop
   ONLY - on mobile, tapping the icon focuses it, and a global
   :focus-within rule would then keep the dropdown open even after the JS
   toggles it closed on the second tap (that was the "won't untoggle" bug). */
@media ( min-width: 769px ) {
	.nav-account.has-account-dropdown:hover .hestia-account-dropdown,
	.nav-account.has-account-dropdown:focus-within .hestia-account-dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY( 0 );
	}
}

/* Mobile: tap toggles it (JS adds/removes .is-open on the responsive item). */
.nav-account.responsive-nav-account.is-open .hestia-account-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.nav-account .hestia-account-dropdown li {
	margin: 0;
}

.nav-account .hestia-account-dropdown li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #3c4858;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
}

/* optional per-link icon (Font Awesome) */
.nav-account .hestia-account-dropdown li a i {
	flex: none;
	width: 16px;
	font-size: 13px;
	text-align: center;
	color: var( --hestia-primary-color, #e91e63 );
}

.nav-account .hestia-account-dropdown li a:hover,
.nav-account .hestia-account-dropdown li a:focus {
	background: #f6f4f8;
	color: var( --hestia-primary-color, #e91e63 );
}

.nav-account .hestia-account-dropdown li a:hover i,
.nav-account .hestia-account-dropdown li a:focus i {
	color: inherit;
}

/* On mobile the dropdown is opened by tap (JS), positioned below the icon. */
@media ( max-width: 768px ) {
	.responsive-nav-account.has-account-dropdown {
		position: relative;
	}

	.responsive-nav-account .hestia-account-dropdown {
		right: 0;
		left: auto;
	}
}