/*
 * ⚠️ 关键前提：让 `.main-navigation` **独占整行**。
 *
 *   实测主题布局（1600px 视口）：
 *     .navbar .container   x=215  w=1170
 *     .navbar-header       x=230  w=454   float:left   ← 店名 + 标语
 *     .main-navigation     x=456  w=914   float:right  ← 购物车 + 菜单
 *
 *   `.navbar-header` 与 `.main-navigation` 是**左右并排的两栏**，
 *   所以菜单/搜索被锁在右侧 914px 的窄盒里 ——
 *   搜索框中心算出来是 913px，而页面中心是 800px（偏右 113px）。
 *
 *   先把 `float` 去掉、宽度拉到 100%，两者才变成上下两行，
 *   搜索框才能真正落在页面中心、菜单才能铺满整行。
 */
.main-navigation {
	float: none !important;
	width: 100% !important;
	text-align: left !important;
}

.main-navigation .menu-ehgoo-grosshandel-container {
	width: 100% !important;
	float: none !important;
	text-align: left !important;
}

/* 搜索框：菜单上方独立一行，水平居中，中等固定宽度（680px） */
.ehgoo-header-search {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0;
	margin: 0 0 10px;
	box-sizing: border-box;
}

.ehgoo-header-search > li {
	float: none !important;
	display: block;
	width: 100%;
	max-width: 680px;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none;
}

.ehgoo-header-search .dgwt-wcas-search-wrapp {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.ehgoo-header-search .dgwt-wcas-sf-wrapp input.dgwt-wcas-search-input {
	height: 46px;
	border-radius: 999px;
}

/*
 * 菜单：整行均匀分布。
 *
 * ⚠️ `flex: 1 1 auto`（auto 基准）**做不到等分** —— 实测各 `<li>`
 *    仍是各自文字宽度（127 / 89 / 93 …），于是全部挤在左边。
 *    要均匀铺满必须用 `flex: 1 1 0`（**零基准**）。
 *
 * ⚠️ 但**纯等宽放不下最长的两个德国菜单名**（实测 1600px 视口下
 *    每列只有 143px）：
 *      · `Messer / Töpfe / Pfannen`  文字 174px  → 溢出 31px
 *      · `Nahrungsergänzungsmittel`  文字 190px  → 溢出 47px
 *    加上 `white-space: nowrap` 就变成文字互相叠字（已实测到）。
 *    ⇒ 两处修正：
 *      ① 字号 16px → 13px（长名文字宽降到约 141 / 154px）；
 *      ② 用 `flex: 1 1 auto`+`min-width: max-content` 的混合策略：
 *         短项被拉宽（均分剩余空间），长项按内容宽度占位，
 *         保证**任何一项都不会溢出自个儿的格子**。
 *         仍靠 `justify-content: space-between` 保持整行铺满。
 */
#primary-menu.navbar-nav {
	display: flex !important;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	float: none !important;
	margin: 0 !important;
}

#primary-menu.navbar-nav > li {
	float: none !important;
	/*
	 * 关键：`min-width: max-content` 让长项**至少**占下文字宽度，
	 * 又不会被 `nowrap` 撑破格子（溢出会挤到邻格造成叠字）。
	 * 短项则靠 flex-grow 吸收剩余空间，视觉上仍是均匀铺满。
	 */
	flex: 1 1 auto !important;
	min-width: max-content;
	text-align: center;
}

#primary-menu.navbar-nav > li > a {
	white-space: nowrap;
	font-size: 13px;
	padding-left: 4px;
	padding-right: 4px;
}

/* 购物车 + LOGIN/REGISTER：保持在右上角 */
.main-navigation .user-login {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

/*
 * ── 给固定的 navbar 让出正确高度 ──────────────────────────────
 *
 *   `.navbar` 是 `position: fixed`（z-index 3000），高度由内容撑开；
 *   页面流里靠 `.wrapper.inner-main-title`（高 300px 的横幅，
 *   内含 `<h1 class="entry-title">HOME</h1>`）与 `#content` 让位。
 *
 *   搜索框下移使 navbar 变高：
 *     桌面（≥992px）菜单 1 行 → navbar 251px
 *     平板（≤991px）菜单 2 行 → navbar 326px
 *   而横幅固定 300px，于是「HOME」落到菜单后面透出来（已实测叠字）。
 *
 *   ⇒ 用 CSS 变量 `--ehgoo-navbar-h` 按断点给出 navbar 的实测高度，
 *     让横幅顶部内边距**始终等于 navbar 高度**，无论菜单折成几行
 *     都不会再叠。用 `padding-top` 而非 `margin`，
 *     横幅自身的深色背景才能从顶部铺满、不露白。
 *
 *   ⚠️ 这是**固定数值**，若日后菜单项增减导致 navbar 高度变化，
 *      必须同步更新这两个断点的值（否则又会叠字）。
 */
:root {
	--ehgoo-navbar-h: 251px;
}

@media (max-width: 991px) {
	:root { --ehgoo-navbar-h: 326px; }
}

body.home .wrapper.inner-main-title,
body.archive .wrapper.inner-main-title {
	box-sizing: border-box;
	padding-top: var(--ehgoo-navbar-h);
	min-height: var(--ehgoo-navbar-h);
}

@media (max-width: 991px) {
	.ehgoo-header-search {
		margin-bottom: 8px;
		padding: 0;
	}
	.ehgoo-header-search > li {
		max-width: 100%;
	}
	#primary-menu.navbar-nav {
		display: block !important;
	}
	#primary-menu.navbar-nav > li {
		float: none !important;
		flex: none !important;
		min-width: 0;
		text-align: left;
	}
	#primary-menu.navbar-nav > li > a {
		white-space: normal;
		font-size: 16px;
		padding-left: 15px;
		padding-right: 15px;
	}
}