/* ==========================================================
 * 歡喜緣 商品分類下拉面板
 * 依 Figma node 1457:8484
 *
 * 面板（背景、圓角、陰影、上方小三角）：
 *   自動套在 Elementor 選單「下拉內容」裡、直接放短代碼的那個容器
 *   （用 :has() 判斷，不用手動加 class；也可在容器手動加 CSS 類別 twh-mega）
 *   容器在 Elementor 裡設定的背景色會被覆蓋，顏色一律由下方變數控制。
 * .twh-cm  ：短代碼輸出的內容
 *   layout="tabs"（預設）：左側分組、右側子分類（.twh-cm--tabs）
 *   layout="grid"        ：分組平鋪（Figma 原稿）
 * 首頁與其他頁面版面相同、只換顏色：改下面兩組變數即可。
 * ========================================================== */

/* ---------- 顏色：其他頁面（木墨黑底，Figma） ---------- */
.twh-mega,
.e-n-menu-content .e-con:has(> .elementor-widget-shortcode .twh-cm),
.twh-cm {
	--twh-cm-bg: #292421;                     /* 面板背景 */
	--twh-cm-text: #ffffff;                   /* 連結字色 */
	--twh-cm-sub: rgba(255, 255, 255, 0.45);  /* 分組小標、底部連結 */
	--twh-cm-hover: #d1a64f;                  /* hover / 目前分類：燙金 */
	--twh-cm-line: rgba(255, 255, 255, 0.12); /* 左右欄分隔線、手機分組外框 */
	--twh-cm-border: rgba(181, 138, 69, 0.55);/* 面板與小三角外框：黑底時和頁首同色，靠金框區隔 */
	--twh-cm-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ---------- 顏色：首頁 ---------- */
body.home .twh-mega,
body.home .e-n-menu-content .e-con:has(> .elementor-widget-shortcode .twh-cm),
body.home .twh-cm {
	--twh-cm-bg: #ffffff;
	--twh-cm-text: #292421;
	--twh-cm-sub: rgba(41, 36, 33, 0.42);
	--twh-cm-hover: #b67b19;
	--twh-cm-shadow: 0 4px 12px rgba(41, 36, 33, 0.28);
	--twh-cm-line: rgba(41, 36, 33, 0.12);
	--twh-cm-border: transparent;             /* 白底不需要外框 */
}

/* ---------- 面板（Elementor 下拉內容容器） ---------- */
.twh-mega,
.e-n-menu-content .e-con:has(> .elementor-widget-shortcode .twh-cm) {
	position: relative;
	padding: 24px 24px 22px !important;
	background: var(--twh-cm-bg) !important;
	border: 1px solid var(--twh-cm-border) !important;
	border-radius: 12px !important;
	box-shadow: var(--twh-cm-shadow) !important;
}

/* 上方小三角：旋轉 45 度的小方塊（只露出上半部），顏色與外框跟著面板 */
.twh-mega::before,
.e-n-menu-content .e-con:has(> .elementor-widget-shortcode .twh-cm)::before {
	content: "";
	position: absolute;
	top: -8px;
	left: var(--twh-cm-arrow-x, 50%); /* JS 依選單項目「商品分類」的位置計算，對準文字中央 */
	z-index: 1;
	width: 15px;
	height: 15px;
	background: var(--twh-cm-bg);
	border-top: 1px solid var(--twh-cm-border);
	border-left: 1px solid var(--twh-cm-border);
	border-radius: 2px 0 0 0;
	transform: translateX(-50%) rotate(45deg);
	pointer-events: none;
}

/* ---------- 內容 ---------- */
.twh-cm {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: "Noto Serif TC", "Noto Serif CJK TC", serif;
	text-align: left;
}

.twh-cm__grid {
	display: grid;
	grid-template-columns: repeat(var(--twh-cm-cols, 2), max-content);
	gap: 28px 24px;
}

.twh-cm__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* 分組小標：14px 灰字（也可點，連到上層分類） */
.twh-cm .twh-cm__label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--twh-cm-sub) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

