/**
 * 富源成 — Global Variant System (A 款紋理 / B 款純色)
 *
 * Source of truth: HTML mockups @layer variants (p01-homepage.html).
 * Loaded globally so every block (and core-block templates) gets:
 *   1. Variant design-token overrides on top of theme.json presets
 *   2. DL-TEX texture overlay system with actual texture images
 */

/* ══════════════════════════════════════════
   1. Variant Design Tokens
   (override theme.json presets at body level)
   ══════════════════════════════════════════ */

body.variant-a {
	--wp--preset--color--surface-1: oklch(0.965 0.025 90);
	--wp--preset--color--surface-2: oklch(0.925 0.035 86);
	--wp--preset--color--surface-3: oklch(0.885 0.040 84);
	--wp--preset--color--border: oklch(0.820 0.030 88);
	--wp--preset--color--accent: oklch(0.54 0.155 46);
	--taste-shadow: 0 18px 42px oklch(0.32 0.04 55 / 0.12);
	--taste-image-filter: saturate(0.94) contrast(0.98) sepia(0.05);
	--taste-hero-image: url('../hero/ig07-taste-a-artisan-hero.webp');
	--taste-hero-position: center right;
}

body.variant-b {
	--wp--preset--color--primary: oklch(0.21 0.035 150);
	--wp--preset--color--accent: oklch(0.54 0.155 46);
	--wp--preset--color--accent-hover: oklch(0.49 0.16 46);
	--wp--preset--color--surface-1: oklch(0.99 0.008 92);
	--wp--preset--color--surface-2: oklch(0.96 0.010 92);
	--wp--preset--color--surface-3: oklch(0.93 0.010 92);
	--wp--preset--color--text-primary: oklch(0.21 0.035 150);
	--wp--preset--color--text-secondary: oklch(0.42 0.025 120);
	--wp--preset--color--border: oklch(0.875 0.010 92);
	--taste-shadow: 0 10px 28px oklch(0.25 0.02 62 / 0.08);
	--taste-image-filter: saturate(0.86) contrast(1.04);
	--taste-hero-image: url('../hero/ig08-taste-b-clean-hero.webp');
	--taste-hero-position: center right;
}

/* ══════════════════════════════════════════
   2. DL-TEX Texture Overlay System (global)
   ══════════════════════════════════════════ */

[data-dl-tex] {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

[data-dl-tex]::before {
	content: '';
	position: absolute;
	inset: -3%;
	z-index: -1;
	pointer-events: none;
	display: none;
	opacity: 0;
	background-size: 106% 106%;
}

body.variant-a [data-dl-tex='full']::before   { opacity: 0.22; }
body.variant-a [data-dl-tex='medium']::before { opacity: 0.16; }
body.variant-a [data-dl-tex='light']::before  { opacity: 0.11; }
body.variant-a [data-dl-tex='subtle']::before { opacity: 0.07; }

body.variant-a [data-dl-tex]::before {
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
}

body.variant-b [data-dl-tex]::before {
	display: none !important;
}

/* IG source textures — relative to this file (assets/css/ → assets/textures/) */
[data-dl-tex-src='ig01']::before { background-image: url('../textures/ig01-earth-texture.webp'); }
[data-dl-tex-src='ig02']::before { background-image: url('../textures/ig02-linen-texture.webp'); }
[data-dl-tex-src='ig03']::before { background-image: url('../textures/ig03-wood-surface.webp'); }
[data-dl-tex-src='ig05']::before { background-image: url('../textures/ig05-warm-light.webp'); }

/* ══════════════════════════════════════════
   3. Texture Drift Animation (Variant A)
   ══════════════════════════════════════════ */

@keyframes richresourceTextureDrift {
	0%   { transform: translate(0, 0); }
	100% { transform: translate(-3%, -3%); }
}

@media (prefers-reduced-motion: no-preference) {
	body.variant-a [data-dl-tex]::before {
		animation: richresourceTextureDrift 18s ease-in-out infinite alternate;
	}
}

/* ══════════════════════════════════════════
   4. AMPLIFY v2 — 全站設計感強化（Phase 4.5-B）
   對齊 HTML mockup 的 AMP-GLOBAL 段
   ══════════════════════════════════════════ */

/* [3-3] 標題斷行優化 */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* [5-2] 陰影系統：單一光源、暖棕染色、向下偏移 */
:root {
	--shadow-soft: 0 14px 28px -12px oklch(0.32 0.04 55 / 0.14);
	--shadow-lift: 0 26px 48px -18px oklch(0.32 0.04 55 / 0.22);
}
.richresource-card, .card { box-shadow: var(--shadow-soft); }
.richresource-card:hover, .card:hover { box-shadow: var(--shadow-lift); }

/* [3-2] Eyebrow 開場儀式感：前置短橫線 */
.richresource-eyebrow::before,
.richresource-hero__eyebrow::before,
.section-header .eyebrow::before,
.eyebrow::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 2px;
	background: var(--wp--preset--color--gold, oklch(0.72 0.135 80));
	margin-right: 8px;
	vertical-align: 0.22em;
}
.richresource-hero__eyebrow { letter-spacing: 0.15em; }

