/* ==========================================================================
   皇御匠藝｜全站小修
   ==========================================================================
   全站樣式（色盤、字體、按鈕、連結、頁首頁尾的顏色與字級、文章列表與內頁）一律在
   Blocksy 主題設定（外觀 → 自訂）。這份檔案只放主題選項做不到的細節，每一條都註明原因。
   斷點只用 Blocksy 的兩個：999.98px（平板）與 689.98px（手機）。桌機範圍內另有 1150／1200／1280／1290px
   幾段窄桌機微調，只收間距、字級，不換版面。
   正本在本機 12_全站上稿/共用/assets/css/，不要直接在主機上改。
   ========================================================================== */

/* 1. 頁首
   ------------------------------------------------------------------------ */

/* 1-1 首頁頁首從 90% 透明深藍轉成實色深藍時，底色與陰影用 0.3 秒淡入（Blocksy 固定頁首是直接切換顏色） */
#header [data-row*="middle"] {
	transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* 1-2 窄桌機（1000～1290px）選單的字距、項目間距、Logo 後的外距隨螢幕寬度等比收窄，七個項目在桌機的每個寬度都排得下，
   而且最後一項和右邊按鈕之間至少留 24px（實測 1000px 時 31px）。分兩段，用 max() 接成一條折線：
   1150～1290px：0.6→1.5px、16→27px、30→56px（1290px 以上就是主題設定的 0.1em、27px、56px）；
   1000～1150px（10-22 RWD 檢查加）：0.3→0.6px、12→16px、20→30px，選單字級 14→15px、頁首兩顆按鈕左右內距 12→15px。
   原本 1000～1150px 排不下，由 Blocksy 把最後一兩項收進「更多」，但它只在開頁當下檢查（iPad 轉向、拉窄視窗不會收，
   選單會壓到按鈕上），收進去的「聯絡我們」用手指點也打不開第二層，所以改成都排得下。
   Blocksy 的字距與間距只能填固定值，沒有隨寬度縮放的設定 */
@media (min-width: 1000px) {
	#header [data-device="desktop"] [data-id="menu"] {
		--menu-items-spacing: clamp(12px, max(calc(2.667vw - 14.67px), calc(7.86vw - 74.4px)), 27px);
		--margin: 0 0 0 clamp(20px, max(calc(6.667vw - 46.67px), calc(18.57vw - 183.6px)), 56px) !important;
	}
	#header [data-device="desktop"] [data-id="menu"] > ul > li > a {
		--theme-letter-spacing: clamp(0.3px, max(calc(0.2vw - 1.7px), calc(0.643vw - 6.79px)), 1.5px);
	}
}
/* 字級與按鈕內距只在 1000～1150px 改，1150px 以上照主題設定（在客製器改字級，桌機一樣會跟著變） */
@media (min-width: 1000px) and (max-width: 1149.98px) {
	#header [data-device="desktop"] [data-id="menu"] > ul > li > a {
		--theme-font-size: clamp(14px, calc(0.667vw + 7.33px), 15px);
	}
	#header [data-device="desktop"] .ct-header-cta .ct-button {
		padding-inline: clamp(12px, calc(2vw - 8px), 15px);
	}
}

/* 1-3 手機選單（右側滑出）裡的兩顆按鈕：撐滿寬度、一樣大、高 48px，手指比較好點。
   Blocksy 的按鈕寬度跟著文字走，沒有「撐滿」的設定 */
#offcanvas .ct-header-cta {
	width: 100%;
}
#offcanvas .ct-header-cta .ct-button {
	width: 100%;
	min-height: 48px;
	justify-content: center;
}

/* 1-4 主選單的下拉（10-22）：有子選單的上層項目、還沒有頁面的「加盟專區」都沒有連結（functions.php 第 9 段拿掉 href；
   工程實績、品牌專欄例外，上層連到列表，這裡的規則碰不到它們）。
   桌機游標維持箭頭，上層滑過照常展開下拉；「加盟專區」連滑過的效果都關掉，看起來就不像能點。
   手機側邊選單點上層的文字會展開子選單（functions.php 9-2），游標用手指。Blocksy 的選單沒有「上層不能點」的設定 */
