@charset "UTF-8";
/* Hettich 海蒂詩 著陸頁樣式(功能初版,沿用全站主色 #E88100 / 青 #5AB3A9 / 基準 1rem=10px)
   全部 scope 在 .hettich 底下,不影響其他頁面。 */

.hettich{ overflow-x: hidden; }
.hettich section{ position: relative; }

/* 共用按鈕 */
.hettich .btn-primary,
.hettich .btn-outline{
	display: inline-block;
	font-size: 1.9rem;
	line-height: 1;
	padding: 1.6rem 3.4rem;
	border-radius: .8rem;
	text-align: center;
	cursor: pointer;
	transition: all .2s ease-in-out;
}
.hettich .btn-primary{ background: #E88100; color: #fff; border: 1px solid #E88100; }
.hettich .btn-primary:hover{ background: #cf7300; border-color: #cf7300; }
.hettich .btn-outline{ background: transparent; color: #E88100; border: 1px solid #E88100; }
.hettich .btn-outline:hover{ background: #E88100; color: #fff; }

/* Section 01｜Hero(左情境圖 65% + 右 #F3EEEA 色塊 35%;圖片右緣漸層無縫融入色塊) */
.hettich-hero2{ padding: 6rem 0 5rem; }
.hettich-hero2-card{
	display: flex;
	align-items: stretch;
	background: #F3EEEA;
	border-radius: 1.6rem;
	overflow: hidden;
	min-height: 46rem;
}
.hettich-hero2-media{
	position: relative;
	width: 65%;
	flex: 0 0 65%;
}
.hettich-hero2-media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 圖片右緣漸層 → #F3EEEA,與右側色塊無縫銜接 */
.hettich-hero2-media::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(243,238,234,0) 58%, rgba(243,238,234,0.65) 84%, #F3EEEA 100%);
	pointer-events: none;
}
.hettich-hero2-panel{
	width: 35%;
	flex: 0 0 35%;
	background: #F3EEEA;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 4.5rem;
}
.hettich-hero2-panel h1{ color: #000; font-size: 3.6rem; line-height: 1.25; margin: 0; padding-bottom: 0; }
/* 移除全站 global.css 的 h1::after 裝飾線在 Hero 的套用(僅保留自訂 .hettich-hero2-divider) */
.hettich-hero2-panel h1::after{ display: none; }
.hettich-hero2-divider{ display: block; width: 6rem; height: .3rem; background: #E88102; margin: 2rem 0 2.6rem; }
.hettich-hero2-panel p{ font-size: 1.6rem; line-height: 2; color: #5E5A5A; margin: 0 0 1.6rem; }
.hettich-hero2-panel p:last-of-type{ margin-bottom: 0; }
.hettich-hero2-panel p .accent{ color: #E88102; font-weight: 600; }
.hettich-hero2-cta{ display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 3rem; }

/* 平板:縮小色塊留白與字級 */
@media (max-width: 1024px){
	.hettich-hero2-card{ min-height: 40rem; }
	.hettich-hero2-panel{ padding: 3rem 3rem; }
	.hettich-hero2-panel h1{ font-size: 3rem; }
	.hettich-hero2-panel p{ font-size: 1.5rem; }
	.hettich-hero2-media::after{ background: linear-gradient(to right, rgba(243,238,234,0) 50%, rgba(243,238,234,0.7) 80%, #F3EEEA 100%); }
}

/* Section 02｜鉸鏈系列:選單切換 + 產品 grid
   選單沿用 products.css 的 .products-nav;產品卡沿用 fproduct.css 的 .product-box(共用元件 _product_item)。
   此處只補「選中態、面板切換、4 欄 30px grid 覆蓋」,不重刻卡片本體。 */
.hettich .products{ padding-bottom: 2rem; }
.hettich-products-cta{ text-align: center; margin-top: 4rem; }

/* 分類選單 tab(沿用 .products-nav 外觀 + hover 展開 .group-content 系列子選單,補 active 指示) */
.hettich-cat-tabs .products-level2 > a{ position: relative; cursor: pointer; }
.hettich-cat-tabs .products-level2.active > a{ color: #E88100; }
.hettich-cat-tabs .products-level2.active > a::after{
	content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: #E88100;
}

/* 面板切換:預設隱藏,active 才顯示 */
.hettich-cat-panel{ display: none; }
.hettich-cat-panel.active{ display: block; }

/* 分頁(上一頁 1 2 3 下一頁) */
.hettich-pagination{ display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.hettich-pagination:empty{ display: none; }
.hettich-pagination button{
	min-width: 4rem; height: 4rem; padding: 0 1.4rem;
	border: 1px solid #ddd; background: #fff; color: #333;
	font-size: 1.6rem; line-height: 1; border-radius: .6rem; cursor: pointer;
	transition: all .2s ease-in-out;
}
.hettich-pagination button:hover:not(:disabled){ border-color: #E88100; color: #E88100; }
.hettich-pagination button.active{ background: #E88100; border-color: #E88100; color: #fff; }
.hettich-pagination button:disabled{ opacity: .4; cursor: default; }

/* 產品 grid:覆蓋 .product-box 固定寬為 4 欄、卡片間距 ~30px、圖片滿版 */
.hettich .product-list{ border-top: 0; padding-top: 3rem; margin-top: 0; }
.hettich .product-wrapper{ display: flex; flex-wrap: wrap; margin: 0 -1.5rem; }
.hettich .product-wrapper .product-box{ width: calc(25% - 3rem); margin: 0 1.5rem 3rem; }
.hettich .product-box > a{ display: block; width: 100%; }
.hettich .product-box img{ width: 100%; height: auto; }

/* ===== 平板:2 欄 ===== */
@media (max-width: 1024px){
	.hettich .product-wrapper .product-box{ width: calc(50% - 3rem); }
}

/* ===== 手機:2 欄 + 選單可橫向捲動(手機字級/尺寸改用固定 px,因站台 ≤750px 時 1rem≈5.24px 會使 rem 值過小)===== */
@media (max-width: 767px){
	.hettich .product-wrapper .product-box{ width: calc(50% - 20px); margin: 0 10px 28px; }
	.hettich-cat-tabs{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
	.hettich-pagination button{ min-width: 38px; height: 38px; font-size: 15px; padding: 0 12px; }
}

/* Section 03｜認識 Hettich */
.hettich-about{ padding: 5rem 0; }
.hettich-about .section-title{ justify-content: center; }
.hettich-about .section-title-con{ text-align: center; }
.hettich-about-con{ max-width: 104rem; margin: 0 auto; text-align: center; }
.hettich-about-con p{ font-size: 1.8rem; line-height: 2; color: #5E5A5A; margin-bottom: 1.8rem; }
.hettich-about-con p:last-child{ margin-bottom: 0; }

/* Section 04｜為什麼選擇 Hettich(icon 卡片:icon 上、編號、標題、說明;置中、無底色) */
.hettich-why{ padding: 6rem 0; }
.hettich-why .section-title-con{ text-align: center; max-width: 78rem; margin: 0 auto; }
.hettich-why-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
	margin-top: 4.5rem;
}
.hettich-why-list li{ text-align: center; padding: 0 1.5rem; }
.why-icon{ margin-bottom: 1.4rem; }
.why-icon img{ width: 9rem; height: 9rem; object-fit: contain; display: inline-block; }
.hettich-why-list .num{
	display: block;
	font-family: Inter, sans-serif;
	font-size: 1.8rem;
	font-weight: 600;
	color: #9a9a9a;
	line-height: 1;
	letter-spacing: .05em;
	margin-bottom: 1rem;
}
.hettich-why-list h3{ font-size: 2.1rem; color: #000; margin-bottom: 1.2rem; font-weight: 600; line-height: 1.4; }
.hettich-why-list p{ font-size: 1.5rem; line-height: 1.85; color: #7a7676; }

/* Section 05｜為什麼選擇智珣(左情境圖 50% + 右標題/文案/4 項清單 50%;無漸層) */
.hettich-zhixun2{ padding: 6rem 0; }
.hettich-zhixun2-card{ display: flex; align-items: stretch; border-radius: 1.6rem; overflow: hidden; background: #fff; min-height: 46rem; }
.hettich-zhixun2-media{ width: 50%; flex: 0 0 50%; }
.hettich-zhixun2-media img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.hettich-zhixun2-content{ width: 50%; flex: 0 0 50%; padding: 4rem 4.5rem; display: flex; flex-direction: column; justify-content: center; background: #F3EEEA; }
.hettich-zhixun2-content h2{ font-size: 3rem; line-height: 1.4; color: #000; font-weight: 600; margin: 0 0 1.8rem; }
.hettich-zhixun2-content .zx-lead{ font-size: 1.6rem; line-height: 1.9; color: #7a7676; margin: 0 0 3rem; }
.hettich-zhixun2-list{ display: flex; flex-direction: column; gap: 2.4rem; }
.hettich-zhixun2-list li{ display: flex; gap: 1.6rem; align-items: center; }
.zx-icon{ flex: 0 0 auto; }
.zx-icon img{ width: 4.4rem; height: 4.4rem; object-fit: contain; }
.zx-text h3{ font-size: 2rem; color: #E88102; font-weight: 600; margin: 0 0 .6rem; line-height: 1.4; }
.zx-text p{ font-size: 1.5rem; line-height: 1.8; color: #7a7676; margin: 0; }
.zx-text p strong{ color: #4a4747; font-weight: 600; }

/* Section 06｜CTA band */
.hettich-cta-band{ padding: 7rem 0; margin-top: 5rem; background: #2b2b2b; text-align: center; }
.hettich-cta-band h2{ font-size: 3.4rem; color: #fff; margin-bottom: 1.8rem; font-weight: 500; line-height: 1.35; }
.hettich-cta-band p{ font-size: 1.8rem; color: #cfcfcf; margin-bottom: 3.2rem; line-height: 1.8; }
.hettich-cta-band-btns{ display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; }
.hettich-cta-band .btn-outline{ color: #fff; border-color: #fff; }
.hettich-cta-band .btn-outline:hover{ background: #fff; color: #2b2b2b; }

/* Section 07｜常見問題 */
.hettich-faq{ padding: 5rem 0 8rem; }
.hettich-faq .section-title{ justify-content: center; }
.hettich-faq .section-title-con{ text-align: center; }
.hettich-faq-list{ max-width: 112rem; margin: 0 auto; }
.hettich-faq-list li{
	border: 1px solid #e6e1d9;
	border-radius: 1.2rem;
	padding: 2.8rem 3.2rem;
	margin-bottom: 1.8rem;
}
.hettich-faq-list li:last-child{ margin-bottom: 0; }
.hettich-faq-list h3{
	font-size: 2.1rem;
	color: #000;
	font-weight: 500;
	margin-bottom: 1.4rem;
	padding-left: 1.8rem;
	border-left: .4rem solid #E88100;
	line-height: 1.3;
}
.hettich-faq-list .faq-a{ font-size: 1.7rem; line-height: 1.95; color: #5E5A5A; }

/* ===== 平板 ===== */
@media (max-width: 1024px){
	.hettich-why-list{ grid-template-columns: repeat(2, 1fr); gap: 4rem 3rem; }
	.hettich-zhixun2-card{ min-height: 40rem; }
	.hettich-zhixun2-content{ padding: 3rem 3rem; }
	.hettich-zhixun2-content h2{ font-size: 2.6rem; }
	.hettich-zhixun2-content .zx-lead{ margin-bottom: 2.2rem; }
	.hettich-zhixun2-list{ gap: 2rem; }
}

/* ===== 手機(≤767:此站 ≤750px 時 1rem≈5.24px,故字級/icon 一律用固定 px,確保可讀且比例正確) ===== */
@media (max-width: 767px){
	/* Section 01 Hero:上下堆疊,圖在上、色塊在下,漸層往下融入 */
	.hettich-hero2{ padding: 30px 0 24px; }
	.hettich-hero2-card{ flex-direction: column; min-height: 0; }
	.hettich-hero2-media{ width: 100%; flex: none; height: 220px; }
	.hettich-hero2-media::after{ background: linear-gradient(to bottom, rgba(243,238,234,0) 55%, #F3EEEA 100%); }
	.hettich-hero2-panel{ width: 100%; flex: none; padding: 26px 22px 30px; }
	.hettich-hero2-panel h1{ font-size: 25px; }
	.hettich-hero2-divider{ width: 56px; height: 3px; margin: 16px 0 20px; }
	.hettich-hero2-panel p{ font-size: 16px; line-height: 1.9; margin-bottom: 14px; }
	.hettich-hero2-cta{ gap: 12px; margin-top: 24px; }

	/* 共用按鈕 */
	.hettich-cta-band-btns{ gap: 12px; }
	.hettich .btn-primary,
	.hettich .btn-outline{ font-size: 16px; padding: 13px 26px; }

	/* Section 03 認識 Hettich */
	.hettich-about-con p{ font-size: 16px; }

	/* Section 04 為什麼選擇 Hettich:2 欄、icon 縮小 */
	.hettich-why-list{ grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.why-icon{ margin-bottom: 12px; }
	.why-icon img{ width: 56px; height: 56px; }
	.hettich-why-list .num{ font-size: 14px; margin-bottom: 8px; }
	.hettich-why-list h3{ font-size: 17px; }
	.hettich-why-list p{ font-size: 16px; }

	/* Section 05 為什麼選擇智珣:上下堆疊 */
	.hettich-zhixun2{ padding: 30px 0 24px; }
	.hettich-zhixun2-card{ flex-direction: column; min-height: 0; }
	.hettich-zhixun2-media{ width: 100%; flex: none; height: 230px; }
	.hettich-zhixun2-content{ width: 100%; flex: none; padding: 26px 22px 30px; }
	.hettich-zhixun2-content h2{ font-size: 24px; }
	.hettich-zhixun2-content .zx-lead{ font-size: 16px; margin-bottom: 20px; }
	.hettich-zhixun2-list{ gap: 18px; }
	.zx-icon img{ width: 40px; height: 40px; }
	.zx-text h3{ font-size: 17px; }
	.zx-text p{ font-size: 16px; }

	/* Section 06 CTA band */
	.hettich-cta-band h2{ font-size: 22px; }
	.hettich-cta-band p{ font-size: 16px; }

	/* Section 07 FAQ */
	.hettich-faq-list h3{ font-size: 17px; }
	.hettich-faq-list .faq-a{ font-size: 16px; }
}

/* ===== 桌機/平板(≥768):次標/內文改用固定 px,避免站台 rem(≤1919px 時 1rem≈0.5208vw)隨視窗縮小而過小
   業主指定:次標 H3 22px / 內文 P 16px;主標題(H2/Hero H1)維持站台預設 rem,與其他頁一致;Section 04、05 icon 放大 ===== */
@media (min-width: 768px){
	/* 次標題 H3 22px */
	.hettich-why-list h3{ font-size: 22px; }
	.hettich-zhixun2-content .zx-text h3{ font-size: 22px; }
	.hettich-faq-list h3{ font-size: 22px; }

	/* 內文 P:改用全站預設內文段落字級 1.8rem(與 .section-title p / 各內容頁一致)*/
	.hettich-hero2-panel p{ font-size: 1.8rem; }
	.hettich-about-con p{ font-size: 1.8rem; }
	.hettich-why .section-title p{ font-size: 1.8rem; }
	.hettich-why-list p{ font-size: 1.8rem; }
	.hettich-zhixun2-content .zx-lead{ font-size: 1.8rem; }
	.hettich-zhixun2-content .zx-text p{ font-size: 1.8rem; }
	.hettich-faq-list .faq-a{ font-size: 1.8rem; }

	/* icon 放大(業主:再放大 2 倍;max-width 防止在格線內溢出)*/
	.hettich-why .why-icon img{ width: 260px; height: 260px; max-width: 100%; }
	.hettich-zhixun2 .zx-icon img{ width: 152px; height: 152px; }
}

/* ===== 手機(≤767)追加:壓縮區塊留白(業主:空白處縮一點,最好剩 1/2)+ icon 放大約 2 倍 ===== */
@media (max-width: 767px){
	/* 標題與內容間的大留白減半(.section-title 站台預設 padding 6rem/12rem)*/
	.hettich .section-title{ padding-top: 16px; padding-bottom: 26px; }
	/* 各區塊上下 padding 壓縮 */
	.hettich-about{ padding: 22px 0; }
	.hettich-why{ padding: 22px 0; }
	.hettich-zhixun2{ padding: 22px 0; }
	.hettich-faq{ padding: 22px 0 32px; }
	.hettich .product-list{ padding-top: 14px; }
	.hettich-products-cta{ margin-top: 22px; }
	.hettich-why-list{ margin-top: 20px; }
	/* icon 再放大 2 倍(業主指定;max-width 防止在格線內溢出)*/
	.hettich-why .why-icon img{ width: 220px; height: 220px; max-width: 100%; }
	.hettich-zhixun2 .zx-icon img{ width: 160px; height: 160px; }
}