/* ==========================================================================
   TechEZ 自訂頁首 —— 取代 Elementor 樣板 22385
   規格來源：線上 header 渲染結果 + Elementor 內嵌 CSS（2026-08-31 抽取）

   所有選擇器都以 body.tz-custom-header 作用域包住，
   feature flag 關閉時完全不影響現況。
   ========================================================================== */

.tz-custom-header {
	--tz-max:        1200px;
	--tz-topbar-bg:  #515151;
	--tz-navbar-bg:  #ffffff;
	--tz-nav:        #525252;
	--tz-nav-hover:  #000000;
	--tz-sub:        #343434;
	--tz-sub-hover:  #888888;
	--tz-accent:     #d3b574;
	--tz-scrim:      rgba(0, 0, 0, .9);
	--tz-shadow:     0 15px 20px 0 rgba(0, 0, 0, .1);
	--tz-font:       "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--tz-z-header:   100;
	--tz-z-overlay:  9000;
}

/* --------------------------------------------------------------------------
   Sticky 外框（Blocksy 會把我們的輸出包在 <header id="header"> 內）
   -------------------------------------------------------------------------- */

.tz-custom-header #header {
	position: sticky;
	top: 0;
	z-index: var(--tz-z-header);
	background: var(--tz-navbar-bg);
}

.tz-custom-header.admin-bar #header { top: 32px; }

@media (max-width: 782px) {
	.tz-custom-header.admin-bar #header { top: 46px; }
}

.tz-custom-header .tz-container {
	max-width: var(--tz-max);
	margin-inline: auto;
	padding-inline: 15px;
	width: 100%;
}

/* --------------------------------------------------------------------------
   頂欄
   -------------------------------------------------------------------------- */

.tz-topbar {
	background: var(--tz-topbar-bg);
	color: #fff;
	font-family: var(--tz-font);
	font-size: 14px;
}

.tz-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 27px;
}

.tz-topbar__contact {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.tz-topbar__contact li { margin: 0; }

.tz-topbar__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.tz-topbar__contact a:hover { color: var(--tz-accent); }

.tz-topbar__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* 尺寸對齊 Elementor 原本的頂欄：padding 27px + 內容 31px + 27px = 85px。
   先前用 40px 按鈕導致頂欄整體高出約 9px。 */
.tz-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 31px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.tz-iconbtn:hover,
.tz-iconbtn:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: var(--tz-accent);
}

.tz-icon { width: 19px; height: 19px; display: block; }

.tz-cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--tz-accent);
	color: #16163f;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.tz-cart-count--empty { display: none; }

/* --------------------------------------------------------------------------
   主列：Logo + 主選單
   -------------------------------------------------------------------------- */

.tz-navbar { background: var(--tz-navbar-bg); }

.tz-navbar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 20px;
}

.tz-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 90px;
	text-decoration: none;
}

.tz-logo__img {
	width: 180px;
	height: 51px;
	object-fit: contain;
	object-position: center;
	display: block;
}

.tz-nav { flex: 1 1 auto; min-width: 0; }

/* --- 選單通用 --- */

.tz-menu,
.tz-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tz-menu {
	display: flex;
	align-items: center;
	/* 對齊原版：選單自 Logo 之後靠左展開，右側留白。
	   先前用 flex-end 會把項目擠到視窗右緣，與原版不同。 */
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 0 30px;
	font-family: var(--tz-font);
}

.tz-menu li { position: relative; margin: 0; }

.tz-menu a {
	display: block;
	color: var(--tz-nav);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.4;
	text-decoration: none;
	text-transform: capitalize;
	transition: color .18s ease;
}

.tz-menu > li > a { padding-block: 10px; }

.tz-menu > li > a:hover,
.tz-menu > li > a:focus-visible,
.tz-menu > li.current-menu-item > a,
.tz-menu > li.current-menu-ancestor > a {
	color: var(--tz-nav-hover);
}

/* 下拉指示箭頭：原版 Elementor 選單每個有子選單的項目都有 ⌄，
   少了它使用者無從得知哪些項目可展開。用 CSS 產生，不動選單標記。 */
.tz-menu > li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tz-menu > li.menu-item-has-children > a::after {
	content: "";
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .18s ease;
}

.tz-menu > li.menu-item-has-children:hover > a::after,
.tz-menu > li.menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(225deg);
}

/* 第二層以下：箭頭朝右，表示還能再展開 */
.tz-menu .sub-menu > li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.tz-menu .sub-menu > li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(-45deg);
}

/* --- 桌機下拉 --- */

.tz-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 240px;
	padding-block: 6px;
	background: #fff;
	box-shadow: var(--tz-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.tz-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	transform: translate(6px, 0);
}

.tz-menu li:hover > .sub-menu,
.tz-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}

.tz-menu .sub-menu a {
	padding: 20px 10px;
	color: var(--tz-sub);
	font-size: 16px;
	letter-spacing: normal;
	line-height: 1.3;
}

.tz-menu .sub-menu a:hover,
.tz-menu .sub-menu a:focus-visible { color: var(--tz-sub-hover); }

.tz-menu .sub-menu .current-menu-item > a { color: var(--tz-accent); }

/* 靠右的頂層項目讓子選單往左展開，避免溢出視窗 */
.tz-menu > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
.tz-menu > li:nth-last-child(-n+2) .sub-menu .sub-menu { left: auto; right: 100%; }

/* --------------------------------------------------------------------------
   漢堡鈕（桌機隱藏）
   -------------------------------------------------------------------------- */

