/*
 * Plantjai — PDP 輕奢層 (luxe v7) — SOURCE
 * ---------------------------------------------------------------------------
 * 呢個係可讀嘅來源檔。上線嘅係 plantjai-pdp-luxe-v7.css，
 * 由 build-pdp-luxe-css.py 生成（包 @layer + 自動加 !important）。
 * 改嘢請改呢個檔，然後重新 build，唔好直接改生成檔。
 *
 * 架構：
 *   本檔係 product page 視覺嘅【唯一擁有者】。輸出包喺
 *   `@layer pj-pdp-luxe` 入面，而 style.css (3,815 個 !important) 同
 *   commerce-v8.css (415 個) 全部係 unlayered —— 按 CSS Cascade 5，
 *   layered !important 必定贏 unlayered !important，所以呢個檔永遠贏，
 *   唔使再靠特異度或載入次序。「改極都被覆蓋」由此終結。
 *
 *   只改 presentation，唔郁任何 Woo 表單結構或 name 屬性。
 *   所有色 / 字只用 --pj-* token，規則入面唔寫死 hex。
 *
 * 由 plantjai-pdp-seo-geo.php enqueue。
 */

/* Inter 嘅 woff2 一直躺喺 theme assets 度冇人用（23KB）。
   英文版用佢做內文 —— 中性 grotesque，比 Montserrat 嘅幾何感更貼輕奢。 */
