/*
Theme Name: Shop Hotel（店铺默认酒店主题）
Theme URI:  https://example.com/theme-hotel
Author:     Shop Platform Team
Author URI: https://example.com
Description: 店铺平台默认酒店主题（editorial-luxury 编辑奢华风）。深墨绿 + 沙金 + 米白设计体系，
             支持酒店预订（房态/房价/下单）与内容栏目（资讯/餐饮/婚宴/会议/康乐/招聘）。
             客户预算有限时可直接使用本主题，也是定制主题的母版。
Version:    0.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.2
License:    GPL-2.0-or-later
Text Domain: shop-hotel
*/

/* =========================================================================
 * 设计令牌（Design Tokens）—— 复刻 hotel-platform editorial-luxury
 * 核心：深墨绿 primary + 沙金 accent + 米白 bg-base
 * ========================================================================= */
:root {
	/* —— 主色系 —— */
	--color-primary: 31 77 63;        /* #1F4D3F 深墨绿 */
	--color-primary-hover: 19 52 41;  /* #133429 */
	--color-primary-active: 11 35 28; /* #0B231C */

	/* —— 点缀色 —— */
	--color-accent: 201 168 106;      /* #C9A86A 沙金 */
	--color-accent-soft: 230 210 170; /* #E6D2AA 浅沙金（hover 态背景） */

	/* —— 背景层（三级层次） —— */
	--color-bg-base: 251 248 241;     /* #FBF8F1 米白（页面底） */
	--color-bg-soft: 242 237 226;     /* #F2EDE2 浅米金（区块底） */
	--color-bg-deep: 232 224 206;     /* #E8E0CE 深米金（强调区块底） */
	--color-surface: 255 255 255;     /* #FFFFFF 卡片白 */
	--color-card-hover: 248 244 236;  /* #F8F4EC 卡片 hover */

	/* —— 文字层（四级对比） —— */
	--color-text-body: 27 42 36;      /* #1B2A24 墨绿黑（正文） */
	--color-text-muted: 107 117 99;   /* #6B7563 灰绿（辅助） */
	--color-text-faint: 160 168 152;  /* #A0A898 占位/禁用 */
	--color-on-primary: 251 248 241;  /* #FBF8F1 主色上文字 */
	--color-on-accent: 27 42 36;      /* #1B2A24 沙金上文字（深色） */

	/* —— 边框/分割线（两级） —— */
	--color-border: 224 217 199;      /* #E0D9C7 默认 */
	--color-border-strong: 201 188 162; /* #C9BCA2 强调态 */

	/* —— 交互态 —— */
	--color-success: 46 94 74;        /* 苔绿 */
	--color-success-soft: 238 244 240;
	--color-warning: 166 124 58;      /* 赭金 */
	--color-warning-soft: 250 244 232;
	--color-danger: 138 60 48;        /* 陶土砖红 */
	--color-danger-soft: 248 238 235;

	/* —— 遮罩（四级透明度，消除硬编码 rgba 三元组） —— */
	--color-mask-rgb: 15 42 33;          /* 深墨绿遮罩 RGB */
	--color-on-primary-rgb: 251 248 241; /* 米白文字 RGB */
	--mask-light: rgba(15, 42, 33, 0.25);  /* 轻遮罩 — hero 底部渐变 */
	--mask-medium: rgba(15, 42, 33, 0.45); /* 中遮罩 — 卡片悬浮 */
	--mask-heavy: rgba(15, 42, 33, 0.72);  /* 重遮罩 — 幻灯片字幕 */
	--mask-full: rgba(15, 42, 33, 0.92);   /* 全遮罩 — 灯箱背景 */
	--color-mask-overlay: var(--mask-medium); /* 向后兼容别名 */

	/* —— 字体（中文无衬线优先，跨平台覆盖，零外站资源） —— */
	--font-zh: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", sans-serif;
	--font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
	--font-num: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* —— 字重（四级层次） —— */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* —— 字号（clamp 流式标题 + 固定正文，兼顾 PC/移动） —— */
	--text-display: clamp(2.5rem, 5vw, 4rem);          /* 40→64px 首屏大标题 */
	--text-h1: clamp(1.75rem, 3vw, 2.5rem);            /* 28→40px 页面主标题 */
	--text-h2: clamp(1.375rem, 2.2vw, 1.875rem);       /* 22→30px 区块标题 */
	--text-h3: clamp(1.125rem, 1.5vw, 1.25rem);        /* 18→20px 卡片标题 */
	--text-h4: 1.0625rem;                              /* 17px 小标题 */
	--text-body: 1rem;                                 /* 16px 正文 */
	--text-sm: 0.875rem;                               /* 14px 辅助 */
	--text-xs: 0.75rem;                                /* 12px 标签 */
	--text-nav: 0.9375rem;                             /* 15px 导航 */
	--text-hero-subtitle: clamp(1.0625rem, 1.6vw, 1.3125rem); /* 17→21px 首屏副标题 */
	--text-price: 1.5rem;                              /* 24px 价格数字（强调） */
	--text-price-sm: 1.125rem;                         /* 18px 价格数字（列表） */

	/* —— 字间距（中文呼吸 + editorial 宽排） —— */
	--letter-spacing-display: 0.02em;                  /* 大标题微宽 */
	--letter-spacing-heading: 0.03em;                  /* 区块标题 */
	--letter-spacing-body: 0.02em;                     /* 正文微宽（中文呼吸） */
	--letter-spacing-nav: 0.05em;                      /* 导航宽排 */
	--letter-spacing-eyebrow: 0.15em;                  /* 眉标大写宽排 */

	/* —— 行高（标题紧凑 + 正文宽松） —— */
	--line-height-display: 1.2;                        /* 大标题 */
	--line-height-heading: 1.35;                       /* 区块标题 */
	--line-height-card: 1.5;                           /* 卡片标题 */
	--line-height-body: 1.75;                          /* 正文（中文需更大） */
	--line-height-relaxed: 1.8;                        /* 长文阅读 */
	--line-height-tight: 1.35;                         /* 紧凑（兼容别名） */
	--line-height-normal: 1.75;                        /* 兼容别名 = body */

	/* —— 段落排版 —— */

	--paragraph-spacing: var(--space-4);               /* 段落间距 1rem */
	--paragraph-max-width: 42em;                       /* 段落最大行宽 */

	/* —— 间距 —— */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 1.75rem;
	--space-8: 2rem;
	--space-9: 2.25rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-14: 3.5rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-section: clamp(40px, 5vw, 60px);
	--space-card-pad: 1.5rem;

	/* —— 容器 —— */
	--container-max: 1280px;
	--container-narrow: 640px;
	--container-list: 1200px;
	--container-wide: 1440px;       /* 全幅画廊/hero */
	--header-height: 64px;
	/* Hero 高度设计系统（clamp = 下限 · 期望视口比 · 上限；单一数据源，禁止断点硬覆盖） */
	--space-hero-height: clamp(520px, 100dvh, 1100px);   /* 首屏：下限520px救横屏/矮屏，上限1100px防超高屏过度留白 */
	--hero-height-inner: clamp(320px, 46vh, 560px);      /* 二级页默认(窄/中屏)：下限320防手机塌缩，上限560防大屏臃肿；PREF 46vh 防手机竖屏过高 */
	--room-sidebar-width: 340px;                 /* 房型详情页右侧预订侧栏固定宽度（token 驱动，全端统一，拒绝百分比硬编码） */

	/* —— 图标尺寸 —— */
	--icon-sm: 1rem;
	--icon-md: 1.25rem;
	--icon-lg: 1.5rem;
	--icon-xl: 2rem;

	/* —— 断点（SSOT，媒体查询统一引用） —— */
	--bp-sm: 640px;   /* 移动 → 平板小 */
	--bp-md: 768px;   /* 平板 */
	--bp-lg: 1024px;  /* 平板横 → 桌面小 */
	--bp-xl: 1280px;  /* 桌面 */

	/* —— 圆角（editorial 直角）—— */
	--radius-card: 0;
	--radius-sharp: 0px;
	--radius-pill: 9999px;

	/* —— 阴影（深墨绿色调） —— */
	--shadow-card: 0 1px 4px rgba(15, 42, 33, 0.04);
	--shadow-card-hover: 0 8px 24px rgba(15, 42, 33, 0.08);
	--shadow-elevated: 0 12px 32px rgba(15, 42, 33, 0.12);
	--shadow-text-hero: 0 2px 16px rgba(0,0,0,0.45);          /* 标题阴影（统一：深色，适配图片/纯色 hero） */
	--shadow-text-hero-soft: 0 1px 10px rgba(0,0,0,0.4);   /* 副标题/眉标阴影（统一） */

	/* —— 动效（editorial 慢呼吸）—— */
	--motion-duration-fast: 350ms;
	--motion-duration-base: 700ms;
	--motion-duration-slow: 1000ms;
	--motion-duration-page: 1200ms;   /* 页面转场 */
	--motion-ease: cubic-bezier(0.2, 0, 0, 1);
	--motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
 * 基础
 * ========================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--font-zh);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
	color: rgb(var(--color-text-body));
	background-color: rgb(var(--color-bg-base));
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* 段落排版（中文友好：适度行高 + 行宽限制 + 换行优化） */
p {
	margin: 0 0 var(--paragraph-spacing);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
	word-break: break-word;
	overflow-wrap: break-word;
}