.tz-burger {
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--tz-nav);
	cursor: pointer;
}

.tz-burger .tz-icon { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Overlay 共用（輸出在 <body> 底層，不在 header 內）
   -------------------------------------------------------------------------- */

.tz-scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--tz-z-overlay) - 1);
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .22s ease;
}

.tz-scrim[hidden] { display: none; }
.tz-scrim.is-open { opacity: 1; }

.tz-overlay { position: fixed; z-index: var(--tz-z-overlay); }
.tz-overlay[hidden] { display: none; }

.tz-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.tz-overlay__close .tz-icon { width: 26px; height: 26px; }

/* --- 搜尋：全螢幕 --- */

.tz-search {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--tz-scrim);
	color: #fff;
	opacity: 0;
	transition: opacity .22s ease;
}

.tz-search.is-open { opacity: 1; }

.tz-search .tz-overlay__close {
	position: absolute;
	top: 24px;
	right: 24px;
	color: #fff;
}

.tz-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(720px, 100%);
	border-bottom: 2px solid rgba(255, 255, 255, .5);
	padding-bottom: 10px;
}

.tz-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--tz-font);
	font-size: 28px;
	line-height: 1.4;
	outline: none;
	padding: 6px 0;
}

.tz-search__input::placeholder { color: rgba(255, 255, 255, .5); }

.tz-search__submit {
	flex-shrink: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	padding: 6px;
}

.tz-search__submit .tz-icon { width: 26px; height: 26px; }

/* --- 側欄共用（行動選單 / 購物車） --- */

.tz-mobile,
.tz-cart {
	top: 0;
	bottom: 0;
	width: min(400px, 88vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--tz-sub);
	box-shadow: 0 0 40px rgba(0, 0, 0, .2);
	transition: transform .26s ease;
	overscroll-behavior: contain;
}

.tz-mobile { left: 0;  transform: translateX(-100%); }
.tz-cart   { right: 0; transform: translateX(100%); }

.tz-mobile.is-open,
.tz-cart.is-open { transform: translateX(0); }

.tz-mobile__head,
.tz-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 10px 14px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	font-family: var(--tz-font);
	font-size: 17px;
	font-weight: 600;
	flex-shrink: 0;
}

.tz-mobile__nav,
.tz-cart-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.tz-cart-panel__body { padding: 20px; }

/* --- 行動選單 --- */

.tz-menu--mobile {
	display: block;
	padding-bottom: 40px;
}

.tz-menu--mobile li { border-bottom: 1px solid rgba(0, 0, 0, .06); }

.tz-menu--mobile a {
	padding: 14px 20px;
	font-size: 16px;
	letter-spacing: normal;
}

.tz-menu--mobile li.menu-item-has-children > a::after { display: none; }

.tz-menu--mobile .sub-menu {
	position: static;
	min-width: 0;
	padding: 0;
	background: #fafafa;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: none;
}

.tz-menu--mobile li.is-expanded > .sub-menu { display: block; }

.tz-menu--mobile .sub-menu a { padding-left: 36px; font-size: 15px; }
.tz-menu--mobile .sub-menu .sub-menu a { padding-left: 52px; }

.tz-menu--mobile .tz-submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 52px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--tz-sub);
	cursor: pointer;
}

.tz-menu--mobile .tz-submenu-toggle .tz-icon {
	width: 18px;
	height: 18px;
	transition: transform .2s ease;
}

.tz-menu--mobile li.is-expanded > .tz-submenu-toggle .tz-icon { transform: rotate(180deg); }

/* 捲動鎖定 */
.tz-custom-header.tz-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   響應式：1024px 以下改用漢堡選單
   -------------------------------------------------------------------------- */

/* 中等桌機寬度（1201–1400px）：選單容易塞不下。
   7 個頂層項目 + 下拉箭頭約需 820px，而 1200px 容器扣掉
   Logo(180) + 右邊距(90) + padding 只剩約 900px，逼近極限。
   這裡等比縮小間距與 Logo 邊距，避免溢出或換行。 */
@media (max-width: 1400px) {
	.tz-logo { margin-right: 40px; }
	.tz-menu { gap: 0 20px; }
	.tz-menu a { font-size: 16px; letter-spacing: .5px; }
}

@media (max-width: 1260px) {
	.tz-logo { margin-right: 24px; }
	.tz-menu { gap: 0 14px; }
	.tz-menu a { font-size: 15px; letter-spacing: 0; }
	.tz-logo__img { width: 150px; height: auto; }
}

/* 1200px 以下改用漢堡選單（原本設 1024px，但在 1024–1200 之間
   選單已經放不下，會擠成一團或換行）。 */
@media (max-width: 1200px) {
	.tz-nav { display: none; }
	.tz-burger { display: inline-flex; }

	.tz-logo { margin-right: 0; }
	.tz-logo__img { width: 133px; height: auto; }

	.tz-navbar__inner { padding-block: 10px; }
	.tz-topbar__inner { padding-block: 8px; }

	/* 行動裝置回到 40px，確保觸控目標足夠大 */
	.tz-iconbtn { width: 40px; height: 40px; }
	.tz-icon { width: 21px; height: 21px; }
}

@media (max-width: 640px) {
	.tz-topbar { font-size: 13px; }
	.tz-topbar__contact { gap: 14px; }
	.tz-topbar__contact li:first-child span { display: none; }
	.tz-search__input { font-size: 20px; }
}