/* [5-3] 黃豆點陣分隔語言 */
.richresource-section-header--center::after,
.section-header--center::after {
	content: '';
	display: block;
	width: 72px;
	height: 8px;
	margin: 20px auto 0;
	background-image: radial-gradient(circle at 4px 4px, var(--wp--preset--color--gold, oklch(0.72 0.135 80)) 2.5px, transparent 3px);
	background-size: 16px 8px;
	background-repeat: repeat-x;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* [3-1] 品牌數字資產化 */
.richresource-card__price, .card__price {
	font-family: var(--wp--preset--font-family--heading, 'Noto Serif TC', serif);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.richresource-trust-item strong, .trust-item strong { font-variant-numeric: tabular-nums; }

/* [E-1] 商品卡整卡可點 */
.richresource-card, .card { position: relative; }
.richresource-card__link, .card__link { color: inherit; text-decoration: none; }
.richresource-card__link::after, .card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.richresource-card .richresource-btn, .card .btn { position: relative; z-index: 2; }

/* [5-1] B款顆粒層（去無菌感） */
body.variant-b::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: 0.025;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* [5-4] Final CTA 氛圍化 */
.richresource-final-cta, .final-cta { position: relative; overflow: hidden; }
.richresource-final-cta .richresource-container,
.final-cta .container { position: relative; z-index: 1; }
.richresource-final-cta__asset, .final-cta__asset {
	position: absolute;
	left: max(-7vw, -5rem);
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	width: min(30vw, 380px);
	opacity: 0.14;
	pointer-events: none;
	filter: saturate(0.85);
}
body.variant-b .richresource-final-cta__asset,
body.variant-b .final-cta__asset { opacity: 0.05; }
.richresource-final-cta__dousang, .final-cta__dousang {
	position: absolute;
	right: clamp(8px, 4vw, 64px);
	bottom: -16px;
	width: clamp(90px, 10vw, 140px);
	height: auto;
	transform: rotate(-6deg);
	opacity: 0.9;
	pointer-events: none;
	filter: drop-shadow(0 8px 16px oklch(0.18 0.04 85 / 0.15));
}

/* [5-5] 豆桑 IP section 點綴 */
.ip-accent {
	position: absolute;
	width: clamp(64px, 7vw, 104px);
	height: auto;
	opacity: 0.8;
	pointer-events: none;
	filter: drop-shadow(0 6px 12px oklch(0.18 0.04 85 / 0.12));
}

@media (max-width: 768px) {
	.richresource-final-cta__dousang, .final-cta__dousang { width: 72px; right: 8px; }
	.richresource-final-cta__asset, .final-cta__asset { opacity: 0.1; }
	.ip-accent { display: none; }
}

/* ══════════════════════════════════════════
   5. AMP-V3 最終調整（背景/字級/重點/特效）
   ══════════════════════════════════════════ */

h2 { font-size: clamp(1.875rem, 4vw, 2.625rem); letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }

h1 strong, h2 strong { color: var(--wp--preset--color--accent, oklch(0.54 0.155 46)); font-weight: 700; }

.richresource-card .richresource-card__img, .card .card__img { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.richresource-card:hover .richresource-card__img, .card:hover .card__img { transform: scale(1.04); }

/* Final CTA 深綠收尾段 */
.richresource-final-cta, .final-cta,
body.variant-a .richresource-final-cta, body.variant-a .final-cta,
body.variant-b .richresource-final-cta, body.variant-b .final-cta {
	background: linear-gradient(135deg, oklch(0.20 0.04 165) 0%, oklch(0.27 0.05 158) 100%);
	border-top: none;
}
.wp-block-richresource-page-home .richresource-final-cta h2, .final-cta h2 { color: oklch(0.97 0.02 92); }
.wp-block-richresource-page-home .richresource-final-cta h2 strong, .final-cta h2 strong { color: oklch(0.78 0.13 78); }
.wp-block-richresource-page-home .richresource-final-cta p, .final-cta p { color: oklch(0.86 0.02 110); }
body.variant-a .richresource-final-cta::before, body.variant-a .final-cta::before {
	mix-blend-mode: screen;
	opacity: 0.07;
}
.richresource-final-cta__asset, .final-cta__asset { opacity: 0.10; filter: saturate(0.7) brightness(1.15); }
body.variant-b .richresource-final-cta__asset, body.variant-b .final-cta__asset { opacity: 0.06; }

/* trust-bar 轉淺色（避免與深綠 marquee 疊雙暗帶） */
.wp-block-richresource-page-home .richresource-trust-bar, .trust-bar { background: var(--wp--preset--color--surface-2); border-bottom: 1px solid var(--wp--preset--color--border); }
.wp-block-richresource-page-home .richresource-trust-bar .richresource-trust-item, .trust-bar .trust-item { color: var(--wp--preset--color--text-primary); }
.wp-block-richresource-page-home .richresource-trust-bar .richresource-trust-item__label, .trust-bar .trust-item__label { color: var(--wp--preset--color--text-secondary); }
.wp-block-richresource-page-home .richresource-trust-bar .richresource-trust-item i, .trust-bar .trust-item i { color: var(--wp--preset--color--accent); }

/* scroll-reveal */
@media (prefers-reduced-motion: no-preference) {
	.rv {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.rv--2 { transition-delay: 0.08s; }
	.rv--3 { transition-delay: 0.16s; }
	.rv.is-in { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════
   6. Global Reset & Accessibility Baseline
   ══════════════════════════════════════════ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, oklch(0.54 0.155 46));
	outline-offset: 3px;
}

html,
body {
	overflow-x: hidden;
}

h1.wp-block-post-title {
	font-size: var(--wp--preset--font-size--h-1, clamp(2rem, 5vw, 3.5rem));
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary);
}

@media (max-width: 479px) {
	.wp-block-richresource-header .site-logo__text {
		display: none;
	}
	.richresource-trust-bar__grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 12px !important;
	}
	.richresource-trust-bar__grid .richresource-trust-item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
	}
	.richresource-trust-item {
		gap: 8px !important;
	}
	.richresource-trust-item svg {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}
}

.wp-block-richresource-archive-products .card__title {
	overflow: hidden;
	min-width: 0;
}

.wp-block-richresource-archive-products .card__title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ================================================================
   隱私權政策 / 使用條款 — 內容區上下留白，避免緊貼 header / footer
   桌機 80px，平板與手機 60px
   ================================================================ */
.page-id-3 main.wp-block-group,
.page-id-920 main.wp-block-group {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

@media (max-width: 1024px) {
	.page-id-3 main.wp-block-group,
	.page-id-920 main.wp-block-group {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
}

/* ════════════════════════════════════════════════════════════
   iOS / Safari 圖片爆版修正（全站）
   WebKit 的 grid/flex 子項 min-width 預設為 auto＝內容固有寬度，
   所以像 hero 那張 2400px 大圖在真機 iPhone 上不會縮、爆出畫面，
   但 Chrome 響應式模式看起來正常。讓容器與圖片都能縮小即可。
   ════════════════════════════════════════════════════════════ */
.richresource-container > *,
.container > *,
[class*="__grid"] > *,
[class*="-grid"] > *,
[class*="__steps"] > *,
[class*="__row"] > *,
[class*="__visual"],
[class*="__media"],
[class*="__image"] {
	min-width: 0;
}

img {
	max-width: 100%;
	height: auto;
	min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   前台版型修正（2026-06）
   ════════════════════════════════════════════════════════════ */

/* [1] 首頁「嚴選豆製品」：全部等寬 1/3 → 兩列各三欄(3×2) */
.wp-block-richresource-page-home .richresource-products__grid {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
	.wp-block-richresource-page-home .richresource-products__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 479px) {
	.wp-block-richresource-page-home .richresource-products__grid {
		grid-template-columns: 1fr;
	}
}

/* [2] 商品圖庫：主圖 3:4、縮圖 1:1，皆 cover 置中 */
.woocommerce div.product .woocommerce-product-gallery__image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: auto;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: auto;
	display: block;
}

/* [3] 商品頁間距：圖庫↔資訊、縮圖之間 */
.wc-product-layout.wp-block-columns {
	gap: 48px;
}
@media (max-width: 781px) {
	.wc-product-layout.wp-block-columns > .wp-block-column:first-child {
		margin-bottom: 32px;
	}
}
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 0 !important;
	padding: 0;
	list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: calc((100% - 30px) / 4);
	margin: 0;
	float: none;
}

/* [4] 單篇食譜：相關產品 + 更多食譜 → 皆 3 等欄、圖片尺寸統一 */
.wp-block-richresource-single-recipe .product-cta__grid,
.wp-block-richresource-single-recipe .related-recipes__grid {
	grid-template-columns: repeat(3, 1fr);
}
.wp-block-richresource-single-recipe .product-cta__grid .card--featured,
.wp-block-richresource-single-recipe .related-recipes__grid .card--featured {
	grid-row: span 1;
}
.wp-block-richresource-single-recipe .product-cta__grid .card--featured .card__img {
	aspect-ratio: 16 / 9;
}
/* 更多食譜圖片：統一 4:3 cover 置中 */
.wp-block-richresource-single-recipe .related-recipes__grid .card__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: auto;
}
@media (max-width: 767px) {
	.wp-block-richresource-single-recipe .product-cta__grid,
	.wp-block-richresource-single-recipe .related-recipes__grid {
		grid-template-columns: 1fr;
	}
}

/* 豆皮百科：分類標題連結（繼承標題樣式，不顯示成預設連結色） */
.glossary-category__title-link {
	color: inherit;
	text-decoration: none;
}
.glossary-category__title-link:hover {
	text-decoration: underline;
}

/* 活動卡：圖片連結維持與卡片一致、標題連結繼承標題色 */
.brand-events .card__img-link {
	display: block;
}
.brand-events .card__title a {
	color: inherit;
	text-decoration: none;
}
.brand-events .card__title a:hover {
	text-decoration: underline;
}

/* [項目1] 單一商品頁 — WooCommerce 區塊版「相關商品」下方間距（桌機 80、平板/手機 60） */
.wc-page--single-product .wp-block-woocommerce-related-products {
	margin-bottom: 80px;
}
@media (max-width: 781px) {
	.wc-page--single-product .wp-block-woocommerce-related-products {
		margin-bottom: 60px;
	}
}

/* [項目6] page-shipping / page-return-policy 的 .final-cta 內層為深綠底，
   標題/段落/聯絡資訊改成與首頁 final-cta 一致的高對比白＋金。
   需高於各分頁 style-index.css 的 .wp-block-...page-X .final-cta h2 (0,3,1)。 */
.wp-block-richresource-page-shipping .final-cta h2,
.wp-block-richresource-page-return-policy .final-cta h2 {
	color: oklch(0.97 0.02 92);
}
.wp-block-richresource-page-shipping .final-cta h2 strong,
.wp-block-richresource-page-return-policy .final-cta h2 strong {
	color: oklch(0.78 0.13 78);
}
.wp-block-richresource-page-shipping .final-cta p,
.wp-block-richresource-page-return-policy .final-cta p {
	color: oklch(0.86 0.02 110);
}
/* 聯絡資訊（電話／email）與次要說明連結，在深綠底上拉亮 */
.wp-block-richresource-page-return-policy .faq-cta__channel {
	color: oklch(0.92 0.02 100);
}
.wp-block-richresource-page-return-policy .faq-cta__channel:hover {
	color: oklch(0.78 0.13 78);
}
.wp-block-richresource-page-shipping .final-cta__secondary,
.wp-block-richresource-page-return-policy .final-cta__secondary {
	color: oklch(0.82 0.02 110);
}
.wp-block-richresource-page-shipping .final-cta__secondary a,
.wp-block-richresource-page-return-policy .final-cta__secondary a {
	color: oklch(0.78 0.13 78);
}