#header [data-id="menu"] > ul > li > .ct-menu-link:not([href]),
#header [data-id="menu"] .more-items-container > .ct-menu-link,
#offcanvas .mobile-menu .ct-menu-link:not([href]) {
	cursor: default;
}
#header [data-id="menu"] .ct-menu-link[aria-disabled="true"] {
	pointer-events: none;
}
#offcanvas .ct-sub-menu-parent > .ct-menu-link:not([href]) {
	cursor: pointer;
}

/* 1-5 平板與手機的漢堡選單按鈕：圖示 18px，按鈕本身也只有 18×18，手指不好點。
   跟頁尾社群圖示一樣，用透明的偽元素把點擊區撐到 44×44，圖示的大小與位置不變 */
#header .ct-header-trigger::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* 1-6 側邊選單展開第二層的箭頭：按鈕只有 15×15。工程實績、品牌專欄點文字會換頁，要看分類只能點這顆箭頭，
   點擊區一樣撐到 40×44（不撐到 44 寬，免得蓋到前面文字的最後一個字） */
#offcanvas .ct-toggle-dropdown-mobile::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 44px;
	transform: translate(-50%, -50%);
}
/* 手機的側邊選單是置中排列（主題設定）：有第二層的項目是「文字＋箭頭」一起置中，文字會比其他項目往左偏 12px，
   一排看起來參差不齊。箭頭改成掛在文字右邊、不佔寬度，每一項的文字都在正中間 */
@media (max-width: 689.98px) {
	#offcanvas .mobile-menu .ct-sub-menu-parent {
		position: relative;
	}
	#offcanvas .mobile-menu .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
		position: absolute;
		top: 50%;
		left: calc(100% + 10px);
		transform: translateY(-50%);
	}
}

/* 2. 頁尾（外觀 → 自訂 → 頁尾）
   桌機照原稿（首頁視覺稿 v1.1 的頁尾）：欄寬、字級、白字、連結 hover 霧金、版權列深灰底霧金字都在頁尾建構器。
   這裡補建構器做不到的：欄位標題上方的灰藍短線、品牌欄字標與口號、跟原稿對齊的幾 px、平板與手機的排法。
   ------------------------------------------------------------------------ */

/* 2-1 小工具內容（外觀 → 小工具 的三段「自訂 HTML」，class 以 ra-fw 開頭） */
/* 用 :where() 讓重設的權重低於下面各段的外距（否則「一站式漏水修繕」與字標之間的 14px 會被吃掉） */
.ct-footer .ra-fw :where(p) {
	margin: 0;
}
.ct-footer .ra-fw__wordmark {
	display: block;
	width: 110px;
	height: auto;
}
.ct-footer .ra-fw__tag {
	margin-top: 14px;
	font-size: 15px;
	letter-spacing: .1em;
	line-height: 1.75;
}
.ct-footer .ra-fw__slogan {
	color: var(--theme-palette-color-7);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.75;
}
.ct-footer .ra-fw__group + .ra-fw__group {
	margin-top: 22px;
}
/* 欄位標題：霧金字。原稿標題上方的灰藍短線第五輪拿掉（Kevin 10-21），上距 3px 保留，字的位置不變 */
.ct-footer .ra-fw__head {
	padding-top: 3px;
	color: var(--theme-palette-color-7);
	font-size: 15px;
	letter-spacing: .1em;
	line-height: 1.75;
}
/* 社群圖示（原稿的霧金 f 與 LINE，高 15.75px，點擊區撐到 26×44px）。
   兩個圖示中心只差 27px，點擊區原本 44px 寬會互相重疊（點 f 右邊一點點會開到 LINE）；寬度改 26px，各管各的一半 */
