/* 欢喜生活馆官网 - 全站样式 v5「香槟金 × 丝绸粉」
   单一浅色主题：香槟金底 + 棕色文字 + 丝绸粉底框 + 衬线标题
   旧深色模式已下线（v4），data-theme 固定 light，深色变量保留但与浅色一致（兼容旧缓存） */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --pink: #c98e91;
  --pink-soft: #d8a5a7;
  --cyan: #a89288;
  --violet: #7d6e66;
  --bg: #f8f6f3;
  --bg-2: #f3ece5;
  /* 丝绸粉图全线退役（2026-09-21 定调）：框/卡底统一纯白，与主页暖白配色体系一致；
     圆角/边框/阴影沿用 --line + --shadow，全局一处改、全站生效 */
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-solid: #ffffff;
  --line: rgba(80, 55, 45, 0.09);
  --text: #3f3734;
  --text-2: #514945;
  --text-sub: #8d827b;
  --header-bg: rgba(248, 246, 243, 0.55);
  --mask-bg: rgba(61, 50, 42, 0.5);
  --toast-bg: rgba(61, 50, 42, 0.94);
  --footer-bg: rgba(243, 236, 229, 0.65);
  --chip-on-text: #ffffff;
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", "STZhongsong", "SimSun", serif;
  /* 按钮品牌色（2026-11-01 统一为新 logo 的青蓝 + 橙）：
     主按钮青蓝、次/强调按钮橙。两色**不做同按钮渐变**——蓝→橙直接过渡中段会经过灰绿，
     实测发脏（见 tmp/grad-preview.html 对比），故拆成两条单向渐变。
     --grad-warm 保留旧名，值改成品牌蓝，选中态/翻页/小按钮全部随之统一。 */
  --brand: #1FB5E0;
  --brand-2: #FF8A3D;
  --grad-brand: linear-gradient(135deg, #2FC0E8 0%, #1097C4 100%);
  --grad-brand-2: linear-gradient(135deg, #FFA766 0%, #F5761F 100%);
  --grad-warm: linear-gradient(135deg, #2FC0E8 0%, #1097C4 100%);
  --shadow: 0 4px 20px rgba(80, 50, 40, 0.05);
  --body-bg:
    radial-gradient(900px 460px at 88% -8%, rgba(239, 217, 211, 0.35), transparent 60%),
    radial-gradient(800px 460px at -8% 18%, rgba(243, 236, 229, 0.6), transparent 55%),
    var(--bg);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 全局字间距基准（2026-09-21 定调）：中文正文 0.4px——系统字体默认 0 时汉字挤在一起影响阅读；
     各位置按层级再加大：导航/按钮 0.5~1px、小节标题 1px、大标题 2px+（见各自规则） */
  letter-spacing: .4px;
  background: var(--body-bg) fixed;
  color: var(--text);
  min-height: 100vh;
  /* 粘性页脚：内容不足一屏时页脚也钉在视口底部（2026-09-20 修复文章页底部悬空） */
  display: flex; flex-direction: column;
  position: relative; /* 悬浮返回按钮的绝对定位锚点 */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: rgba(185, 106, 111, 0.3); }

/* width:100% 必须显式声明：body 是 flex 纵向布局，flex 子项带 margin:auto 时
   不会拉伸而是收缩到内容宽——内容/互动/产品页曾经因此整体变窄（2026-09-20 修复） */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 32px 60px; }

/* ===== 顶部导航 ===== */
.site-header { width: 100%; position: sticky; top: 0; z-index: 100;
  background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header .hd-inner {
  max-width: 1080px; margin: 0 auto; padding: 10px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap;
}
/* 品牌标识（2026-10-30 定版）：图片横版 Ki 欢喜生活馆，高 30px 与旧文字视觉等高。
   素材 assets/logo-h.png 为透明底，请勿改成白底图（页头是玻璃质感半透明背景）。 */
.logo-img { display: block; flex: 0 0 auto; line-height: 0; }
.logo-img img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 4px; flex-wrap: nowrap; }
/* PC：五个导航均匀铺在 logo 右侧的整条空档里 */
@media (min-width: 769px) {
  .site-header .nav-links { flex: 1; justify-content: space-evenly; margin: 0 28px; }
}
.nav-links a { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--text-sub); font-weight: 600; letter-spacing: .5px; transition: all .2s; white-space: nowrap; }
.nav-links a.on, .nav-links a:hover { color: var(--text); background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line); }
.btn-mini {
  border: none; cursor: pointer; color: #fff; font-weight: 700; font-size: 13px;
  padding: 8px 15px; border-radius: 999px; background: var(--grad-warm);
  box-shadow: 0 4px 16px rgba(185, 106, 111, 0.3);
}
/* ===== 顶栏全局搜索（2026-09-20）：logo 靠左，搜索固定在最右 ===== */
.hd-search { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hd-search input {
  width: 150px; padding: 7px 14px; border-radius: 999px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--line); background: var(--glass-strong); color: var(--text); outline: none;
  transition: width .2s, border-color .2s;
}
.hd-search input:focus { width: 190px; border-color: rgba(185, 106, 111, 0.55); }
.hd-search-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: var(--glass-strong); color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s;
}
.hd-search-btn:hover { background: var(--glass-solid); }
.hd-search-btn:active { transform: scale(.92); }
.hd-search-btn .ico { font-size: 17px; }
/* 主题/灯泡按钮已彻底下线：这一行仅兜底旧缓存页面里残留的按钮，勿删 */
.btn-theme { display: none !important; }