/* 无障碍"跳到主内容"链接：默认移出屏幕，键盘聚焦时显示 */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: rgb(var(--color-primary));
	color: rgb(var(--color-on-primary));
	font-family: var(--font-zh);
	font-weight: var(--font-weight-medium);
	padding: var(--space-2) var(--space-4);
	transition: none;
}
.skip-link:focus {
	left: 0;
	outline: none;
	box-shadow: inset 0 0 0 2px rgb(var(--color-accent));
}

.container-max { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-5); }
.container-list { max-width: var(--container-list); margin-inline: auto; padding-inline: var(--space-5); }
.section-py { padding-block: var(--space-section); }
.section-pt { padding-top: var(--space-section); }
.section-pb { padding-bottom: var(--space-section); }

/* 编辑叙事字体 */
.font-display { font-family: var(--font-display); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-display); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.min-h-hero { min-height: 100vh; min-height: var(--space-hero-height); }
.rounded-sharp { border-radius: var(--radius-sharp); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }
.text-display { font-size: var(--text-display); }

/* =========================================================================
 * 角色层
 * ========================================================================= */
.title-display { font-family: var(--font-display); font-size: var(--text-display); color: rgb(var(--color-text-body)); font-weight: var(--font-weight-regular); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); }
.title-section { font-family: var(--font-zh); font-size: var(--text-h4); color: rgb(var(--color-text-body)); font-weight: var(--font-weight-medium); line-height: var(--line-height-card); letter-spacing: var(--letter-spacing-body); }
.title-card { font-family: var(--font-zh); font-size: var(--text-h3); color: rgb(var(--color-text-body)); font-weight: var(--font-weight-medium); line-height: var(--line-height-card); letter-spacing: var(--letter-spacing-body); }
.title-h2 { font-family: var(--font-display); font-size: var(--text-h2); color: rgb(var(--color-text-body)); font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }

/* 表单：editorial 底线风格（无边框，聚焦沙金加粗） */
.field-label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: rgb(var(--color-text-muted)); }
.field-input {
	display: block; width: 100%; margin-top: var(--space-1);
	border: none;
	border-bottom: 1px solid rgb(var(--color-border-strong));
	background: transparent;
	padding: var(--space-2) var(--space-1);
	font-family: var(--font-num); color: rgb(var(--color-text-body));
	border-radius: 0; min-height: 48px;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-soft);
}
.field-input:focus {
	outline: none;
	border-bottom-color: rgb(var(--color-accent));
	border-bottom-width: 2px;
	padding-bottom: calc(var(--space-2) - 1px);
}
.field-input::placeholder { color: rgb(var(--color-text-faint)); }
.field-error { font-size: var(--text-xs); margin-top: var(--space-1); color: rgb(var(--color-danger)); }