@font-face {
	font-family: "PJ Inter";
	src: url("plantjai-inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PJ Inter";
	src: url("plantjai-inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* The header's earlier layer also matches the white mobile toolbar counter. */
@layer pj-store-luxe {
	body.pj-pdp-luxe .wd-toolbar .wd-tools-count {
		color: var(--pj-ink) !important;
	}
}

/* 由 build-pdp-luxe-css.py 生成 —— 唔好直接改呢個檔，改 plantjai-pdp-luxe-v7.src.css。 */
@layer pj-pdp-luxe;

@layer pj-pdp-luxe {
/* ========================================================================
   1. Token 層
   ======================================================================== */
body.single-product {
	--pj-bone: #F4F1E9 !important;
	--pj-bone-deep: #ECE8DD !important;
	--pj-ink: #14100C !important;
	--pj-ink-soft: #4A4640 !important;
	--pj-muted: #6B665E !important;
	--pj-line: rgba(20, 16, 12, .13) !important;
	--pj-line-strong: rgba(20, 16, 12, .28) !important;
	--pj-acid: #C9FF3D !important;
	/* 相片統一比例 —— 主圖同生活照全部用呢個格，改一個地方就全部跟。
	   1:1 方格：
	     · 主圖本身就係 1254×1254 正方，用 1:1 等於零裁切（之前 4:5 係
	       硬生生喺一張正方圖上下各切走 10%，白白蝕咗畫面）。
	     · 生活照來源係 0.833 (5:6) 同 0.667 (2:3)，分別裁走 17% / 33% 高。
	       object-position 偏上，保住樹冠，切走嘅主要係地板。
	   唔滿意某個裁切就改呢一個值，唔使逐條規則搵。 */
	--pj-img-ratio: 1 / 1 !important;
	/* 滾動聚光 —— 兩個掣：
	   --pj-veil   中間亮帶濃度（0 = 熄）
	   --pj-vignette 上下暗角濃度（0 = 冇暗角）
	   淨係提亮中間嘅話，喺 bone 底上只有約 6/255 色差，肉眼幾乎睇唔出。
	   加返少少暗角之後，上下同中間拉開到約 20/255，先至真係「望得出」。 */
	--pj-veil: .92 !important;
	--pj-vignette: .40 !important;
	/* 中文明體：Noto Serif TC 並【未】self-host（OMGF 只有 Noto Sans TC /
	   Noto Sans JP / IBM Plex Mono / Montserrat / Playfair Display），
	   所以一定要有夠闊嘅系統 fallback，否則 Windows／Android 會跌返落
	   預設字體，Mac 睇落靚但其他平台唔一致。
	   macOS/iOS→Songti TC；Windows→PMingLiU/MingLiU/SimSun；Android→Noto Serif CJK。 */
	--pj-serif: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif HC",
		"Noto Serif CJK TC", "Songti TC", "Songti SC", "PMingLiU", "MingLiU",
		"SimSun", serif !important;
	--pj-sans: "Noto Sans TC", "PingFang TC", -apple-system, BlinkMacSystemFont, sans-serif !important;
	--pj-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
	/* Woodmart 預設草綠 / 琥珀從來冇改過，會由未覆蓋嘅元件漏色出嚟。
	   喺 PDP 範圍內收返做品牌色。 */
	--wd-primary-color: #14100C !important;
	--wd-alternative-color: #8E8A80 !important;
}

/* Bone 底色只落喺輕奢頁 —— token 本身唔會改任何外觀，
   要有規則引用先算數，所以其餘 320 版商品頁維持原狀。 */
body.pj-pdp-luxe {
	background-color: var(--pj-bone) !important;
	color: var(--pj-ink) !important;
}

/* 內容層要透明，先至見到最外層嗰層紗 */
body.pj-pdp-luxe .site-content,
body.pj-pdp-luxe .content-layout-wrapper,
body.pj-pdp-luxe .single-product-page {
	background-color: transparent !important;
}

body.pj-pdp-luxe .main-page-wrapper {
	background-color: var(--pj-bone) !important;
}

/* ------------------------------------------------------------------
   滾動聚光 (scroll spotlight)

   做法：喺最外層鋪一層【viewport 固定】嘅白色漸變 —— 中間最白，
   上下淡出到 bone。因為 background-attachment:fixed 係跟住視窗
   而唔係跟住文件，所以人一 scroll，亮帶就永遠停喺畫面正中，
   內容行過嗰陣自然變清晰。全程 CSS，冇 scroll listener、冇 JS、
   唔會有 jank。

   只喺有精準游標嘅大螢幕開：iOS Safari 唔支援 fixed 背景
   （會當 scroll 處理），開咗反而會見到一條白帶黐喺頂部。
   ------------------------------------------------------------------ */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	body.pj-pdp-luxe .main-page-wrapper {
	/* 中間：暖白（253,252,248）—— 唔用純白，純白喺暖 bone 上會顯冷。
		   上下：bone-deep（236,232,221）做柔和暗角。 */
		background-image: linear-gradient(
			to bottom,
			rgba(236, 232, 221, var(--pj-vignette)) 0%,
			rgba(236, 232, 221, calc(var(--pj-vignette) * .45)) 14%,
			rgba(253, 252, 248, calc(var(--pj-veil) * .5)) 30%,
			rgba(253, 252, 248, var(--pj-veil)) 44%,
			rgba(253, 252, 248, var(--pj-veil)) 56%,
			rgba(253, 252, 248, calc(var(--pj-veil) * .5)) 70%,
			rgba(236, 232, 221, calc(var(--pj-vignette) * .45)) 86%,
			rgba(236, 232, 221, var(--pj-vignette)) 100%
		) !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 100% 100vh !important;
}
}

/* 有人設定咗減少動態效果就唔好玩呢啲 */
@media (prefers-reduced-motion: reduce) {
	body.pj-pdp-luxe .main-page-wrapper {
	background-image: none !important;
}
}

/* ========================================================================
   1b. 英文版字體配搭

   中文版：Noto Serif TC（明體）+ Noto Sans TC + IBM Plex Mono
   英文版：Playfair Display + Inter + IBM Plex Mono

   點解係呢個組合（三隻都已經喺 server 上，唔使加新資產）：
     · Playfair Display —— 高對比 Didone 系，放大 + 加闊字距之後
       讀落係時裝／家居品牌嗰種調子，同中文明體嘅筆畫對比啱key。
     · Inter —— 中性 grotesque，唔搶戲；Montserrat 太幾何，
       Noto Sans TC 嘅拉丁字形偏窄偏平，做英文內文唔夠靚。
     · IBM Plex Mono —— 標籤沿用，中英一致。
   ======================================================================== */
html[lang="en"] body.pj-pdp-luxe,
html[lang^="en-"] body.pj-pdp-luxe {
	--pj-serif: "Playfair Display", "Noto Serif TC", Georgia, serif !important;
	--pj-sans: "PJ Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Playfair 嘅字腔比明體大，同一字級會顯得吵 —— 收細少少、加闊字距 */
html[lang="en"] body.pj-pdp-luxe h1.pj-product-title,
html[lang^="en-"] body.pj-pdp-luxe h1.pj-product-title {
	font-size: clamp(24px, 2vw, 31px) !important;
	letter-spacing: .02em !important;
	line-height: 1.34 !important;
}

html[lang="en"] body.pj-pdp-luxe .summary p.price,
html[lang^="en-"] body.pj-pdp-luxe .summary p.price {
	letter-spacing: .05em !important;
}

/* ========================================================================
   2. 標題 / 價錢 —— 輕奢最大槓桿：明體 + 字級 + 留白
   ======================================================================== */
/* h1 入面有個 span.pj-product-title__zh 帶住自己嘅字體字級，
   之前淨係改 h1，手機就變返 30px 黑體粗體 —— 要一齊改。 */
body.pj-pdp-luxe h1.pj-product-title > span,
body.pj-pdp-luxe .pj-product-title__zh {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

body.pj-pdp-luxe h1.pj-product-title {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(26px, 2.2vw, 34px) !important;
	line-height: 1.42 !important;
	letter-spacing: .05em !important;
	color: var(--pj-ink) !important;
	margin: 0 0 6px !important;
	text-wrap: balance !important;
}


/* 價錢用 Inter（拉丁 + 數字專用）—— 同明體標題拉開層次：
   名字係主角用明體，價錢係資料用中性 grotesque，數字亦清楚好多。 */
body.pj-pdp-luxe .summary p.price,
body.pj-pdp-luxe .summary p.pj-price-resolved {
	font-family: "PJ Inter", var(--pj-sans) !important;
	font-weight: 400 !important;
	font-size: clamp(28px, 2.2vw, 30px) !important;
	line-height: 1.3 !important;
	letter-spacing: .07em !important;
	color: var(--pj-ink) !important;
	font-variant-numeric: lining-nums tabular-nums !important;
	margin: 0 0 4px !important;
}

/* 價錢入面嘅 .amount 本身帶住 IBM Plex Mono 26px（仲大過個 <p>），
   所以標題改咗明體之後，價錢仍然係一串闊身機械數字。
   由 <p> 到 bdi 逐層拉返落嚟。 */
body.pj-pdp-luxe .summary p.price .amount,
body.pj-pdp-luxe .summary p.price .woocommerce-Price-amount,
body.pj-pdp-luxe .summary p.price .price,
body.pj-pdp-luxe .summary p.price .pj-price-from,
body.pj-pdp-luxe .summary p.price bdi,
body.pj-pdp-luxe .summary p.price ins,
body.pj-pdp-luxe .summary p.price del {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	text-decoration: none !important;
	background: none !important;
}

body.pj-pdp-luxe .summary p.price .woocommerce-Price-currencySymbol {
	font-family: inherit !important;
	font-size: .78em !important;
	letter-spacing: .02em !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .woocommerce-product-details__short-description {
	margin: 0 0 30px !important;
}

body.pj-pdp-luxe .woocommerce-product-details__short-description p {
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 14.5px !important;
	line-height: 1.85 !important;
	letter-spacing: .025em !important;
	word-spacing: .04em !important;
	color: var(--pj-ink-soft) !important;
}

body.pj-pdp-luxe .woocommerce-product-details__short-description strong {
	font-weight: 500 !important;
	color: var(--pj-ink) !important;
}

/* ========================================================================
   3. 變體選擇 —— 拆走黑色藥丸，改文字列
   ======================================================================== */
body.pj-pdp-luxe .variations_form table.variations {
	margin: 0 0 26px !important;
	border: 0 !important;
}

body.pj-pdp-luxe .variations_form table.variations th.label label {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .variations_form .pj-var-options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

body.pj-pdp-luxe .variations_form .pj-var-opt {
	min-height: 44px !important;
	/* 觸控目標 ≥44px */
	padding: 11px 18px !important;
	border: 1px solid var(--pj-line) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	transition: border-color .22s ease, color .22s ease !important;
}

body.pj-pdp-luxe .variations_form .pj-var-opt {
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 14px !important;
	letter-spacing: .05em !important;
	color: var(--pj-ink-soft) !important;
}

body.pj-pdp-luxe .variations_form .pj-var-opt:hover {
	border-color: var(--pj-line-strong) !important;
}

body.pj-pdp-luxe .variations_form .pj-var-opt.is-selected {
	border-color: var(--pj-ink) !important;
	background-color: transparent !important;
	color: var(--pj-ink) !important;
}

/* 單一高度嘅商品冇得揀，「清除」只係雜訊。
   body.pj-single-variant 由 plantjai-pdp-seo-geo.php 加。 */
body.pj-pdp-luxe.pj-single-variant .wd-reset-var,
body.pj-pdp-luxe.pj-single-variant .reset_variations {
	display: none !important;
}

body.pj-pdp-luxe .woocommerce-variation-price {
	display: none !important;
	/* 同上面 .price 重複 */ !important;
}

body.pj-pdp-luxe .woocommerce-variation-availability {
	margin: 0 0 18px !important;
}

body.pj-pdp-luxe .woocommerce-variation-availability .stock {
	font-family: var(--pj-sans) !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	letter-spacing: .06em !important;
	color: var(--pj-ink-soft) !important;
}

/* ========================================================================
   4. 數量 + CTA
   ======================================================================== */
body.pj-pdp-luxe .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 14px !important;
}

body.pj-pdp-luxe .woocommerce-variation-add-to-cart .quantity {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--pj-line) !important;
	background: transparent !important;
}

body.pj-pdp-luxe .quantity input.minus,
body.pj-pdp-luxe .quantity input.plus,
body.pj-pdp-luxe .quantity input.qty {
	min-width: 26px !important;
	height: 44px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--pj-mono) !important;
	font-size: 13px !important;
	color: var(--pj-ink-soft) !important;
}

body.pj-pdp-luxe .quantity input.qty {
	text-align: center !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .single_add_to_cart_button {
	flex: 1 1 200px !important;
	min-height: 52px !important;
	padding: 16px 20px !important;
	border: 1px solid var(--pj-ink) !important;
	border-radius: 0 !important;
	background-color: var(--pj-ink) !important;
	color: var(--pj-bone) !important;
	font-family: var(--pj-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: .2em !important;
	box-shadow: none !important;
	transition: background-color .25s ease, color .25s ease !important;
}

body.pj-pdp-luxe .single_add_to_cart_button:hover,
body.pj-pdp-luxe .single_add_to_cart_button:focus-visible {
	background-color: transparent !important;
	color: var(--pj-ink) !important;
}

/* 鍵盤 focus 要睇得見（WCAG）——用 ink outline，唔用 acid 邊 */
body.pj-pdp-luxe .single_add_to_cart_button:focus-visible,
body.pj-pdp-luxe .pj-var-opt:focus-visible,
body.pj-pdp-luxe .pj-wa-link:focus-visible {
	outline: 2px solid var(--pj-ink) !important;
	outline-offset: 2px !important;
}

body.pj-pdp-luxe .pj-wa-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 1 1 100% !important;
	min-height: 48px !important;
	padding: 14px 20px !important;
	border: 1px solid var(--pj-line) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--pj-ink) !important;
	font-family: var(--pj-sans) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: .18em !important;
	text-decoration: none !important;
	transition: border-color .25s ease !important;
}

body.pj-pdp-luxe .pj-wa-link:hover {
	border-color: var(--pj-ink) !important;
}

/* Stripe 快速支付：唔隱藏（係真實付款方式），但收細、加髮絲線分隔，
   唔再係手機上最搶眼嘅色塊。按鈕本身喺 iframe 內，改唔到佢個綠。 */
body.pj-pdp-luxe #wc-stripe-express-checkout-element {
	max-width: 320px !important;
	margin: 18px 0 4px !important;
	padding: 16px 0 0 !important;
	border-top: 1px solid var(--pj-line) !important;
}

/* Woo 喺 Stripe 元件前後留咗空 wrapper，會撐出大片空白 */
body.pj-pdp-luxe .wc-stripe-express-checkout__separator,
body.pj-pdp-luxe #wc-stripe-express-checkout-element:empty {
	display: none !important;
}

body.pj-pdp-luxe #wc-stripe-express-checkout-element::before {
	content: attr(data-pj-label);
	display: block !important;
	margin-bottom: 12px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

/* ========================================================================
   5. 規格列 —— 髮絲線 label / value，拆走底色同下劃線
   ======================================================================== */
body.pj-premium-pdp .pj-premium-pdp-context {
	margin: 32px 0 0 !important;
}

body.pj-premium-pdp .pj-premium-pdp-context__grid {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--pj-line) !important;
	background: transparent !important;
}

body.pj-premium-pdp .pj-premium-pdp-context__item {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 20px !important;
	margin: 0 !important;
	padding: 13px 0 !important;
	border-bottom: 1px solid var(--pj-line) !important;
	background: transparent !important;
}

/* Woo 主價已經喺摘要頂部顯示；規格表唔再重複同一個價錢。 */
body.pj-premium-pdp .pj-premium-pdp-context__item--price {
	display: none !important;
}

body.pj-premium-pdp .pj-premium-pdp-context__item dt {
	flex: 0 0 auto !important;
	margin: 0 !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.pj-premium-pdp .pj-premium-pdp-context__item dd {
	margin: 0 !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 13.5px !important;
	line-height: 1.7 !important;
	letter-spacing: .04em !important;
	text-align: right !important;
	color: var(--pj-ink-soft) !important;
}

body.pj-premium-pdp .pj-premium-pdp-context__item dd a {
	color: var(--pj-ink) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--pj-line) !important;
}

body.pj-premium-pdp .pj-premium-pdp-context__item dd a:hover {
	border-bottom-color: var(--pj-ink) !important;
}

/* dd 內容有時係一個 block <p class="stock"> —— 拉返做 inline 先唔會斷行 */
body.pj-premium-pdp .pj-premium-pdp-context__item dd p {
	display: inline !important;
	margin: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

/* 規格列入面嘅金額要跟返 PDP 嘅字，唔好用 mono/bold */
body.pj-premium-pdp .pj-premium-pdp-context__item dd .amount,
body.pj-premium-pdp .pj-premium-pdp-context__item dd .woocommerce-Price-amount {
	font-family: var(--pj-serif) !important;
	font-size: 13.5px !important;
	font-weight: 300 !important;
	letter-spacing: .04em !important;
	color: var(--pj-ink-soft) !important;
}

/* Acid 由「CTA 大色塊」降級做唯一嘅微訊號：有貨圓點 */
body.pj-premium-pdp .pj-premium-pdp-context__item--availability dd::before {
	content: "";
	display: inline-block !important;
	width: 5px !important;
	height: 5px !important;
	margin-right: 8px !important;
	border-radius: 50% !important;
	background-color: var(--pj-acid) !important;
	vertical-align: middle !important;
}

/* ========================================================================
   6. CARE SPEC
   ======================================================================== */
body.pj-pdp-luxe .pj-care-spec {
	margin: 40px 0 0 !important;
	padding: 30px 0 0 !important;
	border-top: 1px solid var(--pj-line) !important;
	background: transparent !important;
}

body.pj-pdp-luxe .pj-care-spec__title {
	margin: 0 0 20px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .pj-care-spec__kicker {
	letter-spacing: .22em !important;
}

body.pj-pdp-luxe .pj-care-spec__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
	gap: 1px !important;
	margin: 0 !important;
	border: 1px solid var(--pj-line) !important;
	background-color: var(--pj-line) !important;
}

body.pj-pdp-luxe .pj-care-spec__row {
	display: block !important;
	margin: 0 !important;
	padding: 22px 20px 24px !important;
	border: 0 !important;
	background-color: var(--pj-bone) !important;
}

body.pj-pdp-luxe .pj-care-spec__row dt {
	margin: 0 0 12px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .pj-care-spec__icon {
	display: block !important;
	margin-bottom: 6px !important;
	font-family: var(--pj-mono) !important;
	font-size: 9px !important;
	letter-spacing: .24em !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .pj-care-spec__row dd {
	margin: 0 !important;
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	letter-spacing: .05em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .pj-care-spec__note {
	margin: 18px 0 0 !important;
	font-size: 12px !important;
	line-height: 1.9 !important;
	letter-spacing: .04em !important;
	color: var(--pj-muted) !important;
}

/* ========================================================================
   7. 相簿 —— 拆走外框，主圖放大，縮圖統一比例
   ======================================================================== */

/* 相片行返多啲比重（原本 588 / 444），資訊欄 sticky 跟住捲 —— 
   即係 Zara Home 嗰種「左圖流 + 右資訊」嘅讀法，但唔改任何 markup。 */
@media (min-width: 1025px) {
	body.pj-pdp-luxe .product-image-summary-inner {
	grid-template-columns: minmax(0, 1.62fr) minmax(360px, 420px) !important;
	align-items: start !important;
}

	body.pj-pdp-luxe .summary-inner {
	position: sticky !important;
	top: 24px !important;
}
}

/* Areca's complete image story is shorter than the detail column. Keep it in
   view through the buying decisions on tall desktop screens, not on mobile or
   short desktop windows where a sticky 975px image stack would be clipped. */
@media (min-width: 1025px) and (min-height: 1050px) {
	body.postid-21188.pj-pdp-luxe .product-images {
	position: sticky !important;
	top: calc(24px + var(--wp-admin--admin-bar--height, 0px)) !important;
	align-self: start !important;
}

	body.postid-21188.pj-pdp-luxe .summary-inner {
	position: static !important;
}
}

body.pj-pdp-luxe .woocommerce-product-gallery {
	background-color: var(--pj-bone-deep) !important;
}

body.pj-pdp-luxe .woocommerce-product-gallery__image img {
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: transform .35s ease !important;
}

body.pj-pdp-luxe .woocommerce-product-gallery__image > a {
	display: block !important;
	overflow: hidden !important;
	cursor: zoom-in !important;
}

@media (hover: hover) and (pointer: fine) {
	body.pj-pdp-luxe .woocommerce-product-gallery__image:hover img {
	transform: scale(1.02) !important;
}
}

/* ========================================================================
   7b. WooCommerce 成功提示 —— 紙感底、acid 成功線、清晰次要 CTA
   ======================================================================== */
body.pj-pdp-luxe .woocommerce-message {
	margin: 0 0 28px !important;
	padding: 17px 20px !important;
	border: 1px solid var(--pj-line) !important;
	border-left: 4px solid var(--pj-acid) !important;
	border-radius: 0 !important;
	background-color: var(--pj-bone) !important;
	color: var(--pj-ink-soft) !important;
	font-family: var(--pj-sans) !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
	letter-spacing: .03em !important;
	box-shadow: none !important;
}

body.pj-pdp-luxe .woocommerce-message::before {
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .woocommerce-message .button,
body.pj-pdp-luxe .woocommerce-message .wc-forward {
	float: none !important;
	display: flex !important;
	width: max-content !important;
	max-width: 100% !important;
	min-height: 38px !important;
	margin: 12px 0 0 auto !important;
	padding: 9px 14px !important;
	border: 1px solid var(--pj-ink) !important;
	border-radius: 0 !important;
	background: var(--pj-ink) !important;
	color: var(--pj-bone) !important;
	font-size: 11px !important;
	line-height: 1.5 !important;
	letter-spacing: .12em !important;
}

body.pj-pdp-luxe .woocommerce-message .button:hover,
body.pj-pdp-luxe .woocommerce-message .wc-forward:hover,
body.pj-pdp-luxe .woocommerce-message .button:focus-visible,
body.pj-pdp-luxe .woocommerce-message .wc-forward:focus-visible {
	background: transparent !important;
	color: var(--pj-ink) !important;
}

/* 縮圖：統一 1:1、加大、拆走圓角 */
body.pj-pdp-luxe .wd-gallery-thumb .wd-carousel-item {
	min-width: 0 !important;
}

body.pj-pdp-luxe .wd-gallery-thumb .wd-carousel-item img,
body.pj-pdp-luxe .thumbnails img {
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	background-color: var(--pj-bone-deep) !important;
}

/* Woodmart 用 acid 色做 active thumb 邊框 —— 收返做 ink 細線 */
body.pj-pdp-luxe .wd-gallery-thumb .wd-active img,
body.pj-pdp-luxe .flex-control-thumbs .flex-active img {
	outline: 1px solid var(--pj-ink) !important;
	outline-offset: -1px !important;
}

/* ========================================================================
   8. 長文區 / FAQ / 門市 / 相關商品
   ======================================================================== */
body.pj-pdp-luxe .wd-single-content h2,
body.pj-pdp-luxe .related.products > h2,
body.pj-pdp-luxe .up-sells > h2 {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(20px, 2vw, 26px) !important;
	line-height: 1.5 !important;
	letter-spacing: .08em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .wd-single-content p,
body.pj-pdp-luxe .woocommerce-Tabs-panel p {
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 14.5px !important;
	line-height: 2.1 !important;
	letter-spacing: .03em !important;
	color: var(--pj-ink-soft) !important;
}

/* ========================================================================
   8b. 可見 FAQ —— 編輯式兩欄

   可見內容同 FAQPage schema 由 plantjai-pdp-seo-geo.php 同一份資料生成，
   所以兩邊永遠一致。呢度只做視覺：桌面問左答右對齊一條格線，
   手機摺返單欄；裝飾得一個 mono 編號，唔再加第二樣。
   ======================================================================== */
body.pj-pdp-luxe .pj-pdp-faq {
	margin: 0 !important;
	padding: clamp(56px, 7vw, 104px) 0 !important;
	border-top: 1px solid var(--pj-line) !important;
}

body.pj-pdp-luxe .pj-pdp-faq__title {
	margin: 0 0 10px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

/* FAQ 主標題（由 plantjai-pdp-seo-geo.php 渲染） */
body.pj-pdp-luxe .pj-pdp-faq__heading {
	margin: 0 !important;
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(22px, 2.4vw, 30px) !important;
	line-height: 1.5 !important;
	letter-spacing: .08em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .pj-pdp-faq__list {
	margin: 32px 0 0 !important;
	border-top: 1px solid var(--pj-line) !important;
	counter-reset: pj-faq !important;
}

body.pj-pdp-luxe .pj-pdp-faq__item {
	padding: 40px 0 !important;
	border-bottom: 1px solid var(--pj-line) !important;
}

/* 最後一條唔要底線 —— 落腳位交返畀 section 自己嘅 padding */
body.pj-pdp-luxe .pj-pdp-faq__item:last-child {
	border-bottom: 0 !important;
}

body.pj-pdp-luxe .pj-pdp-faq__q {
	counter-increment: pj-faq !important;
	margin: 0 0 12px !important;
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(16px, 1.6vw, 19px) !important;
	line-height: 1.65 !important;
	letter-spacing: .06em !important;
	color: var(--pj-ink) !important;
}

/* 唯一嘅裝飾：低調嘅 mono 編號 01 / 02 / … */
body.pj-pdp-luxe .pj-pdp-faq__q::before {
	content: counter(pj-faq, decimal-leading-zero);
	display: block !important;
	margin: 0 0 10px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .2em !important;
	color: var(--pj-muted) !important;
}

/* 答案入面有完整 URL（例如 ASPCA 毒性來源），窄螢幕唔斷字就會撐爆版面 */
body.pj-pdp-luxe .pj-pdp-faq__a {
	margin: 0 !important;
	max-width: 62ch !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: clamp(14px, 1.3vw, 15px) !important;
	line-height: 2.05 !important;
	letter-spacing: .03em !important;
	color: var(--pj-ink-soft) !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

/* 桌面：問喺窄左欄、答喺闊右欄，兩欄頂部對齊同一條基線 */
@media (min-width: 900px) {
	body.pj-pdp-luxe .pj-pdp-faq__item {
	display: grid !important;
	grid-template-columns: minmax(0, 7fr) minmax(0, 11fr) !important;
	column-gap: 56px !important;
	align-items: start !important;
}

	/* 標題區跟返左欄闊度（7 / 18 減去 gap），成段睇落係同一個格 */
	body.pj-pdp-luxe .pj-pdp-faq__title,
	body.pj-pdp-luxe .pj-pdp-faq__heading {
	max-width: calc((100% - 56px) * 7 / 18) !important;
}

	body.pj-pdp-luxe .pj-pdp-faq__q {
	margin-bottom: 0 !important;
}

	body.pj-pdp-luxe .pj-pdp-faq__a {
	max-width: 58ch !important;
}
}

/* 手機：單欄，加大行距同上下留白 */
@media (max-width: 899px) {
	body.pj-pdp-luxe .pj-pdp-faq__item {
	padding: 30px 0 !important;
}

	body.pj-pdp-luxe .pj-pdp-faq__a {
	max-width: 100% !important;
	line-height: 1.98 !important;
}
}

@media (max-width: 480px) {
	body.pj-pdp-luxe .pj-pdp-faq__item {
	padding: 26px 0 !important;
}

	body.pj-pdp-luxe .pj-pdp-faq__q {
	letter-spacing: .04em !important;
}

	body.pj-pdp-luxe .pj-pdp-faq__a {
	line-height: 1.95 !important;
}
}

body.pj-pdp-luxe .related.products .product-title,
body.pj-pdp-luxe .related.products .wd-entities-title {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: 15px !important;
	letter-spacing: .05em !important;
}

body.pj-pdp-luxe .related.products .price {
	font-family: var(--pj-mono) !important;
	font-size: 11px !important;
	letter-spacing: .1em !important;
	color: var(--pj-muted) !important;
}

/* ========================================================================
   9. 手機
   ======================================================================== */
@media (max-width: 768px) {
	body.pj-pdp-luxe h1.pj-product-title {
	font-size: 25px !important;
	line-height: 1.45 !important;
}

	body.pj-pdp-luxe .summary p.price,
	body.pj-pdp-luxe .summary p.pj-price-resolved {
	font-size: 28px !important;
}

	body.pj-pdp-luxe .pj-care-spec__grid {
	grid-template-columns: repeat(2, 1fr) !important;
}

	body.pj-pdp-luxe #wc-stripe-express-checkout-element {
	max-width: none !important;
}

	/* 手機 sticky 購買條 —— 收返同 PDP 一致嘅 bone / ink */
	body.pj-pdp-luxe .wd-sticky-btn,
	body.pj-pdp-luxe .pj-premium-pdp-sticky {
	background-color: rgba(244, 241, 233, .94) !important;
	backdrop-filter: blur(14px) !important;
	border-top: 1px solid var(--pj-line) !important;
}

	body.pj-pdp-luxe .pj-premium-pdp-sticky .single_add_to_cart_button {
	min-height: 46px !important;
}
}

@media (prefers-reduced-motion: reduce) {
	body.pj-pdp-luxe * {
	transition-duration: .01ms !important;
	animation-duration: .01ms !important;
}
}

/* ========================================================================
   10. 版面闊度 —— PDP 專用，唔影響其他頁
   ======================================================================== */

/* 站方 main 本身鎖死 max-width:1220px。PDP 放寬，留固定 gutter。 */
body.pj-pdp-luxe .content-layout-wrapper {
	max-width: 1560px !important;
}

/*
 * Gutter 只可以落喺【內容區】嘅 .container。
 *
 * 呢條規則本來寫成 `body.pj-pdp-luxe .container`，但 .container 係
 * Woodmart 全站共用 class：頁首每個下拉選單 (.wd-dropdown-menu > .container)
 * 同頁尾 (.wd-footer > .container) 都係同一個 class。喺 layer 入面加咗
 * !important 之後，連 Woodmart 自己嗰條 `.wd-dropdown-menu > .container`
 * 嘅 padding:0 都贏埋 —— 240px 闊嘅下拉選單硬食 43px 內距，選單項就撐到
 * 兩行、成個選單變闊咗。用戶報「呢啲頁面 menu 變寬咗」就係呢個。
 *
 * 改成只針對 .site-content 入面嗰批（麵包屑、商品、tabs、相關商品），
 * 頁首頁尾唔再受影響。
 */
@media (min-width: 1025px) {
	body.pj-pdp-luxe .site-content .container {
	padding-left: clamp(24px, 3vw, 56px) !important;
	padding-right: clamp(24px, 3vw, 56px) !important;
}
}

/*
 * 頁尾置中 —— 修「footer 靠晒左」。
 *
 * child style.css 有 .pj-site-footer__main 嘅 max-width:1220px + margin:0 auto，
 * 冇 !important；Woodmart base.css 有 .container 嘅 max-width:var(--wd-container-w)，
 * 一樣冇 !important。兩條特異度打成平手 (0,1,0)，邊條贏純粹睇載入次序。
 * 商品頁嘅 base.css 排喺後面，所以贏嘅係佢 —— 而 --wd-container-w 成個站
 * 都冇定義過，var() 無效 → max-width 跌返 none → 頁尾拉到成個 viewport 闊，
 * 內容就黐晒左邊。首頁次序啱所以睇落無事，商品頁就中招。
 *
 * 喺 layer 入面直接寫死，唔再靠次序。
 *
 * ⚠️ 呢條係全個 body.single-product，唔係淨係 pj-premium-pdp：
 * 336 版商品頁全部中同一個招，輕奢與否都一樣。呢個 stylesheet 本身
 * 係 is_product() gate，所有商品頁都載到，所以一條就搞掂。
 * 分類頁／Shop／首頁次序啱，本身無事，亦唔會受呢條影響。
 */
body.single-product .wd-footer .pj-site-footer__main {
	max-width: 1220px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* ========================================================================
   11. 生活照 mosaic —— 喺左欄、主圖下面

   固定比例策略（唔好改成 auto）：
     來源圖只有三種比例 —— 主圖永遠 1:1，生活照集中喺 0.667 (2:3) 同
     0.833 (5:6)。混住排會參差。所以生活照統一用 3:4 (0.75) 格 + cover：
       · 0.667 嘅圖裁走約 11% 高
       · 0.833 嘅圖裁走約 10% 闊
     3:4 係兩族之間裁得最少嘅共同比例（若用 2:3，0.833 嗰批要裁走 20%
     闊度，會切到植株）。
     object-position 稍為偏上，保住樹冠、少留啲地板。
   ======================================================================== */
body.pj-premium-pdp .pj-pdp-mosaic {
	margin: 1px 0 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
}

/*
 * 底層永遠係 4 欄：大格 span 2（即一行兩張），細格 span 1（一行四張）。
 * 用 4 欄做底而唔係兩套 grid，係因為兩者要對齊同一條垂直格線。
 * lead / tail 嘅分配由 plantjai-pdp-seo-geo.php 落 class，唔靠 nth-child 估。
 */
body.pj-premium-pdp .pj-pdp-mosaic__grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 1px !important;
	background-color: var(--pj-line) !important;
	border: 0 !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__item {
	grid-column: span 2 !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__item--tail {
	grid-column: span 1 !important;
}

/* 大格數目係單數嗰陣，最後一張大圖打橫拉通，唔好剩低半行空格 */
body.pj-premium-pdp .pj-pdp-mosaic__item--lead-wide {
	grid-column: 1 / -1 !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__item--lead-wide .pj-pdp-mosaic__img {
	aspect-ratio: 2 / 1 !important;
}

/* 細格得大格一半闊，標示要跟住收，否則一行字就滿晒個格 */
body.pj-premium-pdp .pj-pdp-mosaic__item--tail .pj-pdp-mosaic__caption {
	left: 8px !important;
	bottom: 8px !important;
	max-width: calc(100% - 16px) !important;
	padding: 4px 7px !important;
	font-size: 8.5px !important;
	letter-spacing: .1em !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__item {
	display: block !important;
	margin: 0 !important;
	background-color: var(--pj-bone-deep) !important;
	overflow: hidden !important;
}

/* Every scene opens the existing gallery; no second lightbox. */
body.pj-premium-pdp .pj-pdp-mosaic__trigger {
	display: block !important;
	width: 100% !important;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	cursor: zoom-in !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__trigger:focus-visible {
	outline: 2px solid var(--pj-ink) !important;
	outline-offset: -2px !important;
}

@media (hover: hover) and (pointer: fine) {
	body.pj-premium-pdp .pj-pdp-mosaic__trigger:hover .pj-pdp-mosaic__img {
	transform: scale(1.02) !important;
}
}

body.pj-premium-pdp .pj-pdp-mosaic__img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--pj-img-ratio) !important;
	object-fit: cover !important;
	object-position: center 38% !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: transform .35s ease !important;
}

/* 冇開尾排（4 張或以下）而又係單數時，最後一張打橫拉通，
   避免一張孤圖霸住半行。有尾排嗰陣由 --lead1 處理，唔會行到呢條。 */
body.pj-premium-pdp .pj-pdp-mosaic__grid:not(.pj-pdp-mosaic__grid--tail4) .pj-pdp-mosaic__item:last-child:nth-child(odd) {
	grid-column: 1 / -1 !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__grid:not(.pj-pdp-mosaic__grid--tail4) .pj-pdp-mosaic__item:last-child:nth-child(odd) .pj-pdp-mosaic__img {
	aspect-ratio: 2 / 1 !important;
}

/* 全部圖而家都喺欄入面睇得到，縮圖轉盤變咗多餘 —— 收起，
   主圖嘅 PhotoSwipe 燈箱唔受影響。 */
body.pj-premium-pdp .product-images:has(.pj-pdp-mosaic) .wd-gallery-thumb {
	display: none !important;
}

/* 主圖同 mosaic 之間用同一條 1px 縫接住，睇落係一條連續圖流 */
body.pj-pdp-luxe .woocommerce-product-gallery {
	background-color: var(--pj-bone-deep) !important;
	row-gap: 0 !important;
}

/* Keep the stable square frame while showing the full plant and planter
   when a selected variation supplies a portrait image. */
/*
 * frame 一定要同入面張圖同一個比例。
 *
 * plantjai-product-commerce-v8.css 將 .woocommerce-product-gallery__image
 * 鎖死咗 aspect-ratio: 4 / 5（背景 #f0efe8）。我哋將張 img 轉咗做 1:1 之後，
 * frame 仲係 4:5 —— 765 闊嘅欄，frame 956 高、圖只有 763 高，
 * 差嗰 193px 就變咗主圖上下兩條米色空帶，同時將下面嘅 mosaic 推低咗。
 * 所以 frame 要跟同一個 token，唔可以淨係改 img。
 */
body.pj-pdp-luxe .woocommerce-product-gallery__image,
body.pj-pdp-luxe .woocommerce-product-gallery__wrapper > div {
	height: auto !important;
	aspect-ratio: var(--pj-img-ratio) !important;
}

body.pj-pdp-luxe .woocommerce-product-gallery__image img,
body.pj-pdp-luxe .woocommerce-product-gallery__wrapper img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--pj-img-ratio) !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* ========================================================================
   12. 植物介紹 —— 編輯式兩欄（標題掛喺左邊欄）

   用 hanging-heading：h2 float 入左邊 gutter，正文留喺右欄。
   好處係唔使改 WooCommerce tab 嘅 HTML —— 主題 / VC 會攔截
   woocommerce_product_tabs 嘅 callback，靠 PHP 重組唔可靠。
   ======================================================================== */
@media (min-width: 900px) {
	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner:has(> h2) {
	max-width: 1120px !important;
	margin: 0 auto !important;
	padding-left: 300px !important;
}

	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > h2 {
	float: left !important;
	clear: left !important;
	width: 240px !important;
	margin-left: -300px !important;
	margin-top: 0 !important;
	padding-top: 34px !important;
	border-top: 1px solid var(--pj-line) !important;
}

	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > h2:first-child {
	padding-top: 0 !important;
	border-top: 0 !important;
}

	/* 每一節之間嘅呼吸位 */
	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > h2 + * {
	margin-top: 34px !important;
}

	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > h2:first-child + * {
	margin-top: 0 !important;
}

	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner::after {
	content: "";
	display: block !important;
	clear: both !important;
}
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > h2 {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(18px, 1.7vw, 23px) !important;
	line-height: 1.55 !important;
	letter-spacing: .08em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > p {
	max-width: 68ch !important;
	margin: 0 0 18px !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 14.5px !important;
	line-height: 2.1 !important;
	letter-spacing: .03em !important;
	color: var(--pj-ink-soft) !important;
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > ul {
	max-width: 68ch !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	list-style: none !important;
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > ul > li {
	margin: 0 !important;
	padding: 13px 0 !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 13.5px !important;
	line-height: 1.95 !important;
	letter-spacing: .03em !important;
	color: var(--pj-ink-soft) !important;
	border-bottom: 1px solid var(--pj-line) !important;
	list-style: none !important;
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > ul > li::marker,
body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > ul > li::before {
	content: none;
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > ul > li:first-child {
	border-top: 1px solid var(--pj-line) !important;
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > details {
	max-width: 68ch !important;
	margin: 22px 0 0 !important;
	padding: 16px 0 0 !important;
	border-top: 1px solid var(--pj-line) !important;
}

body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > details summary {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
	cursor: pointer !important;
}

/* tab 導覽收細做安靜嘅文字列 */
body.pj-pdp-luxe .wd-nav-tabs .wd-nav-link {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .wd-nav-tabs li.active .wd-nav-link {
	color: var(--pj-ink) !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__hint {
	display: flex !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 10px 0 !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	letter-spacing: .02em !important;
	color: var(--pj-ink-soft) !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__hint span {
	display: none !important;
}

@media (max-width: 768px) {
	body.pj-premium-pdp .pj-pdp-mosaic {
	margin-top: 1px !important;
	min-width: 0 !important;
}

	body.pj-premium-pdp .pj-pdp-mosaic__hint span {
	display: inline !important;
}

	/* Native scrolling keeps all scenes reachable without burying size selection. */
	body.pj-premium-pdp .pj-pdp-mosaic__grid {
	display: flex !important;
	gap: 8px !important;
	overflow-x: auto !important;
	scroll-snap-type: x proximity !important;
	overscroll-behavior-x: contain !important;
	background: transparent !important;
	padding-bottom: 8px !important;
	scrollbar-width: thin !important;
}

	body.pj-premium-pdp .pj-pdp-mosaic__item,
	body.pj-premium-pdp .pj-pdp-mosaic__item--tail {
	flex: 0 0 112px !important;
	scroll-snap-align: start !important;
}

	body.pj-premium-pdp .pj-pdp-mosaic__grid .pj-pdp-mosaic__img {
	aspect-ratio: 1 / 1 !important;
}

	body.pj-premium-pdp .pj-pdp-mosaic__caption,
	body.pj-premium-pdp .pj-pdp-mosaic__item--tail .pj-pdp-mosaic__caption {
	display: none !important;
}
}

/* ========================================================================
   13. 門市區塊 (.pj-store-visit)

   之前呢一區完全冇被 luxe 層覆蓋，仍然用緊舊嘅 acid-green 語言：
   頂部一條螢光線、一個大螢光藥丸、兩個黑底螢光邊按鈕。
   仲有一個真 bug：__highlights 嘅文字色係 rgba(243,242,239,.9)，
   但底色係 rgb(255,254,250) —— 白字白底，等於睇唔見。
   ======================================================================== */
body.pj-pdp-luxe .pj-store-visit {
	border-top: 1px solid var(--pj-line) !important;
	background-color: var(--pj-bone) !important;
}

body.pj-pdp-luxe .pj-store-visit__kicker {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .pj-store-visit__title {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(22px, 2.4vw, 32px) !important;
	line-height: 1.5 !important;
	letter-spacing: .07em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .pj-store-visit__lede {
	max-width: 56ch !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 14.5px !important;
	line-height: 2.05 !important;
	letter-spacing: .03em !important;
	color: var(--pj-ink-soft) !important;
}

/* 大螢光藥丸 → 安靜嘅髮絲線一行 */
body.pj-pdp-luxe .pj-store-visit__promo {
	display: block !important;
	max-width: none !important;
	margin: 26px 0 0 !important;
	padding: 14px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid var(--pj-line) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 12.5px !important;
	line-height: 1.9 !important;
	letter-spacing: .05em !important;
	color: var(--pj-ink-soft) !important;
}

/* 01/02/03 —— 修正白字白底，改成髮絲線編號列 */
body.pj-pdp-luxe .pj-store-visit__highlights {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
	gap: 1px !important;
	margin: 26px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background-color: var(--pj-line) !important;
	border: 1px solid var(--pj-line) !important;
}

body.pj-pdp-luxe .pj-store-visit__highlights li {
	margin: 0 !important;
	padding: 18px 18px 20px !important;
	background-color: var(--pj-bone) !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 13px !important;
	line-height: 1.75 !important;
	letter-spacing: .04em !important;
	color: var(--pj-ink) !important;
	opacity: 1 !important;
}

body.pj-pdp-luxe .pj-store-visit__highlights li::before,
body.pj-pdp-luxe .pj-store-visit__highlights li > span:first-child {
	display: block !important;
	margin-bottom: 8px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .2em !important;
	color: var(--pj-muted) !important;
}

/* 右邊資料板：髮絲線 label/value */
body.pj-pdp-luxe .pj-store-visit__panel {
	border: 1px solid var(--pj-line) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	padding: clamp(20px, 2.5vw, 34px) !important;
}

body.pj-pdp-luxe .pj-store-visit__facts > div,
body.pj-pdp-luxe .pj-store-visit__facts .pj-store-visit__fact {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 20px !important;
	padding: 13px 0 !important;
	border-bottom: 1px solid var(--pj-line) !important;
}

body.pj-pdp-luxe .pj-store-visit__facts dt {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .pj-store-visit__facts dd {
	margin: 0 !important;
	text-align: right !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 13.5px !important;
	line-height: 1.75 !important;
	letter-spacing: .04em !important;
	color: var(--pj-ink-soft) !important;
}

/* 按鈕：拆走 acid 邊 */
body.pj-pdp-luxe .pj-store-visit__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	border-radius: 0 !important;
	font-family: var(--pj-sans) !important;
	font-weight: 400 !important;
	font-size: 12.5px !important;
	letter-spacing: .18em !important;
	text-decoration: none !important;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

body.pj-pdp-luxe .pj-store-visit__btn--primary {
	border: 1px solid var(--pj-ink) !important;
	background-color: var(--pj-ink) !important;
	color: var(--pj-bone) !important;
}

body.pj-pdp-luxe .pj-store-visit__btn--primary:hover {
	background-color: transparent !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .pj-store-visit__btn--wa,
body.pj-pdp-luxe .pj-store-visit__btn--contact {
	border: 1px solid var(--pj-line) !important;
	background-color: transparent !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .pj-store-visit__btn--wa:hover,
body.pj-pdp-luxe .pj-store-visit__btn--contact:hover {
	border-color: var(--pj-ink) !important;
}

/* ========================================================================
   14. Tabs 導覽 —— active 底線由 acid 改返 ink
   ======================================================================== */
body.pj-pdp-luxe .wd-nav-tabs li.active .wd-nav-link,
body.pj-pdp-luxe .wd-nav-tabs .wd-nav-link:hover {
	border-bottom-color: var(--pj-ink) !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .wd-nav-tabs .wd-nav-link::after,
body.pj-pdp-luxe .wd-nav-tabs .wd-nav-link::before {
	background-color: var(--pj-ink) !important;
}

/* ========================================================================
   15. 手機 sticky 購買條 —— 拆走 acid 邊，修正低對比標題
   ======================================================================== */
body.pj-pdp-luxe .pj-premium-pdp-sticky__button {
	border: 1px solid var(--pj-ink) !important;
	border-radius: 0 !important;
	background-color: var(--pj-ink) !important;
	color: var(--pj-bone) !important;
	font-family: var(--pj-sans) !important;
	font-weight: 400 !important;
	font-size: 12.5px !important;
	letter-spacing: .16em !important;
}

body.pj-pdp-luxe .pj-premium-pdp-sticky__title,
body.pj-pdp-luxe .pj-premium-pdp-sticky__name {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: 13.5px !important;
	letter-spacing: .04em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .pj-premium-pdp-sticky__price {
	font-family: var(--pj-mono) !important;
	font-size: 11.5px !important;
	letter-spacing: .06em !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .pj-premium-pdp-sticky__price .amount,
body.pj-pdp-luxe .pj-premium-pdp-sticky__price del,
body.pj-pdp-luxe .pj-premium-pdp-sticky__price ins {
	color: inherit !important;
}

/* The white mobile toolbar must not inherit the dark header's pale icons. */
body.pj-pdp-luxe .wd-toolbar .wd-tools-icon,
body.pj-pdp-luxe .wd-toolbar .wd-toolbar-label {
	color: var(--pj-ink) !important;
}

/* Keep purchase controls behind full-screen dialogs and out of their focus order. */
body.pj-pdp-luxe:has(.pswp--open) .pj-premium-pdp-sticky,
body.pj-pdp-luxe:has(.cart-widget-side.wd-opened) .pj-premium-pdp-sticky,
body.pj-pdp-luxe:has(.mobile-nav.wd-opened) .pj-premium-pdp-sticky {
	visibility: hidden !important;
	pointer-events: none !important;
}

body.pj-pdp-luxe.pj-premium-pdp-sticky-active .wd-toolbar {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ========================================================================
   16. 相關商品卡 —— 統一去 luxe 語言

   卡本身由 plantjai-lean-catalog-cards 出，用緊角落括號、螢光邊、
   墨綠按鈕同金色價錢，同 PDP 對唔上。呢度只改 PDP 頁入面嗰批。
   ======================================================================== */
body.pj-pdp-luxe .related-and-upsells .wd-product,
body.pj-pdp-luxe .related-and-upsells .product-grid-item {
	background-color: transparent !important;
	border: 0 !important;
}

/* 商品圖跟返同一個比例 token —— 全站商品圖節奏一致 */
body.pj-pdp-luxe .related-and-upsells .wd-product-thumb img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--pj-img-ratio) !important;
	object-fit: cover !important;
	object-position: center 45% !important;
	border-radius: 0 !important;
	background-color: var(--pj-bone-deep) !important;
	transition: transform .35s ease !important;
}

body.pj-pdp-luxe .related-and-upsells .wd-product-thumb {
	overflow: hidden !important;
}

@media (hover: hover) and (pointer: fine) {
	body.pj-pdp-luxe .related-and-upsells .wd-product:hover .wd-product-thumb img {
	transform: scale(1.02) !important;
}
}

/* 角落括號裝飾 —— 輕奢唔需要 */
body.pj-pdp-luxe .related-and-upsells .wd-product-thumb::before,
body.pj-pdp-luxe .related-and-upsells .wd-product-thumb::after,
body.pj-pdp-luxe .related-and-upsells .wd-product-wrapper::before,
body.pj-pdp-luxe .related-and-upsells .wd-product-wrapper::after {
	content: none;
}

body.pj-pdp-luxe .related-and-upsells .wd-entities-title {
	margin: 16px 0 4px !important;
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: 15.5px !important;
	line-height: 1.6 !important;
	letter-spacing: .05em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .related-and-upsells .wd-entities-title a {
	color: inherit !important;
	text-decoration: none !important;
}

body.pj-pdp-luxe .related-and-upsells .pj-latin-name {
	margin: 0 0 14px !important;
	font-family: var(--pj-mono) !important;
	font-style: normal !important;
	font-size: 10.5px !important;
	letter-spacing: .12em !important;
	color: var(--pj-muted) !important;
}

/* 規格由方格 pill 改做髮絲線文字列 */
body.pj-pdp-luxe .related-and-upsells .pj-spec-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 14px !important;
	margin: 0 0 14px !important;
	padding: 10px 0 0 !important;
	border-top: 1px solid var(--pj-line) !important;
	list-style: none !important;
}

body.pj-pdp-luxe .related-and-upsells .pj-spec-pill {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 3px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 11.5px !important;
	letter-spacing: .04em !important;
	color: var(--pj-muted) !important;
}

body.pj-pdp-luxe .related-and-upsells .pj-spec-pill__icon,
body.pj-pdp-luxe .related-and-upsells .pj-spec-pill__label {
	display: none !important;
}

body.pj-pdp-luxe .related-and-upsells .pj-spec-pill__value {
	color: var(--pj-ink-soft) !important;
}

body.pj-pdp-luxe .related-and-upsells .price,
body.pj-pdp-luxe .related-and-upsells .price .amount {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: 14.5px !important;
	letter-spacing: .04em !important;
	color: var(--pj-ink) !important;
}

body.pj-pdp-luxe .related-and-upsells .pj-price-from {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

/* 墨綠按鈕 → ink 線框
 *
 * ⚠️ 一定要連 background-image 一齊清。
 * woodmart-child/functions.php 全站 enqueue 緊 assets/plantjai-lab-cards-v3.css
 * （本來只想服務 shop / 分類頁，但佢冇 gate，商品頁一樣載）。嗰度有：
 *     body .wd-product .product-wrapper .wd-add-btn a.add-to-cart-loop
 *         background: linear-gradient(90deg,#1a2e1a 0,#1a2e1a calc(100% - 36px),
 *                                     #fff calc(100% - 36px)) !important; 
 * 即係「墨綠掣 + 右邊 36px 白色方格」嗰個樣。
 * 我哋之前只覆蓋咗 background-COLOR，漸變係 background-IMAGE，所以照樣浮返出嚟
 * —— 呢個就係「之前 fix 過但冇效」嘅原因。layer 入面嘅 !important 一定贏，
 * 但贏唔到一個你冇寫過嘅 property。 */
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 46px !important;
	height: auto !important;
	margin-top: 14px !important;
	padding: 12px 16px !important;
	border: 1px solid var(--pj-line) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--pj-ink) !important;
	font-family: var(--pj-sans) !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	letter-spacing: .16em !important;
	text-decoration: none !important;
	transition: border-color .25s ease, background-color .25s ease, color .25s ease !important;
}

/* Hover 唔用深色實心 —— 之前係 ink 底 + bone 字，睇落就係「深色掣」，
   同成頁輕奢調唔夾。改成邊框加深 + 極淡暖底，字色永遠保持 ink。 */
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a:hover,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button:hover,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a:focus-visible,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button:focus-visible {
	border-color: var(--pj-ink) !important;
	background-color: rgba(20, 16, 12, .04) !important;
	background-image: none !important;
	color: var(--pj-ink) !important;
	outline: 0 !important;
}

/* 任何狀態下按鈕內嘅文字／圖示都跟 ink，杜絕深字深底 */
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a .wd-action-text,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a .wd-action-icon,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button .wd-action-text,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button .wd-action-icon {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--pj-ink) !important;
}

/* lab-cards 用 .wd-action-text 做整個掣面：左右唔對稱嘅 padding
   (0 36px 0 8px) 係為咗讓位畀右邊個白格。白格拆走之後文字就要置返中。 */
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a .wd-action-text,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button .wd-action-text {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* 右邊嗰個「＋」十字（兩條 gradient 畫出嚟）同樣要收起 */
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a .wd-action-text::after,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button .wd-action-text::after,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a .wd-action-icon,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button .wd-action-icon {
	display: none !important;
	background-image: none !important;
	width: 0 !important;
}

/* WoodMart standard hover 仲會喺 <a> 自己嘅 ::before 塞入 cart icon，
   同文字一齊喺 46px 高度內上下滑，造成重疊／裁切。 */
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .add-to-cart-loop::before,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn .add-to-cart-loop::after {
	display: none !important;
	transform: none !important;
}

body.pj-pdp-luxe .related-and-upsells > h2,
body.pj-pdp-luxe .related-and-upsells .title-wrapper .title {
	font-family: var(--pj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(20px, 2vw, 26px) !important;
	letter-spacing: .08em !important;
	color: var(--pj-ink) !important;
}

/* ========================================================================
   17. 相關商品卡 —— 色調校正

   卡本身嘅底色係 rgb(248,250,246)、邊框 rgb(196,206,194)：兩隻都係
   偏冷嘅薄荷白／灰綠，擺喺暖調 bone 頁上會「跳」出嚟，好似貼上去咁。
   改成同頁面同一套暖色：底透明、邊用 --pj-line。
   ======================================================================== */
body.pj-pdp-luxe .related-and-upsells .wd-product-wrapper,
body.pj-pdp-luxe .related-and-upsells .product-wrapper {
	background-color: transparent !important;
	border: 1px solid var(--pj-line) !important;
	border-radius: 0 !important;
	padding: 0 0 4px !important;
	box-shadow: none !important;
	transition: border-color .3s ease !important;
}

body.pj-pdp-luxe .related-and-upsells .wd-product:hover .wd-product-wrapper {
	border-color: var(--pj-line-strong) !important;
}

/* 卡內文字區留返呼吸位 */
body.pj-pdp-luxe .related-and-upsells .wd-product-thumb {
	margin-bottom: 0 !important;
}

body.pj-pdp-luxe .related-and-upsells .wd-entities-title,
body.pj-pdp-luxe .related-and-upsells .pj-latin-name,
body.pj-pdp-luxe .related-and-upsells .pj-spec-pills,
body.pj-pdp-luxe .related-and-upsells .price,
body.pj-pdp-luxe .related-and-upsells .wd-add-btn {
	margin-left: 18px !important;
	margin-right: 18px !important;
}

/* 規格由置中直排改返左對齊橫排 */
body.pj-pdp-luxe .related-and-upsells .pj-spec-pills {
	justify-content: flex-start !important;
	text-align: left !important;
}

body.pj-pdp-luxe .related-and-upsells .pj-spec-pill,
body.pj-pdp-luxe .related-and-upsells .pj-spec-pill__value {
	text-align: left !important;
}

/* 卡上嘅價錢跟返 PDP 用 Inter */
body.pj-pdp-luxe .related-and-upsells .price,
body.pj-pdp-luxe .related-and-upsells .price .amount,
body.pj-pdp-luxe .related-and-upsells .price bdi {
	font-family: "PJ Inter", var(--pj-sans) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	letter-spacing: .06em !important;
	color: var(--pj-ink) !important;
	font-variant-numeric: lining-nums tabular-nums !important;
}

body.pj-pdp-luxe .related-and-upsells .price .woocommerce-Price-currencySymbol {
	font-size: .82em !important;
	color: var(--pj-muted) !important;
}

/* SPECIMEN DATA 標籤 */
body.pj-pdp-luxe .related-and-upsells .pj-specimen-label,
body.pj-pdp-luxe .related-and-upsells .pj-card-kicker {
	font-family: var(--pj-mono) !important;
	font-size: 9.5px !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

/* 卡底按鈕貼住卡邊，唔好浮起 */
body.pj-pdp-luxe .related-and-upsells .wd-add-btn {
	width: auto !important;
	max-width: calc(100% - 36px) !important;
	margin-bottom: 14px !important;
}

/* 手機：卡淨係得 158px 闊，18px 嘅左右留白食剩 122px，
   「Strelitzia nicolai」呢類長學名就撐爆咗卡邊。收窄留白 + 準許斷行。 */
@media (max-width: 767px) {
	body.pj-pdp-luxe .related-and-upsells .wd-entities-title,
	body.pj-pdp-luxe .related-and-upsells .pj-latin-name,
	body.pj-pdp-luxe .related-and-upsells .pj-spec-pills,
	body.pj-pdp-luxe .related-and-upsells .price,
	body.pj-pdp-luxe .related-and-upsells .wd-add-btn {
	margin-left: 12px !important;
	margin-right: 12px !important;
}

	body.pj-pdp-luxe .related-and-upsells .pj-latin-name {
	font-size: 9.5px !important;
	letter-spacing: .06em !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

	body.pj-pdp-luxe .related-and-upsells .wd-entities-title {
	font-size: 14px !important;
	letter-spacing: .02em !important;
}

	body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a,
	body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button {
	min-height: 42px !important;
	padding: 10px 8px !important;
	font-size: 11px !important;
	letter-spacing: .08em !important;
}

	body.pj-pdp-luxe .woocommerce-message .button,
	body.pj-pdp-luxe .woocommerce-message .wc-forward {
	float: none !important;
	display: inline-flex !important;
	margin: 12px 0 0 !important;
}
}

@media (prefers-reduced-motion: reduce) {
	body.pj-pdp-luxe .woocommerce-product-gallery__image img,
	body.pj-premium-pdp .pj-pdp-mosaic__trigger .pj-pdp-mosaic__img,
	body.pj-pdp-luxe .related-and-upsells .wd-product-thumb img {
	transition: none !important;
	transform: none !important;
}
}

/* ========================================================================
   18. 相片半透明標示 + 標題上下小字 + 價錢說明
   ======================================================================== */

/* 每張生活照左下角嘅場景標示 */
body.pj-premium-pdp .pj-pdp-mosaic__item {
	position: relative !important;
}

body.pj-premium-pdp .pj-pdp-mosaic__caption {
	position: absolute !important;
	left: 14px !important;
	bottom: 14px !important;
	max-width: calc(100% - 28px) !important;
	padding: 6px 10px !important;
	background-color: rgba(244, 241, 233, .78) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	font-family: var(--pj-mono) !important;
	font-size: 9.5px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: .16em !important;
	color: var(--pj-ink-soft) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	pointer-events: none !important;
}

/* 主圖（Woodmart gallery）亦加一個同款標示位 */
body.pj-pdp-luxe .woocommerce-product-gallery__image {
	position: relative !important;
}

/* 標題上面嘅小字 */
body.pj-pdp-luxe .pj-pdp-eyebrow {
	margin: 0 0 14px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

/* 標題下面嘅小字（學名 · 高度） */
body.pj-pdp-luxe .pj-pdp-subline {
	margin: 0 0 26px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10.5px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

/* 價錢下面嘅說明 */
	body.pj-pdp-luxe .pj-price-note {
	margin: 6px 0 28px !important;
	font-family: var(--pj-sans) !important;
	font-weight: 300 !important;
	font-size: 12.5px !important;
	line-height: 1.8 !important;
	letter-spacing: .05em !important;
	color: var(--pj-muted) !important;
}

@media (max-width: 768px) {
	body.pj-premium-pdp .pj-pdp-mosaic__caption {
	left: 10px !important;
	bottom: 10px !important;
	padding: 5px 8px !important;
	font-size: 9px !important;
	letter-spacing: .12em !important;
}

	body.pj-pdp-luxe .pj-pdp-eyebrow {
	margin-bottom: 10px !important;
}

	body.pj-pdp-luxe .pj-pdp-subline {
	margin-bottom: 20px !important;
}
}

/* ========================================================================
   19. 摘要欄次序

   .summary-inner 係 flex column，而現有 CSS 已經將標題釘去 order:-3、
   價錢釘去 order:-1。新加嘅小字預設 order:0，所以會跌晒去價錢下面。
   要明確排返：eyebrow → 標題 → subline → 價錢 → 價錢說明 → 簡介。
   ======================================================================== */
body.pj-pdp-luxe .summary-inner .pj-pdp-eyebrow {
	order: -4 !important;
}

body.pj-pdp-luxe .summary-inner .pj-pdp-subline {
	order: -2 !important;
}

body.pj-pdp-luxe .summary-inner .pj-price-note {
	order: 0 !important;
}

body.pj-pdp-luxe .summary-inner .woocommerce-product-details__short-description {
	order: 0 !important;
}

/* The Areca overview informs the height choice, so keep it directly after price. */
body.postid-21188.pj-pdp-luxe .summary-inner > .woocommerce-product-details__short-description {
	order: 0 !important;
}

/* ========================================================================
   20. FAQ 基本排版 —— 全部商品頁

   可見 FAQ 要同 FAQPage schema 逐字一致，所以 336 版商品頁都要出。
   但輕奢視覺層只covers premium lane，其餘頁面就會見到一段冇樣式嘅裸文字。
   呢度只落最低限度嘅字體同間距（唔改底色、唔改版面），
   令非輕奢頁都睇落係刻意排過，而唔係甩咗 CSS。
   ======================================================================== */
body.single-product:not(.pj-premium-pdp) .pj-pdp-faq {
	margin: 0 !important;
	padding: clamp(32px, 4vw, 56px) 0 clamp(24px, 3vw, 40px) !important;
	border-top: 1px solid var(--pj-line) !important;
}

body.single-product:not(.pj-premium-pdp) .pj-pdp-faq__title {
	margin: 0 0 6px !important;
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--pj-muted) !important;
}

body.single-product:not(.pj-premium-pdp) .pj-pdp-faq__heading {
	margin: 0 0 18px !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: .04em !important;
}

body.single-product:not(.pj-premium-pdp) .pj-pdp-faq__list {
	margin: 0 !important;
	border-top: 1px solid var(--pj-line) !important;
}

body.single-product:not(.pj-premium-pdp) .pj-pdp-faq__item {
	padding: 16px 0 !important;
	border-bottom: 1px solid var(--pj-line) !important;
}

body.single-product:not(.pj-premium-pdp) .pj-pdp-faq__q {
	margin: 0 0 8px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: .03em !important;
}

body.single-product:not(.pj-pdp-luxe) .pj-pdp-faq__a {
	margin: 0 !important;
	max-width: 66ch !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.95 !important;
	letter-spacing: .02em !important;
	color: var(--pj-ink-soft) !important;
}

/* ========================================================================
 * 標準商品頁（冇 mosaic 嘅 336 版）—— 2026-09-21 輕奢全站化
 * ------------------------------------------------------------------------
 * Premium 版靠 mosaic 填滿左欄，所以 1.62fr 嘅闊圖欄同長資訊欄高度差唔多。
 * 標準版冇 mosaic：左欄 = 主圖 + 縮圖 ≈ 932px，右欄資訊 ≈ 1450px，
 * 中間就剩低五百幾 px 空白。兩個對策：
 *   1. 收窄圖欄、放闊資訊欄，高度差自然細啲；
 *   2. 圖欄一樣 sticky —— 短嗰欄跟住捲，空白就唔會見到。
 * ==================================================================== */
@media (min-width: 1025px) {
	body.pj-pdp-luxe:not(.pj-premium-pdp) .product-image-summary-inner {
	grid-template-columns: minmax(0, 1.35fr) minmax(380px, 460px) !important;
}

	body.pj-pdp-luxe:not(.pj-premium-pdp) .product-images {
	position: sticky !important;
	top: 24px !important;
	align-self: start !important;
}
}

/* ========================================================================
 * 21. PDP commerce UI fixes — 2026-09-21
 * ==================================================================== */

body.pj-pdp-luxe .summary p.price del {
	margin-right: 10px !important;
	color: var(--pj-muted) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	letter-spacing: .03em !important;
	text-decoration: line-through !important;
	text-decoration-thickness: 1px !important;
}

body.pj-pdp-luxe .summary p.price ins {
	color: var(--pj-ink) !important;
	font-size: clamp(28px, 2.2vw, 30px) !important;
	font-weight: 500 !important;
}

/* Store directions already appear in the PDP; a fixed duplicate covers the CTA. */
body.single-product .plantjai-visit-badge {
	display: none !important;
}

@media (max-width: 767px) {
	body.pj-pdp-luxe .woocommerce-message {
	font-size: 12px !important;
	line-height: 1.65 !important;
}

	body.pj-pdp-luxe .woocommerce-message .button,
	body.pj-pdp-luxe .woocommerce-message .wc-forward {
	float: none !important;
	clear: both !important;
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 36px !important;
	margin: 12px 0 0 !important;
	padding: 8px 12px !important;
	box-sizing: border-box !important;
	font-size: 10px !important;
	line-height: 1.4 !important;
	white-space: normal !important;
	align-items: center !important;
	justify-content: center !important;
}

	body.pj-pdp-luxe .related-and-upsells .wd-add-btn {
	width: auto !important;
	max-width: calc(100% - 24px) !important;
}

	body.pj-pdp-luxe .related-and-upsells .wd-add-btn > a,
	body.pj-pdp-luxe .related-and-upsells .wd-add-btn .button {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 38px !important;
	padding: 8px 6px !important;
	box-sizing: border-box !important;
	font-size: 10px !important;
	letter-spacing: .05em !important;
}

	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .wd-heading {
	font-size: 20px !important;
}

	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .cart_list li,
	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .mini_cart_item,
	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .product-title {
	font-size: 13px !important;
	line-height: 1.45 !important;
}

	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .woocommerce-Price-amount,
	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .quantity {
	font-size: 13px !important;
}

	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .woocommerce-mini-cart__total,
	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-size: 18px !important;
}

	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .woocommerce-mini-cart__buttons {
	gap: 8px !important;
}

	body.pj-pdp-luxe :is(.wd-cart-side-panel, .cart-widget-side) .woocommerce-mini-cart__buttons .button {
	min-height: 42px !important;
	padding: 10px 12px !important;
	font-size: 10px !important;
	line-height: 1.35 !important;
	letter-spacing: .1em !important;
}
}

/* Keep the mobile buying path compact without shrinking tap targets. */
@media (max-width: 767px) {
	body.pj-pdp-luxe .single-breadcrumbs-wrapper {
	padding-block: 6px !important;
	margin-bottom: 8px !important;
}

	body.pj-pdp-luxe .single-breadcrumbs-wrapper::before {
	display: none !important;
}

	body.pj-pdp-luxe .single-breadcrumbs-wrapper > .wd-grid-f.container {
	row-gap: 4px !important;
}

	body.pj-pdp-luxe .product-image-summary-inner {
	gap: 10px !important;
}

	body.pj-pdp-luxe .summary .woocommerce-product-details__short-description {
	margin-bottom: 18px !important;
}

	body.pj-pdp-luxe .summary .pj-price-note {
	margin-bottom: 16px !important;
}

	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > h2 {
	margin-top: 20px !important;
}

	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > p {
	line-height: 1.8 !important;
}

	body.pj-pdp-luxe .woocommerce-Tabs-panel--description .wc-tab-inner > ul > li {
	padding-block: 8px !important;
	line-height: 1.7 !important;
}
}

body.pj-pdp-luxe .pj-breadcrumb-expand,body.pj-pdp-luxe .pj-breadcrumb-full {
	display:none !important;
}
/* Desktop: remove empty container space above the actual breadcrumb. */
@media (min-width: 1025px) {
 body.single-product.pj-pdp-luxe #main-content {
	padding-top:12px !important;
}
}
/* Phone: retain real nav links and accessible 44px actions in one row. */
@media (max-width: 767px) {
 body.pj-pdp-luxe .single-breadcrumbs-wrapper>.wd-grid-f.container {
	display:flex !important;
	flex-wrap:nowrap !important;
	align-items:center !important;
	gap:8px !important;
}
 body.pj-pdp-luxe .single-breadcrumbs-wrapper .rank-math-breadcrumb {
	flex:1 1 auto !important;
	min-width:0 !important;
	margin:0 !important;
}
 body.pj-pdp-luxe .single-breadcrumbs-wrapper .rank-math-breadcrumb>p {
	display:flex !important;
	align-items:center !important;
	flex-wrap:nowrap !important;
	min-width:0 !important;
	gap:2px !important;
	margin:0 !important;
}
 body.pj-pdp-luxe .rank-math-breadcrumb>p>a:first-child {
	display:inline-flex !important;
	align-items:center !important;
	min-height:44px !important;
	flex:0 0 auto !important;
	max-width:44px !important;
	font-size:12px !important;
}
 body.pj-pdp-luxe .rank-math-breadcrumb>p>a:not(:first-child),body.pj-pdp-luxe .rank-math-breadcrumb>p>.separator {
	display:none !important;
}
 body.pj-pdp-luxe .rank-math-breadcrumb .last {
	min-width:0 !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
	white-space:nowrap !important;
	font-size:12px !important;
}
 body.pj-pdp-luxe .pj-breadcrumb-expand {
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	flex:0 0 44px !important;
	width:44px !important;
	height:44px !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	background:transparent !important;
	color:inherit !important;
	font-size:18px !important;
}
 body.pj-pdp-luxe .single-breadcrumbs-wrapper .wd-products-nav {
	display:flex !important;
	flex:0 0 auto !important;
	gap:0 !important;
}
 body.pj-pdp-luxe .wd-products-nav .wd-product-nav-btn {
	width:44px !important;
	height:44px !important;
	min-width:44px !important;
	padding:0 !important;
}
 body.pj-pdp-luxe .single-breadcrumbs-wrapper {
	position:relative !important;
}
 body.pj-pdp-luxe .pj-breadcrumb-full {
	display:block !important;
	position:absolute !important;
	left:0 !important;
	right:0 !important;
	top:100% !important;
	z-index:30 !important;
	padding:12px !important;
	background:#f1eee4 !important;
	border:1px solid #18271d !important;
	box-shadow:0 4px 12px #0002 !important;
}
 body.pj-pdp-luxe .pj-breadcrumb-full[hidden] {
	display:none !important;
}
 body.pj-pdp-luxe .pj-breadcrumb-full a {
	display:inline-flex !important;
	align-items:center !important;
	min-height:44px !important;
	white-space:normal !important;
}
 body.pj-pdp-luxe .pj-breadcrumb-full p {
	margin:0 !important;
}
}

}

/* ========================================================================
   門市區塊：手機精簡版 (2026-10-09)
   375px 原本高 1,095px（超過一個畫面）。收走重複嘅 promo 行同雙重外框，
   三個重點排一行，副按鈕兩個並排 → 約 560px。桌面版唔郁。
   ======================================================================== */
@layer pj-pdp-luxe {
@media (max-width: 767px) {
	body.pj-pdp-luxe .pj-store-visit__inner {
		gap: 16px !important;
		padding: 20px 16px 18px !important;
	}
	body.pj-pdp-luxe .pj-store-visit__kicker {
		margin: 0 0 6px !important;
		letter-spacing: .16em !important;
	}
	body.pj-pdp-luxe .pj-store-visit__title {
		margin: 0 0 8px !important;
		font-size: 19px !important;
		line-height: 1.4 !important;
		letter-spacing: .04em !important;
		text-wrap: balance !important;
	}
	body.pj-pdp-luxe .pj-store-visit__lede {
		margin: 0 !important;
		font-size: 13.5px !important;
		line-height: 1.7 !important;
		letter-spacing: .02em !important;
	}
	body.pj-pdp-luxe .pj-store-visit__promo {
		display: none !important;
	}
	body.pj-pdp-luxe .pj-store-visit__highlights {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		margin: 14px 0 0 !important;
	}
	body.pj-pdp-luxe .pj-store-visit__highlights li {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 9px 4px !important;
		border: 0 !important;
		font-size: 11.5px !important;
		line-height: 1.4 !important;
		letter-spacing: 0 !important;
		text-align: center !important;
	}
	body.pj-pdp-luxe .pj-store-visit__highlights li > span:first-child {
		display: none !important;
	}
	body.pj-pdp-luxe .pj-store-visit__panel {
		border: 0 !important;
		padding: 0 !important;
	}
	body.pj-pdp-luxe .pj-store-visit__facts {
		gap: 0 !important;
		margin: 0 0 14px !important;
		border-top: 1px solid var(--pj-line) !important;
	}
	body.pj-pdp-luxe .pj-store-visit__facts > div,
	body.pj-pdp-luxe .pj-store-visit__facts .pj-store-visit__fact {
		gap: 14px !important;
		padding: 9px 0 !important;
	}
	body.pj-pdp-luxe .pj-store-visit__facts dt {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
	}
	body.pj-pdp-luxe .pj-store-visit__facts dd {
		font-size: 13px !important;
		line-height: 1.55 !important;
		letter-spacing: .02em !important;
		text-wrap: balance !important;
	}
	body.pj-pdp-luxe .pj-store-visit__fact-sub {
		font-size: 11.5px !important;
	}
	body.pj-pdp-luxe .pj-store-visit__actions {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}
	body.pj-pdp-luxe .pj-store-visit__btn {
		min-height: 44px !important;
		padding: 8px 10px !important;
		font-size: 12px !important;
		letter-spacing: .1em !important;
		text-align: center !important;
	}
	body.pj-pdp-luxe .pj-store-visit__btn--primary {
		grid-column: 1 / -1 !important;
	}
}
}