/* ================================================================
 * SAM Group — components.css
 * Phase 3 元件樣式：產品 Hero / 快速導覽 / 特點列表 / 規格表 /
 * 卡片網格 / 型號比較表 / 分類區塊 / CTA 列 / 方案卡 / 麵包屑。
 * 手機優先，min-width 向上疊加。
 * ================================================================ */

/* ---------- 通用區塊 ---------- */
.section {
	padding: var(--space-section) 0;
}

.section--tint {
	background: var(--c-bg);
}

.section--primary {
	background: var(--c-primary);
	color: #fff;
}

.section--primary h2,
.section--primary h3 {
	color: #fff;
}

/* 小工具類 */
.text-muted {
	color: var(--c-muted);
}

.overview-tagline {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--c-primary);
	line-height: 1.5;
	margin-bottom: 16px;
}

.maint-text {
	color: var(--c-text);
	line-height: 1.8;
}

.section-head {
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
}

.section-head h2 {
	margin-bottom: 12px;
}

.section-head .lead {
	color: var(--c-muted);
	font-size: 1.02rem;
}

.section--primary .section-head .lead {
	color: rgba(255, 255, 255, .82);
}

.section-head--left {
	text-align: left;
	margin-left: 0;
}

/* ---------- 麵包屑 ---------- */
.breadcrumbs {
	font-size: .85rem;
	color: var(--c-muted);
	padding: 14px 0 0;
}

.breadcrumbs a {
	color: var(--c-muted);
}

.breadcrumbs a:hover {
	color: var(--c-accent);
}

.breadcrumbs .sep {
	margin: 0 6px;
	opacity: .6;
}

.breadcrumbs .current {
	color: var(--c-text);
}

/* ---------- 產品/頁面 Hero ---------- */
.product-hero,
.page-hero {
	background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary) 55%, var(--c-primary-2));
	color: #fff;
	padding: 56px 0;
	position: relative;
	overflow: hidden;
}

/* 放射狀裝飾線（設計圖風格） */
.product-hero::before,
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .10), transparent 40%),
		repeating-radial-gradient(circle at 85% 15%,
			transparent 0, transparent 22px,
			rgba(255, 255, 255, .05) 22px, rgba(255, 255, 255, .05) 23px);
	pointer-events: none;
}

.product-hero .container,
.page-hero .container {
	position: relative;
	z-index: 1;
}

.hero-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 860px) {
	.hero-grid.has-image {
		grid-template-columns: 1.1fr .9fr;
	}
}

.hero-eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-light-blue);
	margin-bottom: 12px;
}

.product-hero h1,
.page-hero h1 {
	color: #fff;
	margin-bottom: 14px;
}

.hero-tagline {
	font-size: 1.15rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .92);
	margin-bottom: 18px;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-bottom: 22px;
}

.hero-meta .hm-item {
	font-size: .9rem;
	color: rgba(255, 255, 255, .85);
}

.hero-meta .hm-item strong {
	color: #fff;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-image {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: rgba(255, 255, 255, .06);
}

.hero-image img {
	width: 100%;
}

/* ---------- 快速導覽（頁內錨點） ---------- */
.quick-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--c-border);
	overflow-x: auto;
}

.quick-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}

.quick-nav a {
	display: inline-block;
	padding: 12px 14px;
	color: var(--c-text);
	font-weight: 600;
	font-size: .92rem;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.quick-nav a:hover {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

/* ---------- 兩欄內容（左標題/右內容） ---------- */
.feature-row {
	display: grid;
	gap: 16px 32px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 768px) {
	.feature-row {
		grid-template-columns: 240px 1fr;
	}
}

.feature-row .fr-label {
	color: var(--c-accent);
	font-weight: 700;
	font-size: .95rem;
}

.feature-row .fr-label .fr-num {
	display: block;
	font-size: .78rem;
	color: var(--c-muted);
	letter-spacing: .1em;
}

/* ---------- 特點列表（打勾） ---------- */
.check-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

@media (min-width: 640px) {
	.check-list {
		grid-template-columns: 1fr 1fr;
	}
}

.check-list li {
	position: relative;
	padding-left: 30px;
	color: var(--c-text);
	line-height: 1.6;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c-green);
	box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--c-green);
}

.check-list li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 9px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------- 場景標籤 ---------- */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-list .tag {
	display: inline-block;
	padding: 6px 14px;
	background: var(--c-light-blue);
	color: var(--c-primary);
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
}

/* ---------- 規格表 ---------- */
.spec-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.spec-table th,
.spec-table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
	border-bottom: 0;
}

.spec-table th {
	background: var(--c-bg);
	color: var(--c-muted);
	font-weight: 600;
	width: 38%;
}

.spec-table td {
	color: var(--c-text);
	font-weight: 500;
}

/* ---------- 卡片網格 ---------- */
.cards-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, 1fr); /* 手機預設 2 列 */
}

/* 小手機縮小間距，避免兩列過擠 */
@media (max-width: 539.98px) {
	.cards-grid {
		gap: 12px;
	}
}

/* 方案卡等長文卡片：手機/平板維持單列（桌面 ≥960 仍 3 列） */
@media (max-width: 959.98px) {
	.cards-grid-article {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 960px) {
	.cards-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.cards-grid.cards-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 產品卡 */
.product-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--t-fast), transform var(--t-fast);
	height: 100%;
}