/* 卡片：editorial 直角 + 图片溢出隐藏 + 悬停微抬 */
.card { background: rgb(var(--color-surface)); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--transition-slow), box-shadow var(--transition-slow), background-color var(--transition-slow); overflow: hidden; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); background-color: rgb(var(--color-card-hover)); }
.card-pad { padding: var(--space-card-pad); }
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: rgb(var(--color-bg-soft)); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-base) var(--motion-ease-soft); }
.card:hover .card-media img { transform: scale(1.04); }

/* 眉标：editorial 标志性元素（大写英文 + 宽字距 + 沙金） */
.eyebrow {
	font-family: var(--font-zh);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-eyebrow);
	font-size: var(--text-sm);
	color: rgb(var(--color-accent));
}

/* 分割线 + 区块标题三件套 */
.divider-accent { display: block; height: 1px; width: 2rem; margin-bottom: var(--space-4); background: rgb(var(--color-accent)); }
.section-head { margin-bottom: var(--space-8); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.section-head .title-h2 { margin: 0; }

/* 价格展示组件 */
.price { font-family: var(--font-num); font-size: var(--text-price); font-weight: var(--font-weight-bold); color: rgb(var(--color-primary)); line-height: 1; }
.price-lg { font-size: var(--text-display); }
.price-sm { font-size: var(--text-price-sm); }
.price-suffix { font-size: var(--text-sm); font-weight: var(--font-weight-regular); color: rgb(var(--color-text-muted)); margin-left: var(--space-1); }

/* 状态徽章：统一组件（data-status 驱动） */
.status-badge {
	display: inline-flex; align-items: center;
	font-size: var(--text-xs); font-family: var(--font-zh);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	letter-spacing: var(--letter-spacing-body);
}
.status-badge[data-status="paid"],
.status-badge[data-status="confirmed"] { background: rgb(var(--color-success-soft)); color: rgb(var(--color-success)); border-color: rgb(var(--color-success)); }
.status-badge[data-status="pending"] { background: rgb(var(--color-warning-soft)); color: rgb(var(--color-warning)); border-color: rgb(var(--color-warning)); }
.status-badge[data-status="cancelled"],
.status-badge[data-status="expired"] { background: rgb(var(--color-danger-soft)); color: rgb(var(--color-danger)); border-color: rgb(var(--color-danger)); }
.status-badge[data-status="refunded"] { background: rgb(var(--color-bg-soft)); color: rgb(var(--color-text-muted)); border-color: rgb(var(--color-border-strong)); }

/* 场景标签（保留旧组件兼容） */
.pill-scene { display: inline-flex; align-items: center; font-size: var(--text-sm); padding: var(--space-1) var(--space-3); background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); border-radius: var(--radius-sharp); }

/* 按钮 */
.btn-primary, .btn-outline, .btn-ghost {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-zh); font-size: var(--text-h4);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	min-height: 48px; padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sharp);
	cursor: pointer; border: none;
	transition: var(--transition-slow);
}
.btn-primary { background: rgb(var(--color-primary)); color: rgb(var(--color-on-primary)); }
.btn-primary:hover { background: rgb(var(--color-primary-hover)); }
.btn-outline { background: transparent; color: rgb(var(--color-primary)); border: 1px solid rgb(var(--color-primary)); }
.btn-outline:hover { background: rgb(var(--color-primary)); color: rgb(var(--color-on-primary)); }
.btn-ghost { background: transparent; color: rgb(var(--color-text-body)); padding: var(--space-2) var(--space-4); }
.btn-ghost:hover { color: rgb(var(--color-accent)); }

/* Hero 遮罩 */
.mask-overlay { background-color: var(--mask-medium); }
.text-hero-shadow { text-shadow: var(--shadow-text-hero); }

/* 状态色 */
.status-text[data-status="paid"], .status-text[data-status="confirmed"] { color: rgb(var(--color-primary)); }
.status-text[data-status="cancelled"], .status-text[data-status="expired"] { color: rgb(var(--color-accent)); }
.status-text[data-status="pending"], .status-text[data-status="refunded"] { color: rgb(var(--color-text-body)); }

/* 网格：3列(PC) → 2列(平板) → 1列(移动) */
.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* 详情页不对称双栏：62/38 */
.grid-detail { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-10); }
@media (max-width: 1024px) { .grid-detail { grid-template-columns: 1fr; } }

/* =========================================================================
 * 动效系统（editorial 慢呼吸，尊重 prefers-reduced-motion）
 * ========================================================================= */

/* 滚动显现（fade-up）：IntersectionObserver 驱动，加 .is-visible 触发 */
.fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--motion-duration-slow) var(--motion-ease),
	            transform var(--motion-duration-slow) var(--motion-ease);
}
.fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 错位入场：子元素逐个延迟（最多 6 个） */
.fade-up-stagger > *:nth-child(1) { transition-delay: 0ms; }
.fade-up-stagger > *:nth-child(2) { transition-delay: 120ms; }
.fade-up-stagger > *:nth-child(3) { transition-delay: 240ms; }
.fade-up-stagger > *:nth-child(4) { transition-delay: 360ms; }
.fade-up-stagger > *:nth-child(5) { transition-delay: 480ms; }
.fade-up-stagger > *:nth-child(6) { transition-delay: 600ms; }

/* Ken Burns 缓推（hero 背景图慢放大）
 * .hero-bg 初始 opacity:0 + 深墨绿占位，JS 预加载后 .is-loaded 淡入，避免图片未加载完时闪跳；
 * will-change + 合成层避免重绘时的背景跳变。 */
@keyframes ken-burns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
.hero-bg {
	opacity: 0;
	background-color: rgb(var(--color-primary));
	transition: opacity 0.8s ease-out;
}
.hero-bg.is-loaded { opacity: 1; }
.hero-bg,
.ken-burns {
	transform-origin: center;
	will-change: transform;
	animation: ken-burns 14s ease-out forwards;
}
.hero-bg,
.ken-burns {
	transform-origin: center;
	will-change: transform;
	animation: ken-burns 14s ease-out forwards;
}

