/* ==========================================================================
   Header11 主題色覆寫層
   將 --theme11-* token 映射為 --header-color-*，再套用至導覽／工具列等元件
   ========================================================================== */

/* --- CSS 變數：主色、hover、白字、半透明白、黑底、半透明黑 --- */
:root {
	--header-color-main: var(--theme11-main, #729f88);
	--header-color-main-o: color-mix(in srgb, var(--theme11-main, #4e8e8b) 60%, transparent);
	--header-color-hover: var(--theme11-main-hover, #a1a09e);
	--header-color-white: var(--theme11-active-text, #fff);
	--header-color-white-o: var(--theme11-panel-bg, hsla(0, 0%, 100%, .3));
	--header-color-black: var(--theme11-paper, #000);
	--header-color-black-o: color-mix(in srgb, var(--theme11-paper, #000) 88%, transparent);
	--header-color-tr: transparent
}

/* --- 輔助導覽列（.inpage_nav）底色透明 --- */
.inpage_nav {
	background-color: transparent
}

/* --- 滾動縮小後的 header、桌面展開的子選單底色（半透明白） --- */
.mini-header .inpage-header, .nested_nav ul.dsk-open {
	background-color: var(--header-color-white-o)
}

/* --- 主選單／下拉觸發連結：文字色、字級 --- */
.inpage_nav .main_nav .dropmenu, .inpage_nav .main_nav .has_dropmenu > a, .inpage_nav .main_nav > a {
	color: var(--header-color-main) !important;
	font-size: 20px
}

/* --- 巢狀子選單連結文字色 --- */
.nested_nav a {
	color: var(--header-color-main)
}

/* --- 工具列 icon／購物車數量 badge／下拉 more 箭頭：主色底 --- */
.inpage-header .btn_cart .shopnum, .inpage-header .btn_cart i, .inpage-header .btn_login i, .inpage-header .btn_search i, .inpage_nav .has_dropmenu .more.active:before, .inpage_nav .has_dropmenu .more:before {
	background-color: var(--header-color-main)
}

/* --- 工具列 hover：搜尋／登入／購物車 icon、數量 badge --- */
.inpage-header .btn_cart:hover .shopnum, .inpage-header .btn_cart:hover i, .inpage-header .btn_login:hover i, .inpage-header .btn_search:hover i {
	background-color: var(--header-color-hover)
}

/* --- 購物車數量文字色（白） --- */
.inpage-header .btn_cart .shopnum {
	color: var(--header-color-white)
}

/* --- 購物車、登入按鈕邊框 --- */
.inpage-header .btn_cart, .inpage-header .btn_login {
	border: 1px solid var(--header-color-main)
}
.inpage-header .btn_cart:hover, .inpage-header .btn_login:hover {
	border-color: var(--header-color-hover)
}

/* --- 語系切換：toggle 偽元素底線／箭頭色 --- */
.inpage-header .top_block .lang .lang-toggle:after, .inpage-header .top_block .lang .lang-toggle:before, .lang .lang-toggle:after, .lang .lang-toggle:before {
	background-color: var(--header-color-main);
	border-bottom: 3px solid var(--header-color-main)
}

/* --- 語系切換：目前語系文字色 --- */
.inpage-header .top_block .lang .lang-toggle, .lang .lang-toggle {
	color: var(--header-color-main)
}

/* --- 語系下拉選單：底色、邊框、連結色、底線 --- */
.inpage-header .top_block .lang .lang-dropmenu, .lang .lang-dropmenu {
	background-color: var(--header-color-black);
	border: 1px solid var(--header-color-main)
}
.inpage-header .top_block .lang .lang-dropmenu a, .lang .lang-dropmenu a {
	color: var(--header-color-main)
}
.inpage-header .top_block .lang .lang-dropmenu a:after, .lang .lang-dropmenu a:after {
	border-bottom: 1px solid var(--header-color-main)
}

/* --- 輔助導覽版權文字色 --- */
.inpage_nav .copyright {
	color: var(--header-color-main)
}

/* --- 搜尋 lightbox：關閉鈕、送出鈕底色；input 邊框色 --- */
.inpage_lightbox .mid .box form button div, .inpage_lightbox .mid .close {
	background-color: var(--header-color-main)
}
.inpage_lightbox .mid .box form input {
	border-color: var(--header-color-main)
}

/* --- Desktop ≥1100px：主選單底線、hover 文字／底線色 --- */
@media (min-width:1100px) {
	/* 主選單連結底線色 */
	.inpage_nav .main_nav .dropmenu:after, .inpage_nav .main_nav .has_dropmenu > a:after, .inpage_nav .main_nav > a:after {
		background-color: var(--header-color-main)
	}
	/* 主選單／巢狀連結 hover、active 文字色 */
	.inpage_nav .main_nav .dropmenu:active, .inpage_nav .main_nav .dropmenu:hover, .inpage_nav .main_nav .has_dropmenu > a:active, .inpage_nav .main_nav .has_dropmenu > a:hover, .inpage_nav .main_nav > a:active, .inpage_nav .main_nav > a:hover, .nested_nav a.active, .nested_nav a:hover {
		color: var(--header-color-hover)
	}
	/* 主選單 hover 時底線、more 箭頭色 */
	.dropmenu:hover .inpage_nav .main_nav .dropmenu:hover:after, .inpage_nav .dropmenu:hover .more:before, .inpage_nav .main_nav .has_dropmenu > a:hover:after, .inpage_nav .main_nav > a:hover:after {
		background-color: var(--header-color-hover)
	}
}

/* --- Mobile ≤1100px：header／選單底色、漢堡線、分隔線 --- */
@media (max-width:1100px) {
	/* 手機 header 底色（黑） */
	.inpage-header {
		background-color: var(--header-color-black)
	}
	/* 滾動縮小後 header 半透明黑 */
	.mini-header .inpage-header {
		background-color: var(--header-color-black-o)
	}
	/* 手機選單展開時導覽底色 */
	.nav-open .inpage_nav {
		background-color: var(--header-color-black)
	}
	/* 漢堡選單三條線顏色 */
	.inpage-header .nav-toggle .hamburger span {
		background-color: var(--header-color-main)
	}
	/* 主選單／巢狀選單項目底部分隔線 */
	.inpage_nav .main_nav .dropmenu .has_dropmenu > a:after, .inpage_nav .main_nav > a:after, .nested_nav .back, .nested_nav a {
		border-bottom: 1px solid var(--header-color-main)
	}
	/* 巢狀選單：返回鈕、連結文字色 */
	.nested_nav .back, .nested_nav a {
		color: var(--header-color-main)
	}
	/* 巢狀選單返回箭頭色 */
	.nested_nav .back:before {
		background-color: var(--header-color-main)
	}
	/* 手機語系下拉邊框 */
	.inpage-header .top_block .lang .lang-dropmenu, .lang .lang-dropmenu {
		border: 1px solid var(--header-color-main)
	}
}

/* --- 登入表單按鈕、購物車關閉鈕、購物車操作鈕：主色底＋白字 --- */
#login_from .box .block .button_box .link_button, .cart_close span, .shopBtn {
	background-color: var(--header-color-main);
	color: var(--header-color-white)
}
#login_from .box .block .button_box .link_button:hover {
	background-color: var(--header-color-hover);
	color: var(--header-color-white)
}

/* --- Featherlight 彈窗關閉鈕：主色底＋白字／hover --- */
.featherlight-close-icon {
	background-color: var(--header-color-main);
	color: var(--header-color-white)
}
.featherlight-close-icon:hover {
	background-color: var(--header-color-hover);
	color: var(--header-color-white)
}