.header-popup {
	display: flex;
	position: absolute;
	top: calc(100% + 16px);
	left: 16px;
	right: 16px;
	transform: translateY(50px);
	min-height: 50vh;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: .4s;
	z-index: 0;
	
	.overlay {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
		width: 200vw;
		height: 200vh;
		background-color: var(--brown-50);
		opacity: .4;
		z-index: -1;
		cursor: default;
	}
	
	&.small {
		right: auto;
		width: 100%;
		max-width: 310px;
	}
	
	&#user-popup {
		left: auto;
		width: 100%;
		max-width: 416px;
		min-height: 1px;
	}
	
	&#cart-popup {
		top: 0;
		left: auto;
		width: 100%;
		max-width: 335px;
		min-height: 1px;
		height: 100dvh;
		background-color: var(--brown-10);
		z-index: 3;
		
		&.open .cart_content:before {
			width: 50vw;
		}
	}
	
	&.open {
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		
		@media (min-width: 1200px) {
			.overlay {
				display: block;
			}
		}
	}
	
	.content {
		width: 100%;
		padding: 24px;
		background-color: var(--white-50);
		border-radius: 16px;
	}
	
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32px;
	}
	
	.nav_list {
		li:not(:last-child) {
			margin-bottom: 8px;
		}
	}
	
	.products_list {
		display: grid;
		grid-template-columns: repeat(9, 1fr);
		grid-gap: 2.8%;
		
		.product_item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		
		.img_box {
			position: relative;
			width: 100%;
			padding-top: 100%;
			border-radius: 8px;
			overflow: hidden;
			margin-bottom: 8px;
			
			img {
				display: block;
				object-fit: cover;
			}
		}
		
		h5 {
			margin-bottom: 16px;
		}
		
		.link {
			margin-top: auto;
		}
	}
	
	.salons_grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 40px 16px;
		
		h5 {
			margin-bottom: 16px;
		}
		
		a {
			display: block;
			margin-bottom: 8px;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	.header-button {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		background-color: var(--green-50);
		border-radius: 8px;
		
		svg {
			width: 16px;
			height: 16px;
			display: block;
		}
	}
	
	.user_wrapper {
		width: 100%;
		padding: 0 16px;
	}
	
	.user_menu {
		padding: 32px 24px;
		border-radius: 8px;
		background-color: var(--brown-10);
		box-shadow: 0 0 16px 0 #102F130D;
		
		ul {
			display: flex;
			flex-direction: column;
			gap: 16px;
			margin-top: 24px;
		}
		
		a {
			display: grid;
			grid-template-columns: 32px auto;
			grid-gap: 8px;
			font-size: 18px;
			font-weight: 500;
		}
		
		span:not(.icon_box) {
			align-self: center;
		}
		
		.icon_box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 32px;
			height: 32px;
			border-radius: 8px;
		}
		
		svg {
			display: block;
		}
		
		small {
			display: block;
			font-weight: 300;
			font-size: 14px;
		}
	}
	
	&#search-popup {
		top: calc(100% + 4px);
		width: 100%;
		max-width: 416px;
		left: auto;
		min-height: 1px;
		
		.field_box {
			position: relative;
			margin-bottom: 16px;
			padding: 3px;
			
			svg {
				position: absolute;
				left: 24px;
				top: 48%;
				transform: translateY(-50%);
			}
			
			input {
				padding-left: 48px;
			}
		}
		
		button[type=submit] {
			width: 100%;
		}
		
		.content {
			position: relative;
			background-color: var(--green-50);
			
			.corner {
				position: absolute;
				top: 0;
				left: 46%;
				transform: translateY(-100%);
			}
		}
		
		.flex_row {
			margin-top: 16px;
			flex-wrap: wrap;
			
			a {
				padding: 7px 32px;
				border: 1px solid var(--green-700);
				border-radius: 40px;
				
				&:hover {
					background-color: var(--green-700);
					color: #fff;
				}
			}
		}
	}
	
	@media (max-width: 1199px) {
		top: 100%;
		z-index: 1;
		min-height: 1px;
		height: 87dvh;
		transform: translateX(-50px);
		
		&.small {
			max-width: 100%;
		}
		
		&#user-popup {
			left: 0;
			right: 0;
			max-width: 100%;
			height: 94dvh;
			
			h3 {
				font-size: 18px;
			}
		}
		
		&#cart-popup {
			top: 100%;
			left: 16px;
			max-width: 100%;
			width: auto;
			height: 94dvh;
		}
		
		.content {
			display: flex;
			flex-direction: column;
			padding: 0;
			height: 100%;
			border-radius: 0;
			background-color: var(--brown-50);
		}
		
		&#filters-popup .content {
			background-color: var(--white-50);
		}
		
		.head {
			justify-content: flex-start;
			gap: 16px;
			margin-bottom: 40px;
		}
		
		h3 {
			font-size: 24px;
			margin-right: auto;
		}
		
		.body {
			overflow: auto;
		}
		
		.products_list {
			grid-template-columns: repeat(6, 1fr);
			grid-gap: 24px 16px;
		}
		
		.salons_grid {
			grid-template-columns: 100%;
			grid-gap: 24px;
		}
		
		.nav_list {
			font-size: 18px;
		}
		
		.user_wrapper {
			padding: 40px 16px;
			background-color: var(--brown-10);
		}
		
		.user_menu {
			max-width: 345px;
			margin: 0 auto;
			
			a {
				font-size: 16px;
			}
		}
		
		&#search-popup {
			left: 16px;
			width: auto;
			max-width: 100%;
			
			.content {
				background-color: var(--brown-50);
				max-width: 400px;
				
				.corner {
					display: none;
				}
			}
		}
	}
	
	@media (max-width: 767px) {
		.products_list {
			grid-template-columns: 100px 100px;
			grid-gap: 24px 80px;
		}
	}
}