/* ===== 通用组件 ===== */
.card {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--radius, 16px); padding: 18px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.page-title { font-size: clamp(20px, 4.5vw, 26px); font-weight: 900; letter-spacing: 1px; margin: 18px 0 4px; }
.page-title::before { content: "▍"; color: var(--pink); }
.page-sub { font-size: 13px; color: var(--text-sub); letter-spacing: .5px; margin-bottom: 16px; }
.btn {
  border: none; border-radius: 12px; color: #fff; font-weight: bold; font-size: 15px; letter-spacing: .5px;
  cursor: pointer; padding: 11px 22px; transition: transform .1s, opacity .2s;
}
.btn:active { transform: scale(0.97); }
.btn-pink { background: var(--grad-warm); box-shadow: 0 6px 20px rgba(31, 181, 224, 0.3); }
.btn-blue { background: var(--glass-strong); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* 分段切换 */
.tab-row { display: flex; gap: 10px; margin: 14px 0 16px; }
.tab-btn {
  flex: 1; padding: 13px 0; border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  font-size: 15.5px; font-weight: 900; letter-spacing: 1px; color: var(--text-sub); background: var(--glass);
  transition: all .2s;
}
.tab-btn.on {
  background: var(--grad-warm); color: #fff; border-color: transparent;
  box-shadow: 0 6px 20px rgba(185, 106, 111, 0.35);
}

/* 网格 */
.grid { display: grid; gap: 12px; }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* 品牌卡片 */
.brand-card {
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-align: center;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
@media (hover: hover) { .brand-card:hover { transform: translateY(-3px); border-color: rgba(255,110,130,.55); } }
.brand-logo {
  width: 72px; height: 72px; border-radius: 16px; margin: 0 auto 8px;
  background: var(--glass-strong); display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: #a8705f; object-fit: contain;
}
.brand-name { font-size: 14px; font-weight: 700; }

/* 单品卡片 */
.prod-card {
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
@media (hover: hover) { .prod-card:hover { transform: translateY(-3px); border-color: rgba(255,94,120,.55); } }
.prod-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--glass-strong); display: block; }
.prod-name { padding: 9px 10px; font-size: 13px; font-weight: 600; }

/* 品类 chips（选中态不改字重，避免迁移时胶囊宽度跳动） */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  padding: 7px 15px; border-radius: 999px; background: var(--glass);
  border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 800; color: var(--text-sub); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.chip.on { background: var(--grad-warm); color: #fff; border-color: transparent; }
.chip-label { font-size: 12px; color: var(--text-sub); font-weight: 700; margin: 8px 0 4px; letter-spacing: 1px; }

/* 内容列表 */
.content-item {
  display: flex; gap: 12px; background: var(--glass); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px; margin-bottom: 12px; cursor: pointer;
  box-shadow: var(--shadow); transition: border-color .15s;
}
@media (hover: hover) { .content-item:hover { border-color: rgba(255,110,130,.45); } }

/* 丝绸「整匹裁开」已退役（2026-09-21 定调）：原 2×2 象限/纵带取样块整体删除，
   所有卡底回归全局 --glass（纯白）+ --line 边框，与主页统一 */
.content-item .thumb {
  width: 108px; height: 82px; border-radius: 10px; object-fit: cover; background: var(--glass-strong); flex-shrink: 0;
}
.content-item h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.content-item p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-item .meta { font-size: 11.5px; color: var(--text-sub); opacity: .8; }
/* PC 端缩略图放大一倍（2026-10-08）：108×82 在 1080 容器里显得空，且素材占位图本就按 216×164 生成；
   手机端保持 108×82 不变。health.html 的 #list .content-item .thumb（108×108）id 优先级更高，不受影响 */
@media (min-width: 900px) {
  .content-item { gap: 16px; padding: 14px; }
  .content-item .thumb { width: 216px; height: 164px; border-radius: 12px; }
  .content-item h4 { font-size: 17px; }
  .content-item p { font-size: 13.5px; }
  .content-item .meta { font-size: 12.5px; }
}
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,94,120,0.16); color: var(--pink); margin-right: 6px; }
[data-theme="dark"] .tag { color: var(--pink-soft); }

/* 置顶入口卡 */
.pinned-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pin-card {
  border-radius: 18px; padding: 20px 16px; color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow);
  background: var(--glass); border: 1px solid var(--line); position: relative; overflow: hidden;
}
.pin-card b { font-size: 17px; }
.pin-card span { font-size: 12px; color: var(--text-sub); }

/* 文章页 */
.article-title { font-size: clamp(19px, 4.5vw, 23px); font-weight: 900; line-height: 1.45; margin: 16px 0 8px; }
.article-meta { font-size: 12.5px; color: var(--text-sub); margin-bottom: 14px; }
.article-content { font-size: 15.5px; line-height: 1.85; word-break: break-word; color: var(--text-2); }
.article-content img, .article-content video { max-width: 100%; border-radius: 10px; }
/* 正文图片宽度（2026-10-02 用户定调）：编辑器「素材库/上传」插入时即写入 inline width:50%，
   选中图片后可用悬浮菜单改成 30/75/100%。
   手机屏窄 → 小屏(<900px)整档上浮一档：30%→50%、50%→75%、75%→100%（100% 与未设宽度的图本来就满宽）；
   电脑(≥900px)严格按档位显示。
   只接管百分比档：公众号同步文章里的定宽图（width:NNNpx !important，inline 重要声明无法被覆盖）
   维持原样 —— 它们在手机上已被 max-width:100% 撑满，符合同一观感。 */
@media (max-width: 899px) {
  .article-content img[style*="width:30%"], .article-content img[style*="width: 30%"] { width: 50% !important; }
  .article-content img[style*="width:50%"], .article-content img[style*="width: 50%"] { width: 75% !important; }
  .article-content img[style*="width:75%"], .article-content img[style*="width: 75%"] { width: 100% !important; }
}
/* 正文商品卡（2026-10-12 用户需求）：后台编辑器「🛍 插入商品」写入 <a href="xitoys-prod:<id>">，
   前台 article.html 的 bindArtProds() 渲染成 <figure class="art-prod" data-w="50">。
   交互：点商品图 → 弹该商品二维码（商品第二张图）→ 微信内长按识别直达商品、手机/电脑扫码购买；
   弹窗里点二维码图或「点击进入商城」→ 进小程序商城主页。
   宽度沿用正文图片档位（电脑严格按档；手机端整档上浮一档，与图片规则保持一致）。 */