.product-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}

.product-card .pc-thumb {
	position: relative;
	height: 176px;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow: hidden;
}

.product-card .pc-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform var(--t);
}

.product-card:hover .pc-thumb img {
	transform: scale(1.04);
}

.product-card .pc-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.product-card .pc-title {
	font-size: 1.1rem;
	margin-bottom: 6px;
}

.product-card .pc-title a {
	color: var(--c-primary);
}

.product-card .pc-title a:hover {
	color: var(--c-accent);
}

.product-card .pc-tagline {
	color: #6b7280;
	font-size: .82rem;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card .pc-coverage {
	font-size: .82rem;
	color: var(--c-accent);
	font-weight: 700;
	margin-bottom: 12px;
}

.product-card .pc-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: .9rem;
	color: var(--c-accent);
}

.product-card .pc-more:hover {
	gap: 10px;
}

.product-card .pc-thumb a {
	display: contents;
}

.product-card .pc-more {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #f1f5f9;
}

.pc-tags {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.pc-tag {
	font-size: 11px;
	padding: 2px 10px;
	border-radius: 4px;
	font-weight: 700;
	line-height: 1.4;
}

.pc-tag--blue {
	background: #dbeafe;
	color: #1e40af;
}

.pc-tag--orange {
	background: #ffedd5;
	color: #f97316;
}

.pc-tag--slate {
	background: #e2e8f0;
	color: #475569;
}

/* 空狀態（分類尚無產品） */
.empty-note {
	color: var(--c-muted);
	padding: 24px 0;
}

/* ---------- 子分類卡 ---------- */
.cat-cards {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cat-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.cat-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cat-card {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 160px;
	display: flex;
	align-items: flex-end;
	color: #fff;
	text-decoration: none;
	background: var(--c-primary);
}

.cat-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 26, 50, .05), rgba(6, 26, 50, .78));
}

.cat-card .cc-label {
	position: relative;
	z-index: 1;
	padding: 16px;
}

.cat-card .cc-label .cc-name {
	font-size: 1.1rem;
	font-weight: 700;
}

.cat-card .cc-label .cc-arrow {
	display: inline-block;
	margin-top: 4px;
	font-size: .82rem;
	opacity: .85;
}

.cat-card:hover {
	color: #fff;
}

.cat-card:hover img {
	transform: scale(1.05);
}

.cat-card img {
	transition: transform var(--t);
}

/* ---------- 型號比較表 ---------- */
.compare-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.compare-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	min-width: 560px;
}

.compare-table th,
.compare-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--c-border);
	text-align: center;
	font-size: .92rem;
}

.compare-table thead th {
	background: var(--c-primary);
	color: #fff;
}

.compare-table thead th:first-child {
	background: var(--c-primary-dark);
	text-align: left;
}

.compare-table tbody th {
	text-align: left;
	color: var(--c-muted);
	font-weight: 600;
	background: var(--c-bg);
}

.compare-table tbody tr:hover td {
	background: var(--c-light-blue);
}

.compare-table .col-name {
	font-weight: 700;
	color: var(--c-primary);
}

.compare-table .col-name a {
	color: var(--c-primary);
}

/* ---------- CTA 橫條 ---------- */
.cta-bar {
	background: linear-gradient(135deg, var(--c-accent-dark), var(--c-accent));
	color: #fff;
	border-radius: var(--radius);
	padding: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.cta-bar h3 {
	color: #fff;
	margin: 0;
}

.cta-bar p {
	margin: 4px 0 0;
	color: rgba(255, 255, 255, .9);
}

.cta-bar .cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* CTA 直列（產品頁底部多按鈕） */
.cta-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- 方案卡 ---------- */
.solution-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	transition: box-shadow var(--t-fast), transform var(--t-fast);
	height: 100%;
}

.solution-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}

.solution-card .sc-deco {
	position: absolute;
	top: 0;
	right: 0;
	width: 90px;
	height: 90px;
	background: var(--c-light-blue);
	border-bottom-left-radius: 100%;
	opacity: 0;
	z-index: 0;
	transition: opacity var(--t-fast), transform var(--t-fast);
}

.solution-card:hover .sc-deco {
	opacity: .5;
	transform: scale(1.1);
}

.solution-card .sc-link {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px;
	height: 100%;
	position: relative;
	z-index: 1;
	text-decoration: none;
	color: inherit;
}

.solution-card .sc-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-light-blue);
	color: var(--c-accent);
	font-weight: 900;
}

.solution-card .sc-body {
	flex: 1;
	min-width: 0;
}

.solution-card .sc-title {
	font-size: 1.1rem;
	margin-bottom: 8px;
	color: var(--c-primary);
}

.solution-card:hover .sc-title {
	color: var(--c-accent);
}

.solution-card .sc-summary {
	color: var(--c-muted);
	font-size: .92rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- 單文/方案內文排版（補強 .entry-content） ---------- */
.single-solution .entry-header,
.single-product .section {
	scroll-margin-top: calc(var(--header-h) + 60px);
}

/* ================================================================
 * Phase 3-B：首頁 / 關於我們 / 聯絡我們
 * ================================================================ */

/* 首頁 Hero（更高、更壯觀） */
.home-hero {
	position: relative;
	background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary) 50%, var(--c-primary-2));
	color: #fff;
	padding: 96px 0 150px;
	overflow: hidden;
}