.ct-footer .ra-fw__social {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 18px;
}
.ct-footer .ra-fw__social a {
	position: relative;
	display: block;
	transition: opacity .3s ease;
}
.ct-footer .ra-fw__social a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.ct-footer .ra-fw__social a:hover {
	opacity: .75;
}
.ct-footer .ra-fw__social img {
	display: block;
	width: auto;
	height: 15.75px;
}
/* 連結名稱本身不斷行，只在斜線處換行（平板上「蜘蛛人高空作業」才不會被拆成兩行）。
   斜線前後各有一個空白，兩邊都能斷，換行時常變成下一行開頭是「/ 加盟專區」：分隔本身也不斷行，
   後面補一個零寬空白當唯一的換行點，就只會在斜線後面換行（只設不斷行的話 Chrome 整串都找不到換行點） */
.ct-footer .ra-fw__links a,
.ct-footer .ra-fw__sep {
	white-space: nowrap;
}
.ct-footer .ra-fw__sep::after {
	content: "\200B";
	white-space: normal;
}
/* 聯絡我們逐行（電話、手機、地址、服務範圍）。第五輪（Kevin：行距再大一點）項目之間多 6px，
   用外距不用行高：地址在窄螢幕換成兩行時，同一項的兩行還是靠在一起 */
.ct-footer .ra-fw__lines > span {
	display: block;
}
.ct-footer .ra-fw__lines > span + span {
	margin-top: 6px;
}

/* 2-2 桌機對齊原稿：連結與聯絡兩欄比品牌晚 6px 開始，Logo 低 4.5px（建構器的欄位只能整排對齊） */
@media (min-width: 1000px) {
	.ct-footer [data-row*="middle"] :is([data-column="widget-area-2"], [data-column="widget-area-3"]) {
		padding-top: 6px;
	}
	.ct-footer [data-row*="middle"] [data-column="logo"] {
		padding-top: 4.5px;
	}
}
/* 2-2b 窄桌機（1000～1199px）：照原稿的欄寬比例，這個寬度 Logo 會跟品牌字標貼在一起（最窄剩 7px）、
   標語斷成「…安心一路／相隨」。頁尾建構器的欄寬只分桌機、平板、手機三段，這一段在這裡另外配：
   Logo 用平板的尺寸、品牌欄左邊留一點空、標語只在逗號後換行；1200 以上照原稿 */
@media (min-width: 1000px) and (max-width: 1199.98px) {
	body[data-footer*="type-1"] .ct-footer [data-row*="middle"] > div {
		--grid-template-columns: minmax(0, 126fr) minmax(0, 158fr) minmax(0, 372fr) minmax(244px, 244fr);
	}
	body[data-footer*="type-1"] .ct-footer [data-id="logo"] .site-logo-container {
		--logo-max-height: 104px;
	}
	.ct-footer [data-row*="middle"] [data-column="widget-area-1"] {
		padding-inline: 16px;
	}
	.ct-footer .ra-fw__slogan {
		word-break: keep-all;
	}
}

/* 2-3 版權列：兩家公司名稱的連結加細底線 */
.ct-footer .ra-copy a {
	text-decoration: underline;
	text-decoration-color: rgba(200, 179, 128, .5);
	text-underline-offset: 3px;
}

/* 2-4 平板：上排 Logo 與品牌並排、在中線兩側靠攏（Logo 靠右、品牌靠左，建構器設定），下排連結與聯絡兩欄；
   兩排之間加一條淡灰藍細線，跟深藍底分得開 */
@media (max-width: 999.98px) {
	.ct-footer [data-row*="middle"] :is([data-column="widget-area-2"], [data-column="widget-area-3"]) {
		padding-top: 36px;
		border-top: 1px solid rgba(171, 182, 193, .2);
	}
}

/* 2-5 手機：一欄。Logo、品牌、社群置中；連結拿掉斜線改成自動換行的一排排；版權拆兩行 */
@media (max-width: 689.98px) {
	.ct-footer .ra-fw__wordmark {
		margin-inline: auto;
	}
	.ct-footer .ra-fw__social {
		justify-content: center;
	}
	.ct-footer [data-row*="middle"] [data-column="widget-area-3"] {
		padding-top: 0;
		border-top: 0;
	}
	.ct-footer .ra-fw__links:not(.ra-fw__lines) {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 22px;
		margin-top: 6px;
	}
	.ct-footer .ra-fw__sep {
		display: none;
	}
	.ct-footer .ra-fw__lines {
		margin-top: 6px;
	}
	.ct-footer .ra-copy__sep {
		display: none;
	}
	.ct-footer .ra-copy__a,
	.ct-footer .ra-copy__b {
		display: block;
	}
	/* 版權拆兩行後上下各留 16px（主題的版權列留白只有 8px，兩行字會顯得擠）。
	   「回到頂端」按鈕在手機往上移到 92px（主題設定，腳本 05），捲到底時停在版權列上方、不蓋到字 */
	.ct-footer [data-row*="bottom"] > .ct-container {
		padding-block: 16px;
	}
}