.article-content .art-prod { margin: 18px auto; cursor: pointer; -webkit-tap-highlight-color: transparent; text-indent: 0 !important; }
.article-content .art-prod[data-w="30"] { width: 30%; }
.article-content .art-prod[data-w="50"] { width: 50%; }
.article-content .art-prod[data-w="75"] { width: 75%; }
.article-content .art-prod[data-w="100"] { width: 100%; }
.article-content .art-prod img { display: block; width: 100%; max-width: 100%; border-radius: 12px; box-shadow: 0 5px 18px rgba(160, 110, 140, .14); }
.article-content .art-prod figcaption { text-align: center; font-size: 12.5px; color: #b06a85; font-weight: 700; margin-top: 8px; letter-spacing: .3px; }
.article-content .art-prod:hover img { box-shadow: 0 8px 24px rgba(160, 110, 140, .22); }
@media (max-width: 899px) {
  .article-content .art-prod[data-w="30"] { width: 50%; }
  .article-content .art-prod[data-w="50"] { width: 75%; }
  .article-content .art-prod[data-w="75"], .article-content .art-prod[data-w="100"] { width: 100%; }
}
/* 正文段落首行缩进（2026-10-02 用户定调）：电脑端段前空两格显正式，手机端不留缩进
   —— 手机一行本就短，空两格会让右边缘参差不齐。
   只有「有文字的普通段落」会被 article.html 的 applyParaIndent() 打上 .ind-p：
   居中/右对齐段落（图注、小标题）、纯图片/视频段、空段与便签一律不缩进。
   旧数据里写死的 inline text-indent 在打标时同时清掉，避免手机端残留。 */
@media (min-width: 900px) { .article-content .ind-p { text-indent: 2em; } }
@media (max-width: 899px) { .article-content .ind-p { text-indent: 0 !important; } }
/* 「便签」（blockquote，2026-09-28）：后台编辑器「便签」按钮插入，站内丝绸卡片风；
   便签 HTML 极简（blockquote 直挂 strong 标题 + 文本），标题色/内容色由这里统一渲染 */
.article-content blockquote {
  margin: 18px 0; padding: 13px 18px 14px;
  background: linear-gradient(135deg, #fdf8f6 0%, #f8eeeb 100%);
  border: 1px solid rgba(185, 118, 123, .28);
  border-left: 4px solid #c98e91;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(160, 100, 105, .08);
  color: #6f625b; line-height: 1.9;
}
.article-content blockquote strong { color: #b0656b; font-weight: 800; }
.article-content blockquote p { margin: 6px 0; }
/* 上一篇/下一篇：上下两行整条横幅，箭头固定在两端，标题过长省略号截断（2026-09-21 用户定调） */
.neighbor-row { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.neighbor-row a {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow);
}
.neighbor-row a .nb-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neighbor-row a .arr { flex: none; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: var(--mask-bg); z-index: 999;
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-mask.show { display: flex; }
.modal-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; padding: 26px 22px; text-align: center;
  width: 100%; max-width: 330px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.modal-close { position: absolute; right: 12px; top: 10px; border: none; background: none; font-size: 20px; color: #999; cursor: pointer; }
.qr-img { width: 210px; height: 210px; object-fit: contain; border-radius: 12px; background: #fff; padding: 6px; }

/* 年龄确认 */
#age-mask { position: fixed; inset: 0; background: var(--mask-bg); z-index: 9999; display: flex; justify-content: center; align-items: center; }
#age-box { background: var(--bg-2); border: 1px solid var(--line); padding: 28px 24px; border-radius: 22px; text-align: center; width: 84%; max-width: 320px; }
#age-box h3 { margin: 0 0 10px; }
#age-box p { font-size: 13px; color: var(--text-sub); margin: 0 0 18px; }
.age-btns { display: flex; gap: 12px; }
.age-btns .btn { flex: 1; }

/* 页脚 */
.site-footer { width: 100%; margin-top: auto; background: var(--footer-bg); border-top: 1px solid var(--line); padding: 22px 14px 30px; text-align: center; }
/* 页脚：手机端居中堆叠（默认）；PC 端左联系/右二维码、备案独立最底层（fwrap/fbeian-row） */
.site-footer .fwrap { display: flex; flex-direction: column; align-items: center; }
.site-footer .fleft { text-align: center; }
.site-footer .fbrand { font-weight: 900; font-size: 16px; margin-bottom: 6px; color: var(--pink); font-family: var(--serif); }
.site-footer .fbrand .fbrand-sub { font-size: 12px; font-weight: 600; color: var(--text-sub); letter-spacing: .3px; }
.site-footer .fmeta { font-size: 12px; color: var(--text-sub); line-height: 1.8; }
.site-footer .fbeian-row { max-width: 1080px; margin: 16px auto 0; padding-top: 12px; border-top: 1px solid var(--line); width: calc(100% - 28px); }
.site-footer .fmeta .beian { color: var(--text-sub); text-decoration: none; font-size: 11.5px; letter-spacing: .3px; }
.site-footer .fmeta .beian:hover { color: var(--pink); text-decoration: underline; }
.site-footer .fbeian-row .beian { color: var(--text-sub); text-decoration: none; font-size: 11.5px; letter-spacing: .3px; }
.site-footer .fbeian-row .beian:hover { color: var(--pink); text-decoration: underline; }
.site-footer .fbeian-row .beian-ga img { width: 11px; height: auto; vertical-align: -2px; margin-right: 2px; display: inline-block; }
.site-footer .fbeian-row .bcomp { color: var(--text-sub); font-size: 11.5px; letter-spacing: .3px; }
/* 手机端：公司名独立一行，两个备案号合排一行（2026-09-26 用户定调） */
@media (max-width: 768px) {
  .site-footer .fbeian-row .bsep { display: none; }
  .site-footer .fbeian-row .bcomp { display: block; margin-bottom: 5px; }
  .site-footer .fbeian-row .beian-list { display: block; white-space: nowrap; font-size: 0; }
  .site-footer .fbeian-row .beian-list .beian { font-size: 11px; letter-spacing: .2px; }
  .site-footer .fbeian-row .beian-list .bsep2 { font-size: 11px; color: var(--text-sub); }
  .site-footer .fbeian-row .beian-ga img { width: 10px; vertical-align: -1.5px; }
}
.footer-qr { display: flex; gap: 22px; justify-content: center; margin: 14px 0 6px; }
.footer-qr figure { margin: 0; font-size: 11.5px; color: var(--text-sub); }
.footer-qr img { width: 92px; height: 92px; object-fit: contain; border-radius: 10px; background: #fff; padding: 4px; }
@media (min-width: 769px) {
  .site-footer .fwrap { flex-direction: row; justify-content: space-between; align-items: center; max-width: 1080px; margin: 0 auto; width: calc(100% - 28px); gap: 24px; }
  .site-footer .fleft { text-align: left; }
  .site-footer .fbrand { font-size: 18px; margin-bottom: 10px; }
  .site-footer .fbrand .fbrand-sub { font-size: 13px; }
  .site-footer .fbeian-row { margin-top: 20px; padding-top: 14px; }
}

/* 提示 toast */
#toast {
  position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%);
  background: var(--toast-bg); color: #fff; font-size: 13.5px; padding: 10px 20px;
  border-radius: 999px; z-index: 1000; display: none; max-width: 80vw; text-align: center;
}

.empty-tip { text-align: center; color: var(--text-sub); opacity: .75; font-size: 13px; padding: 30px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.section-head b { font-size: 16px; letter-spacing: 1px; }
.section-head .more { font-size: 12.5px; color: var(--pink); letter-spacing: .5px; }
[data-theme="dark"] .section-head .more { color: var(--pink-soft); }

/* 三端适配 */
/* 手机/平板（≤768px）：顶栏两行——logo 独占一行居中，五个导航均匀分布下一行 */
@media (max-width: 768px) {
  .site-header .hd-inner { flex-wrap: wrap; row-gap: 2px; padding: 8px 13px; position: relative; }
  .logo-img { flex: 1; }
  .logo-img img { height: 27px; }
  /* 手机端搜索：只显示放大镜按钮，点击展开输入条 */
  .hd-search input { display: none; }
  .hd-search.open input {
    display: block; position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; z-index: 60;
    width: auto; padding: 10px 16px; font-size: 14px;
    background: var(--glass-solid); box-shadow: 0 10px 30px rgba(120, 90, 80, .18);
  }
  .hd-search-btn { width: 32px; height: 32px; }
  .hd-search-btn .ico { font-size: 16px; }
  /* 手机导航：两边留白 + 字间距 + 均匀居中排布 */
  .site-header .nav-links { order: 3; width: 100%; justify-content: space-evenly; gap: 0; padding: 0 14px; }
  .site-header .nav-links a { padding: 5px 8px; font-size: 13px; letter-spacing: 1px; }
}
@media (max-width: 560px) {
  .pinned-row { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .wrap { padding: 0 13px 50px; }
  .logo-img img { height: 25px; }
  /* 内容页分类筛选：手机上等宽三列，均匀不挤 */
  #cat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #cat-row .chip { text-align: center; justify-content: center; }
}
/* ===== V68 产品页品牌/品类格（2026-09-21 用户定调）：手机/微信端图标缩小 =====
   大屏手机 4 列；≤380px 小屏 3 列。只动产品页（#pane-brand/#pane-cat），首页圆形格不受影响。 */
@media (max-width: 768px) {
  #pane-brand .grid-4, #pane-cat .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (max-width: 380px) {
  #pane-brand .grid-4, #pane-cat .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
/* ===== 通用箭头图形（用户提供的箭头形状，黑图做 mask 模板，颜色跟随 currentColor） ===== */
.arr {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: url('/assets/arrow-black.png') center / contain no-repeat;
  mask: url('/assets/arrow-black.png') center / contain no-repeat;
}
.arr-r { transform: scaleX(-1); }   /* → */
.arr-u { transform: rotate(90deg); } /* ↑ */
.arr-d { transform: rotate(-90deg); } /* ↓ */

/* ===== 通用图标（2026-09-20：用户提供的统一风格黑图，同 .arr 用 mask 模板，颜色跟随 currentColor） ===== */
.ico {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ico-like     { --ico: url('/assets/icons/like.png'); }
.ico-comment  { --ico: url('/assets/icons/comment.png'); }
.ico-share    { --ico: url('/assets/icons/share.png'); }
.ico-dots     { --ico: url('/assets/icons/dots.png'); }
.ico-arrup    { --ico: url('/assets/icons/arrow-up.png'); }
/* 视频全屏层关闭按钮：视频框外右上角的白色圆钮 ×（mask 图标，2026-09-20 用户定调） */
.vid-x {
  position: absolute; top: -52px; right: -2px; width: 40px; height: 40px;
  border: none; padding: 0; cursor: pointer; z-index: 3; background: #fff;
  -webkit-mask: url('/assets/icons/xmark.png') center / contain no-repeat;
  mask: url('/assets/icons/xmark.png') center / contain no-repeat;
}
/* 正文视频（2026-09-20 晚用户定调）：容器 + 居中大播放键。
   电脑端视频只占一半宽（手机端仍全宽）；点大键在小框播放，播放中点视频空白处放大 */
.vid-wrap { position: relative; display: block; max-width: 100%; }
.vid-wrap video { display: block; width: 100%; border-radius: 10px; background: #000; }
.vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(0, 0, 0, .48); display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background .18s ease; z-index: 2;
}
.vid-play::after {
  content: ''; display: block; margin-left: 5px;
  border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
}
.vid-play:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(0, 0, 0, .68); }
.vid-wrap.playing .vid-play { display: none; }
@media (min-width: 900px) { .article-content .vid-wrap { width: 50%; } }
.ico-search   { --ico: url('/assets/icons/search.png'); }
.ico-phone    { --ico: url('/assets/icons/phone.png'); }
/* 首页「理解欢喜」标签图标（2026-09-25 用户提供三图，黑图+alpha，同 mask 模板跟 currentColor） */
.ico-industry { --ico: url('/assets/icons/industry.png'); }
.ico-history  { --ico: url('/assets/icons/history.png'); }
.ico-coop     { --ico: url('/assets/icons/coop.png'); }
.ico-loc      { --ico: url('/assets/icons/location.png'); }
.ico-image    { --ico: url('/assets/icons/image.png'); }
.ico-video    { --ico: url('/assets/icons/video.png'); }
.ico-edit     { --ico: url('/assets/icons/edit.png'); }
.ico-link     { --ico: url('/assets/icons/link.png'); }   /* 链接（2026-09-21 用户提供的链条图，替换全站 🔗 emoji） */
.ico-nav      { --ico: url('/assets/icons/nav.png'); }

/* 行内复制小按钮（联系我们电话旁） */
.copy-mini {
  border: 1px solid var(--line); background: var(--glass); color: var(--text-sub);
  font-family: inherit; font-weight: 600; font-size: 12px; cursor: pointer;
  padding: 3px 12px; border-radius: 999px; vertical-align: 1px; margin-left: 6px;
  transition: .15s;
}
.copy-mini:hover { color: var(--pink); border-color: var(--pink-soft); }
/* 三个地图按钮：强制一行，手机端字号收紧并隐藏「地图」二字 */
.map-row { display: flex; gap: 10px; margin-top: 12px; }
.map-row .btn { flex: 1; white-space: nowrap; text-align: center; padding-left: 8px; padding-right: 8px; }
@media (max-width: 768px) {
  .map-row { gap: 8px; }
  .map-row .btn { font-size: 13px; padding: 8px 6px; }
  .map-word { display: none; }
}
.ico-network  { --ico: url('/assets/icons/network.png'); }
.ico-category { --ico: url('/assets/icons/category.png'); }
.ico-brand    { --ico: url('/assets/icons/brand.png'); }
.ico-rope     { --ico: url('/assets/icons/rope.png'); }

/* 微信内置浏览器：禁用高开销模糊，防卡顿 */
@supports (-webkit-touch-callout: none) {
  .card, .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
}

/* ===== 悬浮操作按钮：左下「返回上一级列表」/ 右下「回到顶部」 ===== */
.float-back {
  position: fixed; left: max(16px, calc((100vw - 1080px) / 2 + 10px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 64vw; padding: 10px 16px 10px 13px; border-radius: 999px;
  background: var(--glass-solid); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  box-shadow: 0 8px 26px rgba(70, 80, 140, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .16s, box-shadow .16s, opacity .22s;
  animation: floatIn .3s cubic-bezier(.2, .8, .25, 1) both;
}
/* 滑动页面时隐藏「返回上一级」，停止滑动后恢复 */
.float-back.sc-hide { opacity: 0; pointer-events: none; }
.float-back .fb-ico { font-size: 14px; line-height: 1; color: var(--text); display: inline-flex; }
@supports (-webkit-touch-callout: none) { .float-back { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (hover: hover) { .float-back:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 110, 130, .28); } }
.float-back:active { transform: scale(.96); }

.to-top {
  position: fixed; right: max(16px, calc((100vw - 1080px) / 2 + 10px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  color: var(--text); font-size: 16px; font-weight: 900; line-height: 1;
  background: var(--glass-solid);
  box-shadow: 0 8px 26px rgba(70, 80, 140, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .16s, box-shadow .16s;
}
.to-top.show { display: flex; animation: floatIn .26s cubic-bezier(.2, .8, .25, 1) both; }
.to-top:active { transform: scale(.92); }
@supports (-webkit-touch-callout: none) { .to-top { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (hover: hover) { .to-top:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 110, 130, .28); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }

body.has-float-back .site-footer { padding-bottom: 66px; }
@media (max-width: 560px) {
  .float-back { left: max(12px, calc((100vw - 1080px) / 2 + 10px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; padding: 9px 14px 9px 11px; }
  .to-top { right: max(12px, calc((100vw - 1080px) / 2 + 10px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
}

/* ================================================================
   游戏容器模式（2026-09-28）—— 让第三方独立小游戏页与全站观感一致
   页面声明 window.__GAME_MODE = true 后，common.js 会给 body 加 .game-mode：
   ① 隐藏全站页头/页脚（游戏自带顶栏，避免双层导航占满屏幕）；
   ② 直连游戏页时注入底部导航条（.game-float）：「返回互动」靠左、「主页」靠右，
      通栏贴底、毛玻璃底；iframe 内（/g/<id> 容器页）不注入（容器顶栏已有）。
   游戏内容经 body.game-float-on 的 padding-bottom 预留空间，不被导航条遮挡。
   ================================================================ */
body.game-mode { overflow: hidden; }
body.game-mode .site-header,
body.game-mode .site-footer,
body.game-mode .to-top { display: none !important; }

.game-float {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(248, 246, 243, .97) 55%, rgba(248, 246, 243, .78));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.game-float button {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .94); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .5px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(70, 50, 45, .12);
  opacity: .9; transition: opacity .18s, transform .18s, box-shadow .18s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.game-float button:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(31, 181, 224, .28); }
.game-float button:active { transform: scale(.95); }
.game-float .gf-ico {
  display: inline-block; width: 13px; height: 13px; background-color: currentColor;
  -webkit-mask: url('/assets/arrow-black.png') center / contain no-repeat;
  mask: url('/assets/arrow-black.png') center / contain no-repeat;
}
.game-float .gf-home { color: var(--pink); }
/* 直连游戏页：底部预留导航条空间，游戏内容不被遮挡 */
body.game-float-on { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important; }

/* ================================================================
   首页 v4「暖米杂志风」六大模块
   （2026-09-21 用户定调：首页宽度与其他页一致，统一 .wrap 1080px，勿再单独放宽）
   ================================================================ */

/* ---------- 区块标题 ---------- */
.section-head { margin: 34px 0 16px; align-items: flex-end; }
.section-head .sh-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.section-head b.sec-title {
  font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 2px; color: var(--text);
}
.section-head .sec-note { font-size: 12.5px; color: var(--text-sub); letter-spacing: 1px; }
.section-head .sec-more { font-size: 12.5px; color: var(--pink); white-space: nowrap; }
@media (hover: hover) { .section-head .sec-more:hover { opacity: .75; } }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative; margin-top: 14px; border-radius: 22px; overflow: hidden;
  /* 双端统一比例（2026-10-19 用户定调）：1080 : 493 ≈ 2.19，PC 1080×493、手机 390×178，
     两端比例完全一致 —— 上传前按 2.19:1 裁好图，PC/手机都不再被裁切。
     第一行 height 给不支持 aspect-ratio 的老内核兜底，后面 auto 覆盖。 */
  height: 430px; aspect-ratio: 1080 / 493; height: auto;
  background: linear-gradient(115deg, #f3e7d8, #ecd5cd 55%, #e7c9c4);
  box-shadow: var(--shadow); border: 1px solid var(--line);
  cursor: pointer; /* 整图点击跳转（按钮已删，2026-09-20） */
}
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide {
  background-size: cover; background-position: center 30%;
  opacity: 0; transition: opacity .8s ease;
}
.hero-slide.on { opacity: 1; }
/* 标题局部雾（2026-10-13 用户定调）：只有当屏配了标题时才有雾，雾只裹在标题周边（左侧偏上），
   不铺满整条；没配标题的屏完全不加雾，图片原样透出（.has-title 由 heroRender 动态切换）。
   2026-10-13 二次定调：雾范围收到红框大小 ≈ 左 3%~48% 宽 / 上 5%~45% 高
   2026-10-13 三次定调：大小不变、整体上移、压扁偏矩形（横宽纵窄椭圆） */
.hero.has-title .hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(31% 20% at 25% 15%, rgba(252,240,242,.8) 0%, rgba(252,240,242,.52) 42%, rgba(252,240,242,.16) 68%, rgba(252,240,242,0) 82%);
}
.hero-inner { position: relative; z-index: 2; padding: 36px 52px; max-width: 620px; }
.hero-title {
  font-family: var(--serif); font-weight: 700; color: var(--text);
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.3; letter-spacing: 4px; margin: 0 0 12px;
}
.hero-sub { font-size: 14.5px; line-height: 1.9; color: var(--text-2); letter-spacing: 1px; margin: 0 0 20px; }
.hero-nav { position: absolute; right: 22px; bottom: 58px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.hero-arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: var(--glass-strong); color: var(--text); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
@media (hover: hover) { .hero-arrow:hover { background: var(--text); color: #faf5ec; } }
.hero-foot { position: absolute; left: 56px; right: 80px; bottom: 26px; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.hero-dots { display: flex; gap: 7px; }
.hdot { width: 7px; height: 7px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: rgba(56,49,42,.22); transition: all .3s; }
.hdot.on { width: 22px; background: var(--text); }
.hero-count { font-size: 12px; color: var(--text-sub); letter-spacing: 2px; }
.hero-count b { font-size: 15px; color: var(--text); }

/* ---------- 2. 服务保障条 ---------- */
.assure {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 18px 0 4px;
}
.assure-item {
  display: flex; align-items: center; gap: 12px; padding: 16px 14px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px;
  cursor: pointer; transition: border-color .15s, transform .15s;
}
@media (hover: hover) { .assure-item:hover { border-color: rgba(185,106,111,.45); transform: translateY(-2px); } }
.assure-item svg { width: 30px; height: 30px; color: #a8705f; flex-shrink: 0; }
.assure-item b { display: block; font-size: 14px; letter-spacing: 1px; }
.assure-item span { display: block; font-size: 11.5px; color: var(--text-sub); margin-top: 3px; }

/* ---------- 3. 精选内容 ---------- */
.feat-grid { display: grid; grid-template-columns: 1.25fr 1fr 0.72fr; gap: 14px; }
/* 左列 = 头条 + 2号位 竖排（2026-09-20 夜：两张大图改等高，各占一半拉平整列） */
.feat-left { display: grid; grid-template-rows: repeat(2, minmax(190px, 1fr)); gap: 14px; min-width: 0; }
.feat-head {
  position: relative; border-radius: 18px; overflow: hidden; cursor: pointer; height: auto; min-height: 0;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--bg-2);
}
.feat-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(30,22,16,.72) 100%); }
.feat-tag {
  position: absolute; z-index: 2; right: 14px; top: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 4px 11px; border-radius: 999px;
  background: rgba(252,238,239,.9); color: #8b5e4e; backdrop-filter: blur(6px); cursor: pointer;
}
.feat-tag.sm { top: 10px; right: 10px; }
.feat-head-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px; }
.feat-head-info b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.feat-head-info em { display: inline-block; font-style: normal; font-size: 12px; color: rgba(255,255,255,.85); margin-top: 8px; letter-spacing: 1px; }
.feat-list { display: flex; flex-direction: column; gap: 12px; }
.feat-item {
  position: relative; flex: 1; display: flex; gap: 12px; align-items: center; padding: 12px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .15s, transform .15s;
}
@media (hover: hover) { .feat-item:hover { border-color: rgba(185,106,111,.45); transform: translateY(-2px); } }
.feat-item img { width: 96px; height: 76px; border-radius: 11px; object-fit: cover; flex-shrink: 0; background: var(--glass-strong); }
.feat-item-txt { min-width: 0; padding-right: 56px; }
.feat-item-txt b {
  font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feat-side { display: none; }   /* 粉色渐变专题栏已废弃（2026-09-21 挪到页底 .topic-row），样式保留一条兜底 */

/* 定高滚动容器（精选小图文，2026-09-21 定调：可上下拉、不循环） */
.feat-list.vscroll { overflow-y: auto; scrollbar-width: none; cursor: grab; overscroll-behavior: contain; }
.feat-list.vscroll::-webkit-scrollbar { display: none; }
.feat-list.vscroll.grab { cursor: grabbing; }
.prod-fill { display: none; }   /* 粉圆角矩形占位卡已废弃（2026-09-21 定调清理），保留类名防残留引用 */

/* ---------- 5. 品牌与产品：品牌轮换板（单品区自 v5 改版起用 .pc-wrap，旧 .bp-wrap 已废弃） ---------- */
.brand-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; min-height: 264px;
}
.brand-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 16px; cursor: pointer; user-select: none; touch-action: pan-y;
  transition: transform .28s cubic-bezier(.25,.9,.3,1.15), background .2s;
}
@media (hover: hover) { .brand-cell:hover { background: var(--glass); } }
.brand-cell img { pointer-events: none; }
.brand-board.is-dragging { cursor: grabbing; }
.brand-board.is-dragging .brand-cell:hover { background: transparent; }
.brand-cell.dragging { transition: none !important; z-index: 10; position: relative; }
.brand-cell.dragging .brand-orb { box-shadow: 0 16px 34px rgba(60,40,30,.28); border-color: rgba(185,106,111,.6); }
.brand-cell.cell-in { animation: cellIn .45s cubic-bezier(.25,.9,.3,1.15) both; }
@keyframes cellIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.brand-cell.cell-slide-in { animation: cellSlideIn .5s cubic-bezier(.25,.9,.3,1) both; }
@keyframes cellSlideIn { from { opacity: 0; transform: translateX(-52px); } to { opacity: 1; transform: none; } }
/* 轮换时滑出的格子：固定定位幽灵克隆，向左滑出淡出 */
.cell-ghost {
  position: fixed; z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  /* 快速滑出淡出：轮换间歇已减半（1.3s），幽灵必须更快退场，否则像"背景残留" */
  transition: transform .45s cubic-bezier(.5,0,.75,0), opacity .45s ease;
}
.cell-ghost.out { transform: translateX(-52px); opacity: 0; }
/* 品牌格子：圆角正方形背景（logo 是正方形，框也应该是正方形） */
.brand-orb {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: box-shadow .2s, border-color .2s; overflow: hidden; padding: 16%;
}
.brand-orb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-cell i { display: block; font-style: normal; font-size: 12px; color: var(--text-sub); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* V72 溢出加固：默认裁剪（旧缓存 JS/脚本半路失败时，单品也绝不许漫出容器压到别的板块）。
   .scroll 态在下方覆盖为 overflow-y:auto；手机端媒体查询另开横滑。 */
.home-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: calc((var(--bp-h, 344px) - 10px) / 2); height: var(--bp-h, 344px); min-width: 0; overflow: hidden; }
.home-prods.scroll { overflow-y: auto; scrollbar-width: none; cursor: grab; overscroll-behavior: contain; }
.home-prods.scroll::-webkit-scrollbar { display: none; }
.home-prods.scroll.grab { cursor: grabbing; }
/* 拖动中让卡片脱离子事件命中（hover/图片拖拽不再打断滚动，明显减卡顿） */
.home-prods.scroll.grab .prod-card, .feat-list.vscroll.grab .feat-item { pointer-events: none; }
.home-prods .prod-card { display: flex; flex-direction: column; }
.home-prods .prod-img { flex: 1; width: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.home-prods .prod-name { padding: 7px 6px; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- 6. 一起玩 ---------- */
.play-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.play-card {
  position: relative; border-radius: 18px; padding: 24px; cursor: pointer; overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 21 / 9; box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: center;
}
.play-card b { display: block; font-family: var(--serif); font-size: 19px; letter-spacing: 2px; position: relative; z-index: 2; }
.play-card span { display: block; font-size: 12.5px; color: var(--text-sub); margin-top: 6px; position: relative; z-index: 2; }
.play-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.play-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(252,238,239,.93) 28%, rgba(252,238,239,.3) 72%); z-index: 1; }
.play-a { background: linear-gradient(120deg, #fbe9e7, #f5d7d5); }
.play-b { background: linear-gradient(120deg, #e8eef0, #d9e4e8); }
.play-deco { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; gap: 10px; opacity: .8; }
.play-deco i { display: block; border-radius: 50%; }
.play-a .play-deco i:nth-child(1) { width: 46px; height: 46px; background: rgba(185,106,111,.3); }
.play-a .play-deco i:nth-child(2) { width: 30px; height: 30px; background: rgba(207,141,146,.4); margin-top: 22px; }
.play-a .play-deco i:nth-child(3) { width: 18px; height: 18px; background: rgba(168,112,95,.35); margin-top: 6px; }
.play-b .play-deco i:nth-child(1) { width: 46px; height: 46px; background: rgba(120,150,165,.32); }
.play-b .play-deco i:nth-child(2) { width: 30px; height: 30px; background: rgba(150,175,190,.4); margin-top: 22px; }
.play-b .play-deco i:nth-child(3) { width: 18px; height: 18px; background: rgba(100,130,150,.35); margin-top: 6px; }

/* ---------- 首页响应式：只分电脑 / 手机（≤768px）两档 ---------- */
/* 单品横滑方向标识：仅手机端显示（PC 隐藏）。
   深色底 + 浅色箭头：浅色/深色主题、任何卡片底色上都可见（2026-09-20 微信端反馈优化） */
.hs-nav { display: none; }
.hs-wrap { position: relative; }
@media (max-width: 768px) {
  /* hero 手机端压低（2026-09-20 用户定调）：比例尽量接近电脑端 2.4:1 */
  .hero { border-radius: 18px; }
  .hero-inner { padding: 16px 22px; }
  .hero-title { font-size: 23px; letter-spacing: 2px; margin-bottom: 5px; }
  .hero-sub { font-size: 11.5px; line-height: 1.65; margin-bottom: 0; }
  /* 手机端雾：标题占屏比例更大，雾裹范围相应放大（2026-10-13 二次定调：收紧到标题区） */
  .hero.has-title .hero-slide::after {
    background: radial-gradient(39% 26% at 28% 20%, rgba(252,240,242,.85) 0%, rgba(252,240,242,.55) 42%, rgba(252,240,242,.15) 70%, rgba(252,240,242,0) 85%);
  }
  .hero-foot { left: 22px; right: 22px; bottom: 11px; }
  .hero-nav { right: 14px; bottom: 38px; gap: 6px; }
  .hero-arrow { width: 28px; height: 28px; font-size: 13px; }
  .assure { grid-template-columns: 1fr 1fr; gap: 9px; }
  .assure-item { padding: 12px 11px; }
  .assure-item svg { width: 24px; height: 24px; }
  .assure-item b { font-size: 13px; }
  .assure-item span { font-size: 10.5px; }
  .section-head b.sec-title { font-size: 20px; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat-left { display: contents; }   /* 手机端：头条直接铺开，2号位只在电脑端出现 */
  /* 大图与小图文/电脑端同比（≈593:420 ≈ 1.41，2026-09-21 定调加高）：
     402px 视口下内容宽 376 → 高约 266px */
  .feat-head { height: auto; min-height: 0; aspect-ratio: 593 / 420; }
  .feat-list { height: auto; overflow: visible; }
  .feat-list .feat-item { flex: 0 0 auto; height: 104px; }
  .home-wrap .feat-list.vscroll { height: 360px; }   /* 一屏约 3 张（112×3 + 间距 24） */
  .home-wrap .feat-list.vscroll .feat-item { height: 112px; }
  /* V68：滚到首/尾继续滑 → 自然带动整屏（电脑端仍 contain，避免鼠标滚轮误带页面） */
  .home-wrap .feat-list.vscroll { overscroll-behavior: auto; }
  .home-wrap .feat-item img { width: 120px; height: 85px; border-radius: 8px; }   /* 与大图同比 1.41 */
  .play-row { grid-template-columns: 1fr; }
  .brand-board { min-height: 0; }
  /* V66：手机端品牌/品类格改圆角矩形（圆形只保留在首页精选品牌 .home-wrap 覆盖） */
  .brand-orb { border-radius: 16px; }
  /* V73：手机端单品一行 2 个整卡 + 最右露出第三列一点头（形象提示可左右滑）；
     左右箭头取消（V73 用户定调：箭头删掉，用露头提示方向） */
  .home-prods {
    height: auto; grid-template-columns: none; grid-auto-rows: auto;
    grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc(45% - 5px); gap: 10px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    scroll-snap-type: none;
  }
  .home-prods::-webkit-scrollbar { display: none; }
  .home-prods .prod-card { height: 100%; }
  .home-prods .prod-img { flex: none; aspect-ratio: 4 / 3; }
  /* 手机端产品中心：单品横滑在上、6 个服务/店铺卡在下（与电脑端「图片在上」的位置设定一致） */
  .pc-wrap { display: flex; flex-direction: column; }
  .pc-wrap .hs-wrap { order: -1; }
  .hs-wrap { position: relative; }
}

/* ---------- 全局搜索结果（content.html?q=）：分组卡片 ---------- */
.sr-head { display:flex; align-items:center; gap:7px; font-weight:800; font-size:14px; color:var(--text); margin:18px 0 9px; }
.sr-head .ico { font-size:16px; }
.sr-head em { font-style:normal; font-weight:800; font-size:11.5px; color:#fff; background:var(--grad-warm); border-radius:999px; padding:1px 8px; }
.sr-head .sr-note { font-weight:600; font-size:12px; color:var(--text-sub); }
.sr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
.sr-card { background:var(--glass); border:1px solid var(--line); border-radius:13px; padding:11px 8px 9px; text-align:center; cursor:pointer; box-shadow:var(--shadow); transition:transform .15s; overflow:hidden; }
.sr-card:hover { transform:translateY(-2px); }
.sr-card img { width:48px; height:48px; object-fit:cover; border-radius:11px; background:#fff; }
.sr-card .noimg { width:48px; height:48px; border-radius:11px; background:linear-gradient(135deg,#f3d9dd,#e9c8d2); display:flex; align-items:center; justify-content:center; font-weight:800; color:#8c5a64; margin:0 auto; font-size:18px; }
.sr-card b { display:block; font-size:12.5px; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-card span { display:block; font-size:11px; color:var(--text-sub); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---------- 内容页分页条（2026-09-20：超过 20 条出分页，适配大量文章） ---------- */
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 20px 0 6px; }
.pager .pg-btn {
  min-width: 36px; height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--glass); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .15s;
}
.pager .pg-btn:hover:not(:disabled):not(.on) { transform: translateY(-1px); }
.pager .pg-btn.on { background: var(--grad-warm); color: #fff; border-color: transparent; }
.pager .pg-btn:disabled { opacity: .38; cursor: default; }
.pager .pg-dots { color: var(--text-sub); font-weight: 700; padding: 0 2px; }
.pager .pg-info { font-size: 12px; color: var(--text-sub); margin-left: 6px; }

/* ================================================================
   首页 v5「暖白杂志风」改版（2026-09-21 用户按 ChatGPT 方案定调，电脑端结构）
   色板：暖白 #f8f6f3（页底）/ 米白 #f3ece5 / 淡裸粉 #efd9d3 / 玫瑰粉 #c98e91 / 深棕灰 #3f3734
   圆角：大图 16px · 普通模块 12px · 品牌单图 999px
   边框 1px solid rgba(80,55,45,.06) · 阴影 0 4px 20px rgba(80,50,40,.04)（无漂浮感）
   区块间留白 56~72px · hero 与顶栏贴缝、上直角下圆角、宽度与顶栏对齐
   仅作用于 .home-wrap（index.html），其他页面不受影响
   ================================================================ */
body.home-body { background: #f8f6f3; }
.home-wrap {
  --h-line: rgba(80, 55, 45, 0.06);
  --h-shadow: 0 4px 20px rgba(80, 50, 40, 0.04);
  --h-pink: #c98e91; --h-nude: #efd9d3; --h-cream: #f3ece5; --h-ink: #3f3734;
  color: var(--h-ink);
  padding-bottom: 72px;
}
.home-wrap .section-head { margin: 64px 0 22px; }
.home-wrap .section-head b.sec-title { color: var(--h-ink); }
.home-wrap .section-head .sec-note { color: var(--text-sub); }
.home-wrap .section-head .sec-more { color: var(--h-pink); }

/* ---------- Hero：贴顶栏、上直角下圆角（电脑/手机统一，2026-09-21 五次定调全端应用） ----------
   hero 以下内容两侧缩进两个汉字（32px）；hero 外扩 32px 抵消，与顶栏容器对齐 */
.home-wrap { padding-left: 32px; padding-right: 32px; }
.home-wrap .hero {
  margin: 0 -32px; width: calc(100% + 64px);
  border: none; border-radius: 0 0 16px 16px;
  box-shadow: var(--h-shadow);
}
/* 手机/微信端：缩进比电脑端小 60%（32 × 0.4 ≈ 13px），hero 同步外扩保持通栏（2026-09-21 六次定调） */
@media (max-width: 768px) {
  .home-wrap { padding-left: 13px; padding-right: 13px; }
  .home-wrap .hero { margin: 0 -13px; width: calc(100% + 26px); }
}

/* ---------- 精选内容：1 大图文 + 小图文若干（一屏 3 个，超出无缝循环滚动） ---------- */
@media (min-width: 769px) {
  .home-wrap .feat-grid { grid-template-columns: 1.35fr 1fr; gap: 16px; }
  .home-wrap .feat-left { grid-template-rows: none; }
  .home-wrap .feat-left .feat-head { height: 420px; }
  .home-wrap .feat-list { height: 420px; }
  /* 一屏 3 个：每张卡 132px；小图与大图同比例（≈593:420 ≈ 1.41 → 150×106）
     flex 必须改 0 0 auto：继承的 flex:1（basis 0）会覆盖 height，把超出的卡全压进 420px 造成重叠（V65 修复） */
  .home-wrap .feat-list.vscroll .feat-item { flex: 0 0 auto; height: calc((420px - 24px) / 3); min-height: 0; }
  .home-wrap .feat-item img { width: 150px; height: 106px; border-radius: 8px; }
}
.home-wrap .feat-head { border-radius: 16px; border-color: var(--h-line); box-shadow: var(--h-shadow); }
.home-wrap .feat-item {
  border-radius: 12px; border-color: var(--h-line); box-shadow: var(--h-shadow);
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (hover: hover) { .home-wrap .feat-item:hover { border-color: rgba(201, 142, 145, .5); transform: none; } }

/* ---------- 精选品牌：单行 8 格胶囊（999px）轮换 ---------- */
@media (min-width: 769px) {
  .home-wrap .brand-board { grid-template-columns: repeat(8, 1fr); gap: 12px; min-height: 0; }
}
.home-wrap .brand-orb {
  border-radius: 999px; border-color: var(--h-line); box-shadow: var(--h-shadow);
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 2026-09-21 三次定调：logo 圆形裁切——整个圈就是 logo 的圆切面（cover 居中裁圆，不再出圈） */
.home-wrap .brand-orb { padding: 0; overflow: hidden; }
.home-wrap .brand-orb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
@media (hover: hover) { .home-wrap .brand-cell:hover { background: transparent; } }

/* ---------- 产品中心：左 6 个服务/店铺模块（2 行×3 列固定）+ 右单品 2 排×3 列 ---------- */
.pc-wrap { display: grid; gap: 16px; align-items: stretch; }
.pc-side { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; }
.pc-mod {
  display: flex; align-items: center; gap: 9px; padding: 12px 11px; cursor: pointer; min-width: 0;
  background: #fff; border: 1px solid var(--h-line); border-radius: 12px; box-shadow: var(--h-shadow);
  transition: border-color .15s;
}
@media (hover: hover) { .pc-mod:hover { border-color: rgba(201, 142, 145, .5); } }
.pc-mod svg { width: 22px; height: 22px; color: var(--h-pink); flex-shrink: 0; }
.pc-mod b { display: block; font-size: 13px; color: var(--h-ink); letter-spacing: .5px; }
.pc-mod span { display: block; font-size: 10.5px; color: var(--text-sub); margin-top: 3px; }
/* V72：服务卡后台可配置——自传图标图 + 背景图（浅色蒙版保证文字可读） */
.pc-mod .pc-ico { width: 22px; height: 22px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.pc-mod.has-bg { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.pc-mod.has-bg::before { content: ''; position: absolute; inset: 0; background: rgba(255, 252, 248, .78); z-index: 0; }
.pc-mod.has-bg > svg, .pc-mod.has-bg > .pc-ico, .pc-mod.has-bg > div { position: relative; z-index: 1; }
@media (min-width: 769px) {
  /* 左列压缩、右列加宽：单品 2 排×4 列（2026-09-21 三次定调） */
  .pc-wrap { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr); gap: 14px; }
  .pc-side { gap: 10px; }
  .home-wrap .home-prods {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc((var(--pc-h, 260px) - 12px) / 2);
    height: var(--pc-h, 260px);
    gap: 12px;
  }
}
@media (max-width: 768px) {
  .pc-wrap { grid-template-columns: 1fr; }
  .pc-side { grid-template-columns: 1fr 1fr; }
}
.home-wrap .home-prods .prod-card {
  border-radius: 12px; border-color: var(--h-line); box-shadow: var(--h-shadow);
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (hover: hover) { .home-wrap .home-prods .prod-card:hover { border-color: rgba(201, 142, 145, .5); transform: none; } }

/* ---------- 一起玩 / 热门专题（底部横排胶囊） ---------- */
.home-wrap .play-card { border-radius: 12px; border-color: var(--h-line); box-shadow: var(--h-shadow); }
/* 关于欢喜标签行（V65：数量随后台「我们」页项目变化，auto-fit 自适应列数；2026-09-25 用户定调整体放大：PC 大两圈、手机稍大） */
.topic-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.topic-row a {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 21px 14px;
  background: #fff; border: 1px solid var(--h-line); border-radius: 999px; box-shadow: var(--h-shadow);
  font-size: 16.5px; font-weight: 600; color: var(--h-ink); transition: border-color .15s;
}
.topic-row a svg { width: 24px; height: 24px; color: var(--h-pink); flex-shrink: 0; }
.topic-row a .ico { font-size: 23px; color: var(--h-pink); }
@media (hover: hover) { .topic-row a:hover { border-color: rgba(201, 142, 145, .5); } }
@media (max-width: 768px) {
  .topic-row { grid-template-columns: 1fr 1fr; }
  /* 手机端：比旧版稍大、比 PC 小一档（2026-09-25） */
  .topic-row a { font-size: 15px; padding: 16px 10px; gap: 9px; }
  .topic-row a svg { width: 20px; height: 20px; }
  .topic-row a .ico { font-size: 19px; }
}

/* ================================================================
   「我们」页（about.html）：自上而下图片通铺（V65）
   每个项目 = 一段通栏背景图（无圆角、段间无缝隙），
   标题浮于图片上部（下沉一行、靠左），正文两端对齐、末行距图底一行；
   无图项目回退暖白底深色字；「联系我们」固定最后（#p-contact）。
   ================================================================ */
.ab-page { background: var(--bg); }
.ab-sec {
  position: relative; display: flex; margin: 0 auto; overflow: hidden;
  width: 100%; max-width: 1080px;   /* 2026-09-23 用户定调：背景/背景图/文字整段收进全站 wrap 网格，不通铺 */
  min-height: 320px; border-radius: 0;
  scroll-margin-top: 76px;   /* 锚点定位避开吸顶导航 */
}
.ab-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-sec::after {   /* 上下轻压暗，保证浮层白字在任何图上都可读 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(48,36,30,.46) 0%, rgba(48,36,30,.10) 26%, rgba(48,36,30,.06) 56%, rgba(48,36,30,.52) 100%);
}
.ab-inner {
  position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px 32px 30px;   /* 上=标题下沉一行；下=正文末行距图底一行 */
}
.ab-title {
  font-size: 22px; font-weight: 900; letter-spacing: 1px; line-height: 1.5;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.38);
}
.ab-text {
  font-size: 14.5px; line-height: 1.9; color: #fff; margin: 0;
  text-align: justify; text-justify: inter-ideograph;
  text-shadow: 0 1px 8px rgba(0,0,0,.42); max-width: 780px;
}
/* 无图项目：暖白底、深色字（联系我们等） */
.ab-sec.no-img { background: var(--bg-2); min-height: 0; }
.ab-sec.no-img::after { display: none; }
.ab-sec.no-img .ab-title { color: var(--text); text-shadow: none; }
.ab-sec.no-img .ab-text { color: var(--text-sub); text-shadow: none; }
/* 顶部品牌条（logo + 站名，通铺起点） */
.ab-head { text-align: center; padding: 34px 16px 8px; background: var(--bg); }
.ab-head img { width: 72px; border-radius: 16px; }
.ab-head h1 { font-size: 22px; font-weight: 900; letter-spacing: 1px; margin: 12px 0 2px; color: var(--text); }
.ab-head p { font-size: 13px; color: var(--text-sub); margin: 0 0 16px; }
/* 联系我们（固定最后）：正常文档流排布 */
.ab-contact .ab-inner { justify-content: flex-start; gap: 14px; }
.ab-contact-body { font-size: 14px; color: var(--text-sub); line-height: 2.3; }
@media (max-width: 768px) {
  .ab-sec { min-height: 230px; }
  /* 手机端竖图：段落高度跟随图片比例，完整显示纵向图不被 cover 裁横 */
  .ab-sec { aspect-ratio: var(--ab-ratio, auto); }
  .ab-inner { padding: 24px 13px 18px; }
  .ab-title { font-size: 18px; }
  .ab-text { font-size: 13.5px; }
}
/* ---------- V70 防闪烁（2026-09-29） ----------
   品牌轮换板每 1.3s 重绘一次，Chromium 会因此在两种文字抗锯齿模式间横跳，
   表现为全页文字（尤其单品区名称条）不碰它也「闪啊闪」。
   给首页各内容节 + 单品网格 + 页头页脚常驻合成层：光栅一次成型，
   不再随品牌轮换引发的全局重绘切换渲染模式。 */
.home-body .site-header, .home-body .site-footer,
.home-wrap, .home-wrap > *, #home-prods { will-change: transform; }