.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .12), transparent 42%),
		repeating-radial-gradient(circle at 82% 12%,
			transparent 0, transparent 26px,
			rgba(255, 255, 255, .045) 26px, rgba(255, 255, 255, .045) 27px);
	pointer-events: none;
}

.home-hero .container {
	position: relative;
	z-index: 1;
}

.home-hero .hh-inner {
	max-width: 672px;
}

.home-hero .hero-eyebrow {
	color: var(--c-light-blue);
}

.home-hero h1 {
	color: #fff;
	font-size: clamp(2.1rem, 5.5vw, 3.5rem);
	font-weight: 900;
	line-height: 1.15;
	margin-bottom: 24px;
}

.home-hero .hh-sub {
	font-size: 1.125rem;
	color: #dbeafe;
	max-width: 36rem;
	margin-bottom: 32px;
	line-height: 1.7;
}

.home-hero .hero-cta {
	gap: 16px;
}

/* Hero 徽章（毛玻璃膠囊 + 盾牌圖標） */
.home-hero .hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #dbeafe;
	font-size: .85rem;
	font-weight: 700;
	margin-bottom: 24px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* H1 第二行：漸變色文字 */
.home-hero .h1-grad {
	background: linear-gradient(to right, #93c5fd, #ffffff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Hero 按鈕：圓角膠囊 */
.home-hero .btn {
	border-radius: 999px;
	padding: 14px 30px;
	font-size: 1.05rem;
}

.btn-hero-primary {
	background: var(--c-accent);
	color: #fff;
	box-shadow: 0 10px 30px rgba(8, 40, 90, .45);
}

.btn-hero-primary:hover {
	background: var(--c-accent-dark);
	color: #fff;
}

.btn-hero-glass {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: none;
}

.btn-hero-glass:hover {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.btn-hero-glass .icon-whatsapp {
	color: #4ade80;
}

/* 手機版 Hero 內容置中（≥1024px 桌面維持左對齊） */
@media (max-width: 1023.98px) {
	.home-hero .hh-inner {
		text-align: center;
	}

	.home-hero .hero-cta {
		flex-direction: column;
		gap: 12px;
	}

	.home-hero .hero-cta .btn {
		width: 100%;
		justify-content: center;
		padding: 14px;
		font-size: 1rem;
	}
}

/* 核心入口（系列大卡） */
.entry-cards {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.entry-cards {
		grid-template-columns: 1fr 1fr;
	}
}

.entry-card {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 220px;
	display: flex;
	align-items: flex-end;
	color: #fff;
	text-decoration: none;
	background: var(--c-primary);
}

.entry-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t);
}

.entry-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 26, 50, .1), rgba(6, 26, 50, .82));
}

.entry-card .ec-body {
	position: relative;
	z-index: 1;
	padding: 22px;
}

.entry-card .ec-name {
	font-size: 1.4rem;
	font-weight: 800;
}

.entry-card .ec-desc {
	font-size: .95rem;
	color: rgba(255, 255, 255, .85);
	margin: 6px 0 12px;
}

.entry-card .ec-go {
	font-weight: 700;
	font-size: .9rem;
	color: #fff;
}

.entry-card:hover {
	color: #fff;
}

.entry-card:hover img {
	transform: scale(1.05);
}

/* 為何選擇我們 */
.value-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.value-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 980px) {
	.value-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.value-card {
	padding: 28px 20px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.value-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.value-card .vc-icon {
	color: var(--c-primary);
	margin-bottom: 14px;
	display: inline-flex;
}

.value-card .vc-icon--green {
	color: var(--c-green);
}

.value-card .vc-title {
	font-size: 1.02rem;
	margin-bottom: 6px;
	color: var(--c-primary);
}

.value-card .vc-text {
	color: var(--c-muted);
	font-size: .9rem;
	line-height: 1.6;
}

/* 關於我們 內文 */
.about-body {
	max-width: 820px;
	margin: 0 auto;
}

.about-body .entry-content {
	margin-bottom: 0;
}

.about-stats {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, 1fr);
	margin: 28px 0;
}

@media (min-width: 700px) {
	.about-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

.about-stat {
	text-align: center;
}

.about-stat .as-num {
	font-size: 2rem;
	font-weight: 900;
	color: var(--c-accent);
}

.about-stat .as-label {
	font-size: .85rem;
	color: var(--c-muted);
}

/* 聯絡我們 雙欄 */
.contact-split {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 860px) {
	.contact-split {
		grid-template-columns: .9fr 1.1fr;
	}
}

.contact-info {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 26px;
}

.contact-info h3 {
	font-size: 1.1rem;
	margin-bottom: 14px;
}

.contact-info ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-info li {
	padding: 10px 0;
	border-bottom: 1px solid var(--c-border);
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.contact-info li:last-child {
	border-bottom: 0;
}

.contact-info .ci-label {
	min-width: 80px;
	color: var(--c-muted);
	font-weight: 600;
}

.contact-form-box {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 26px;
}

.contact-form-box h3 {
	margin-bottom: 14px;
}

/* WPForms 表單排版微調 */
.contact-form-box .wpforms-form .wpforms-field {
	padding: 8px 0;
}

.contact-form-box .wpforms-form .wpforms-field-label {
	font-weight: 600;
	color: var(--c-text);
}

.contact-form-box .wpforms-form input[type=text],
.contact-form-box .wpforms-form input[type=email],
.contact-form-box .wpforms-form input[type=tel],
.contact-form-box .wpforms-form textarea,
.contact-form-box .wpforms-form select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: .95rem;
}

.contact-form-box .wpforms-form button[type=submit],
.contact-form-box .wpforms-form .wpforms-submit {
	background: var(--c-accent);
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm);
	padding: 12px 22px;
	font-weight: 700;
	cursor: pointer;
}

.contact-form-box .wpforms-form button[type=submit]:hover {
	background: var(--c-accent-dark);
}

/* ---------- 導覽列右側：電話 + 取得報價（點擊直接撥號） ---------- */
.nav-cta {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nav-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-primary);
	text-decoration: none;
	line-height: 1.1;
}