/* 3. 工程實績（內頁版面照品牌專欄文章頁、列表的篩選，都在主題設定；這裡補主題做不到的）
   ------------------------------------------------------------------------ */

/* 3-1 案例資訊列（functions.php 第 7 段輸出）：工程類別、現場照片張數、看更多同類實績 */
.single-project .ra-proj-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 32px;
	margin: 0 0 40px;
	padding: 16px 24px;
	border-left: 3px solid var(--theme-palette-color-7);
	background: var(--theme-palette-color-6);
}
.single-project .ra-proj-meta__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 16px;
	letter-spacing: .08em;
}
.single-project .ra-proj-meta__label {
	color: #5B6E7D;
	font-size: 13px;
	letter-spacing: .12em;
}
.single-project .ra-proj-meta__item a {
	color: var(--theme-palette-color-1);
	font-weight: 600;
	text-decoration: none;
}
.single-project .ra-proj-meta__more {
	margin-left: auto;
	color: var(--theme-palette-color-1);
	font-size: 14px;
	letter-spacing: .08em;
	text-decoration: none;
	white-space: nowrap;
}
.single-project .ra-proj-meta__more::after {
	content: "→";
	margin-left: 6px;
	color: var(--theme-palette-color-2);
}
.single-project .ra-proj-meta :is(a):hover {
	color: var(--theme-palette-color-2);
}

/* 3-2 「施工紀錄」小標：比內文的 h2 小一級，左邊一條霧金短線，跟首頁區塊標籤同一個語彙 */
.single-project .entry-content .ra-proj-heading {
	position: relative;
	margin: 0 0 24px;
	padding-left: 18px;
	color: var(--theme-palette-color-4);
	font-size: 22px;
	letter-spacing: .14em;
	line-height: 1.5;
}
.single-project .entry-content .ra-proj-heading::before {
	content: "";
	position: absolute;
	top: .3em;
	bottom: .3em;
	left: 0;
	width: 3px;
	background: var(--theme-palette-color-7);
}

/* 3-3 相簿：改成整齊的三欄網格（手機兩欄），每張 4:3、圓角 8px、滑過放大一點，點開放大瀏覽。
   WordPress 相簿區塊是 flex 排版、最後一列會撐滿，欄寬用 :not(#id) 寫死，只能用 !important 蓋 */
.single-project .wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.single-project .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--theme-palette-color-6);
}
.single-project .wp-block-gallery.has-nested-images figure.wp-block-image a {
	display: block;
	height: 100%;
	cursor: zoom-in;
}
.single-project .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.single-project .wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.04);
}
.single-project .ct-featured-image img {
	cursor: zoom-in;
}
@media (max-width: 689.98px) {
	.single-project .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.single-project .ra-proj-meta {
		padding: 14px 18px;
	}
	.single-project .ra-proj-meta__more {
		margin-left: 0;
	}
}