/* 滚动指示器（hero 底部居中，微弹跳） */
@keyframes scroll-hint {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50%      { transform: translateY(6px); opacity: 1; }
}
.scroll-hint {
	position: absolute;
	bottom: var(--space-8);
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: var(--space-8);
	background: rgb(var(--color-on-primary));
	animation: scroll-hint 2s var(--motion-ease-soft) infinite;
	opacity: 0.6;
}

/* prefers-reduced-motion 降级：禁用所有动效，内容立即可见 */
@media (prefers-reduced-motion: reduce) {
	.fade-up { opacity: 1; transform: none; transition: none; }
	.fade-up-stagger > * { transition-delay: 0ms; }
	.ken-burns, .hero-bg { animation: none; }
	.scroll-hint { animation: none; opacity: 0.4; }
	* { scroll-behavior: auto !important; }
}

/* 响应式 */
@media (max-width: 768px) {
	.mobile-hidden { display: none; }
}

/* =========================================================================
 * Header：editorial 首屏透明 + 滚动后米白底 + 沙金底边
 * ========================================================================= */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	transition: background var(--transition-slow), box-shadow var(--transition-slow);
}
.site-header .header-inner {
	display: flex; align-items: center; justify-content: space-between;
	height: var(--header-height); gap: var(--space-6);
}
.site-header .header-logo {
	display: inline-flex; align-items: center; height: 40px;
	color: rgb(var(--color-on-primary));
}
.site-header .header-logo svg { height: 100%; width: auto; display: block; }
.site-header .header-logo:not(:has(svg)) { font-size: var(--text-h3); }
.site-header .header-nav { display: flex; gap: var(--space-6); flex: 1; justify-content: center; }
.site-header .nav-link {
	color: rgb(var(--color-on-primary)); font-family: var(--font-zh);
	font-size: var(--text-nav); font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-nav);
	position: relative; padding-block: var(--space-1);
	transition: var(--transition-slow);
}
.site-header .nav-link::after {
	content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
	background: rgb(var(--color-accent)); transform: scaleX(0); transform-origin: center;
	transition: transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.site-header .nav-link:hover { color: rgb(var(--color-accent)); }
.site-header .nav-link:hover::after { transform: scaleX(1); }
.site-header .header-cta {
	background: rgb(var(--color-on-primary-rgb) / 0.12);
	color: rgb(var(--color-on-primary)); border-color: transparent;
	min-height: 36px; padding: var(--space-2) var(--space-4);
	font-size: var(--text-nav); letter-spacing: var(--letter-spacing-nav);
}
.site-header .header-cta:hover {
	background: rgb(var(--color-on-primary-rgb) / 0.2);
}

/* 滚动后米白底（由 JS 添加） */
.site-header.scrolled {
	background: rgb(var(--color-bg-base)) !important;
	box-shadow: inset 0 -1px 0 rgb(var(--color-accent));
}
.site-header.scrolled .header-logo,
.site-header.scrolled .nav-link { color: rgb(var(--color-text-body)); }
.site-header.scrolled .header-cta {
	background: rgb(var(--color-primary) / 0.06); color: rgb(var(--color-text-body));
}
.site-header.scrolled .header-cta:hover {
	background: rgb(var(--color-primary) / 0.12);
}

/* =========================================================================
 * Hero 统一组件（Single Source of Truth）
 * 规范：① 文字垂直居中 + 左对齐；② 标题加粗(bold) + 阴影；③ 媒体 hero 自动遮罩。
 * 所有页面 hero 仅通过 .hero + 修饰类(.hero--short/.hero--solid) + 角色类(.hero__*)
 * 复用本系统；禁止在模板内联重复定义阴影/字重/对齐（拒绝打补丁式）。
 * ========================================================================= */
.hero {
	position: relative;
	min-height: 100vh;                       /* 回退：不支持 clamp/dvh 的浏览器 */
	min-height: var(--space-hero-height);    /* 首屏：clamp(520px, 100dvh, 1100px) */
	display: flex;
	align-items: center;                    /* ① 垂直居中 */
	color: rgb(var(--color-on-primary));
	overflow: hidden;
	padding-top: var(--header-height);      /* 避开固定头部 */
}
.hero--short { min-height: var(--hero-height-inner); }   /* 二级页统一高度（引用 token；token 值由 :root + 宽屏断点共同决定，此处禁止硬编码） */

/* 宽屏 PC：视口宽 ≥ 1024 时二级页 hero 稳定为 560px。
 * 原因：手机竖屏视口高度(~844) 与 PC 视口高度(~850–950) 同量级，纯“高度 clamp”无法让 PC 取到 560 而手机不臃肿；
 * 故按设备【宽度】维度在 token 层分支。仅在 :root 重设变量，组件零硬编码，仍为单一数据源。 */
@media (min-width: 1024px) {
	:root { --hero-height-inner: 560px; }
}
.hero--solid { background: rgb(var(--color-primary)); }  /* 无图纯色 hero */
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero video.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,33,0) 0%, rgba(15,42,33,0) 50%, rgba(15,42,33,0.65) 100%); }
.hero__content {
	position: relative; z-index: 1;
	width: 100%;
	padding-block: var(--space-6);
	display: flex; flex-direction: column;
	align-items: flex-start;                /* ① 文字左对齐 */
	text-align: left;
}
.hero__eyebrow {
	color: rgb(var(--color-accent));
	font-family: var(--font-zh); font-weight: var(--font-weight-medium);
	font-size: var(--text-sm); letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase; margin-bottom: var(--space-3);
	text-shadow: var(--shadow-text-hero-soft);
}
.hero__title {
	font-family: var(--font-display); font-size: var(--text-display);
	font-weight: var(--font-weight-bold);   /* ② 加粗（统一） */
	line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display);
	color: rgb(var(--color-on-primary)); margin: 0;
	text-shadow: var(--shadow-text-hero);    /* ② 阴影（统一） */
}
.hero__subtitle {
	font-size: var(--text-hero-subtitle); line-height: var(--line-height-body);
	color: rgb(var(--color-on-primary)); opacity: 0.92; margin-top: var(--space-4);
	text-shadow: var(--shadow-text-hero-soft);
}
.hero__intro { max-width: var(--paragraph-max-width); line-height: var(--line-height-relaxed); opacity: 0.85; margin-top: var(--space-3); }

