/* ==================================================================
   HTX 意大利奢侈面料展厅 · 视觉质感层
   ------------------------------------------------------------------
   范围：只改视觉（底色 / 肌理 / 字体气质 / 按钮质感 / 装饰线）
   不改：任何 HTML 结构、英文文案、产品图片、导航菜单、按钮跳转链接
   原则：低饱和暖灰米色系、哑光墙纸 + 铺纸感、衬线画册标题、
         深色哑光按钮、极少量古铜金细线
   ================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
	/* —— 墙面底色：低饱和暖灰 / 米灰 / 浅沙 —— */
	--lux-wall:        #E4E0D8;   /* 主墙面：暖石灰 */
	--lux-wall-deep:   #DAD5CB;   /* 深一档墙面（分区） */
	--lux-wall-light:  #ECE8E0;   /* 浅一档墙面 */
	--lux-paper:       #F2EEE7;   /* 铺纸感底色（画册纸） */
	--lux-paper-warm:  #EFE9DF;   /* 燕麦纸 */
	--lux-paper-oat:   #E8E0D3;   /* 浅驼纸 */
	--lux-paper-sand:  #E3DBCB;   /* 浅沙纸 */

	/* —— 墨色：不用纯黑，用带暖调的深墨 —— */
	--lux-ink:         #2A2724;   /* 主文字（暖黑） */
	--lux-ink-soft:    #4A463F;   /* 次级标题 */
	--lux-ink-mute:    #6E685E;   /* 辅助文字 */
	--lux-ink-faint:   #8C857A;   /* 极弱文字 */

	/* —— 金属：极少量古铜金 / 深棕，仅用于细线与小标记 —— */
	--lux-bronze:      #8A6D3B;   /* 古铜金 */
	--lux-bronze-soft: #A68A55;   /* 浅古铜 */
	--lux-bronze-line: rgba(138, 109, 59, .30);
	--lux-bronze-line-2: rgba(138, 109, 59, .18);
	--lux-umber:       #4A3B2A;   /* 深棕 */

	/* —— 语义色：全部去饱和 —— */
	--lux-green:       #4A5B4E;   /* 原亮绿 #1f6b4c → 低饱和墨绿 */
	--lux-green-soft:  #5E6F61;

	/* 纹理变量 --lux-wall-tex / --lux-paper-tex 由插件内联样式单独定义，
	   不在此处声明，避免 :root 覆盖掉注入的真实路径。 */

	/* —— 字体：标题用 Cormorant 画册衬线，正文用克制无衬线 —— */
	--lux-serif: "Henghui Cormorant", "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
	--lux-sans:  "GuarujaNeue", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ==================================================================
   2. 底层：哑光墙面（石灰 / 微水泥颗粒）
   ================================================================== */
html {
	background: var(--lux-wall);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	background-color: var(--lux-wall) !important;
	/*
	 * 墙面：哑光暖灰石灰。
	 * 肌理用 blend 模式叠加并大幅降低存在感 —— 颗粒只作为「细腻的墙面暗示」，
	 * 绝不能变成水泥毛坯房的粗粝感。
	 */
	background-image:
		radial-gradient(120% 90% at 12% 8%, rgba(255,252,246,.60) 0%, rgba(255,252,246,0) 58%),
		radial-gradient(100% 80% at 88% 92%, rgba(196,188,174,.38) 0%, rgba(196,188,174,0) 62%),
		linear-gradient(180deg, #E9E5DD 0%, #E4E0D8 48%, #DFDAD0 100%);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-attachment: fixed, fixed, fixed;
	color: var(--lux-ink);
}

/* 墙面颗粒层：极轻，只在近看时可辨 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--lux-wall-tex, none);
	background-repeat: repeat;
	background-size: 420px 420px;
	opacity: .085;
	mix-blend-mode: multiply;
}

/* 铺纸感：墙面之上的一层哑光纸纹（画册纸张底色，不是透明玻璃感） */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--lux-paper-tex, none);
	background-repeat: repeat;
	background-size: 460px 460px;
	opacity: .16;
	mix-blend-mode: multiply;
}

/*
 * 主体内容抬到纸纹之上。
 * ⚠️ 绝对不能在这里写 `position: relative`！
 * 页面头部是 body 的直接子级（fixed + transform 做收起/展开动画），
 * 一旦被改成 relative，fixed 失效 → 头部高度塌成 0 → 移动端汉堡菜单与
 * CONTACT 按钮点不到。
 * 因此只设 z-index，不碰 position。
 */
