.header {
	position: sticky;
	top: 0;
	margin-bottom: 24px;
	background-color: var(--white-50);
	z-index: 9999;
	
	.container {
		position: relative;
	}
	
	.flex_wrapper {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0;
		z-index: 1;
	}
	
	.site-logo {
		display: block;
		max-width: 165px;
		width: 100%;
	}
	
	.nav_box {
		ul {
			display: flex;
			gap: 16px;
		}
		
		a {
			padding: 8px;
			font-size: 14px;
			border-radius: 8px;
			
			@media (min-width: 1200px) {
				&:hover,
				&.active {
					color: var(--text-color);
					background-color: var(--green-50);
				}
			}
		}
	}
	
	.flex_row {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		
		&.icon-buttons {
			gap: 16px;
		}
		
		a {
			font-size: inherit !important;
			font-weight: inherit !important;
		}
	}
	
	.logo_wrapper {
		gap: 24px;
		
		.icon-close {
			display: none;
		}
		
		.open {
			.icon-open {
				display: none;
			}
			
			.icon-close {
				display: block;
			}
		}
	}
	
	.user_box {
		display: flex;
		gap: 40px;
		
		[data-action]:hover {
			.header-button {
				background-color: var(--green-100);
			}
		}
		
		.header-button {
			position: relative;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 32px;
			height: 32px;
			background-color: var(--green-50);
			border-radius: 8px;
			transition: .4s;
			
			&:hover {
				background-color: var(--green-100);
			}
			
			img {
				width: 16px;
				height: 16px;
				display: block;
			}
			
			.count {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 5px;
				right: 3px;
				width: 13px;
				height: 13px;
				color: #fff;
				font-size: 8px;
				font-weight: 400;
				line-height: 13px;
				background-color: var(--green-700);
				border-radius: 50%;
				text-align: center;
				z-index: 1;
			}
		}
		
		&.main_bar {
			.user_button {
				a:not(.header-button) {
					display: none;
				}
			}
		}
	}
	
	@media (max-width: 1199px) {
		margin-bottom: 16px;
		
		.flex_wrapper {
			padding: 16px;
		}
		
		.nav_box {
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: var(--white-50);
			padding: 16px;
			height: 88vh;
			z-index: -1;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transform: translateY(-50px);
			transition: .4s;
			
			&.open {
				opacity: 1;
				transform: translateY(0);
				visibility: visible;
				pointer-events: auto;
			}
			
			&:before {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100vw;
				height: 120vh;
				background-color: var(--brown-50);
				z-index: -1;
			}
			
			ul {
				flex-direction: column;
				gap: 24px;
				margin-bottom: 32px;
			}
			
			.popup-button {
				display: flex;
				align-items: center;
				gap: 8px;
				
				&:not(.no-arrow):after {
					content: "";
					display: inline-block;
					width: 16px;
					height: 16px;
					background: url("../../images/arrow-right.svg") center no-repeat;
				}
			}
			
			a {
				padding: 0;
				font-size: 18px;
				font-weight: 500;
				border-radius: 0;
			}
		}
		
		.main_bar {
			.search_button,
			.location_button {
				display: none;
			}
		}
	}
	
	@media (max-width: 767px) {
		.flex_wrapper,
		.nav_box {
			padding: 16px 0;
		}
	}
}