/* ==============================================================
   Header avatar menu (inc/td-account/td-account-menu.php)
   ============================================================== */

/* The login area hides its overflow so it can collapse smoothly when
   the header shrinks on scroll (header.css). While the header is
   expanded, let the dropdown hang below it instead of being clipped.
   (td-user-menu.js closes the menu when the header collapses.) */
header:not(.is-scrolled) .login-menu {
	overflow: visible;
}

.td-user-menu {
	position: relative;
}

/* Avatar button: a 40px circle with the theme's blue ring; red when
   hovered/focused/open. */
.td-user-menu-button {
	display: block;
	padding: 0;
	border: 2px solid #004C97;
	border-radius: 50%;
	background: #fff;
	line-height: 0;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.td-user-menu-button img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.td-user-menu-button:hover,
.td-user-menu-button:focus-visible,
.td-user-menu-button[aria-expanded="true"] {
	border-color: #B60004;
	box-shadow: 0 0 0 3px rgba(182, 0, 4, .2);
	outline: none;
}

/* header.css styles every ".login-menu ul" / "li" for the old row of
   buttons (display:flex, right-aligned, 10px item margins). Those rules
   would beat Bootstrap's ".dropdown-menu { display:none }" and leave
   this menu permanently visible and laid out sideways, so restore
   Bootstrap's show/hide and normal list layout with more specific
   selectors. */
.login-menu .td-user-menu-list {
	display: none;
	text-align: left;
}
.login-menu .td-user-menu-list.show {
	display: block;
}
.login-menu .td-user-menu-list li {
	margin: 0;
}

/* The menu: theme fonts/colours on Bootstrap's dropdown. */
.td-user-menu-list {
	min-width: 190px;
	margin-top: 8px !important;
	padding: 6px 0;
	border: 1px solid #e0e0e0;
	border-top: 3px solid #B60004;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	text-align: left;
	z-index: 1050;
}
.td-user-menu-list .dropdown-item {
	padding: 9px 18px;
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
}
.td-user-menu-list .dropdown-item:hover,
.td-user-menu-list .dropdown-item:focus {
	background: #f4f4f4;
	color: #B60004;
}

/* ==============================================================
   Header icons left of the avatar (td_account_header_icons action,
   1.25+) -- e.g. the store's cart with a red item-count bubble.
   ============================================================== */

/* One row: icons, then the avatar -- side by side, never stacked. */
.td-header-tools {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* An icon link: themed blue, red when hovered/focused. The icon itself
   is an inline SVG drawn in currentColor. */
.td-header-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #004C97;
	line-height: 0;
	text-decoration: none;
	transition: color .15s ease;
}
.td-header-icon[hidden] {
	display: none;
}
.td-header-icon svg {
	display: block;
	width: 46px;
	height: 42px;
}
.td-header-icon:hover,
.td-header-icon:focus-visible {
	color: #B60004;
	outline: none;
}
.td-header-icon:focus-visible {
	border-radius: 6px;
	box-shadow: 0 0 0 3px rgba(182, 0, 4, .25);
}

/* The number bubble: solid themed red circle, bold white number,
   overlapping the icon's top-right corner. */
.td-header-badge {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 12px;
	background: #B60004;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 24px;
	text-align: center;
}