/* 3-4 照片放大瀏覽（ra-lightbox.js）：深藍半透明底、霧金按鈕 */
html.ra-lb-open {
	overflow: hidden;
}
.ra-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 72px;
	align-items: center;
	background: rgba(14, 23, 46, .95);
	opacity: 0;
	transition: opacity .25s ease;
}
.ra-lb.is-open {
	opacity: 1;
}
.ra-lb[hidden] {
	display: none;
}
/* 列高要寫明（minmax(0, 1fr)），照片的 max-height: 100% 才算得出來；不寫的話直式照片會超出視窗 */
.ra-lb__stage {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	padding: 64px 0;
	box-sizing: border-box;
	grid-column: 2;
}
.ra-lb__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	transition: opacity .25s ease;
}
.ra-lb__img.is-loading {
	opacity: .3;
}
.ra-lb__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
	border: 1px solid rgba(200, 179, 128, .5);
	border-radius: 50%;
	background: transparent;
	color: var(--theme-palette-color-7);
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}
.ra-lb__btn:hover,
.ra-lb__btn:focus-visible {
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-1);
}
.ra-lb__btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}
.ra-lb__prev { grid-column: 1; grid-row: 1; }
.ra-lb__next { grid-column: 3; grid-row: 1; }
.ra-lb__close {
	position: absolute;
	top: 16px;
	right: 16px;
}
.ra-lb__count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-family: "Cardo", var(--theme-font-family), serif;
	font-size: 15px;
	letter-spacing: .2em;
	text-align: center;
}
@media (max-width: 689.98px) {
	.ra-lb {
		grid-template-columns: 0 minmax(0, 1fr) 0;
	}
	.ra-lb__prev,
	.ra-lb__next {
		position: absolute;
		bottom: 8px;
		width: 44px;
		height: 44px;
	}
	.ra-lb__prev { left: 16px; }
	.ra-lb__next { right: 16px; }
	.ra-lb__stage {
		padding: 72px 12px;
	}
}

/* 3-5 工程實績側欄（Blocksy 條件側欄「工程實績側欄」） */
/* 工程類別：一行一類，細線分隔 */
.ct-sidebar .ra-side-cats {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ct-sidebar .ra-side-cats li {
	padding: 9px 0;
	border-bottom: 1px solid rgba(171, 182, 193, .35);
	color: #5B6E7D;
	font-size: 14px;
	letter-spacing: .06em;
}
.ct-sidebar .ra-side-cats li a {
	color: var(--theme-palette-color-3);
	font-size: 15px;
	text-decoration: none;
}
.ct-sidebar .ra-side-cats li a:hover {
	color: var(--theme-palette-color-2);
}
/* 預約場勘小框：深藍底、皇冠、金色按鈕（同首頁預約導引） */
.ra-side-cta {
	padding: 30px 24px 26px;
	border-radius: 0 12px 0 0;
	background: var(--theme-palette-color-1);
	color: #fff;
	text-align: center;
}
.ra-side-cta :where(p) {
	margin: 0;
}
.ra-side-cta__crown {
	display: block;
	width: 30px;
	height: auto;
	margin: 0 auto 12px;
}
.ra-side-cta__title {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.5;
}
.ra-side-cta__text {
	margin-top: 10px !important;
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	letter-spacing: .05em;
	line-height: 1.85;
	text-align: left;
}
.ra-side-cta__btn {
	width: 100%;
	margin-top: 20px;
	justify-content: center;
	--theme-button-background-initial-color: var(--theme-palette-color-2);
	--theme-button-text-initial-color: #EDEDED;
	--theme-button-background-hover-color: var(--theme-palette-color-7);
	--theme-button-text-hover-color: var(--theme-palette-color-1);
}
.ra-side-cta__tel {
	display: inline-block;
	margin-top: 12px;
	color: var(--theme-palette-color-7);
	font-size: 13px;
	letter-spacing: .1em;
	text-decoration: none;
	white-space: nowrap;   /* 電話號碼不要斷成「02-8262-」「1506」兩行 */
}
/* 平板與手機沒有側欄：同一個小框接在施工紀錄後面（functions.php 7-2b），桌機藏起來 */
.ra-proj-cta {
	display: none;
}
@media (max-width: 999.98px) {
	.single-project .ra-proj-cta {
		display: block;
		margin-top: 48px;
	}
	.ra-proj-cta .ra-side-cta {
		max-width: 520px;
		margin: 0 auto;
		padding: 36px 28px 30px;
	}
	.ra-proj-cta .ra-side-cta__text {
		text-align: center;
	}
	.ra-proj-cta .ra-side-cta__tel {
		color: var(--theme-palette-color-7);
	}
}

/* 3-6 列表頁的分類篩選（主題設定：文章類型 → 工程實績 → 篩選；品牌專欄的分頁籤也是同一套，見 3-6b）。
   平板與手機排不下一行，主題會折成兩行、最後一顆落單；改成一行左右滑，右緣淡出提示還有更多。
   左邊往外多 20px 當淡出區：沒滑動時第一顆仍對齊內容區，滑過去的按鈕在左緣淡出、不會被硬切。
   「目前分類」捲進畫面在 functions.php 第 7 段 */
@media (max-width: 999.98px) {
	.ct-dynamic-filter[data-type="buttons"] {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: -20px;
		padding-left: 20px;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent);
	}
	.ct-dynamic-filter[data-type="buttons"]::-webkit-scrollbar {
		display: none;
	}
	.ct-dynamic-filter[data-type="buttons"] a {
		flex: none;
		white-space: nowrap;
	}
	/* 最後一顆可以完整滑出淡出區 */
	.ct-dynamic-filter[data-type="buttons"]::after {
		content: "";
		flex: 0 0 30px;
	}
}