.nav-phone:hover {
	color: var(--c-accent);
}

.nav-phone-icon {
	display: inline-flex;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: var(--c-light-blue);
	color: var(--c-accent);
	flex: none;
}

.nav-phone-text {
	display: flex;
	flex-direction: column;
}

.nav-phone-label {
	font-size: .68rem;
	color: var(--c-muted);
	font-weight: 600;
	letter-spacing: .03em;
}

.nav-phone-num {
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--c-primary);
	white-space: nowrap;
	transition: color var(--t-fast);
}

.nav-phone:hover .nav-phone-num {
	color: var(--c-accent);
}

.nav-quote {
	flex: none;
}

/* 手機側欄：CTA 直列、按鈕全寬 */
@media (max-width: 1023.98px) {
	.nav-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.nav-quote {
		width: 100%;
		justify-content: center;
	}
}

/* 中等桌面（1024–1199px）隱藏小字標籤，避免擠 */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.nav-phone-label {
		display: none;
	}
}

/* Home floating services bar (overlaps hero bottom; design Section 1.5) */
.home-features {
	position: relative;
	z-index: 20;
	margin-top: -100px;
	padding-bottom: 48px;
}

.hf-card {
	background: #fff;
	border: 1px solid #f1f5f9;
	border-radius: 16px;
	box-shadow: 0 15px 30px -5px rgba(30, 64, 175, .15);
	padding: 16px;
	display: flex;
	flex-direction: row; /* 手機也橫排三欄 */
}

.hf-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 4px;
	text-decoration: none;
	color: #1f2937;
	transition: transform .3s ease;
}

.hf-item+.hf-item {
	border-left: 1px solid #f1f5f9;
}

.hf-item:hover {
	transform: translateY(-4px);
}

.hf-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #eff6ff;
	color: #1e40af;
	margin-bottom: 6px;
}

.hf-title {
	font-size: .9rem;
	font-weight: 700;
	color: #0a2540;
	margin-bottom: 0;
	text-align: center;
	line-height: 1.3;
}

.hf-desc {
	display: none; /* 手機隱藏，窄列只顯示圖標+標題 */
}

/* 桌面 ≥768：放大並顯示描述 */
@media (min-width: 768px) {
	.hf-card {
		padding: 24px;
	}

	.hf-item {
		padding: 16px 12px;
	}

	.hf-icon {
		width: 64px;
		height: 64px;
		margin-bottom: 12px;
	}

	.hf-title {
		font-size: 1.125rem;
		margin-bottom: 4px;
	}

	.hf-desc {
		display: block;
		font-size: .875rem;
		color: #6b7280;
	}
}

/* Care service cards (static: round icon + centered text) */
.care-card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 28px 20px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.care-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.care-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-light-blue);
	color: var(--c-accent);
	margin: 0 auto 16px;
}

.care-icon--green {
	background: #e7f7ee;
	color: var(--c-green);
}

.care-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--c-primary);
	margin-bottom: 8px;
}

.care-text {
	color: var(--c-muted);
	font-size: .9rem;
	line-height: 1.6;
}

/* Inquiry form card (WPForms embed) */
.inquiry-card {
	max-width: 760px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 40px;
}

@media (max-width: 600px) {
	.inquiry-card {
		padding: 24px 18px;
	}
}

.inquiry-head {
	text-align: center;
	margin-bottom: 28px;
}

.inquiry-head h2 {
	font-size: 1.6rem;
	color: var(--c-primary);
	margin-bottom: 6px;
}

.inquiry-head .lead {
	color: var(--c-muted);
	font-size: .9rem;
}

.inquiry-card .wpforms-container {
	width: 100%;
}

.inquiry-card .wpforms-form .wpforms-field {
	margin-bottom: 16px;
	padding: 0;
}

.inquiry-card .wpforms-form .wpforms-field-label {
	font-weight: 600;
	color: var(--c-text);
	font-size: .9rem;
	margin-bottom: 6px;
	display: block;
}

.inquiry-card .wpforms-form .wpforms-field input[type=text],
.inquiry-card .wpforms-form .wpforms-field input[type=tel],
.inquiry-card .wpforms-form .wpforms-field input[type=email],
.inquiry-card .wpforms-form .wpforms-field textarea,
.inquiry-card .wpforms-form .wpforms-field select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f9fafb;
	font-size: .92rem;
	color: var(--c-text);
	transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.inquiry-card .wpforms-form .wpforms-field input:focus,
