/* ///////////////////// */
/* Header (start)        */
/* ///////////////////// */
.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: transparent;
	backdrop-filter: blur(0);
	border-bottom: 1px solid transparent;
	transition:
		background-color 0.2s ease,
		backdrop-filter 0.2s ease,
		border-bottom-color 0.15s ease;
}

.header.scrolled {
	background-color: var(--blue-1-a50);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	border-bottom-color: var(--white);
}

.header__container {
	min-height: 92px;
	display: grid;
	grid-template-columns: 166px 120px minmax(200px, 3fr) 1fr 1fr;
	grid-template-areas:
		"logo catalog search phone actions"
		"nav nav nav nav nav";
	column-gap: 40px;
	row-gap: 30px;
	align-items: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.header__logo {
	grid-area: logo;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.header__logo svg,
.header__logo img {
	max-width: 180px;
	width: auto;
	height: auto;
}

.header__catalog-button {
	grid-area: catalog;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	border-radius: var(--radius-lg);
	background-color: var(--white);
}

.header__catalog-button-text {
	font-size: 16px;
	line-height: 1;
	color: var(--blue-1);
}

.header__phone {
	grid-area: phone;
	white-space: nowrap;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: var(--white);
}

.header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 14px;
}

.header__action {
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
	color: var(--white);
}

.header__action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.header__action-icon svg {
	width: 24px;
	height: 24px;
}

.header__action-count {
	font-size: 16px;
	line-height: 1;
	color: var(--white);
	margin-top: -10px;
}

.header__nav {
	grid-area: nav;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 55px;
	white-space: nowrap;
}

.header__nav-link {
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: var(--white);
}
/* ///////////////////// */
/* Header (end)          */
/* ///////////////////// */