/* 3-6b 品牌專欄的分類分頁籤（10-22，functions.php 第 10 段輸出，HTML 與工程實績的篩選列相同）。
   篩選列的外觀數值在主題設定，但主題只輸出給工程實績（[data-prefix="project_archive"]）；
   品牌專欄的分類頁是 data-prefix="categories"，這裡照工程實績的數值補上：米白底、深藍字、右上角 12px 圓角，
   目前的分類與滑過時深藍底白字。之後在主題設定改工程實績篩選列的外觀，這裡要跟著改 */
[data-prefix="categories"] .ct-dynamic-filter {
	--items-horizontal-spacing: 10px;
	--container-spacing: 48px;
	--theme-font-weight: 500;
	--theme-text-transform: none;
	--theme-text-decoration: none;
	--theme-font-size: 14px;
	--theme-line-height: 1.4;
	--theme-letter-spacing: 0.1em;
}
[data-prefix="categories"] .ct-dynamic-filter[data-type="buttons"] {
	--theme-link-initial-color: var(--theme-palette-color-1);
	--theme-link-hover-color: #ffffff;
	--theme-button-background-initial-color: var(--theme-palette-color-6);
	--theme-button-background-hover-color: var(--theme-palette-color-1);
	--padding: 10px 20px;
	--theme-border-radius: 0px 12px 0px 0px;
}

/* 3-7 上下篇只有一篇時（最新或最舊的一篇），藏起中間那條分隔線（品牌專欄文章頁也適用） */
.post-navigation:has(> div:empty)::after {
	display: none;
}

/* 4. 中文排版細節（主題沒有「避免孤字」「摘要固定行數」這類設定）
   ------------------------------------------------------------------------ */

/* 4-1 段落、清單、卡片標題與摘要、標題區：最後一行不要只剩一兩個字。
   用 text-wrap: pretty（Chrome 117、Safari 26 起支援；舊瀏覽器維持原本的斷行，不會壞）。
   不用 balance：中文每個字都能斷，balance 會為了等長把詞拆開（「漏水原／因」）。
   Banner 的說明例外（第 5 段「Banner 說明一律兩行」）：先限定只在標點處換行，再用 balance 把兩句排平均 */
.entry-content :is(p, li, blockquote, figcaption, dd),
.entry-card :is(.entry-title, .entry-excerpt p),
.related-entry-title,
.hero-section :is(.page-title, .page-description),
.ct-widget :is(p, li) {
	text-wrap: pretty;
}

/* 4-2 列表卡片的摘要固定兩行、行尾省略號：每張卡片的摘要一樣高，
   第二行不會只剩「主…」一兩個字（摘要字數在主題設定，抓 110 字，夠填滿兩行） */
.entry-card .entry-excerpt p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* 4-3 工程實績的標題只在標點、空白處換行：「…磁磚空鼓，／防水改造」不會斷成「…防水／改造」。
   一整段排不下時（沒有標點的長標題、窄的側欄）照常逐字斷（overflow-wrap: anywhere）。
   只用在工程實績：標題短、標點少；品牌專欄的長標題用這招，反而會讓下一行尾巴剩一個字 */