.inquiry-card .wpforms-form .wpforms-field textarea:focus,
.inquiry-card .wpforms-form .wpforms-field select:focus {
	background: #fff;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(23, 105, 201, .15);
	outline: none;
}

.inquiry-card .wpforms-form .wpforms-submit {
	width: 100%;
	background: var(--c-primary);
	color: #fff;
	border: 0;
	padding: 14px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.05rem;
	cursor: pointer;
	transition: background var(--t-fast);
}

.inquiry-card .wpforms-form .wpforms-submit:hover {
	background: var(--c-accent);
}

.inquiry-card .wpforms-form .wpforms-field select {
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 14px;
	cursor: pointer;
}

.inquiry-card .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.inquiry-card .wpforms-field-container .wpforms-field {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.inquiry-card .wpforms-field-container .wpforms-field-text,
.inquiry-card .wpforms-field-container .wpforms-field-name,
.inquiry-card .wpforms-field-container .wpforms-field-phone {
	grid-column: span 1;
}

@media (max-width: 600px) {
	.inquiry-card .wpforms-field-container {
		grid-template-columns: 1fr;
	}
}

/* ================================================================
 * Phase 3-C：關於我們頁（About）— 對應設計草稿 about 頁
 * ================================================================ */

/* ---------- Hero Banner ---------- */
.about-hero {
	position: relative;
	background: var(--c-primary);
	/* sam-dark */
	color: #fff;
	min-height: 400px;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 72px 0;
}

.about-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.about-hero-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--c-primary), #0d345e 55%, var(--c-sam-primary));
	opacity: .9;
}

.about-hero-blob1,
.about-hero-blob2 {
	position: absolute;
	border-radius: 50%;
	filter: blur(64px);
}

.about-hero-blob1 {
	top: 40px;
	right: 40px;
	width: 256px;
	height: 256px;
	background: var(--c-sam-light);
	opacity: .2;
}

.about-hero-blob2 {
	bottom: 40px;
	left: 80px;
	width: 384px;
	height: 384px;
	background: #60a5fa;
	opacity: .1;
}

.about-hero .container {
	position: relative;
	z-index: 1;
	text-align: center;
}

.about-hero-badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	margin-bottom: 24px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.about-hero h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 16px;
}

.about-hero .ah-grad {
	background: linear-gradient(to right, #93c5fd, #ffffff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.about-hero .ah-sub {
	font-size: 1.125rem;
	color: #dbeafe;
	max-width: 42rem;
	margin: 0 auto;
	line-height: 1.7;
}

/* ---------- 全局快速導覽（sticky） ---------- */
.about-quicknav {
	background: #fff;
	border-bottom: 1px solid var(--c-border);
	position: sticky;
	top: 64px;
	z-index: 40;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.about-quicknav-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 0;
}

@media (min-width: 768px) {
	.about-quicknav-inner {
		gap: 32px;
		padding: 16px 0;
	}
}

.about-quicknav-label {
	color: #9ca3af;
	font-weight: 700;
	font-size: .85rem;
	display: none;
}

.about-quicknav-label i {
	margin-right: 4px;
}

@media (min-width: 768px) {
	.about-quicknav-label {
		display: inline;
	}
}

.about-quicknav a {
	color: var(--c-primary);
	font-weight: 700;
	font-size: .85rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: color var(--t-fast);
}

@media (min-width: 768px) {
	.about-quicknav a {
		font-size: 1rem;
	}
}

.about-quicknav a:hover {
	color: var(--c-sam-primary);
}

.about-quicknav a i {
	color: var(--c-sam-light);
	font-size: .75rem;
}

/* ---------- Feature 區段（交替左右圖文） ---------- */
.about-feature {
	padding: 80px 0;
	scroll-margin-top: 140px;
}

.about-feature--tint {
	background: var(--c-bg);
}

/* sam-bg */
.about-feature--white {
	background: #fff;
}

.about-feature--bb {
	border-bottom: 1px solid #f1f5f9;
}

.af-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 768px) {
	.af-grid {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}

	/* reverse：桌面時圖左、文右 */
	.about-feature--reverse .af-text {
		order: 2;
		padding-left: 32px;
	}

	.about-feature--reverse .af-image {
		order: 1;
	}

	.about-feature:not(.about-feature--reverse) .af-text {
		padding-right: 32px;
	}
}

/* 文字欄 */
.af-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.af-text h2 {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 900;
	color: var(--c-primary);
	line-height: 1.25;
	margin: 0 0 12px;
}

.af-text h3 {
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	font-weight: 700;
	color: var(--c-sam-primary);
	margin: 0 0 24px;
}

.af-lead {
	color: #4b5563;
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 24px;
}

/* 打勾清單 */
.af-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	gap: 14px;
}

