header {
	background: #171d25;
}

header .content {
	display: flex;
	height: 104px;
	align-items: center;

	max-width: var(--store-page-width);
	margin-left: auto;
	margin-right: auto;
}

header .branding {
	margin-right: 150px;
}

header .tab-links {
	display: flex;
	gap: 16px;
}

header .tab-links a {
	font-size: 16px;
	line-height: 16px;
	font-weight: 500;
	text-transform: uppercase;
	color: #dcdedf;
}

header .tab-links a:hover {
	color: #fff;
}

header .tab-links a:first-of-type {
	color: #1a9fff;

	&::after {
		content: "";
		display: block;
		width: 100%;
		height: 2.5px;
		background: #1a9fff;
		border-radius: 3px;
		animation: slide 0.1s;
		margin-top: 2px;
	}
}

header .lang {
	margin-left: auto;
	align-self: start;

	color: #b8b6b4;
	font-size: 11px;

	margin-top: 10px;
	padding-left: 5px;
	padding-right: 18px;
	background-image: url("/steam_assets/btn_arrow_down_padded.png");
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
	user-select: none;
}

header .lang:hover {
	color: #fff;
}

header .content {
	position: relative;
}

header .lang-popup {
	display: none;

	position: absolute;
	top: 25px;
	right: 0;
	z-index: 200;

	border: 1px solid #3D4450;
	background-color: #3D4450;

	box-shadow: 0 0 12px #000000;
}

header .lang-popup.active {
	display: block;
}

header ul.lang-popup {
	list-style-type: none;
}

header .lang-popup li a {
	display: block;
	padding: 5px 12px;
	font-size: 12px;
	color: #dcdedf;
}

header .lang-popup li:hover a {
	color: #171d25;
	text-decoration: none;
	background: #dcdedf;
}