/**
 *
 *   Desktop header
 *   ==============
 *
 *   From 1280px, where the full desktop header shows:
 *   - the main menu fits on one line: sentence case instead of capitals
 *     (Greek capitals run ~20% wider) and the seasonal item set as a tag.
 *     Before, at 1280-1600px two items wrapped to a second row and the
 *     header grew from ~178px to ~218px;
 *   - one shipping message in the top bar instead of two that read as
 *     contradicting each other (25€ with BOX NOW vs 49€);
 *   - phone orders in the empty column left of the logo.
 *
 *   Phones and tablets use the mobile header and are not affected.
 *
 */

/* Top bar (shown above the mobile breakpoint): a single centred message. */
.top-banner .nvm-topbar-message {
	width: 100%;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.01em;
}

.top-banner .nvm-topbar-message p {
	margin: 0;
}

.top-banner .nvm-topbar-message strong {
	font-weight: 700;
}

@media ( min-width: 1280px ) {

	/* Max Mega Menu styles the links with two IDs, hence the long selectors. */
	#mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link {
		text-transform: none;
		font-size: 15px;
		letter-spacing: 0;
	}

	#mega-menu-wrap-main-navigation #mega-menu-main-navigation {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Seasonal category as a tag at the end of the menu. */
	#mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.nvm-menu-seasonal > a.mega-menu-link {
		margin-left: 4px;
		padding: 0 12px;
		border-radius: 999px;
		background: #fdf3f8;
		color: rgb(71, 73, 114);
		font-weight: 600;
	}

	#mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.nvm-menu-seasonal > a.mega-menu-link:hover,
	#mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.nvm-menu-seasonal.mega-toggle-on > a.mega-menu-link {
		background: rgb(248, 151, 194);
		color: #fff;
	}

	/* Phone orders, left of the logo. */
	.main-header-left {
		display: flex;
		align-items: center;
	}

	.main-header-phone {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		color: #1f1f1f;
		text-decoration: none;
	}

	.main-header-phone svg {
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
	}

	.main-header-phone-text {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.main-header-phone-label {
		color: #5b5b5b;
		font-size: 13px;
	}

	.main-header-phone-number {
		font-size: 20px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.01em;
	}

	.main-header-phone:hover .main-header-phone-number {
		color: rgb(71, 73, 114);
	}
}

/* 1280-1365px: ~50px short of one line at 15px; a touch smaller there. */
@media ( min-width: 1280px ) and ( max-width: 1365px ) {

	#mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link {
		font-size: 14px;
	}
}

/* Wider search: the header columns go from 30/40/30 to 25/30/45 and the
   Findbar search box fills the right column next to account and cart. The
   logo (265px) still fits its narrower column. */
@media ( min-width: 1280px ) {

	.main-header .row > .main-header-left {
		flex: 0 0 25%;
		width: 25%;
		max-width: 25%;
	}

	.main-header .row > .main-header-logo {
		flex: 0 0 30%;
		width: 30%;
		max-width: 30%;
	}

	.main-header .row > .main-header-right {
		flex: 0 0 45%;
		width: 45%;
		max-width: 45%;
		gap: 18px;
	}

	.main-header-right .dgwt-wcas-search-form {
		flex: 1 1 auto;
		width: auto;
		max-width: 600px;
		margin-left: auto;
	}

	.main-header-right .fbr-search-input-container,
	.main-header-right .fbr-search-input-wrapper,
	.main-header-right input.fbr-search-input {
		width: 100%;
	}
}