/*
 * CC Storefront account menu ([cc_account_menu]). Behaviour here; the look in :where() (zero
 * specificity) or variables so any site rule wins:
 *   --cc-account-menu-width   panel width (260px)
 *   --cc-account-menu-gap     space between the icon and the panel, kept hoverable (12px)
 *   --cc-account-menu-bg      panel background (Canvas)
 *   --cc-account-menu-border  panel border colour
 */
.cc-account-menu { position: relative; display: inline-flex; }
:where(.cc-account-menu__icon) { display: inline-flex; align-items: center; justify-content: center; color: inherit; }
:where(.cc-account-menu__icon svg) { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Touch screens: no dropdown, the icon goes to My Account. */
.cc-account-menu__panel { display: none; }
@media (hover: hover) and (pointer: fine) {
	.cc-account-menu__panel {
		display: block; position: absolute; top: 100%; right: 0; z-index: 20;
		width: var(--cc-account-menu-width, 260px);
		/* The top padding bridges the gap to the icon, so the panel stays open on the way down. */
		padding-top: var(--cc-account-menu-gap, 12px);
		opacity: 0; visibility: hidden; transform: translateY(-6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	.cc-account-menu:hover .cc-account-menu__panel,
	.cc-account-menu:focus-within .cc-account-menu__panel { opacity: 1; visibility: visible; transform: none; }
}
.cc-account-menu__panel::before {
	content: ""; position: absolute; inset: var(--cc-account-menu-gap, 12px) 0 0; z-index: -1;
	background: var(--cc-account-menu-bg, Canvas);
	border: 1px solid var(--cc-account-menu-border, rgba(127, 127, 127, 0.3));
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* Signed in or not, from the body class: one of the two shows. */
.cc-account-menu__member, body.logged-in .cc-account-menu__guest { display: none; }
body.logged-in .cc-account-menu__member { display: block; }

:where(.cc-account-menu__panel > div > *) { margin-inline: 20px; }
:where(.cc-account-menu__title) { margin-top: 20px; margin-bottom: 4px; font-weight: 700; }
:where(.cc-account-menu__text) { margin-top: 0; margin-bottom: 16px; font-size: 0.875em; opacity: 0.75; }
:where(.cc-account-menu__button) { display: block; margin-bottom: 8px; padding: 11px 16px; border: 1px solid currentColor; text-align: center; text-decoration: none; }
:where(.cc-account-menu__link) { display: block; margin-top: 8px; margin-bottom: 20px; font-size: 0.875em; text-align: center; }
:where(.cc-account-menu__guest > :last-child) { margin-bottom: 20px; }
:where(.cc-account-menu__list) { margin-top: 8px; margin-bottom: 12px; padding: 0; list-style: none; }
:where(.cc-account-menu__list a) { display: block; padding: 9px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.15); text-decoration: none; }
:where(.cc-account-menu__logout a) { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .cc-account-menu__panel { transition: none; } }