/* 页面独立简介：hero 下方编辑式导语（从 hero 内迁出，独立呼吸）
 * 背景 bg-soft + divider-accent + eyebrow 与首页品牌简介呼应；
 * 沙金直角引号「」内联包裹文字，衬线字体 + 正文色提升可读性。 */
.page-intro {
	margin-top: var(--space-6);
	padding: var(--space-7) var(--space-8);
	background: rgb(var(--color-bg-soft));
	text-align: center;
}
.page-intro .divider-accent { margin-bottom: var(--space-3); }
.page-intro .eyebrow { margin-bottom: var(--space-4); }
.page-intro__text { max-width: var(--paragraph-max-width); margin-inline: auto; font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--line-height-relaxed); color: rgb(var(--color-text-body)); }
.page-intro__mark { font-family: var(--font-display); font-size: var(--text-h2); color: rgb(var(--color-accent)); vertical-align: middle; margin: 0 var(--space-1); }
@media (max-width: 768px) {
	.page-intro { margin-top: var(--space-4); padding: var(--space-5) var(--space-4); }
}


/* =========================================================================
 * 移动端汉堡按钮 + 抽屉导航
 * ========================================================================= */
.header-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	padding: 0; border: none; background: transparent;
	cursor: pointer;
}
.header-burger .burger-bar {
	display: block; width: 22px; height: 1px;
	background: rgb(var(--color-on-primary));
	margin-inline: auto;
	transition: transform var(--motion-duration-fast) var(--motion-ease-soft),
	            opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.site-header.scrolled .header-burger .burger-bar { background: rgb(var(--color-text-body)); }

/* 抽屉打开时汉堡变 × */
.header-burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header-burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
.header-burger[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 全屏抽屉 */
.mobile-drawer {
	position: fixed; inset: 0; z-index: 200;
	background: rgb(var(--color-primary));
	color: rgb(var(--color-on-primary));
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding: var(--space-8) var(--space-10);
	opacity: 0; visibility: hidden;
	transition: opacity var(--motion-duration-base) var(--motion-ease-soft),
	            visibility var(--motion-duration-base) var(--motion-ease-soft);
}
.mobile-drawer.is-open { opacity: 1; visibility: visible; }
.mobile-drawer-nav { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.mobile-drawer-link {
	font-family: var(--font-zh);
	font-size: var(--text-h3);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-nav);
	line-height: 2;
	color: rgb(var(--color-on-primary));
	opacity: 0.9;
	transition: color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast);
}
.mobile-drawer-link:hover { color: rgb(var(--color-accent)); opacity: 1; }
.mobile-drawer-cta { margin-top: var(--space-6); width: 100%; }

@media (max-width: 768px) {
	.header-burger { display: flex; }
	.site-header .header-logo { height: 32px; }
	:root {
		--text-nav: 1rem;              /* 移动端导航 16px */
		--text-body: 0.9375rem;        /* 移动端正文 15px */
		--letter-spacing-body: 0.01em; /* 移动端字距收紧 */
	}
}

/* =========================================================================
 * 页面 Hero（页面定制数据驱动）
 * ========================================================================= */
/* 页面 Hero 已统一到上方 .hero 组件系统（.hero--short + .hero__* 角色类）；
   shop_hotel_render_hero() 现输出 .hero 结构，旧的 .shop-hero* 选择器作废。 */

/* =========================================================================
 * Footer
 * ========================================================================= */
.site-footer {
	background: rgb(var(--color-primary)); color: rgb(var(--color-on-primary));
	padding: var(--space-section) 0 var(--space-6);
	margin-top: var(--space-section);
}
.footer-grid {
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8);
	padding-block: var(--space-section);
}
.site-footer .footer-logo { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-display); margin-bottom: var(--space-4); }
.site-footer .footer-title { font-family: var(--font-zh); font-size: var(--text-h4); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-body); margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: rgb(var(--color-on-primary)); opacity: 0.85; transition: var(--transition-slow); }
.site-footer a:hover { color: rgb(var(--color-accent)); opacity: 1; }
.site-footer .footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.site-footer .footer-social a { font-size: var(--text-sm); opacity: 0.75; }
.footer-bottom {
	padding-top: var(--space-6); border-top: 1px solid rgb(var(--color-on-primary-rgb) / 0.1);
	font-size: var(--text-sm); opacity: 0.6;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* =========================================================================
 * 通用幻灯片组件（shop-slider）：零依赖原生轮播
 * 结构由 shop_hotel_slider() 输出；无 JS 时默认显示第一张（渐进增强）。
 * ========================================================================= */
.shop-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: rgb(var(--color-bg-soft));
}
.shop-slider-track {
	display: flex;
	transition: transform var(--motion-duration-base) var(--motion-ease);
	will-change: transform;
}
.shop-slider-slide {
	flex: 0 0 100%;
	min-width: 100%;
	position: relative;
}
.shop-slider-slide img,
.shop-slider-slide video {
	width: 100%;
	display: block;
	object-fit: cover;
}
.shop-slider-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--space-10) var(--space-6) var(--space-6);
	background: linear-gradient(to top, var(--mask-heavy) 0%, transparent 100%);
	color: rgb(var(--color-on-primary));
}
.shop-slider-caption .slider-caption-title { font-family: var(--font-zh); font-weight: var(--font-weight-medium); font-size: var(--text-h3); margin-bottom: var(--space-1); }
.shop-slider-caption .slider-caption-text { font-size: var(--text-sm); opacity: 0.85; }