/*
 * 只给 main 提升层级（main 本身是 position:relative，z-index 有效）。
 * 其余 body 直接子级一律不碰 —— 尤其是 header 容器
 * （改 position 会让头部塌成 0 高度，导致移动端汉堡菜单与 CONTACT 按钮
 *   完全点不到）。
 *
 * ⚠️ 也绝对不要给 [data-retract-header] 强行抬 z-index！
 * 实测该元素是顶部那条深色工具栏（不是移动端顶栏），它和移动端顶栏
 * 同为 body > div.relative 的子级；一旦把它抬到与顶栏相同的 z-index，
 * 工具栏有高度时就会盖住汉堡与 CONTACT。
 * 顶栏的层级由插件内联护栏 htx-lux-guard 统一保证。
 */
body > main {
	position: relative;
	z-index: 1;
}

/* ==================================================================
   3. 板块纸面层级（自然深浅分区，取代原来的纯白与亮黄渐变）
   ================================================================== */

/* 首屏：最浅的纸面（大画册留白页） */
#home {
	background-color: var(--lux-paper) !important;
	background-image:
		linear-gradient(180deg, rgba(255,253,249,.55) 0%, rgba(246,242,235,.28) 100%) !important;
	background-repeat: no-repeat !important;
}

/* ABOUT：燕麦纸 */
#about {
	background-color: var(--lux-paper-warm) !important;
	background-image:
		linear-gradient(180deg, rgba(249,244,236,.50) 0%, rgba(234,226,213,.34) 100%) !important;
	background-repeat: no-repeat !important;
}

/* COLLECTIONS / SOURCING：浅沙纸 */
#collections,
#sourcing {
	background-color: var(--lux-paper-sand) !important;
	background-image:
		linear-gradient(180deg, rgba(245,239,228,.48) 0%, rgba(229,221,205,.32) 100%) !important;
	background-repeat: no-repeat !important;
}

/* TRUSTED / PARTNERS：暖灰纸（略深，形成节奏） */
#trusted,
#partners {
	background-color: var(--lux-wall-light) !important;
	background-image:
		linear-gradient(180deg, rgba(255,252,246,.40) 0%, rgba(228,223,214,.26) 100%) !important;
	background-repeat: no-repeat !important;
}

/* STORY / TESTIMONIALS：燕麦纸 */
#story,
#testimonials {
	background-color: var(--lux-paper-warm) !important;
	background-image:
		linear-gradient(180deg, rgba(250,245,237,.46) 0%, rgba(236,228,215,.30) 100%) !important;
	background-repeat: no-repeat !important;
}

/* CONTACT：浅沙纸 */
#contact {
	background-color: var(--lux-paper-sand) !important;
	background-image:
		linear-gradient(180deg, rgba(247,241,231,.44) 0%, rgba(232,224,209,.28) 100%) !important;
	background-repeat: no-repeat !important;
}

/* MADE TO ORDER：原本用主题底图，保持图片但降低饱和、加暖罩 */
#made-to-order {
	background-color: var(--lux-wall-deep) !important;
	position: relative;
}
#made-to-order::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: rgba(226, 214, 196, .34);
	mix-blend-mode: soft-light;
	z-index: 1;
}
#made-to-order > * { position: relative; z-index: 2; }

/* BENEFITS 跑马灯：原 #FEF7F6 粉白 + #E24D3B 橙红 → 燕麦纸 + 深棕 */
#benefits {
	background-color: var(--lux-paper-oat) !important;
	background-image: linear-gradient(180deg, rgba(246,240,230,.5) 0%, rgba(232,224,211,.3) 100%) !important;
	background-repeat: no-repeat !important;
}
#benefits, #benefits * { color: var(--lux-umber) !important; }

/* 任何残留的亮黄渐变 → 纸面渐变 */
.bg-gradient-to-b.from-white,
.from-white.to-\[\#fff8e8\],
.bg-gradient-to-b {
	background-image: linear-gradient(180deg, rgba(255,253,248,.42) 0%, rgba(236,229,217,.30) 100%) !important;
}

/* 卡片：从纯白改为浅纸面 + 极轻内阴影（像压在纸上） */
.ref-product,
.ref-search-grid .ref-product {
	background-color: var(--lux-paper) !important;
	border: 1px solid rgba(160, 150, 132, .22) !important;
	box-shadow:
		0 1px 2px rgba(90, 82, 68, .07),
		0 8px 22px rgba(90, 82, 68, .06) !important;
}
.ref-product { border-radius: 4px !important; }
.ref-detail-image, .ref-thumbnails img { border-radius: 4px !important; }