/* 連結清單：20px Bold 黑字 */
.twh-cm__links {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.twh-cm__links li {
	margin: 0 !important;
	padding: 0 !important;
}

.twh-cm .twh-cm__link {
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
	white-space: nowrap;
	color: var(--twh-cm-text) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

/* 底部：查看全部商品 / 客製化服務 →（與上方欄位對齊） */
.twh-cm__footer {
	display: grid;
	grid-template-columns: repeat(var(--twh-cm-cols, 2), max-content);
	gap: 0 24px;
}

.twh-cm .twh-cm__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-cm-sub) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

/* hover 與目前所在分類：燙金 */
.twh-cm .twh-cm__label:hover,
.twh-cm .twh-cm__label:focus-visible,
.twh-cm .twh-cm__link:hover,
.twh-cm .twh-cm__link:focus-visible,
.twh-cm .twh-cm__link.is-current,
.twh-cm .twh-cm__more:hover,
.twh-cm .twh-cm__more:focus-visible {
	color: var(--twh-cm-hover) !important;
}

/* 欄寬用 max-content：兩欄間距固定，Grid 欄寬會對齊最長的分類名稱 */

/* ---------- 手機：漢堡選單內 ---------- */
@media (max-width: 768px) {
	.twh-mega,
	.e-n-menu-content .e-con:has(> .elementor-widget-shortcode .twh-cm) {
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.twh-mega::before,
	.e-n-menu-content .e-con:has(> .elementor-widget-shortcode .twh-cm)::before {
		display: none;
	}

	.twh-cm__grid,
	.twh-cm__footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}

	.twh-cm .twh-cm__link {
		font-size: 16px;
		white-space: normal;
	}
}

/* ==========================================================
 * 左右兩欄版面（layout="tabs"，預設）
 * ========================================================== */
.twh-cm--tabs {
	flex-direction: row;
	gap: 0;
	width: max-content;     /* 依最長那組的子分類自動決定寬度 */
	max-width: 92vw;
}

/* ---------- 左欄：分組 ---------- */
.twh-cm__side {
	display: flex;
	flex: 0 0 auto;
	min-width: 168px;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding-right: 24px;
	border-right: 1px solid var(--twh-cm-line);
}

.twh-cm__tabs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* 分組按鈕：重設佈景主題的 button 樣式 */
.twh-cm .twh-cm__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0 !important;
	padding: 8px 0 !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	text-align: left;
	color: var(--twh-cm-sub) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

.twh-cm .twh-cm__tab:hover,
.twh-cm .twh-cm__tab.is-active {
	color: var(--twh-cm-text) !important;
	background: transparent !important;
}

.twh-cm__tab.is-active .twh-cm__tab-caret {
	color: var(--twh-cm-hover);
}

.twh-cm .twh-cm__tab:focus-visible {
	outline: 2px solid var(--twh-cm-hover);
	outline-offset: -2px;
}

.twh-cm__tab-caret {
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.twh-cm__tab.is-active .twh-cm__tab-caret {
	opacity: 1;
	transform: translateX(2px);
}

.twh-cm__side-footer {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
}

/* ---------- 右欄：子分類 ---------- */
/* 所有面板疊在同一格：面板高度固定為最高的那組，切換時不會跳動 */
.twh-cm__panes {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 32px;
}

.twh-cm__pane {
	display: flex;
	grid-area: 1 / 1;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.twh-cm__pane.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s ease, visibility 0s;
}

.twh-cm__pane-links {
	display: grid;
	grid-template-columns: repeat(var(--twh-cm-cols, 4), max-content);
	gap: 8px 40px;
	padding: 8px 0 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.twh-cm__pane-links li {
	margin: 0 !important;
	padding: 0 !important;
}

.twh-cm .twh-cm__pane-links .twh-cm__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	white-space: nowrap;
}

/* 子分類縮圖（thumbs="1"） */
.twh-cm .twh-cm__thumb {
	flex-shrink: 0;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 50%;
}

.twh-cm__empty {
	margin: 0;
	font-size: 14px;
	color: var(--twh-cm-sub);
}

/* 查看全部○○ → */
.twh-cm .twh-cm__pane-all {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 4px;
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--twh-cm-sub) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.twh-cm .twh-cm__pane-all:hover,
.twh-cm .twh-cm__pane-all:focus-visible {
	color: var(--twh-cm-hover) !important;
}

/* ---------- 平板 / 手機：分組改成上方橫向標籤，子分類在下方 ---------- */
@media (max-width: 1024px) {
	.twh-cm--tabs {
		flex-direction: column;
		gap: 16px;
		width: 100%;
	}

	/* 攤平左欄，讓「底部連結」可以排到最下面 */
	.twh-cm--tabs .twh-cm__side {
		display: contents;
	}

	.twh-cm--tabs .twh-cm__tabs {
		flex-direction: row;
		order: 1;
		gap: 8px;
		margin: 0 -4px;
		padding: 0 4px 4px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.twh-cm--tabs .twh-cm__tabs::-webkit-scrollbar {
		display: none;
	}

	.twh-cm .twh-cm__tab {
		flex: 0 0 auto;
		width: auto;
		padding: 6px 14px !important;
		font-size: 15px !important;
		color: var(--twh-cm-text) !important;
		white-space: nowrap;
		border: 1px solid var(--twh-cm-line) !important;
		border-radius: 999px !important;
	}

	.twh-cm .twh-cm__tab.is-active {
		color: var(--twh-cm-hover) !important;
		border-color: var(--twh-cm-hover) !important;
	}

	.twh-cm__tab-caret {
		display: none;
	}

	.twh-cm--tabs .twh-cm__panes {
		order: 2;
		padding-left: 0;
	}

	.twh-cm__pane-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 16px;
	}

	.twh-cm .twh-cm__pane-links .twh-cm__link {
		font-size: 17px;
		white-space: normal;
	}

	.twh-cm--tabs .twh-cm__side-footer {
		flex-direction: row;
		flex-wrap: wrap;
		order: 3;
		gap: 8px 24px;
		padding: 16px 0 0;
		border-top: 1px solid var(--twh-cm-line);
	}
}