/* 箭头：默认隐藏，hover 图片容器 / 键盘 focus 时渐变显现（editorial 沉浸式交互） */
.shop-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgb(var(--color-mask-rgb) / 0.55);
	color: rgb(var(--color-on-primary));
	border: none;
	border-radius: var(--radius-sharp);
	cursor: pointer;
	opacity: 0;
	pointer-events: none; /* 隐藏时不可点击，避免遮挡 */
	transition: opacity var(--motion-duration-fast) var(--motion-ease), background var(--transition-slow);
}
.shop-slider:hover .shop-slider-arrow,
.shop-slider-arrow:focus-visible {
	opacity: 1;
	pointer-events: auto;
}
.shop-slider-arrow:hover { background: rgb(var(--color-accent)); color: rgb(var(--color-on-primary)); }
.shop-slider-arrow--prev { left: var(--space-4); }
.shop-slider-arrow--next { right: var(--space-4); }
.shop-slider-arrow svg { width: 20px; height: 20px; }

/* 圆点 */
.shop-slider-dots {
	position: absolute;
	bottom: var(--space-4); left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex; gap: var(--space-2);
}
.shop-slider-dot {
	width: 10px; height: 10px;
	padding: 0;
	border: none;
	border-radius: var(--radius-pill);
	background: rgb(var(--color-on-primary-rgb) / 0.6);
	cursor: pointer;
	transition: var(--transition-slow);
}
.shop-slider-dot.is-active,
.shop-slider-dot:hover { background: rgb(var(--color-accent)); }
.shop-slider-dot:focus-visible { outline: 2px solid rgb(var(--color-accent)); outline-offset: 2px; }

/* 无 JS 兜底：仅第一张可见 */
.shop-slider:not([data-slider]) .shop-slider-slide { display: none; }
.shop-slider:not([data-slider]) .shop-slider-slide:first-child { display: block; }

/* 移动端隐藏箭头（触摸滑动替代） */
@media (max-width: 768px) {
	.shop-slider-arrow { display: none; }
}
/* 触屏设备兜底：无 hover，永不显示箭头（触摸滑动为唯一操作） */
@media (hover: none) {
	.shop-slider-arrow { display: none; }
}

/* 尊重减少动态偏好：禁用过渡动画 */
@media (prefers-reduced-motion: reduce) {
	.shop-slider-track { transition: none; }
}

/* =========================================================================
 * 客房预订流程增强（UI-ROOM-001）—— 复用既有 token，零新增变量
 * 涉及：列表卡片状态 / 详情侧栏 / 确认页 / 成功页 / 灯箱 / 面包屑
 * ========================================================================= */

/* —— 分类徽章（列表卡片标题上方，沙金描边小标签） —— */
.room-cat-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-xs);
	letter-spacing: var(--letter-spacing-nav);
	color: rgb(var(--color-accent));
	border: 1px solid rgb(var(--color-accent));
	padding: 2px 10px;
	margin-bottom: var(--space-2);
	text-decoration: none;
	transition: background var(--transition-slow), color var(--transition-slow);
}
.room-cat-badge:hover {
	background: rgb(var(--color-accent));
	color: rgb(var(--color-on-primary));
}

/* —— 房态紧迫感 / 已订满 —— */
.room-status-limited {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs);
	color: rgb(var(--color-accent));
	font-family: var(--font-num);
	margin-top: var(--space-1);
}
.room-status-limited::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: rgb(var(--color-accent));
}
.room-status-soldout {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-xs);
	color: rgb(var(--color-text-muted));
	margin-top: var(--space-1);
}
/* 已订满卡片整体降饱和 */
.room-item.is-soldout .room-gallery { opacity: 0.55; }
.room-item.is-soldout .btn-primary {
	background: rgb(var(--color-bg-soft));
	color: rgb(var(--color-text-muted));
	pointer-events: none;
	cursor: not-allowed;
}
.room-item.is-soldout .price-amount { color: rgb(var(--color-text-muted)); }

/* —— 骨架屏（价格占位脉动） —— */
.skeleton {
	display: inline-block;
	min-width: 3em;
	height: 1em;
	background: rgb(var(--color-bg-soft));
	color: transparent;
	vertical-align: middle;
}
.skeleton::after {
	content: "…";
	color: rgb(var(--color-text-muted));
}
.is-loading .room-price { opacity: 0.5; }

/* —— 空状态（列表无结果） —— */
.rooms-empty {
	text-align: center;
	padding: var(--space-14) var(--space-5);
	color: rgb(var(--color-text-muted));
}
.rooms-empty .re-icon {
	display: inline-flex;
	width: 72px; height: 72px;
	align-items: center; justify-content: center;
	border: 1px solid rgb(var(--color-border));
	color: rgb(var(--color-accent));
	margin-bottom: var(--space-5);
}
.rooms-empty .re-title {
	font-family: var(--font-zh);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-h3);
	line-height: var(--line-height-card);
	color: rgb(var(--color-text-body));
	margin-bottom: var(--space-2);
}
.rooms-empty .re-desc { margin-bottom: var(--space-5); }

/* —— 面包屑（详情页） —— */
.booking-breadcrumb {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-4) var(--space-6) 0;
	font-size: var(--text-sm);
	color: rgb(var(--color-text-muted));
}
.booking-breadcrumb a {
	color: rgb(var(--color-text-muted));
	transition: color var(--transition-slow);
}
.booking-breadcrumb a:hover { color: rgb(var(--color-primary)); }
.booking-breadcrumb .bc-sep { margin: 0 var(--space-2); opacity: 0.5; }
.booking-breadcrumb .bc-current { color: rgb(var(--color-text-body)); }
@media (max-width: 768px) {
	.booking-breadcrumb { padding: var(--space-3) var(--space-5) 0; font-size: var(--text-xs); }
}

