@mixin header_goods_styles {
	header.goods{
		position: relative !important;
		background: $header-background;
		z-index: 999;
		.header-inner{
			position: relative;
			.nav-icon{
				color: #{color-contrast($header-background)};
			}
			 .menu-bar{
	 			@media screen and (max-width: #{map-get($container-max-widths , lg)}) {
					position: fixed;
					width: 100%;
					background: white;
					top: 0;
					left: 0;
					z-index: -1;
					padding-top: 4.5rem;
					padding-left: 1rem;
				}
				.pages-dropdown{
		 			@media screen and (max-width: #{map-get($container-max-widths , lg)}) {
						a[data-bs-toggle="dropdown"]{
							display: none;
						}
						.dropdown-menu{
							display: none;
						}
						.data-link{
							border: 0;
						}
					}
					@media screen and (min-width: #{map-get($container-max-widths , lg)}) {
						.data-link{
							display: none;
						}
					}
				}
			 	& > ul{
			 		@media screen and (max-width: #{map-get($container-max-widths , lg)}) {
			 			height: 100vh;
			 		}
			 		& > .nav-item{
			 			ul{
			 				@media screen and (max-width: #{map-get($container-max-widths , lg)}) {
				 				display: flex;
				 				flex-direction: column;
			 				}
			 			}
			 			& > .nav-link{
			 				color: #{color-contrast($header-background)};
			 			}
			 		}
			 	}
			 	&.page-menu-bar{
			 		.navbar-nav > .pages-dropdown{
			 			position: unset;
			 			z-index: 9;
			 			a{
			 				text-decoration: unset;
			 				cursor: pointer;
			 				&:before{
								content: "";
								position: absolute;
								top: 100%;
								left: 0;
								width: 100%;
								height: 100vh;
								z-index: -1;
								background: color-contrast($header-background);
								opacity: .5;
								pointer-events: none;
							}
							&:not(.show){
								&:before{
									display: none;
								}
							}
			 			}
			 			& > ul{
							@media screen and (min-width: #{map-get($container-max-widths , lg)}) {
				 				position: absolute;
				 				background: $header-background;
				 				width: 100%;
				 				top: 100%;
				 				left: 0;
				 				margin-top: 0;
				 				border: 0;
				 				border-radius: 0;
				 				min-height: 400px;
				 				z-index: 999;
			 				}
			 				&.show{
			 					display: flex;
			 					& > li{
			 						width: 25%;
			 					}
			 					.dropdown-menu{
			 						border: 0;
			 						padding: 0;
			 						background: transparent;
			 						.header{
			 							font-size: 1.25rem;
			 						}
			 						.child{
			 							a{
				 							font-size: 1rem;
				 							font-weight: min(400, $font-weight-bold);
			 							}
			 						}
			 					}
			 				}
			 				a{
			 					padding-left: 0;
			 				}
			 				@media screen and (min-width: #{map-get($container-max-widths , lg)}){
							    padding-left: calc((100vw - #{map-get($container-max-widths , lg)}) / 2);
							    padding-right: calc((100vw - #{map-get($container-max-widths , lg)}) / 2);
							}
							@media screen and (min-width: #{map-get($container-max-widths , xl)}){
							    padding-left: calc((100vw - #{map-get($container-max-widths , xl)}) / 2);
							    padding-right: calc((100vw - #{map-get($container-max-widths , xl)}) / 2);
							}
							@media screen and (min-width: #{map-get($container-max-widths , xxl)}){
							    padding-left: calc((100vw - #{map-get($container-max-widths , xxl)}) / 2);
							    padding-right: calc((100vw - #{map-get($container-max-widths , xxl)}) / 2);
							}
			 				.dropdown-menu{
			 					display: block;
			 					position: unset;
			 				}
			 			}
			 		}
			 	}
			 }
		}
		.navbar-brand{
			filter: unset;
	        @media screen and (max-width: #{map-get($container-max-widths , lg)}) {
				max-width: 125px;
				order: 2;
				margin: 0 auto;
				img{
					width: 100%;
					height: auto;
				}
			}
		}
		.navbar-toggler{
	        @media screen and (max-width: #{map-get($container-max-widths , lg)}) {
	        	order: 1;
			}
		}
		.user-wrapper{
			@media screen and (max-width: #{map-get($container-max-widths , lg)}) {
				margin-left: unset;
			}
		}
		.search-wrapper{
			@media screen and (min-width: #{map-get($container-max-widths , lg)}) {
				[data-bs-toggle="dropdown"]{
					display: none !important;
				}
			}
			@media screen and (max-width: #{map-get($container-max-widths , lg)}) {
				width: unset;
				margin-top: 0;
				order: 2;
				margin-left: auto;
			}
			& > .dropdown-menu{
				@media screen and (min-width: #{map-get($container-max-widths , lg)}) {
					display: block !important;
					position: unset;
					top: unset;
					left: unset;
					background: transparent;
					border: 0;
					border-radius: 0;
					padding: 0;
					h4{
						display: none;
					}
				}
				@media screen and (max-width: #{map-get($container-max-widths , lg)}) {
					position: fixed;
					top: 0;
					left: 0;
					background: rgba(0,0,0,.75);
					height: 100vh;
					width: 100%;
					margin-top: 0;
					border-radius: 0;
					justify-content: flex-start;
					align-items: flex-start;
					padding: 2rem 1rem;
					backdrop-filter: blur(10px);
					transition: .2s ease;
					display: flex !important;
					flex-direction: column;
					h4{
						color: white;
						margin-bottom: 1rem;
						transition: .3s ease;
					}
					form{
						display: flex;
						align-items: flex-start;
						transition: .3s ease;
						transition-delay: .1s;
						.search-input-wrapper{
							margin-bottom: 1rem;
							input{
								padding: .75rem 1rem;
							}
						}
						.dropdown-menu{
							background: transparent;
							border: 0;
							border-radius: 0;
							padding-left: 0;
							padding-right: 0;
							flex-wrap: wrap;
							flex-direction: column;
							a{
								padding-left: 0;
								padding-top: .5rem;
								padding-bottom: .5rem;
							}
							&.show{
								display: flex;
							}
							*{
								color: white;
							}
						}
					}
					&:not(.show){
						opacity: 0;
						pointer-events: none;
						user-select: none;
						h4, form{
							transform: translateY(-20px);
							opacity: 0;
						}
					}
				}
			}
		}
	}
}