.panel-header {
	--surface-foreground: var(--blue);
	--surface-background: var(--blue);
	--surface-mobile-nav: var(--blue);
	--text: var(--white);
	--text-alt: var(--white);

	position: relative;
	color: var(--text);
	z-index: 4;
}

.panel-header .header-inner {
	display: flex;
	flex-direction: column-reverse;
}

.panel-header .secondary-nav-container {
	display: none;
	padding: 0 20px;
	background-color: var(--surface-background);
}

@media (min-width: 64em) {
	.panel-header .secondary-nav-container {
		display: block;
		order: -1;
		background-color: transparent;
		padding-right: 0;
		transition: opacity var(--transition-appendix);

		&.hidden {
			opacity: 0;
			pointer-events: none;
		}
	}
}

.panel-header .primary-content-container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding: 0 0 0 var(--space-5);
	background-color: var(--white);
}

.panel-header .primary-content-container .contentRender_name_plugins_common_logo {
	padding: var(--space-4) 0;
	max-width: 188px;
	align-self: center;
}

.panel-header .main-nav-widgets-container {
	display: grid;
	align-items: stretch;
	grid-template-columns: min-content;

	.desktop-only {
		display: none;
	}
}

@media (min-width: 64em) {
	.panel-header .main-nav-widgets-container {
		grid-template-columns: min-content auto min-content;
		gap: 0 var(--space-5);
		align-items: center;
		justify-items: right;

		.desktop-only {
			display: block;
		}
	}
}

.panel-header .main-nav-widgets-container > *:not(.widgets, .desktop-only) {
	display: flex;
	align-items: center;
}

.panel-header .main-nav-widgets-container .widgets {
	display: none;
	align-items: center;
}

@media (min-width: 64em) {
	.panel-header .main-nav-widgets-container .widgets {
		display: flex;
		grid-column: 2;
		grid-row: 1 / 3;
		flex-direction: column-reverse;
		align-items: center;
		gap: 1px;
		background: var(--white);

		& > div {
			flex-basis: 49px;
			width: 100%;
			display: grid;
			place-items: stretch;
		}
	}
}

.panel-header .mobile-nav-container {
	position: absolute;
	z-index: 10;
	display: none;
	width: 100%;
	pointer-events: none;
}

.panel-header .mobile-nav-container.active {
	display: flex;
	justify-content: flex-end;
}

@media (min-width: 64em) {
	.panel-header .mobile-nav-container.active {
		display: none;
	}
}

.panel-header .mobile-nav-container .mobile-nav {
	width: 100%;
	background-color: var(--surface-mobile-nav);
}

.panel-header .mobile-nav-container.active .mobile-nav {
	pointer-events: all;
}

.panel-header .mobile-nav .widgets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: dense;
	padding: 30px var(--space-5) var(--space-1);
	color: var(--text-alt);
}

.panel-header .mobile-nav .search-cont {
	grid-column: 1 / -1;
}

.panel-header .mobile-nav .widgets > *:not(.search-cont) {
	align-self: center;
	justify-self: left;
}

.panel-header {
	.close-menu {
		display: none;
	}

	.hamburger-open & {
		.close-menu {
			display: block;
		}
		.open-menu {
			display: none;
		}
	}

	.social-links {
		margin-block: var(--space-5) 52px;
		justify-content: left;

		& a {
			width: 45px;
			height: 45px;
			font-size: 1.0625rem;
		}
	}
	.tripbuilder-counter {
		display: none;
	}
	.header-cta {
		font-size: var(--text-xs);
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--white);
		font-weight: 400;
		background: var(--pink);
		text-decoration: none;
		padding: var(--space-1) var(--space-3);
		margin-bottom: var(--space-3);
		border-radius: 3px;
		text-align: center;
		font-weight: 700;
		border: 2px solid var(--pink);
		transition: color var(--transition-appendix), background-color var(--transition-appendix);
	}
}

@media (min-width: 64em) {
	.panel-header {
		.tripbuilder-counter {
			display: flex;
			background: var(--cream);
			text-decoration: none;

			& i {
				font-size: 1.188rem;
				color: var(--pink);
				font-weight: 900;
			}

			& span {
				font-family: var(--font-inter);
				font-size: var(--text-base);
				color: var(--black-20);
				font-weight: 500;
			}
		}
		.social-links {
			display: none;
		}

		.main-nav-widgets-container > *:not(.widgets) {
			justify-content: flex-end;
		}
		.secondary-nav-container {
			grid-column: 2;
			grid-row: 1;
			margin-right: -23px;
		}
		.header-cta {
			grid-column: 2;
			grid-row: 1;
			font-size: var(--text-xs);
			letter-spacing: 0.06em;
			white-space: nowrap;
			margin-bottom: 0;
			margin-top: var(--space-2);
			padding-inline: var(--space-2);

			@media (hover: hover) {
				&:hover {
					background-color: #fff;
					color: var(--pink);
				}
			}

			& + .secondary-nav-container {
				grid-column: 1;
			}
		}
		.contentRender_name_plugins_nav_children_of_active_parent,
		.contentRender_name_plugins_nav_main_dropdown {
			grid-column: 1 / 3;
			grid-row: 2;
		}
		.main-nav-widgets-container .widgets {
			grid-column: 3;
			grid-row: 1 / 3;
		}
		.primary-content-container .contentRender_name_plugins_common_logo {
			max-width: 288px;
			min-width: 130px;
		}
		.primary-content-container {
			padding-left: 50px;
		}
	}
}

@media (min-width: 64em) and (max-width: 1200px) {
	.panel-header {
		.primary-content-container {
			padding-left: var(--space-5);
		}
		.search-cont .search-button {
			width: 64px;
		}
		.tripbuilder-counter {
			padding: 0 10px;
		}
	}
}