.single-project .hero-section .page-title,
:is(.post-type-archive-project, .tax-project_category) .entry-card .entry-title,
.single-project .ct-related-posts .related-entry-title {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 5. Banner（品牌專欄、工程實績、服務流程的標題區；聯絡我們第六輪起不放標題區）
   跟首頁同一套：照片滿版，左側一塊深藍漸層面板（色彩增值，同首頁「關於皇御」「預約導引」），
   文字靠左對齊內容區，上方一行英文小標（functions.php 第 6 段，文章與案例內頁只有標題）；右半邊讓照片露出來。
   照片、整體淡遮罩、靠左、上下留白、不顯示麵包屑在主題設定（文章類型／分類的「頁面標題」）；面板與內容區寬度是主題做不到的
   ------------------------------------------------------------------------ */
.hero-section[data-type="type-2"] > figure::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(100%, calc((100% - min(var(--theme-normal-container-max-width, 1290px), 90vw)) / 2 + 700px));
	background: linear-gradient(116deg, rgba(22, 36, 71, .95) 28.8%, rgba(22, 36, 71, .8) 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
/* 文字區：從置中的窄欄改成跟內容區同寬、靠左，文字本身限寬，不會跑出深藍面板 */
.hero-section[data-type="type-2"]:has(> figure) > .entry-header {
	width: var(--theme-container-width, 90vw);
	max-width: var(--theme-normal-container-max-width, 1290px);
}
.hero-section[data-type="type-2"]:has(> figure) > .entry-header > * {
	max-width: 620px;
}
/* 英文小標：上方 3px 霧金線＋Cardo 英文（同首頁區塊標籤） */
.hero-section .ra-eyebrow {
	position: relative;
	align-self: flex-start;
	margin: 0;
	padding-top: 8px;
	color: var(--theme-palette-color-5);
	font-family: "Cardo", var(--theme-font-family), serif;
	font-size: 16px;
	letter-spacing: .24em;
	line-height: 1.6;
}
.hero-section .ra-eyebrow::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: .24em;
	height: 3px;
	background: var(--theme-palette-color-7);
}
.hero-section[data-type="type-2"] .page-title {
	letter-spacing: .12em;
}
/* Banner 說明一律兩行（Kevin 10-23：「標題區塊的文字敘述都維持在兩行，不然上面的圖片區塊會忽高忽低」）。
   原本說明有長有短（沒有、一行，到桌機三行、手機五行），桌機 Banner 從 256 到 367px 不等，
   工程實績、品牌專欄點分類頁籤時標題區原地換成該分類的說明，高度跟著跳。
   文字規範（後台改頁面摘要、分類描述、工程實績的說明時照這個寫）：兩個短句，每句不超過 15 字（含標點），
   中間用逗號或分號隔開，全文 21～30 字。
   版面：說明欄限 20em（19 個字寬）、只在標點處換行並把兩行排平均，兩句就在逗號處分成兩行，320～1920px 都一樣；
   高度固定兩行（只有一行也一樣高），超過兩行的部分不顯示。驗收：驗收/tools/hero_check.py */
.hero-section[data-type="type-2"] .entry-header .page-description {
	max-width: 20em;
	height: 3.8em;   /* 不支援 lh 單位的瀏覽器：行高 1.9 × 兩行 */
	height: 2lh;
	overflow: hidden;
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
/* 頁面與分類頁沒有說明時（例如後台新增的分類還沒寫描述），留出同樣的位置（與標題間距 20px＋兩行），Banner 一樣高；
   文章與案例內頁本來就只有標題，不留 */
:is(.page, .archive) .hero-section[data-type="type-2"] > .entry-header:not(:has(.page-description))::after {
	content: "";
	height: calc(20px + 3.8rem);
}
/* 照片焦點：Banner 很扁，照片只露出中間一條（裁切位置用 驗收/tools/sim_banner.py 模擬過）。
   工程實績（清水模立面的出挑開口）對到出挑的斜邊與模板孔；服務流程（清水模走廊）往下對到盡頭的長凳；
   品牌專欄（混凝土樓梯）用預設的正中間 */
:is(.post-type-archive-project, .tax-project_category, .single-project) .hero-section[data-type="type-2"] > figure img {
	object-position: 50% 35%;
}
body:has(.ra-process) .hero-section[data-type="type-2"] > figure img {
	object-position: 50% 60%;
}
/* 服務項目（10-23，清水模牆面與壁掛龍頭）：龍頭在照片上方約四成的位置 */
body:has(.ra-service) .hero-section[data-type="type-2"] > figure img {
	object-position: 50% 40%;
}
/* 品牌專欄（混凝土樓梯）照片左半是很暗的牆，色彩增值會把面板壓成接近黑色；這張改用一般疊加，面板維持品牌深藍 */
:is(.category, .single-post) .hero-section[data-type="type-2"] > figure::after {
	mix-blend-mode: normal;
}
/* 1280 以下（窄桌機、平板）：面板寬度跟著 620px 的文字欄走，會蓋掉七成以上的畫面、把照片主體切半；
   改成跟首頁平板版一樣蓋滿整塊，照片從右邊淡淡透出來 */
@media (max-width: 1279.98px) {
	.hero-section[data-type="type-2"] > figure::after {
		width: 100%;
	}
}
@media (max-width: 689.98px) {
	/* 手機：面板蓋滿，照片從右下透出來 */
	.hero-section[data-type="type-2"] > figure::after {
		width: 100%;
		background: linear-gradient(160deg, rgba(22, 36, 71, .95) 35%, rgba(22, 36, 71, .72) 100%);
	}
	.hero-section .ra-eyebrow {
		font-size: 14px;
	}
}

/* 6. 文章頁、工程實績案例頁的側欄：窄桌機（1000～1199px）
   側欄寬度、與內文的間距、側欄內距在主題設定（28%、88px、35px），1000px 時側欄裡只剩 182px：
   最新文章的標題一行 6 個字、要排 5 行，「預約場勘」小框的按鈕斷成兩行、電話號碼被拆開。
   這一段改成 30%、48px、24px，側欄內容寬到 222px，內文欄也多 22px；1200px 以上照主題設定
   ------------------------------------------------------------------------ */
@media (min-width: 1000px) and (max-width: 1199.98px) {
	.ct-container[data-sidebar] {
		--sidebar-width: 30%;
		--sidebar-width-no-unit: 30;
		--sidebar-gap: 48px;
		--sidebar-inner-spacing: 24px;
	}
}

/* 7. 產品介紹（WooCommerce，10-24；functions.php 第 11 段、腳本/24_產品介紹.php）
   先只做介紹、不開放購物車：商品頁原本放「加入購物車」的位置改成一行說明＋兩顆按鈕。
   LINE 詢問用霧金實心、來電洽詢用深藍細框，右上圓角同首頁預約導引的膠囊鈕；點擊區 44px
   ------------------------------------------------------------------------ */
.ra-inquiry {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 4px 0 32px;
}
.ra-inquiry__note {
	flex-basis: 100%;
	margin: 0;
	color: var(--theme-palette-color-3);
	font-size: 15px;
}
.ra-inquiry__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid var(--theme-palette-color-1);
	border-top-right-radius: 12px;
	color: var(--theme-palette-color-1);
	font-size: 15px;
	letter-spacing: .08em;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ra-inquiry__btn--line {
	border-color: var(--theme-palette-color-7);
	background: var(--theme-palette-color-7);
}
.ra-inquiry__btn:is(:hover, :focus-visible) {
	border-color: var(--theme-palette-color-1);
	background: var(--theme-palette-color-1);
	color: #fff;
}
@media (max-width: 689.98px) {
	/* 手機：兩顆按鈕平分一行，放不下時上下排 */
	.ra-inquiry__btn {
		flex: 1 1 auto;
	}
}
/* 缺貨的商品不顯示「特價」標籤：特價與缺貨兩個標籤會疊在圖片同一個角（亮白色油漆），缺貨時本來就不能買，
   原價與特價已經用價格的刪除線表示（舊官網也只顯示兩個價格） */
.product.outofstock .onsale {
	display: none;
}