/* ==========================================================
 * 歡喜緣 商品分頁 — 前台
 * Figma：兩欄置中標題 32px Bold
 *        目前分頁：燙金漸層字 + 下方金色蓮花
 *        其他分頁：白字 60% 透明
 *        下方：滿版 1px 燙金漸層線，蓮花疊在線上（線在蓮花底下），
 *              表示「目前切換到這個分頁」
 * Figma 尺寸：標題 45px → 間距 20px → 蓮花 40px，線位於距頂 89px（約蓮花下緣往上 15px）
 * 選擇器前綴 html body.single-product.twh-pt，並對會被 Elementor
 * 「商品資料分頁」小工具覆蓋的屬性加 !important
 * ========================================================== */
.twh-pt {
	--twh-pt-gold-a: #b67b19;
	--twh-pt-gold-b: #d1a64f;
	--twh-pt-gold-c: #a96f14;
	--twh-pt-gold-gradient: linear-gradient(180deg, #b67b19 0%, #d1a64f 50%, #a96f14 100%);
	--twh-pt-white: #ffffff;
}

/* ---------- 分頁標題列 ---------- */
html body.single-product.twh-pt .woocommerce-tabs ul.tabs {
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	margin: 0 0 40px !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
	overflow: visible !important;
}

/* 滿版 1px 燙金漸層線（Figma 1512×1，漸層方向由上到下），位置穿過蓮花下半部 */
html body.single-product.twh-pt .woocommerce-tabs ul.tabs::before {
	content: "" !important;
	position: absolute !important;
	z-index: 0 !important;
	top: auto !important; /* Astra 預設 top: 0 會把線頂到分頁上方，必須清掉 */
	right: 0 !important;
	bottom: 15px !important;
	left: 0 !important;
	display: block !important;
	width: auto !important;
	height: 1px !important;
	background: var(--twh-pt-gold-gradient) !important;
	background-color: transparent !important; /* 蓋掉 Astra 的灰色 --ast-border-color */
	border: 0 !important;
	box-shadow: none !important;
}

/* 移除 WooCommerce / Astra / Elementor 預設的分頁圓角、底線 */
html body.single-product.twh-pt .woocommerce-tabs ul.tabs::after,
html body.single-product.twh-pt .woocommerce-tabs ul.tabs li::before,
html body.single-product.twh-pt .woocommerce-tabs ul.tabs li::after {
	display: none !important;
	content: none !important;
}

html body.single-product.twh-pt .woocommerce-tabs ul.tabs li {
	position: relative !important;
	z-index: 1 !important; /* 分頁（含蓮花）疊在線的上面 */
	flex: 1 1 0 !important;
	max-width: 758px !important;
	margin: 0 !important;
	padding: 0 0 60px !important; /* 標題與蓮花間距 20px + 蓮花 40px */
	text-align: center !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* 一般分頁：白字 60% */
html body.single-product.twh-pt .woocommerce-tabs ul.tabs li a {
	display: inline-block !important;
	padding: 0 !important;
	font-family: "Noto Serif TC", serif !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--twh-pt-white) !important;
	-webkit-text-fill-color: var(--twh-pt-white) !important;
	text-decoration: none !important;
	background: none !important;
	opacity: 0.6 !important;
	transition: opacity 0.2s ease !important;
}

html body.single-product.twh-pt .woocommerce-tabs ul.tabs li a:hover {
	opacity: 1 !important;
}

/* 目前分頁：燙金漸層字 */
html body.single-product.twh-pt .woocommerce-tabs ul.tabs li.active a {
	color: transparent !important;
	background: var(--twh-pt-gold-gradient) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	opacity: 1 !important;
}

/* 分頁數量多時（含自訂分頁）縮小字級，避免標題擠成多行 */
html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(3)) li a {
	font-size: 26px !important;
}

html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(4)) li a {
	font-size: 22px !important;
}

html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(5)) li a {
	font-size: 18px !important;
}

/* ---------- 金色蓮花（PHP 插在分頁標題內的 <img>） ---------- */
html body.single-product.twh-pt .woocommerce-tabs ul.tabs li .twh-pt-tab-icon {
	position: absolute !important;
	z-index: 2 !important;
	bottom: 0 !important;
	left: 50% !important;
	display: block !important;
	width: 50px !important;
	max-width: none !important;
	height: 40px !important;
	margin: 0 !important;
	object-fit: contain !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateX(-50%) !important;
	transition: opacity 0.2s ease !important;
	pointer-events: none !important;
}

html body.single-product.twh-pt .woocommerce-tabs ul.tabs li.active .twh-pt-tab-icon {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ---------- 內容 ---------- */
html body.single-product.twh-pt .woocommerce-tabs .woocommerce-Tabs-panel {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* 送貨及付款方式內容 */
.twh-pt-shipping {
	max-width: 1080px;
	margin: 0 auto;
	font-family: "Noto Serif TC", serif;
	font-size: 18px;
	line-height: 1.8;
	color: var(--twh-pt-white);
}

.twh-pt-shipping h2,
.twh-pt-shipping h3,
.twh-pt-shipping h4 {
	margin: 32px 0 12px;
	font-weight: 700;
	line-height: 1.4;
	color: transparent;
	background: var(--twh-pt-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.twh-pt-shipping a {
	color: var(--twh-pt-gold-b);
}

.twh-pt-shipping table {
	width: 100%;
	border-collapse: collapse;
}

.twh-pt-shipping th,
.twh-pt-shipping td {
	padding: 12px 16px;
	text-align: left;
	border: 1px solid rgba(182, 123, 25, 0.5);
}

.twh-pt-shipping th {
	color: var(--twh-pt-gold-b);
	background: rgba(182, 123, 25, 0.08);
}

/* ---------- RWD ---------- */
@media (max-width: 768px) {
	html body.single-product.twh-pt .woocommerce-tabs ul.tabs {
		margin-bottom: 24px !important;
	}

	html body.single-product.twh-pt .woocommerce-tabs ul.tabs::before {
		bottom: 10px !important;
	}

	html body.single-product.twh-pt .woocommerce-tabs ul.tabs li {
		padding-bottom: 41px !important; /* 間距 12px + 蓮花 29px */
	}

	html body.single-product.twh-pt .woocommerce-tabs ul.tabs li a,
	html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(3)) li a,
	html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(4)) li a,
	html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(5)) li a {
		font-size: 20px !important;
		white-space: nowrap !important;
	}

	/* 手機：分頁多時可左右滑動，每個分頁依文字寬度 */
	html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(3)) {
		justify-content: flex-start !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
	}

	html body.single-product.twh-pt .woocommerce-tabs ul.tabs:has(li:nth-child(3)) li {
		flex: 0 0 auto !important;
		padding-right: 24px !important;
		padding-left: 24px !important;
	}

	html body.single-product.twh-pt .woocommerce-tabs ul.tabs li .twh-pt-tab-icon {
		bottom: 0 !important;
		width: 36px !important;
		height: 29px !important;
	}

	.twh-pt-shipping {
		font-size: 16px;
	}

	.twh-pt-shipping table,
	.twh-pt-shipping tbody,
	.twh-pt-shipping tr,
	.twh-pt-shipping th,
	.twh-pt-shipping td {
		display: block;
	}
}