/* —— 步骤指示器（确认页 / 成功页） —— */
.step-indicator {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	font-size: var(--text-sm);
}
.step-indicator .step {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: rgb(var(--color-text-muted));
}
.step-indicator .step .step-label { font-family: var(--font-zh); font-weight: var(--font-weight-medium); }
.step-indicator .step .step-dot {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 24px; height: 24px;
	border: 1px solid rgb(var(--color-border));
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-family: var(--font-num);
	background: rgb(var(--color-surface));
}
.step-indicator .step.is-done .step-dot {
	background: rgb(var(--color-primary));
	border-color: rgb(var(--color-primary));
	color: rgb(var(--color-on-primary));
}
.step-indicator .step.is-current .step-dot {
	background: rgb(var(--color-accent));
	border-color: rgb(var(--color-accent));
	color: rgb(var(--color-on-accent));
}
.step-indicator .step.is-current { color: rgb(var(--color-text-body)); font-weight: var(--font-weight-semibold); }
.step-indicator .step-line {
	flex: 0 0 28px;
	height: 1px;
	background: rgb(var(--color-border));
}
.step-indicator .step-line.is-done { background: rgb(var(--color-accent)); }
@media (max-width: 768px) {
	/* 移动端简化为文字进度条 */
	.step-indicator { gap: var(--space-3); }
	.step-indicator .step .step-label { display: none; }
	.step-indicator .step-line { display: none; }
	.step-indicator .step-mobile {
		display: block;
		font-size: var(--text-xs);
		color: rgb(var(--color-text-muted));
		margin-left: auto;
	}
	.step-indicator .step-bar {
		flex: 1;
		height: 3px;
		background: rgb(var(--color-bg-soft));
		position: relative;
	}
	.step-indicator .step-bar::after {
		content: "";
		position: absolute;
		left: 0; top: 0; bottom: 0;
		background: rgb(var(--color-accent));
		width: var(--step-progress, 50%);
	}
}
@media (min-width: 769px) {
	.step-indicator .step-mobile,
	.step-indicator .step-bar { display: none; }
}

/* —— 订单回显卡（确认页 / 成功页） —— */
.order-recap {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	background: rgb(var(--color-bg-soft));
	padding: var(--space-4);
}
.order-recap .or-img {
	flex: none;
	width: 96px; height: 72px;
	object-fit: cover;
	background: rgb(var(--color-bg-soft));
}
.order-recap .or-body { min-width: 0; flex: 1; }
.order-recap .or-title {
	font-family: var(--font-zh);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-h4);
	line-height: var(--line-height-card);
	margin-bottom: var(--space-1);
}
.order-recap .or-meta {
	font-size: var(--text-sm);
	color: rgb(var(--color-text-muted));
	font-family: var(--font-num);
}
.order-recap .or-change {
	flex: none;
	font-size: var(--text-sm);
	color: rgb(var(--color-primary));
	border-bottom: 1px dotted rgb(var(--color-primary));
	text-decoration: none;
}
.order-recap .or-change:hover { color: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); }
@media (max-width: 768px) {
	.order-recap { flex-wrap: wrap; }
	.order-recap .or-img { width: 100%; height: 140px; }
}

/* —— 逐日价格明细（详情侧栏 / 确认页） —— */
.price-breakdown {
	margin: var(--space-4) 0;
	padding: var(--space-4);
	background: rgb(var(--color-bg-soft));
	font-size: var(--text-sm);
}
.price-breakdown .pb-row {
	display: flex;
	justify-content: space-between;
	padding: var(--space-1) 0;
	font-family: var(--font-num);
	color: rgb(var(--color-text-body));
}
.price-breakdown .pb-row .pb-date { color: rgb(var(--color-text-muted)); }
.price-breakdown .pb-row .pb-sub { font-weight: var(--font-weight-semibold); }
.price-breakdown .pb-sep {
	height: 1px;
	background: rgb(var(--color-border));
	margin: var(--space-2) 0;
}
.price-breakdown .pb-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.price-breakdown .pb-total .pb-total-amount {
	font-family: var(--font-num);
	font-size: var(--text-h3);
	color: rgb(var(--color-accent));
	font-weight: var(--font-weight-semibold);
}
.price-breakdown .pb-empty {
	color: rgb(var(--color-text-muted));
	text-align: center;
	padding: var(--space-2);
}

/* —— 预订须知折叠（确认页） —— */
.policy-collapsible {
	background: rgb(var(--color-bg-soft));
	padding: var(--space-4) var(--space-5);
}
.policy-collapsible .pc-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-zh);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-h4);
	color: rgb(var(--color-text-body));
	padding: 0;
}
.policy-collapsible .pc-trigger .pc-arrow {
	transition: transform var(--transition-slow);
	color: rgb(var(--color-accent));
}
.policy-collapsible.is-open .pc-trigger .pc-arrow { transform: rotate(90deg); }
.policy-collapsible .pc-body {
	display: none;
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	line-height: var(--line-height-relaxed);
	color: rgb(var(--color-text-body));
}
.policy-collapsible.is-open .pc-body { display: block; }
.policy-collapsible .pc-body p { margin-bottom: var(--space-3); }
.policy-collapsible .pc-body p:last-child { margin-bottom: 0; }

/* —— 详情侧栏：成人/儿童 + 紧迫感 —— */
.book-field-row { display: flex; gap: var(--space-3); }
.book-field-row .book-field { flex: 1; }
.book-urgency {
	font-size: var(--text-xs);
	color: rgb(var(--color-accent));
	margin-bottom: var(--space-3);
	font-family: var(--font-num);
}
.book-urgency.is-soldout { color: rgb(var(--color-text-muted)); }
.book-card.is-soldout .btn-primary {
	background: rgb(var(--color-bg-soft));
	color: rgb(var(--color-text-muted));
	pointer-events: none;
}

