/**
 * Alcli Site Tools - account control in the header.
 * Palette: beige #F4EFE3, red #CD4547, ink #14110F.
 */

/* flex: 0 0 auto matters. Inside the header's flex row the widget was allowed
   to shrink below its content width, which pushed the log out control on top
   of the cart icon. */
.alcli-st-account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

.alcli-st-account__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 100px;
	border: 1px solid rgba(20, 17, 15, 0.16);
	background: #fff;
	color: #14110f;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.alcli-st-account__btn:hover,
.alcli-st-account__btn:focus-visible {
	background: #cd4547;
	border-color: #cd4547;
	color: #fff;
	transform: translateY(-2px);
}

.alcli-st-account__icon {
	width: 17px;
	height: 17px;
	fill: currentColor;
	flex: 0 0 auto;
}

.alcli-st-account--in .alcli-st-account__btn {
	background: #cd4547;
	border-color: #cd4547;
	color: #fff;
}

.alcli-st-account--in .alcli-st-account__btn:hover {
	background: #14110f;
	border-color: #14110f;
}

/* Log out is a button in its own right, not a text link squeezed beside one. */
.alcli-st-account__logout {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 11px 16px;
	border-radius: 100px;
	border: 1px solid rgba(20, 17, 15, 0.16);
	background: #fff;
	color: #14110f;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.alcli-st-account__logout:hover,
.alcli-st-account__logout:focus-visible {
	background: #14110f;
	border-color: #14110f;
	color: #fff;
	transform: translateY(-2px);
}

/* A long display name must not be able to widen the header. */
.alcli-st-account__btn span {
	display: inline-block;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

/* When the control sits on a dark bar. */
.alcli-header--dark .alcli-st-account__btn {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.alcli-header--dark .alcli-st-account__logout {
	color: rgba(255, 255, 255, 0.6);
}

/* Below the desktop breakpoint both controls collapse to their icons, which
   keeps the header on one line without dropping the log out entirely. */
@media (max-width: 1024px) {
	.alcli-st-account__btn span,
	.alcli-st-account__logout span {
		display: none;
	}

	.alcli-st-account__btn,
	.alcli-st-account__logout {
		padding: 10px;
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alcli-st-account__btn {
		transition: none !important;
		transform: none !important;
	}
}