/*
 * Plantjai 輕奢化 — 全站頂欄（Woodmart header）同頁尾 chrome 層
 * 呢個檔喺全站載入（包括深色首頁、網誌、養護百科），所以淨係改
 * 排版／字體／字距／髮絲線／間距，唔郁 header 嘅 position / z-index /
 * sticky / display，亦唔郁 DOM 結構。由 build-store-luxe-css.py
 * 加 layer 同 important，呢個 .src.css 本身乾淨、冇 !important、冇 @layer。
 */

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

@layer pj-store-luxe {
/* Token 只落喺 chrome 嘅兩個子樹，唔落 :root。
   首頁嘅 plantjai-home-prototype-v22.css 已經用緊同名 token 但唔同值
   （--pj-bone #F1EEE4、--pj-muted #A7AAA2 —— 淺灰，襯深色底）。
   呢個檔喺 layer 入面而且每句都會加 important，寫 :root 就會贏晒
   首頁嗰套，深色底上面嘅 muted 文字會變返深灰，睇唔到。 */
.whb-main-header,
.wd-footer.pj-site-footer {
	--pj-bone: #F4F1E9 !important;
	--pj-bone-deep: #ECE8DD !important;
	--pj-ink: #14100C !important;
	--pj-ink-soft: #4A4640 !important;
	--pj-muted: #8E8A80 !important;
	--pj-line: rgba(20, 16, 12, .13) !important;
	--pj-line-soft: rgba(20, 16, 12, .07) !important;
	--pj-acid: #C9FF3D !important;
	--pj-serif: "Noto Serif TC", Songti TC, PMingLiU, MingLiU, SimSun, serif !important;
	--pj-sans: "Noto Sans TC", -apple-system, "PingFang TC", sans-serif !important;
	--pj-mono: "IBM Plex Mono", Menlo, monospace !important;
	--pj-num: "PJ Inter", "Inter", "Noto Sans TC", sans-serif !important;
}

/* ================================================================
 * A. 頂欄 — 底色收窄做 pj-ink，字距同髮絲線做輕奢語法
 * ================================================================ */

/* 底色：.whb-main-header 同 .whb-row 兩個都寫，邊個畫底都蓋到 */
.whb-main-header,
.whb-row.whb-general-header {
	background-color: var(--pj-ink) !important;
	background-image: none !important;
}

/* 底邊改做髮絲線，唔用陰影；Woodmart sticky shadow css 要覆蓋返 box-shadow: none */
.whb-row.whb-general-header {
	border-bottom: 1px solid rgba(244, 241, 233, .16) !important;
	box-shadow: none !important;
}

.whb-row.whb-general-header.whb-sticky-row.whb-stuck {
	box-shadow: none !important;
}

/* 主導覽字距 */
.wd-header-main-nav .wd-nav-main > li > a {
	font-family: var(--pj-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: .08em !important;
	color: rgba(244, 241, 233, .86) !important;
}

.wd-header-main-nav .wd-nav-main > li > a:hover,
.wd-header-main-nav .wd-nav-main > li > a[aria-current],
.wd-header-main-nav .wd-nav-main > li.current-menu-item > a,
.wd-header-main-nav .wd-nav-main > li.current-menu-ancestor > a {
	color: #F4F1E9 !important;
}

/* 分隔線語法：取消 .wd-style-separated 嘅豎線，淨係靠字距同 gap 分開 */
.wd-header-main-nav .wd-nav-main.wd-style-separated > li {
	border-left: none !important;
}

.wd-header-main-nav .wd-nav-main.wd-style-separated > li::before {
	display: none !important;
}

/* 工具區（my-account / search / wishlist / cart） */
.wd-header-my-account.wd-tools-element > a,
.wd-header-search.wd-tools-element > a,
.wd-header-wishlist.wd-tools-element > a,
.wd-header-cart.wd-tools-element > a {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: rgba(244, 241, 233, .62) !important;
}

.wd-header-my-account.wd-tools-element > a:hover,
.wd-header-search.wd-tools-element > a:hover,
.wd-header-wishlist.wd-tools-element > a:hover,
.wd-header-cart.wd-tools-element > a:hover {
	color: #F4F1E9 !important;
}

/* 購物車數量：拆走綠色藥丸，淨返 mono 數字。
   .wd-cart-number 係 inline 文字（「0 件 / HK$0」），唔係絕對定位嘅圓徽章，
   所以唔加 acid 點 —— 空車嗰陣個點會掛喺「0」前面，冇意思。 */
.wd-header-cart .wd-cart-number {
	border-radius: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	color: rgba(244, 241, 233, .86) !important;
	font-family: var(--pj-num) !important;
	font-variant-numeric: tabular-nums lining-nums !important;
}
/* 工具區之間嘅豎分隔線 */
.wd-header-divider {
	background-color: rgba(244, 241, 233, .16) !important;
}

/* 下拉選單：只寫 .wd-dropdown-menu 同佢後代嘅特定 class，
   絕對唔可以寫 .container（Woodmart 全站共用，下拉入面嗰個 .container
   唔可以受影響），所以呢度冚唪唥冇一句掂到 .container */
.wd-dropdown-menu {
	background-color: var(--pj-bone) !important;
	background-image: none !important;
	color: var(--pj-ink) !important;
	border-radius: 0 !important;
	border: 1px solid var(--pj-line) !important;
	box-shadow: none !important;
}

.wd-dropdown-menu a {
	font-size: 13px !important;
	color: var(--pj-ink) !important;
}

.wd-dropdown-menu a:hover {
	background-color: rgba(20, 16, 12, .05) !important;
}

/* 焦點可見：頂欄所有連結 */
.whb-main-header a:focus-visible {
	outline: 1px solid currentColor !important;
	outline-offset: 3px !important;
}

/* ================================================================
 * B. 頁尾 — Plantjai 自家頁尾，四欄收做三欄（DOM 淨係得 3 個 col）
 * ================================================================ */

.pj-site-footer {
	background-color: var(--pj-ink) !important;
	color: rgba(244, 241, 233, .84) !important;
}

.pj-site-footer__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: clamp(24px, 4vw, 64px) !important;
}

.pj-site-footer__heading {
	font-family: var(--pj-mono) !important;
	font-size: 9.5px !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	color: rgba(244, 241, 233, .62) !important;
	margin: 0 0 16px !important;
	border: none !important;
	border-bottom: none !important;
	background: none !important;
}

.pj-site-footer__text,
.pj-site-footer__links a {
	font-size: 13.5px !important;
	line-height: 1.95 !important;
}

.pj-site-footer__links a {
	text-decoration: none !important;
	border-bottom: 1px solid transparent !important;
}

.pj-site-footer__links a:hover {
	border-bottom: 1px solid rgba(244, 241, 233, .16) !important;
}

.pj-site-footer__bar {
	border-top: 1px solid rgba(244, 241, 233, .16) !important;
	padding: 22px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.pj-site-footer__copyright {
	font-family: var(--pj-mono) !important;
	font-size: 9.5px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
}

.pj-site-footer__actions a {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(244, 241, 233, .16) !important;
	padding-bottom: 3px !important;
}

/* 焦點可見：頁尾所有連結 */
.pj-site-footer a:focus-visible {
	outline: 1px solid currentColor !important;
	outline-offset: 3px !important;
}

/* 瘦身版（購物車專用）— body.pj-commerce-luxe 加 .pj-site-footer--slim */
.pj-site-footer--slim .pj-site-footer__main {
	padding-top: 30px !important;
}

.pj-site-footer--slim .pj-site-footer__grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: clamp(18px, 3vw, 44px) !important;
}

.pj-site-footer--slim .pj-site-footer__col--links {
	display: none !important;
}

.pj-site-footer--slim .pj-site-footer__heading {
	display: none !important;
}

.pj-site-footer--slim .pj-site-footer__text,
.pj-site-footer--slim .pj-site-footer__links a {
	font-size: 12.5px !important;
}

/* ================================================================
 * C. 手機（頂欄 mobile nav / logo / 工具跟返桌面嘅字體字距規格）
 * ================================================================ */

@media (max-width: 1024px) {
	.wd-nav-secondary > li > a {
	font-family: var(--pj-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: .08em !important;
	color: rgba(244, 241, 233, .86) !important;
}

	.whb-mobile-left .wd-header-my-account.wd-tools-element > a,
	.whb-mobile-right .wd-header-my-account.wd-tools-element > a,
	.whb-mobile-left .wd-header-search.wd-tools-element > a,
	.whb-mobile-right .wd-header-search.wd-tools-element > a,
	.whb-mobile-left .wd-header-cart.wd-tools-element > a,
	.whb-mobile-right .wd-header-cart.wd-tools-element > a {
	font-family: var(--pj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: rgba(244, 241, 233, .62) !important;
}

	.pj-site-footer__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 560px) {
	.pj-site-footer__grid {
	grid-template-columns: minmax(0, 1fr) !important;
}

	.pj-site-footer__bar {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
}
}

/* 動效克制：自己冇加 transition/animation，但保險起見統一關埋，
   萬一日後喺呢個檔加咗動效唔會漏咗呢層防護 */
@media (prefers-reduced-motion: reduce) {
	.whb-main-header a,
	.pj-site-footer a,
	.wd-cart-number {
	transition: none !important;
	animation: none !important;
}
}

}