/* —— 灯箱（原生 dialog，供相册网格复用，不依赖 hero） —— */
.room-lightbox {
	border: none;
	padding: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	background: var(--mask-full);
	color: rgb(var(--color-on-primary));
}
.room-lightbox::backdrop { background: var(--mask-heavy); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.room-lightbox .lb-inner {
	position: relative;
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.room-lightbox .lb-img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
}
.room-lightbox .lb-close,
.room-lightbox .lb-arrow {
	position: absolute;
	background: rgb(var(--color-on-primary-rgb) / 0.15);
	border: none;
	color: rgb(var(--color-on-primary));
	width: 48px; height: 48px;
	display: inline-flex;
	align-items: center; justify-content: center;
	cursor: pointer;
	transition: background var(--transition-slow);
}
.room-lightbox .lb-close:hover,
.room-lightbox .lb-arrow:hover { background: rgb(var(--color-accent)); }
.room-lightbox .lb-close { top: var(--space-4); right: var(--space-4); font-size: 1.5rem; }
.room-lightbox .lb-arrow--prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.room-lightbox .lb-arrow--next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.room-lightbox .lb-count {
	position: absolute;
	bottom: var(--space-5); left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-num);
	font-size: var(--text-sm);
	opacity: 0.8;
}

/* —— 成功页增强 —— */
.succ-notice {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: rgb(var(--color-success));
	margin-top: var(--space-3);
}
.succ-detail-row {
	display: flex;
	justify-content: space-between;
	padding: var(--space-2) 0;
	border-bottom: 1px solid rgb(var(--color-border));
	font-size: var(--text-sm);
}
.succ-detail-row .sd-label { color: rgb(var(--color-text-muted)); }
.succ-detail-row .sd-value { color: rgb(var(--color-text-body)); font-family: var(--font-num); }
.succ-detail-row .sd-value.is-mono { font-family: var(--font-num); }
.succ-actions {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-8);
	flex-wrap: wrap;
}
.succ-tips {
	margin-top: var(--space-6);
	padding: var(--space-5);
	background: rgb(var(--color-bg-soft));
	font-size: var(--text-sm);
	line-height: var(--line-height-relaxed);
	text-align: left;
}
.succ-tips p { margin-bottom: var(--space-2); }
.succ-tips p:last-child { margin-bottom: 0; }
.copy-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: none;
	border: 1px solid rgb(var(--color-border));
	color: rgb(var(--color-text-muted));
	font-size: var(--text-xs);
	padding: 2px 8px;
	cursor: pointer;
	transition: var(--transition-slow);
}
.copy-btn:hover { color: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); }
.copy-btn.is-copied { color: rgb(var(--color-success)); border-color: rgb(var(--color-success)); }

/* —— 确认页表单分组卡 —— */
.bk-section {
	background: rgb(var(--color-surface));
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
	margin-top: var(--space-5);
}
.bk-section .bk-section-title {
	font-family: var(--font-zh);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-h4);
	line-height: var(--line-height-card);
	margin-bottom: var(--space-4);
}
.bk-section .bk-section-title::after {
	content: "";
	display: block;
	width: 32px; height: 2px;
	background: rgb(var(--color-accent));
	margin-top: var(--space-2);
}
.bk-actions {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-6);
	align-items: center;
}
.bk-actions .btn-primary { flex: 1; }
@media (max-width: 768px) {
	.bk-actions { flex-direction: column-reverse; }
	.bk-actions .btn-primary,
	.bk-actions .btn-outline { width: 100%; }
}

/* —— 详情关联推荐：分类标签 —— */
.room-related-card .rc-cat {
	font-size: var(--text-xs);
	color: rgb(var(--color-accent));
	letter-spacing: var(--letter-spacing-nav);
	margin-bottom: var(--space-1);
}

/* —— 通用图片 hover 缩放容器（全站可用，配合 data-lightbox 使用） —— */
.img-zoom { overflow: hidden; }
.img-zoom img {
	transition: transform var(--transition-slow);
	will-change: transform;
}
.img-zoom:hover img { transform: scale(1.05); }
.img-zoom--subtle:hover img { transform: scale(1.03); } /* 大图克制变体 */
@media (prefers-reduced-motion: reduce) {
	.img-zoom img { transition: none; }
	.img-zoom:hover img,
	.img-zoom--subtle:hover img { transform: none; }
}

/* —— 通用灯箱 shop-lightbox（原生 dialog，零依赖，全站可用） —— */
.shop-lightbox {
	border: none;
	padding: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	background: var(--mask-full);
	color: rgb(var(--color-on-primary));
}
.shop-lightbox::backdrop {
	background: var(--mask-heavy);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.shop-lightbox__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shop-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	box-shadow: 0 0 0 6px rgb(var(--color-surface)), 0 12px 48px rgba(15, 42, 33, 0.5);
}
.shop-lightbox__close,
.shop-lightbox__arrow {
	position: absolute;
	background: rgb(var(--color-on-primary-rgb) / 0.15);
	border: none;
	color: rgb(var(--color-on-primary));
	width: 48px; height: 48px;
	display: inline-flex;
	align-items: center; justify-content: center;
	cursor: pointer;
	transition: background var(--transition-slow);
}
.shop-lightbox__close:hover,
.shop-lightbox__arrow:hover { background: rgb(var(--color-accent)); }
.shop-lightbox__close { top: var(--space-4); right: var(--space-4); }
.shop-lightbox__arrow--prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.shop-lightbox__arrow--next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.shop-lightbox__count {
	position: absolute;
	bottom: var(--space-8);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-num);
	font-size: var(--text-sm);
	opacity: 0.8;
}
.shop-lightbox__arrow[hidden],
.shop-lightbox__count[hidden] { display: none; }

/* =========================================================================
 * 渲染优化：content-visibility:auto 非首屏卡片懒渲染
 * 浏览器跳过非视口元素的渲染（含 background-image 加载），滚入视口时按需渲染。
 * contain-intrinsic-size 提供占位尺寸防止滚动条跳变；auto 关键字记忆已渲染尺寸。
 * 与 main.js IntersectionObserver fade-up 兼容：IO 基于布局触发，不受渲染跳过影响。
 * ========================================================================= */
.svc-card,
.room-card,
.dine-card,
.dual-card,
.fac-card,
.news-card {
	content-visibility: auto;
	contain-intrinsic-size: auto 500px;
}