.af-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.af-check-icon {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #dbeafe;
	color: var(--c-sam-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
	font-size: .7rem;
}

.af-check-text {
	color: #374151;
	font-weight: 500;
	line-height: 1.5;
}

/* 快速導覽按鈕（小藥丸） */
.af-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.btn-quick-nav {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: #fff;
	color: var(--c-primary);
	border: 1px solid var(--c-border);
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.btn-quick-nav:hover {
	background: var(--c-sam-primary);
	color: #fff;
	border-color: var(--c-sam-primary);
	transform: translateY(-1px);
}

.btn-quick-nav i {
	font-size: .7rem;
}

/* 圖片欄 + 旋轉背景裝飾 */
.af-image {
	position: relative;
}

.af-image-deco {
	position: absolute;
	inset: -16px;
	border-radius: 24px;
	transform: rotate(3deg);
	z-index: 0;
}

.af-image-deco--blue {
	background: linear-gradient(to bottom right, #dbeafe, #fff);
}

.af-image-deco--orange {
	background: linear-gradient(to top right, #ffedd5, #fff);
	transform: rotate(-3deg);
}

.af-image-deco--green {
	background: linear-gradient(to bottom left, #dcfce7, #fff);
	transform: rotate(2deg);
}

.af-image-deco--purple {
	background: linear-gradient(to bottom right, #f3e8ff, #eff6ff, #fff);
	transform: rotate(-2deg);
}

.af-image>img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(10, 38, 71, .15);
}

/* 雙圖網格（產品系統） */
.af-image-pair {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.af-image-pair img {
	width: 100%;
	height: 100%;
	max-height: 480px;
	object-fit: cover;
	display: block;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(10, 38, 71, .12);
}

.af-image-pair img:last-child {
	margin-top: 32px;
}

/* 產品系統：4 小卡 */
.af-mini-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

.af-mini-card {
	background: #f8fafc;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	gap: 12px;
}

.af-mini-card i {
	color: var(--c-sam-light);
	font-size: 1.5rem;
	flex: none;
}

.af-mini-card h4 {
	font-weight: 700;
	font-size: .85rem;
	color: var(--c-primary);
	margin: 0;
	line-height: 1.35;
}

/* 產品亮點（橙邊框塊） */
.af-highlight {
	background: #fff7ed;
	border-left: 4px solid var(--c-sam-accent);
	padding: 16px;
	border-radius: 0 12px 12px 0;
	margin-bottom: 24px;
}

.af-highlight h4 {
	font-weight: 700;
	color: var(--c-primary);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.af-highlight h4 i {
	color: var(--c-sam-accent);
}

.af-highlight p {
	font-size: .9rem;
	color: #374151;
	line-height: 1.7;
	margin: 0;
}

.af-highlight strong {
	color: var(--c-sam-accent);
}

/* 服務對象：標籤 pill */
.af-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.af-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	color: #374151;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* 風險下降指標 */
.af-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.af-metric {
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 700;
	font-size: .85rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.af-metric--red {
	background: #fef2f2;
	color: #dc2626;
}

.af-metric--orange {
	background: #fff7ed;
	color: #ea580c;
}

.af-metric--blue {
	background: #eff6ff;
	color: var(--c-sam-primary);
}

/* 需求清單（灰底卡） */
.af-needbox {
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 24px;
}

.af-needbox h4 {
	font-weight: 700;
	color: var(--c-primary);
	margin: 0 0 14px;
}

.af-needbox ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

.af-needbox li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.af-needbox li i {
	color: var(--c-sam-light);
	font-size: 1.125rem;
}

.af-needbox li span {
	font-weight: 500;
	color: #374151;
}

/* ---------- 為何選擇我們（5 列） ---------- */
.about-why {
	background: #f8fafc;
	padding: 80px 0;
	scroll-margin-top: 140px;
}

.about-why-head {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 48px;
}

.about-why-head h2 {
	font-size: clamp(1.6rem, 3.5vw, 1.875rem);
	font-weight: 900;
	color: var(--c-primary);
	margin: 0 0 16px;
}

.about-why-head h2 span {
	color: #9ca3af;
	font-weight: 400;
	font-size: 1.25rem;
	margin-left: 4px;
}

.about-why-head p {
	color: #6b7280;
	margin: 0;
}

.about-why-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.about-why-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.about-why-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.about-why-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.why-card {
	background: #fff;
	padding: 24px 18px;
	border-radius: 16px;
	border: 1px solid #f1f5f9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.why-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.why-card .why-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #eff6ff;
	color: var(--c-sam-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 16px;
}

.why-card h3 {
	font-weight: 700;
	color: var(--c-primary);
	font-size: .9rem;
	margin: 0 0 8px;
}

.why-card p {
	font-size: .78rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.6;
}

/* ---------- CTA 收口 ---------- */
.about-cta {
	position: relative;
	padding: 64px 0;
	background: linear-gradient(to bottom right, var(--c-sam-primary), var(--c-primary));
	color: #fff;
	overflow: hidden;
}

.about-cta-deco {
	position: absolute;
	inset: 0;
	opacity: .1;
	pointer-events: none;
}

.about-cta-deco::before,
.about-cta-deco::after {
	content: "";
	position: absolute;
	border: 40px solid #fff;
	border-radius: 50%;
}

.about-cta-deco::before {
	right: -80px;
	top: -80px;
	width: 384px;
	height: 384px;
}

.about-cta-deco::after {
	left: -80px;
	bottom: -80px;
	width: 320px;
	height: 320px;
	border-width: 30px;
}

.about-cta .container {
	position: relative;
	z-index: 1;
	text-align: center;
}

.about-cta h2 {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 900;
	margin: 0 0 16px;
	color: white;
}

.about-cta p {
	color: #dbeafe;
	font-size: 1.05rem;
	max-width: 36rem;
	margin: 0 auto 32px;
	line-height: 1.7;
}

.about-cta-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

@media (min-width: 640px) {
	.about-cta-actions {
		flex-direction: row;
	}
}

.about-cta .btn-wa {
	background: var(--c-green);
	color: #fff;
	padding: 16px 32px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1.05rem;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(6, 78, 59, .3);
	transition: background var(--t-fast), transform var(--t-fast);
}

.about-cta .btn-wa:hover {
	background: #22c55e;
	color: #fff;
	transform: translateY(-3px);
}

.about-cta .btn-call {
	background: #fff;
	color: var(--c-primary);
	padding: 16px 32px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1.05rem;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
	transition: background var(--t-fast), transform var(--t-fast);
}

.about-cta .btn-call:hover {
	background: #f9fafb;
	transform: translateY(-3px);
}

.about-cta .btn-call i {
	color: var(--c-sam-primary);
}

/* ================================================================
 * Phase 3-D：聯絡我們頁（Contact）— 對應設計草稿 contact 頁
 * 表單欄位樣式直接複用 .inquiry-card 規則（容器同時掛 .contact-form-card .inquiry-card）
 * ================================================================ */

/* ---------- Hero Banner ---------- */
.contact-hero {
	position: relative;
	background: var(--c-primary);
	color: #fff;
	padding: 72px 0;
	text-align: center;
	overflow: hidden;
}

.contact-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, var(--c-primary), var(--c-sam-primary));
	opacity: .9;
}

.contact-hero-deco {
	position: absolute;
	right: -40px;
	bottom: -40px;
	color: rgba(255, 255, 255, .05);
	font-size: 12rem;
	line-height: 1;
	pointer-events: none;
}

.contact-hero .container {
	position: relative;
	z-index: 1;
	max-width: 48rem;
}

.contact-hero h1 {
	color: #fff;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	margin: 0 0 16px;
}

.contact-hero p {
	color: #dbeafe;
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.7;
	font-weight: 300;
	margin: 0;
}

/* ---------- 雙欄佈局 ---------- */
.contact-layout {
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 1024px) {
	.contact-layout {
		grid-template-columns: 1fr 2fr;
		gap: 56px;
	}
}

/* 左側：公司聯絡資料 */
.contact-meta h2 {
	font-size: clamp(1.3rem, 3vw, 1.5rem);
	font-weight: 900;
	color: var(--c-primary);
	margin: 0 0 6px;
	padding-left: 12px;
	border-left: 4px solid var(--c-sam-primary);
}

.contact-meta .cm-en {
	color: #6b7280;
	font-size: .85rem;
	font-weight: 500;
	margin: 0 0 32px;
	padding-left: 16px;
}

.cm-cards {
	display: grid;
	gap: 16px;
}

.cm-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: #f8fafc;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid #f1f5f9;
	transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.cm-card:hover {
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}

.cm-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
}

.cm-icon--phone {
	background: #dbeafe;
	color: var(--c-sam-primary);
}

.cm-icon--wa {
	background: #dcfce7;
	color: var(--c-green);
	font-size: 1.5rem;
}

.cm-icon--fax {
	background: #e2e8f0;
	color: #475569;
}

.cm-icon--mail {
	background: #ffedd5;
	color: var(--c-sam-accent);
}

.cm-card .cm-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.cm-card .cm-cap {
	font-size: .75rem;
	color: #6b7280;
	font-weight: 700;
	margin: 0 0 4px;
}

.cm-card .cm-val {
	font-size: 1.05rem;
	font-weight: 900;
	color: var(--c-primary);
	margin: 0;
	line-height: 1.3;
	word-break: break-all;
}

.cm-card .cm-val--sm {
	font-size: 1rem;
	font-weight: 700;
}

/* 右側：表單卡片（複用 .inquiry-card 的欄位樣式） */
.contact-form-card.inquiry-card {
	max-width: none;
	margin: 0;
}

.contact-form-card .cf-head {
	margin-bottom: 28px;
}

.contact-form-card .cf-head h2 {
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--c-primary);
	margin: 0 0 6px;
}

.contact-form-card .cf-head p {
	color: #6b7280;
	font-size: .9rem;
	margin: 0;
}

/* ================================================================
 * Phase 3-E：產品分類頁（電商式佈局）— 左側篩選側欄 + 右側產品網格
 * 卡片沿用 .product-card；此處僅佈局外殼 + 篩選條 + 分頁
 * ================================================================ */

.shop-layout {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 768px) {
	.shop-layout {
		grid-template-columns: 240px 1fr;
		gap: 40px;
	}
}

/* 左側：分類篩選側欄 */
.catfilter-title {
	font-size: 1.1rem;
	font-weight: 900;
	color: var(--c-primary);
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--c-sam-primary);
	display: inline-block;
}

.catfilter-box {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.catfilter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.catfilter-list a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 700;
	color: #374151;
	text-decoration: none;
	transition: background var(--t-fast), color var(--t-fast);
}

.catfilter-list a:hover {
	color: var(--c-sam-primary);
	background: #eff6ff;
}

.catfilter-list a.is-active {
	background: var(--c-sam-primary);
	color: #fff;
}

/* 右側：頂部篩選條 */
.shop-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.shop-count {
	font-size: .88rem;
	color: #6b7280;
}

.shop-count strong {
	color: var(--c-primary);
	font-weight: 900;
}

.shop-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .88rem;
	color: #4b5563;
}

.shop-sort select {
	border: 1px solid var(--c-border);
	background: #f9fafb;
	color: #374151;
	font-size: .88rem;
	font-family: inherit;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	outline: none;
	transition: border-color var(--t-fast);
}

.shop-sort select:focus {
	border-color: var(--c-sam-primary);
}

/* 產品卡「查看詳情」圓形箭頭鈕（草稿式樣） */
.product-card .pc-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.product-card .pc-more .pc-more-arrow {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #eff6ff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .7rem;
	color: var(--c-sam-primary);
	transition: background var(--t-fast), color var(--t-fast);
}

.product-card:hover .pc-more {
	color: var(--c-sam-accent);
}

.product-card:hover .pc-more-arrow {
	background: var(--c-sam-accent);
	color: #fff;
}

/* 分頁 */
.shop-pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--c-border);
	color: #374151;
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
	margin: 0 3px;
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.shop-pagination .page-numbers:hover {
	background: #f8fafc;
}

.shop-pagination .page-numbers.current {
	background: var(--c-sam-primary);
	color: #fff;
	border-color: var(--c-sam-primary);
}

.shop-pagination .page-numbers.dots {
	border: 0;
	color: #9ca3af;
}

/* ================================================================
 * Phase 3-F：產品詳情頁（PDP）— 麵包屑 + 圖廊 + 信息卡
 * ================================================================ */

/* 麵包屑 */
.pdp-crumbs {
	background: #f8fafc;
	border-bottom: 1px solid #f1f5f9;
	padding: 12px 0;
	font-size: .75rem;
	color: #6b7280;
}

.pdp-crumbs .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pdp-crumbs a {
	color: #6b7280;
	text-decoration: none;
}

.pdp-crumbs a:hover {
	color: var(--c-sam-primary);
}

.pdp-crumbs .fa-chevron-right {
	font-size: 10px;
	color: #cbd5e1;
}

.pdp-crumbs .current {
	color: var(--c-primary);
	font-weight: 700;
}

/* 產品區 */
.pdp-section {
	padding: 48px 0 64px;
	background: #fff;
}

.pdp-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 768px) {
	.pdp-grid {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}
}

/* 圖廊 */
.pdp-main-img-wrap {
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	border-radius: 24px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	overflow: hidden;
}

.pdp-main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pdp-main-img-placeholder {
	color: #cbd5e1;
	font-size: 6rem;
}

.pdp-thumbs {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

.pdp-thumb {
	width: 80px;
	height: 80px;
	border-radius: 12px;
	border: 2px solid var(--c-border);
	background: #f8fafc;
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	flex: none;
	opacity: .6;
	transition: border-color var(--t-fast), opacity var(--t-fast);
}

.pdp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pdp-thumb:hover,
.pdp-thumb.is-active {
	opacity: 1;
	border-color: var(--c-sam-primary);
}

/* 信息卡 */
.pdp-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pdp-info h1 {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 900;
	color: var(--c-primary);
	margin: 0 0 8px;
}

.pdp-tagline {
	font-size: 1.125rem;
	color: #6b7280;
	font-weight: 500;
	margin: 0 0 24px;
}

.pdp-card {
	background: rgba(239, 246, 255, .5);
	border: 1px solid #dbeafe;
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
}

.pdp-coverage {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pdp-coverage > .fa-expand {
	color: var(--c-sam-primary);
	font-size: 1.25rem;
	flex: none;
}

.pdp-card-cap {
	display: block;
	font-size: .7rem;
	color: #6b7280;
	font-weight: 700;
	margin-bottom: 2px;
}

.pdp-card-val {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: var(--c-primary);
}

.pdp-card-sep {
	height: 1px;
	background: rgba(191, 219, 254, .6);
	margin: 16px 0;
}

.pdp-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.pdp-checks li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.pdp-checks .fa-check-circle {
	color: var(--c-green);
	margin-top: 2px;
	flex: none;
}

.pdp-checks span {
	font-size: .9rem;
	font-weight: 700;
	color: #374151;
	line-height: 1.5;
}

/* 保養徽章 */
.pdp-warranty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f8fafc;
	border: 1px solid var(--c-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--c-primary);
	margin-bottom: 24px;
}

.pdp-warranty .fa-shield-alt {
	color: var(--c-sam-light);
}

/* WhatsApp CTA */
.pdp-cta-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--c-green);
	color: #fff;
	padding: 16px 28px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(37, 211, 102, .2);
	transition: background var(--t-fast), transform var(--t-fast);
}

.pdp-cta-wa:hover {
	background: var(--c-green-dark);
	color: #fff;
	transform: translateY(-2px);
}

.pdp-cta-wa .fa-whatsapp {
	font-size: 1.5rem;
}

/* 下載產品資料按鈕（藍色） */
.pdp-cta-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--c-sam-primary);
	color: #fff;
	padding: 16px 28px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(30, 64, 175, .2);
	margin-top: 12px;
	transition: background var(--t-fast), transform var(--t-fast);
}

.pdp-cta-download:hover {
	background: #163a9e;
	color: #fff;
	transform: translateY(-2px);
}

.pdp-cta-download .fa-file-pdf {
	font-size: 1.25rem;
}