/* ==========================================================================
   LUMIÈRE LAB — 化妆品 OEM/ODM 接单站 共享样式
   纯 CSS 视觉（无图片依赖），双语通过 body.lang-* 类切换
   ========================================================================== */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --bg-tint:#fbf7f5;
  --surface:#ffffff;
  --ink:#16181d;
  --ink-2:#3d4149;
  --muted:#6d7280;
  --line:#e6e8ec;
  --line-2:#eff1f4;
  --accent:#b03a53;
  --accent-ink:#8f2c42;
  --accent-soft:#fdf2f4;
  --teal:#177f76;
  --teal-soft:#eef7f6;
  --gold:#a9822f;
  --radius:14px;
  --radius-sm:9px;
  --radius-lg:20px;
  --max:1180px;
  --shadow-sm:0 1px 2px rgba(22,24,29,.05);
  --shadow:0 1px 2px rgba(22,24,29,.04), 0 10px 30px rgba(22,24,29,.06);
  --shadow-lg:0 2px 4px rgba(22,24,29,.04), 0 24px 60px rgba(22,24,29,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* ⚠️ 横向裁切必须加在 body 上，不能加在 html 上 ——
   加在 html 会让 html 成为滚动容器，从而破坏 header.top 的 position:sticky。
   实测（390px 视口，站内有固定宽度的后层元素如侧边抽屉）：
     html+body 均 visible → scrollWidth 438（溢出 48px）
     仅 html hidden       → 仍 438，且有 sticky 失效风险
     body hidden          → scrollWidth 390，sticky 正常
   用 body 裁切即可，不影响 sticky 与纵向滚动。 */
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;font-size:16px;
  overflow-x:hidden;overscroll-behavior-x:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 双语切换：默认中文，body.lang-en 切英文 ----------
   两个坑都必须避开：
   1) 只写 body.lang-en .t-cn{display:none}（无 :not 限定）会被后面的 .t-cn.block{display:block} 覆盖；
   2) 只写 .t-en{display:none} 会被后面同权重的 .stat span{display:block} 之类的后代规则覆盖。
   因此基础规则显式排除 .block/.flex，把权重提到 (0,2,0)，不再依赖声明顺序。 */
.t-en:not(.block):not(.flex){display:none}
body.lang-en .t-en:not(.block):not(.flex){display:inline}
body.lang-en .t-cn:not(.block):not(.flex){display:none}
/* 块级变体（.block）与容器变体（.flex）同样跟随语言 */
.t-cn.block{display:block}
body.lang-en .t-cn.block{display:none}
body.lang-en .t-en.block{display:block}
.t-en.block{display:none}
.t-en.flex{display:none}
body.lang-en .t-en.flex{display:flex}
body.lang-en .t-cn.flex{display:none}
/* select 的 option 内部无法用 CSS 可靠切换，改为在 app.js 里直接改写文本节点 */
option .t-en,option .t-cn{display:inline}

/* ---------- 顶栏 ---------- */
header.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* 内边距用 clamp：窄屏收到 20px，宽屏给到 24px，避免内容贴边。
   （原先在 1117px 宽度下实测 wrap 的左右内边距会失效，内容顶到屏幕边缘） */
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;
  gap:clamp(10px,1.4vw,20px);padding-left:clamp(16px,2.2vw,24px);padding-right:clamp(16px,2.2vw,24px)}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand .mark{width:104px;height:auto;flex:0 0 auto;display:block}
/* logo 图形本身已含 "LUMIKEY" 字样，旁边不再重复英文名，
   改用中文名 + 业务说明，避免同一行出现两次品牌英文。 */
.brand .txt b{font-size:.92rem}
/* 页脚：深色底上需要反白处理，否则金色 logo 看不清 */
footer.site .mark{width:140px;height:auto;margin-bottom:12px;display:block;
  filter:brightness(1.5) saturate(.8)}
footer.site .fbrand .txt{display:none}
/* ---------- 創始人名片（關於我們頁） ----------
   版面演進（都有截圖存證）：
     1) 初版：簽名與文字左右並排 → 扁長簽名被壓成細線，左側大片空白
     2) 二版：簽名在上、文字在下 → 簽名仍顯孤立，姓名另起一塊，視覺斷裂
     3) 本版：名片式單卡 —— 簽名與姓名並排為「抬頭」單元，下方居中簡介，
        再以資訊條收束履歷與聯絡方式；故事獨立成段。
   金色簽名是不透明像素僅約 4.5% 的細線條，淺色底上偏淡，
   故用 contrast/saturate 略為加深；這不是畫質問題，是字體固有特性。 */
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:38px 42px 32px;box-shadow:var(--shadow-sm);margin-top:4px}
/* 關於我們頁：整塊居中並限寬，形成聚焦的「名片」
   聯絡頁：卡片內嵌在既有欄位中，不該再限寬，故只對 #founder 限寬 */
section#founder .fcard{max-width:940px;margin-left:auto;margin-right:auto}
/* 聯絡頁的卡片內嵌較窄，內距與簽名尺寸一併收小 */
.page-contact .fcard{padding:30px 32px 26px}
.page-contact .fsigimg{width:210px}
.page-contact .fhead{gap:24px;padding-bottom:20px}
.page-contact .fcard .fbio{margin-top:20px;font-size:.92rem}
.page-contact .fcard .fquote{font-size:.95rem;margin-top:16px}
.fhead{display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--line-2)}
.fsigimg{width:264px;max-width:100%;height:auto;display:block;flex:0 0 auto;
  filter:contrast(1.35) saturate(1.1)}
.fname{flex:1;min-width:210px}
.fname b{display:block;font-size:1.42rem;font-weight:800;letter-spacing:-.01em;
  line-height:1.25}
.fname .ftitle{display:block;font-size:.9rem;color:var(--accent-ink);font-weight:650;
  margin-top:6px}
.fname .fplace{display:block;font-size:.8rem;color:var(--muted);margin-top:4px;
  letter-spacing:.04em}
.fcard .fbio{font-size:.95rem;color:var(--ink-2);line-height:1.85;margin-top:26px}
.fcard .fquote{font-size:1rem;color:var(--ink);line-height:1.8;font-weight:600;
  margin-top:20px;padding-left:18px;border-left:3px solid var(--accent)}
/* 資訊條：履歷要點在左，聯絡方式在右 */
.fstrip{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:30px;
  align-items:start;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-2)}
/* 履歷：標籤 + 值 的左對齊兩列。
   為什麼不用三欄網格 + 全大寫：
   實測「感官能力」的值較長，三欄窄格會把它擠成 5 行、整塊高度失衡；
   全大寫又讓 FACTORY LABORATORY, CHAONAN, SHANTOU 這類長值難以閱讀。
   改為：標籤固定窄欄（小字、大寫、弱色），值佔剩餘寬度（正常大小寫、深色）。 */
.ffacts{display:flex;flex-direction:column;gap:0}
.ffact{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-2)}
.ffact:last-child{border-bottom:0}
.ffact span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.ffact b{font-size:.87rem;font-weight:650;color:var(--ink);line-height:1.6}
.freach{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding-top:9px}   /* 與左側第一行履歷的基線對齊（.ffact 的 padding-top 同值） */
.freach a{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;color:var(--ink-2);transition:.16s}
.freach a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* 創始人故事：獨立成段，帶標題 */
.fstory{max-width:940px;margin-top:38px;display:flex;flex-direction:column;gap:15px}
.fstory h3{font-size:1.05rem;font-weight:750;margin-bottom:2px}
.fstory p{font-size:.93rem;color:var(--ink-2);line-height:1.9;
  padding-left:18px;position:relative}
.fstory p::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);opacity:.5}
@media (max-width:820px){
  .fcard{padding:30px 24px 26px}
  .fhead{gap:20px}
  .fsigimg{width:190px}
  .fstrip{grid-template-columns:1fr;gap:22px}
}
/* 联系按钮组的样式统一在文件末尾的 .fcontacts 段落定义（那里能同时覆盖
   关于页与联系页）。此处原先重复定义过一份，已移除以免优先级互相干扰。
   ⚠️ 历史教训：不要用标签选择器 span 给容器加 display —— 会连带命中内部的
   .t-en/.t-cn，且优先级会压过语言切换规则，导致中文模式下英文仍然显示。 */
.card .badge-cn{width:104px;height:auto;display:block;margin:0 auto 14px}
.brand .txt{display:flex;flex-direction:column;line-height:1.15}
.brand .txt b{font-size:.98rem;font-weight:800;letter-spacing:.01em}
.brand .txt span{font-size:.66rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
/* 导航：9 项时空闲宽度仅约 12px，因此收紧字号与内边距，
   并在 .top-actions 右侧留 14px 安全间距，避免"贴着按钮"。 */
nav.main{display:flex;gap:0;flex-wrap:nowrap;align-items:center;min-width:0}
nav.main a{padding:8px 9px;border-radius:8px;font-size:.82rem;color:var(--ink-2);
  transition:.16s;white-space:nowrap;letter-spacing:-.005em}
nav.main a:hover{color:var(--accent);background:var(--accent-soft)}
nav.main a.on{color:var(--accent);font-weight:650;background:var(--accent-soft)}
.top-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-left:14px}
.langbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;
  font-size:.78rem;font-weight:650;cursor:pointer;color:var(--ink);transition:.16s}
.langbtn:hover{border-color:var(--accent);color:var(--accent)}
.cartbtn{position:relative;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 14px;font-size:.78rem;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.16s}
.cartbtn:hover{border-color:var(--accent);color:var(--accent)}
.cartbtn .n{background:var(--accent);color:#fff;border-radius:999px;min-width:19px;height:19px;
  font-size:.68rem;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-weight:700}
.cartbtn .n[data-empty="1"]{background:#c9ccd3}
.menutoggle{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 10px;cursor:pointer}

/* ---------- 通用排版 ---------- */
.eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:16px}
.eyebrow.teal{color:var(--teal)}
h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.16;letter-spacing:-.022em;font-weight:800}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.24;letter-spacing:-.016em;font-weight:750}
h3{font-size:1.12rem;line-height:1.35;font-weight:700;letter-spacing:-.008em}
h4{font-size:.98rem;font-weight:700}
.lead{font-size:1.06rem;color:var(--ink-2);line-height:1.78}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tiny{font-size:.76rem}
.center{text-align:center}
section{padding:76px 0}
section.tight{padding:52px 0}
section.soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.tint{background:var(--bg-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:720px;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin-top:14px;color:var(--muted);font-size:1rem}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;padding:12px 22px;font-size:.9rem;font-weight:650;
  border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;line-height:1.2}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-ink);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-sm{padding:8px 14px;font-size:.82rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- 首页 Hero ---------- */
.hero{padding:88px 0 76px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 88% -12%, rgba(176,58,83,.09), transparent 62%),
             radial-gradient(620px 340px at 6% 104%, rgba(23,127,118,.08), transparent 60%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 .thin{font-weight:300;color:var(--muted)}
.hero .lead{max-width:560px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:.78rem;color:var(--ink-2)}
.chip.accent{border-color:#f0d5db;background:var(--accent-soft);color:var(--accent-ink)}
.chip.teal{border-color:#cfe9e6;background:var(--teal-soft);color:var(--teal)}
.hero-card{background:linear-gradient(160deg,#fdf7f8 0%,#f4f6f8 48%,#eef6f5 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.hero-card h4{margin-bottom:14px;letter-spacing:-.01em}
.hero-card .kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.86rem}
.hero-card .kv:last-of-type{border-bottom:0}
.hero-card .kv span:first-child{color:var(--muted)}
.hero-card .kv span:last-child{font-weight:650;text-align:right}

/* ---------- 统计条 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:#fff;padding:22px 20px}
.stat b{display:block;font-size:1.62rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.stat b small{font-size:.8rem;font-weight:600;color:var(--muted);margin-left:3px}
.stat span{display:block;font-size:.8rem;color:var(--muted);margin-top:6px}

/* ---------- 网格与卡片 ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:.2s;box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow);border-color:#dcdfe4}
.card .ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2);font-size:.9rem}
.card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.card ul li{font-size:.83rem;color:var(--muted);padding-left:16px;position:relative}
.card ul li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6}

/* ---------- 产品卡 ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;box-shadow:var(--shadow-sm)}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#dcdfe4}
.pcard .vis{height:150px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard .vis .swatch{width:64px;height:64px;border-radius:50%;box-shadow:0 8px 22px rgba(22,24,29,.13),inset 0 -6px 14px rgba(0,0,0,.05)}
.pcard .vis .format{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.86);
  border-radius:999px;padding:3px 10px;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
.pcard .vis .hot{position:absolute;top:12px;right:12px;background:var(--accent);color:#fff;
  border-radius:999px;padding:3px 10px;font-size:.68rem;font-weight:700}
.pcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.pcard .sku{font-size:.68rem;letter-spacing:.1em;color:var(--muted);font-weight:650}
.pcard h3{font-size:1rem;margin:6px 0 8px;letter-spacing:-.01em}
.pcard .texture{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.pcard .specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pcard .specs span{font-size:.71rem;background:var(--bg-soft);border:1px solid var(--line-2);
  border-radius:6px;padding:2px 8px;color:var(--ink-2)}
.pcard .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.price{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.price small{font-size:.72rem;font-weight:600;color:var(--muted);margin-left:3px}
.price .from{font-size:.7rem;color:var(--muted);font-weight:600;display:block;letter-spacing:.06em}
.pcard .acts{display:flex;gap:7px}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;
  font-size:.76rem;font-weight:650;cursor:pointer;transition:.16s;color:var(--ink-2)}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn.added{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}

/* ---------- 筛选栏 ---------- */
.filters{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  padding:20px 22px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.fgroup{display:flex;flex-direction:column;gap:8px}
.fgroup > label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;
  font-size:.8rem;cursor:pointer;transition:.16s;color:var(--ink-2)}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:650}
input[type=search],input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 13px;font-size:.88rem;width:100%;transition:.16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.filters input[type=search]{min-width:240px}
.result-line{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin:22px 0 18px;font-size:.84rem;color:var(--muted);flex-wrap:wrap}
.empty{padding:64px 24px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}

/* ---------- 价格分级表 ---------- */
.tier-table{width:100%;border-collapse:collapse;font-size:.86rem}
.tier-table th,.tier-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line-2)}
.tier-table th{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tier-table td:last-child,.tier-table th:last-child{text-align:right;font-weight:650}
.tier-table tr.locked td{color:#b6bac2}
.lockednote{margin-top:12px;padding:12px 14px;background:var(--accent-soft);border:1px solid #f0d5db;
  border-radius:var(--radius-sm);font-size:.82rem;color:var(--accent-ink)}
.lockednote a{text-decoration:underline;font-weight:650}

/* ---------- 表格 ---------- */
table.data{width:100%;border-collapse:collapse;font-size:.86rem}
table.data th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:11px 13px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
table.data td{padding:12px 13px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.data tr:hover td{background:#fcfcfd}
.tablewrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;min-width:0}
.tablewrap.scroll{overflow-x:auto}
/* 表格必须受容器约束：否则列宽之和会把 .tablewrap（乃至整页）撑宽。
   实测登录页的演示账号表格在 390px 下溢出 5px。 */
table.data{max-width:100%}
.tablewrap.scroll > table.data{min-width:max-content}

/* ---------- 时间线 / 流程 ---------- */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.tl-item:last-child{border-bottom:0}
.tl-num{font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1.1}
.tl-num small{display:block;font-size:.72rem;font-weight:650;color:var(--muted);letter-spacing:.02em;margin-top:5px}
.tl-body h3{margin-bottom:8px}
.tl-body p{color:var(--ink-2);font-size:.9rem}

/* ---------- 证书 ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cert{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;
  display:flex;flex-direction:column;gap:8px;transition:.18s}
.cert:hover{border-color:#dcdfe4;box-shadow:var(--shadow)}
.cert .badge{width:42px;height:42px;border-radius:11px;background:var(--teal-soft);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.7rem;text-align:center;line-height:1.05;padding:4px}
.cert b{font-size:.95rem}
.cert .iss{font-size:.78rem;color:var(--muted)}
.cert .scope{font-size:.8rem;color:var(--ink-2);margin-top:4px}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* ⚠️ 与 .grid / .pdp 同一类问题：网格子项必须能收缩到内容最小宽度以下。
   实测 360px（未塌成单列时）：每列被内容撑到 148.5px，
   第二列右边界到 383px，整页溢出 23px。 */
.form-grid > *{min-width:0}
/* 数量 + 按钮的两列布局。
   ⚠️ 原先写在 HTML 的行内样式里（style="grid-template-columns:200px 1fr"），
   行内样式优先级最高，媒体查询**永远无法覆盖** —— 实测 360px 下
   该网格仍是 200px + 1fr 两列，右列被按钮内容撑到 383px，整页横向溢出 23px。
   因此必须落到 CSS 类，才能被下面的断点接管。 */
.qty-grid{grid-template-columns:200px 1fr;align-items:end}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:650}
.field label .req{color:var(--accent)}
.field .hint{font-size:.75rem;color:var(--muted)}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.formnote{font-size:.78rem;color:var(--muted);margin-top:16px;line-height:1.6}
.formmsg{margin-top:18px;padding:14px 16px;border-radius:var(--radius-sm);font-size:.86rem;display:none}
.formmsg.ok{display:block;background:var(--teal-soft);border:1px solid #cfe9e6;color:#0f5f58}
.formmsg.err{display:block;background:#fdf1f1;border:1px solid #f3d5d5;color:#9c2b2b}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--ink-2)}
.checkline input{width:auto;margin-top:3px}

/* ---------- 询价车 ---------- */
.cart-list{display:flex;flex-direction:column;gap:14px}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.cart-item .sw{width:56px;height:56px;border-radius:12px;box-shadow:inset 0 -6px 14px rgba(0,0,0,.05)}
.cart-item h4{font-size:.95rem;margin-bottom:3px}
.cart-item .meta{font-size:.78rem;color:var(--muted)}
.cart-item .qty{display:flex;align-items:center;gap:8px}
.cart-item .qty input{width:96px;text-align:center}
.cart-item .rm{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.78rem;text-decoration:underline;padding:0}

/* ---------- 账户 / 登录 ---------- */
.accountbar{background:var(--accent-soft);border-bottom:1px solid #f0d5db}
.accountbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:40px;font-size:.82rem;color:var(--accent-ink);flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.accountbar b{font-weight:750}
.accountbar .ab-actions{display:flex;gap:14px;align-items:center}
.accountbar button{background:none;border:0;cursor:pointer;font-size:.82rem;text-decoration:underline;color:inherit}
.pricenote{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;margin-top:14px}

/* ---------- 页脚 ---------- */
footer.site{background:#16181d;color:#c3c7cf;padding:64px 0 30px;margin-top:0}
footer.site a{color:#c3c7cf}
footer.site a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:38px;border-bottom:1px solid #2a2d34}
.fgrid h5{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.85rem}
.fbrand b{color:#fff;font-size:1.02rem;display:block;margin-bottom:10px}
.fbrand p{font-size:.85rem;line-height:1.7;color:#9aa0aa;max-width:300px}
.fbot{display:flex;justify-content:space-between;gap:18px;padding-top:22px;font-size:.78rem;color:#8b9099;flex-wrap:wrap}
.notice{font-size:.74rem;color:#8b9099;margin-top:14px;padding-top:14px;border-top:1px dashed #2a2d34;line-height:1.65}

/* ---------- 面包屑 / 详情页 ---------- */
.crumbs{font-size:.78rem;color:var(--muted);padding:20px 0 0}
.crumbs a:hover{color:var(--accent)}
.pdp{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start;padding:34px 0 12px}
/* ⚠️ 网格子项必须允许收缩到内容最小宽度以下。
   实测 360px：.pdp 容器 324px，但 1fr 列被内容撑到 364.5px，
   导致 .pdp-vis 右边界到 383px（整页溢出 23px）。
   与 .grid 的 min-width:0 是同一类问题，此处一并修掉。 */
.pdp > *{min-width:0}
.pdp-vis{border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;
  background:linear-gradient(160deg,#fdf7f8 0%,#f5f6f8 60%,#eef6f5 100%);position:sticky;top:96px}
.pdp-vis .stage{height:230px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line)}
.pdp-vis .stage .swatch{width:104px;height:104px;border-radius:50%;box-shadow:0 16px 40px rgba(22,24,29,.16),inset 0 -8px 20px rgba(0,0,0,.05)}
.pdp-vis .meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.pdp-vis .meta div{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.pdp-vis .meta span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pdp-vis .meta b{font-size:.88rem}
.speclist{list-style:none;display:flex;flex-direction:column;gap:0;margin:22px 0}
.speclist li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--line-2);font-size:.87rem}
.speclist li span:first-child{color:var(--muted)}
.speclist li span:last-child{font-weight:650;text-align:right}
/* ⚠️ .card ul li 的圆点规则（padding-left + ::before）优先级高于 .speclist li，
   把 .speclist 放进 .card 时会被套上圆点，圆点还会单独占一行。
   这里显式复位，允许 .speclist 安全地用在卡片内部。 */
.card ul.speclist li{padding-left:0}
.card ul.speclist li::before{display:none}
/* 卡片内的联系按钮组需要间距，否则会挤成一团 */
.fcontacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.fcontacts a,.fcontacts .fchip{display:inline-flex;align-items:center;gap:6px;
  font-size:.79rem;font-weight:600;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;color:var(--ink-2);transition:.16s}
.fcontacts a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 分档选择器 ---------- */
.tiers{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.tieropt{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 15px;cursor:pointer;transition:.16s;background:#fff}
.tieropt:hover{border-color:#dcdfe4}
.tieropt.on{border-color:var(--accent);background:var(--accent-soft)}
.tieropt input{width:auto}
.tieropt .q b{display:block;font-size:.88rem}
.tieropt .q small{font-size:.75rem;color:var(--muted)}
.tieropt .p{font-weight:750;font-size:.95rem}

/* ---------- 徽标条 ---------- */
.trustbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:18px 0;border-bottom:1px solid var(--line);background:#fff}
.trustbar span{font-size:.76rem;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;background:var(--bg-soft)}

/* ---------- 报价条 ---------- */
.cta-band{background:linear-gradient(120deg,#16181d 0%,#252a33 52%,#1d2e2c 100%);color:#fff;
  border-radius:var(--radius-lg);padding:44px 46px;display:flex;align-items:center;
  justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{color:#fff;max-width:560px}
.cta-band p{color:#b6bcc6;margin-top:12px;max-width:560px;font-size:.92rem}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:#4a505b}
.cta-band .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- 后台 ---------- */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:28px}
.admin-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 16px;
  cursor:pointer;font-size:.88rem;color:var(--muted);font-weight:650;transition:.16s}
.admin-tabs button:hover{color:var(--ink)}
.admin-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.panel{display:none}
.panel.on{display:block}
.jsonbox{width:100%;min-height:280px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;line-height:1.6;background:#fbfbfc}
.kvbar{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:22px}
.kvbar .k{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;min-width:150px}
.kvbar .k b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.kvbar .k span{font-size:.76rem;color:var(--muted)}

/* ---------- 提示浮层 ---------- */
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,24px);z-index:200;
  background:var(--ink);color:#fff;border-radius:999px;padding:11px 22px;font-size:.85rem;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.24s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 询价单侧边抽屉（内联打开，不跳转页面） ---------- */
.drawer-mask{position:fixed;inset:0;background:rgba(22,24,29,.42);z-index:300;
  opacity:0;pointer-events:none;transition:opacity .26s}
.drawer-mask.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:310;
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(22,24,29,.18);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.drawer.on{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.05rem}
.drawer-close{border:0;background:var(--bg-soft);border-radius:8px;width:32px;height:32px;
  cursor:pointer;color:var(--ink-2);font-size:1rem;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:.16s}
.drawer-close:hover{background:var(--accent-soft);color:var(--accent)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.drawer-foot{padding:18px 22px;border-top:1px solid var(--line);background:var(--bg-soft)}
.drawer-empty{text-align:center;padding:52px 12px;color:var(--muted)}
.ditem{display:grid;grid-template-columns:44px 1fr auto;gap:13px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line-2)}
.ditem:last-child{border-bottom:0}
.ditem .sw{width:44px;height:44px;border-radius:10px;box-shadow:inset 0 -5px 12px rgba(0,0,0,.05)}
.ditem h4{font-size:.9rem;margin-bottom:3px;line-height:1.35}
.ditem .meta{font-size:.74rem;color:var(--muted);line-height:1.5}
.ditem .rm{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.74rem;
  text-decoration:underline;padding:0;margin-top:4px}
.ditem .qty{display:flex;align-items:center;gap:5px}
.ditem .qty input{width:78px;text-align:center;padding:6px 8px;font-size:.8rem}
.drawer-sum{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:6px}
.drawer-sum b{font-weight:750}
@media (max-width:560px){
  .drawer{width:100vw}
  .ditem{grid-template-columns:38px 1fr;gap:11px}
  .ditem .qty{grid-column:2}
}

/* ---------- 各国合伙人：市场卡 ---------- */
.mkt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.mkt{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;display:flex;flex-direction:column;transition:.2s;box-shadow:var(--shadow-sm)}
.mkt:hover{box-shadow:var(--shadow);border-color:#dcdfe4}
.mkt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
/* 国家代码徽章：不用国旗 emoji（🇦🇪 这类组合 emoji 在部分环境渲染不出来，
   实测会退化成"AE"两个字母，看起来像缺图）。用统一风格的圆角徽章更稳。 */
.mkt-flag{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:30px;padding:0 9px;border-radius:8px;margin-bottom:9px;
  background:linear-gradient(135deg,var(--accent-soft),var(--teal-soft));
  border:1px solid var(--line);color:var(--accent-ink);
  font-size:.78rem;font-weight:800;letter-spacing:.09em}
.mkt h3{font-size:1.05rem;margin-bottom:2px}
.mkt .mkt-en{font-size:.76rem;color:var(--muted);letter-spacing:.04em}
.mkt-tier{font-size:.66rem;font-weight:750;letter-spacing:.06em;padding:3px 9px;
  border-radius:999px;white-space:nowrap}
.tier-t1{background:#fdeef1;color:var(--accent)}
.tier-t2{background:var(--teal-soft);color:var(--teal)}
.tier-t3{background:#f4f1e8;color:var(--gold)}
.mkt-stats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.mkt-stats span{font-size:.7rem;background:var(--bg-soft);border:1px solid var(--line-2);
  border-radius:6px;padding:2px 8px;color:var(--ink-2)}
.mkt ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.mkt ul li{font-size:.81rem;color:var(--ink-2);padding-left:15px;position:relative;line-height:1.55}
.mkt ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.55}
.mkt .mkt-role{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-2);
  font-size:.79rem;color:var(--muted)}
.mkt .mkt-role b{color:var(--accent-ink);font-weight:700}
/* 合规提示条 */
.mkt-warn{background:var(--accent-soft);border:1px solid #f0d5db;border-radius:var(--radius-sm);
  padding:13px 15px;font-size:.82rem;color:var(--accent-ink);margin-top:14px}
@media (max-width:820px){.mkt-grid{grid-template-columns:1fr}}

/* ---------- 法定主體與生產許可證 ---------- */
.legallist{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:12px}
.legallist li{display:flex;justify-content:space-between;gap:14px;font-size:.76rem;
  color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:5px}
.legallist li span:first-child{color:rgba(255,255,255,.5)}
.legallist li span:last-child{font-weight:650;color:rgba(255,255,255,.86);text-align:right;
  word-break:break-all}
.legal-plant{margin-top:9px;font-size:.74rem;line-height:1.6;color:rgba(255,255,255,.56)}
/* 許可證區塊：證件圖 + 關鍵欄位表 */
.licwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;
  align-items:start}
.licimg img{width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.lic-table{width:100%;border-collapse:collapse;font-size:.83rem;max-width:100%}
.lic-table th{text-align:left;vertical-align:top;white-space:nowrap;padding:9px 14px 9px 0;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--line-2)}
.lic-table td{padding:9px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);
  font-weight:650;word-break:break-word}
@media (max-width:820px){.licwrap{grid-template-columns:1fr;gap:22px}
  .lic-table th{white-space:normal}}

/* ---------- 聯絡人卡片 ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  margin-bottom:26px}
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.person.primary{border-color:#e6cdd4;background:linear-gradient(180deg,#fff,#fdf7f8)}
.person b{font-size:1rem;font-weight:750}
.person .ptitle{font-size:.79rem;color:var(--muted);letter-spacing:.03em;margin:3px 0 12px}
.person .fcontacts{margin-top:0}
.fpending{font-size:.76rem;color:var(--muted);font-style:italic}

/* ---------- 數字藝術化 ----------
    為什麼需要：站點裡的手機號、QQ 號、信箱裡的數字目前在無襯線字體下
    和普通正文沒有區別，缺少「高端護膚品牌」應有的精緻感。

   做法：自托管 Playfair Display（高对比衬线，数字有书法式粗细变化），
   只用于**数字展示场景**，不用于正文与价格（价格仍需最高可读性）。

   ⚠️ 已验证：`font-variant-numeric: oldstyle-nums` 在无衬线字体上
   会静默回退（实测宽度差 0.0px），所以艺术感必须靠衬线字体本身，
   不能靠 OpenType 特性开关。 */
@font-face{
  font-family:'Lumikey Numeral';
  src:url('assets/fonts/PlayfairDisplay.ttf') format('truetype');
  font-weight:400 900;
  font-display:swap;
}
:root{--num-art:'Lumikey Numeral',Playfair\ Display,Georgia,'Times New Roman',serif}

/* 联系方式类数字：手机号 / WhatsApp / QQ 号 / 微信号 */
.num-art{font-family:var(--num-art);font-weight:600;letter-spacing:.045em;
  font-variant-numeric:lining-nums tabular-nums}
/* 首页大数字：字号大，衬线数字的高对比最出效果 */
.stat b,.hero-card .kv span:last-child{font-family:var(--num-art);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.005em}
/* 页脚联系方式继承品牌数字字体（深色底上更精致） */
footer.site .fcontacts,.footer.site li a[href^="tel:"]{font-family:var(--num-art);letter-spacing:.03em}

/* ---------- 社媒接口（页脚图标条 / 联系页二维码） ---------- */
.socialbar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:14px}
.socialbar .sblabel{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-right:3px}
.sico{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  transition:.18s}
.sico:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);
  transform:translateY(-1px)}
/* 待配置的渠道：保留品牌样式但不误导点击，用虚线边与降透明度区分。
   注意：页脚是深色背景，--muted 是给浅色背景设计的，直接用会看不清，
   因此这里用半透明白。 */
.sico-pending{border-style:dashed;border-color:rgba(255,255,255,.34);
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.06);cursor:default}
.sico-pending:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.62);transform:none}
.socialbar-note{margin-top:9px;font-size:.74rem;color:rgba(255,255,255,.6)}
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.qrcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;box-shadow:var(--shadow-sm)}
.qrcard b{font-size:.88rem}
.qrcard img{border-radius:8px;display:block}
.qrcard .small{line-height:1.5}
.qrcard .qrph{width:150px;height:150px;border:1px dashed var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:10px;
  background:var(--bg-soft);color:var(--muted);font-size:.72rem;line-height:1.5;text-align:center}
.qrph-todo{border-color:#e2c9d1;background:var(--accent-soft);color:var(--accent-ink);
  font-size:.74rem;font-weight:650}
.qrlink{display:inline-flex;align-items:center;gap:5px;margin-top:2px;
  font-size:.76rem;font-weight:650;color:var(--accent)}
.qrlink:hover{text-decoration:underline}
.qrlink-off{color:var(--muted);cursor:default;font-weight:600}
.qrlink-off:hover{text-decoration:none}
/* 关注区图例：区分国内（扫码）与海外（点击）两种关注方式 */
.qrlegend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px}
.qrleg{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:650;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff}
.qrleg-cn{color:var(--teal);border-color:#cfe6e2;background:var(--teal-soft)}
.qrleg-intl{color:var(--accent);border-color:#f0d5db;background:var(--accent-soft)}
/* YouTube 点击加载门面：避免直接嵌 iframe 拖慢国内访问与隐私合规问题 */
.ytfacade{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);background:var(--bg-soft);cursor:pointer;
  padding:0}
.ytfacade img{width:100%;height:100%;object-fit:cover;display:block}
.ytfacade .ytplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(22,24,29,.28);transition:.2s}
.ytfacade:hover .ytplay{background:rgba(22,24,29,.42)}
.ytfacade .ytplay span{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  box-shadow:0 8px 26px rgba(0,0,0,.28)}
.ytfacade .ytcap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  background:linear-gradient(transparent,rgba(22,24,29,.72));color:#fff;font-size:.82rem;
  font-weight:600;text-align:left}
.ytframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);display:block}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .prod-grid,.cert-grid,.g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr;gap:34px}
  .pdp-vis{position:static}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:1200px){
  /* 9 项导航在 1200px 以下会挤到贴边，提前收进汉堡菜单，改为竖排抽屉式导航 */
  nav.main{display:none}
  nav.main.open{display:flex;position:absolute;top:68px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);padding:14px 20px;flex-direction:column;
    align-items:stretch;box-shadow:var(--shadow);max-height:calc(100vh - 68px);overflow-y:auto}
  nav.main.open a{padding:11px 12px;font-size:.9rem}
  .menutoggle{display:inline-flex}
}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .tl-item{grid-template-columns:64px 1fr;gap:16px}
  section{padding:56px 0}
  .cta-band{padding:32px 26px}
  .cart-item{grid-template-columns:44px 1fr;gap:14px}
  .cart-item .qty{grid-column:2}
  /* 网格子项最小宽度归零：否则内边距大的卡片（如 .formcard）会把 1fr 的轨道撑宽，
     导致整页横向溢出。实测登录页在 390px 下溢出 6px，就是这个问题。 */
  .grid > *{min-width:0}
  /* 窄屏下内边距略收，给内容让出宽度 */
  .formcard{padding:22px 18px}
}
@media (max-width:560px){
  .prod-grid,.cert-grid,.g4,.g3,.g2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  .brand .txt span{display:none}
  /* 筛选栏：类别组的 flex:1 1 100% 在 360px 下会把容器撑破（实测溢出 25px），
     这里统一让每组占满一行且允许收缩，并收紧内边距。 */
  .filters{padding:16px 14px;gap:14px}
  .filters .fgroup{flex:1 1 100% !important;min-width:0}
  .filters input[type=search]{min-width:0;width:100%}
  .pills{min-width:0}
  .pill{padding:6px 11px;font-size:.78rem}
  /* ⚠️ 顶栏在窄屏必须能收缩。
     实测 390px：logo 104px + 间距 + 三个按钮(.top-actions) 241px 合计 > 390px，
     使 .top-actions 右边界到 438px，撑出 48px 横向溢出。
     因此缩小 logo、收紧内边距，并让品牌区可收缩。 */
  .top .wrap{gap:8px;padding-left:14px;padding-right:14px}
  .brand{min-width:0}
  .brand .mark{width:78px}
  .top-actions{gap:6px;padding-left:6px}
  .cartbtn{padding:6px 9px;font-size:.74rem}
  .langbtn{padding:5px 10px;font-size:.74rem}
  .menutoggle{padding:6px 8px}
  /* 数量 + 按钮：窄屏改单列，按钮另起一行（200px + 1fr 两列在 360px 下必然溢出） */
  .qty-grid{grid-template-columns:1fr;align-items:stretch;gap:12px}
}

/* 特窄屏（≤400px，常见安卓）：顶栏按钮只留图标，文字让位。
   实测 360px 下若不隐藏询价单文字仍会溢出 13px。 */
@media (max-width:400px){
  .top .wrap{gap:6px;padding-left:12px;padding-right:12px}
  .brand .txt{display:none}
  .brand .mark{width:70px}
  .top-actions{gap:4px;padding-left:4px}
  .cartbtn .ctxt{display:none}
  .cartbtn{padding:7px 9px}
  .langbtn{padding:6px 9px;font-size:.72rem}
  .menutoggle{padding:7px 8px;font-size:1rem}
  /* 产品详情页视觉区：34px 内边距在 360px 下会把容器撑到 365px（溢出 5px），收紧之 */
  .pdp-vis{padding:20px 16px}
  .pdp-vis .stage{height:180px}
  .pdp-vis .meta{grid-template-columns:1fr;gap:10px}
  .pdp-vis .stage .swatch{width:82px;height:82px}
}
@media print{
  header.top,footer.site,.cta-band,.filters,.accountbar{display:none}
  body{font-size:12px}
}

/* ===== 手機端精簡（依實測頁高調整）===== */
/* 背景：實測 390px 視口下 index 14734px（17.5 屏）、products 12341px（14.6 屏）。
   主因是卡片本身太高，不是間距。以下只改排布方向，不減資訊量。 */
@media (max-width:560px){
  /* --- 產品卡：豎向 → 橫向緊湊列表 ---
     原：150px 視覺區 + 正文 + 價格 + 按鈕，每張 400px+
     新：左側 60px 色板豎條，右側資訊；每張約 150px */
  .pcard{flex-direction:row;align-items:stretch}
  .pcard .vis{width:54px;height:auto;min-height:0;flex:0 0 auto;align-self:stretch;
    flex-direction:column;gap:0;justify-content:center}
  .pcard .vis .sw{display:flex;align-items:center;justify-content:center;flex:1}
  .pcard .vis .swatch{width:30px;height:30px}
  /* 橫向模式下角落徽章沒有空間，改為不顯示（熱門資訊在詳情頁仍在） */
  .pcard .vis .format,.pcard .vis .hot{display:none}
  .pcard .body{padding:13px 15px 14px;min-width:0}
  .pcard .sku{font-size:.64rem}
  .pcard h3{font-size:.93rem;margin:4px 0 5px}
  .pcard .texture{font-size:.76rem;margin-bottom:9px}
  .pcard .specs{gap:5px;margin-bottom:10px}
  .pcard .specs span{font-size:.68rem;padding:2px 7px}
  .pcard .foot{padding-top:10px;padding-top:10px;gap:10px;flex-wrap:wrap}
  .price{font-size:1.04rem}
  .pcard .acts{gap:6px}
  .iconbtn{padding:6px 11px;font-size:.74rem}

  /* --- 能力卡：圖標與標題同行，收掉 bullet 的縱向堆疊 --- */
  .card{padding:18px 18px}
  .card .ico{width:32px;height:32px;border-radius:9px;margin-bottom:11px}
  .card h3{margin-bottom:7px;font-size:.98rem}
  .card p{font-size:.86rem;line-height:1.65}
  .card ul{margin-top:10px;gap:5px}
  .card ul li{font-size:.79rem}

  /* --- 品類卡：改為單行條目（標題 + 數量），去掉說明段 --- */
  .card p.small.muted{margin-top:6px}

  /* --- 時間軸：數字與標題同行，壓縮每步高度 --- */
  .tl-item{grid-template-columns:52px 1fr;gap:13px;padding:16px 0}
  .tl-num{font-size:1.35rem}
  .tl-num small{font-size:.64rem}
  .tl-body h3{font-size:.94rem}
  .tl-body p{font-size:.83rem;line-height:1.6}

  /* --- 區塊間距整體收緊（原本 56px）--- */
  section{padding:40px 0}
  .sec-head{margin-bottom:22px}
  .sec-head h2{font-size:1.3rem}
  .sec-head p{font-size:.88rem}

  /* --- 統計格：4 欄數字改 2 欄，縮小內距 --- */
  .stat{padding:15px 14px}
  .stat b{font-size:1.34rem}

  /* --- 創始人卡：手機端收緊 --- */
  .fcard{padding:22px 18px 20px}
  .fhead{gap:16px;padding-bottom:18px}
  .fsigimg{width:150px}
  .fname b{font-size:1.18rem}
  .fcard .fbio{margin-top:18px;font-size:.88rem;line-height:1.75}
  .fcard .fquote{font-size:.9rem;margin-top:14px;padding-left:14px}
  .ffact{grid-template-columns:1fr;gap:2px;padding:8px 0}
  .ffact span{font-size:.66rem}
  .fstory{margin-top:26px;gap:12px}
  .fstory p{font-size:.87rem;line-height:1.75}

  /* --- 各國合夥人市場卡：收緊 --- */
  .mkt{padding:18px 18px}
  .mkt h3{font-size:.98rem}
  .mkt ul li{font-size:.78rem;line-height:1.5}

  /* --- 許可證區塊：證件圖在手機上全寬即可，表格收緊 --- */
  .lic-table{font-size:.79rem}
  .lic-table th{padding:8px 10px 8px 0}
  .lic-table td{padding:8px 0}

  /* --- 頁腳：四欄改單欄後仍偏長，收緊行距 --- */
  footer.site{padding:34px 0 24px}
  .fgrid{gap:22px}
  .fbot{padding-top:16px;gap:8px}
}

/* ===== 首頁折疊區塊 =====
/* 為什麼折疊：實測 390px 視口下首頁 12461px（14.8 屏）。
   收起的四個區塊屬於「有用但非決策必看」，默認折疊可讓首屏到詢價的距離大幅縮短；
   內容仍在頁面上（SEO 與想細看的人都能拿到），只是不默認展開。
   用原生 <details> 而非 JS：可鍵盤操作、屏幕閱讀器可讀、無腳本依賴。 */
details.fold{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#fff}
details.fold.soft{background:var(--bg-soft)}
details.fold.tint{background:var(--tint, #fbf7f8)}
details.fold + details.fold{border-top:0}
/* 用 grid 而非 flex：flex 下箭頭會與標題搶寬度，手機端把標題擠成三行。
   grid 讓文字佔一列（minmax(0,1fr) 可收縮）、箭頭固定寬一列。 */
details.fold > summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;
  padding:20px 24px;max-width:var(--max);margin:0 auto;transition:.16s}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::marker{content:""}
details.fold > summary:hover{background:rgba(176,58,83,.03)}
.fold-txt{min-width:0}
.fold-t{font-size:1.05rem;font-weight:750;color:var(--ink);letter-spacing:-.01em}
.fold-s{font-size:.78rem;color:var(--muted);display:block;margin-top:4px;font-weight:500}
.fold-chev{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:.2s;background:#fff}
.fold-chev svg{width:13px;height:13px}
details.fold[open] .fold-chev{transform:rotate(180deg);border-color:var(--accent);
  color:var(--accent);background:var(--accent-soft)}
.fold-body{padding:0 0 34px;max-width:var(--max);margin:0 auto;
  padding-left:24px;padding-right:24px}
.fold-body > .wrap-narrow{max-width:none;margin:0}
@media (max-width:560px){
  details.fold > summary{padding:16px 18px;gap:12px;align-items:flex-start}
  .fold-t{font-size:.97rem}
  .fold-s{font-size:.74rem}
  .fold-chev{width:23px;height:23px}
  .fold-body{padding:0 18px 26px}
}

/* ===== 彩妝「合作生產」標註 =====
/* 為什麼標註：我方生產許可證（粵妝20200212）的許可項目為
   一般液態單元與膏霜乳液單元，**不含彩妝單元**（無粉類、無蠟基）。
   彩妝實際由合作工廠生產。若不標註，買家核對許可證時會發現範圍與展示產品不符，
   在 B2B 盡調中是減分項；主動說清反而增加可信度。 */
.pmade{display:inline-block;font-size:.62rem;font-weight:750;letter-spacing:.05em;
  padding:1.5px 6px;border-radius:5px;margin-left:5px;vertical-align:1px;
  background:#fdf4e6;color:#8a6a2f;border:1px solid #f0e0c4}
.pnote{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:14px 16px;
  background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);font-size:.83rem;color:var(--ink-2);line-height:1.7}
.pnote svg{flex:0 0 auto;margin-top:2px;color:var(--gold)}
@media (max-width:560px){
  .pmade{font-size:.58rem;padding:1px 5px}
  .pnote{margin-top:14px;padding:12px 13px;font-size:.79rem;gap:9px}
}

/* ===== 各國合夥人：市場卡折疊 =====
/* 實測 390px：partners.html 10112px（12 屏），為全站最長。
   原因是 10 張市場卡各含 3 標籤 + 說明 + 3 條合規要點 + 合作模式，手機上每張近一屏。
   改為 <details>：手機默認收起（只剩國名 + 優先檔 + 3 標籤），桌面強制展開。 */
.mkt{padding:0;overflow:hidden}
.mkt-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 20px;transition:.16s}
.mkt-sum::-webkit-details-marker{display:none}
.mkt-sum::marker{content:""}
.mkt-sum:hover{background:var(--bg-soft)}
.mkt-nm{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.mkt-nm b{font-size:.98rem;font-weight:750}
.mkt-body{padding:0 20px 20px}
.mkt .mkt-flag{margin-bottom:0}
.mkt[open] > .mkt-sum .fold-chev{transform:rotate(180deg);border-color:var(--accent);
  color:var(--accent);background:var(--accent-soft)}

/* 桌面：內容恆顯示，且不顯示折疊箭頭（保留箭頭卻不能收合會誤導） */
@media (min-width:821px){
  .mkt > .mkt-body{display:block !important}
  .mkt > .mkt-sum .fold-chev{display:none}
  .mkt-sum{cursor:default;pointer-events:none}
  .mkt-sum:hover{background:transparent}
  .mkt{padding:22px 24px}
  .mkt-sum{padding:0 0 12px}
  .mkt-body{padding:0}
}
@media (max-width:560px){
  .mkt-sum{padding:13px 16px;gap:10px}
  .mkt-nm b{font-size:.93rem}
  .mkt-body{padding:0 16px 16px}
}

/* ===== 產品實拍圖（漸進增強）=====
/* 有圖時：漸層由圖片取代，內距歸零，色卡縮為左上角小圓點保留品類色彩標識 */
.pcard .vis.has-img{background:#fff;padding:0;height:240px}
/* contain 而非 cover：正方形产品图放进横条时，cover 会裁掉瓶身
   （实测罐子只露瓶盖）。产品图的意义就是看清包装，不能裁主体。 */
.pcard .vis .pimg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom}
.pcard .vis.has-img .sw{
  position:absolute;left:10px;bottom:10px;z-index:2;display:block}
.pcard .vis.has-img .swatch{
  width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(22,24,29,.22)}
/* 品類與熱門徽章浮在圖片上，加一層柔和底以便在淺色圖上仍可讀 */
.pcard .vis.has-img .format,.pcard .vis.has-img .hot{z-index:2;
  backdrop-filter:saturate(1.4) blur(2px)}

/* 詳情頁主視覺：同樣支援實拍圖 */
.pdp .stage.has-img{background:#fff;padding:0;display:block;height:auto}
.pdp .stage.has-img .pimg{width:100%;height:auto;display:block;border-radius:inherit}

@media (max-width:560px){
  /* 手機端橫向卡片：.vis 變成 54px 寬的豎條，圖片需改為填滿豎條 */
  /* 手机端横向卡片：竖条固定宽高比，高度不随图片比例变化。
     首版只写了 width:74px 而没约束高度，图片（absolute+height:100%）
     在"高度由内容决定"的父元素里按自身正方形比例撑开，
     把竖条撑到 74×200+，比右侧文字还高（截图已确认）。 */
  .pcard .vis.has-img{width:78px;min-width:78px;height:auto;
    align-self:stretch;aspect-ratio:3/4}
  .pcard .vis .pimg{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center}
  .pcard .vis.has-img .sw{left:auto;right:5px;bottom:5px}
  .pcard .vis.has-img .swatch{width:13px;height:13px;border-width:1px}
}

/* ===== 場景圖（廠區／實驗室）=====
/* 廠區與實驗室實拍圖。3:2 橫幅（生成尺寸 1536×1024），
   與產品圖的正方形區分開，避免視覺混淆。 */
.scenes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:8px}
.scene{margin:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.scene img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.scene figcaption{padding:11px 14px 13px;font-size:.8rem;color:var(--ink-2);
  line-height:1.55;border-top:1px solid var(--line-2)}
.scene figcaption b{display:block;font-size:.86rem;font-weight:700;color:var(--ink);
  margin-bottom:3px}
/* 單張大圖（用於區塊主視覺） */
.scene-wide{margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:#fff}
.scene-wide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:560px){
  .scenes{grid-template-columns:1fr;gap:14px}
  .scene figcaption{padding:10px 12px 11px;font-size:.78rem}
}

/* ===== 創始人照片 =====
/* 抬頭：有照片時改為 grid，照片固定寬左列，其餘右列 */
.fhead.has-photo{display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:30px;align-items:start}
.fphoto{margin:0}
.fphoto img{display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff}
.fphoto figcaption{font-size:.76rem;color:var(--muted);line-height:1.6;
  margin-top:10px;padding-left:11px;border-left:2px solid var(--line)}
/* 姓名區內部：簽名縮窄放在下方，不再與照片爭橫向空間 */
.fhead.has-photo .fname{padding-top:2px}
.fsigimg.inline{width:186px;margin-top:14px;display:block}
/* 無照片時的舊版式（保持不變，作為降級） */
.fhead:not(.has-photo) .fname{flex:1;min-width:210px}
.fhead:not(.has-photo) .fsigimg.inline{width:264px}
@media (max-width:820px){
  .fhead.has-photo{grid-template-columns:1fr;gap:22px}
  .fphoto{max-width:340px}
  .fhead.has-photo .fsigimg.inline{width:168px}
}
@media (max-width:560px){
  .fphoto{max-width:none}
  .fphoto img{border-radius:var(--radius-sm)}
  .fphoto figcaption{font-size:.74rem;margin-top:9px}
  .fhead.has-photo .fsigimg.inline{width:150px;margin-top:11px}
}

/* 有照片時抬頭分為左右兩欄：左=照片，右=姓名+簽名+簡介+引語。
   為什麼把簡介與引語移進右欄：首版把它們放在卡片下方通欄，
   而照片高 312px，右欄只有姓名與簽名 → 右側留下大片空白，卡片顯得中空。 */
.fhead.has-photo .fleft{min-width:0}
.fhead.has-photo .fright{min-width:0;display:flex;flex-direction:column;gap:14px}
.fhead.has-photo .fright .fbio{margin-top:0}
.fhead.has-photo .fright .fquote{margin-top:0}

/* ===== 視頻與文章欄目 =====
/* ---------- 視頻列表 ---------- */
/* 用 auto-fill 而非 auto-fit：
   auto-fit 會折疊空軌道 —— 只有 1 個視頻時，3 列會塌成 1 列，
   卡片撐滿整個容器，播放器跟著變成 1130px 寬（實測，使用者反饋「畫面太大」）。
   auto-fill 保留空軌道，列寬穩定，單個卡片也不會撐滿。
   同時限制網格最大寬度，避免 1920px 超寬屏下單卡仍然過寬。 */
/* 內嵌文章後，3 列網格的列寬（約 363px）放得下播放器，但**放不下正文** ——
   實測卡片變成 363×1815px 的細長柱，內嵌文章佔 77% 高度。
   因此改為單列堆疊：每條內容獨佔一行，行內再分「視頻 | 文章」兩欄。 */

/* 橫向兩欄：左=視頻與信息，右=文章正文。
   實測數據驅動：先前單欄 363px 寬 × 1815px 高，正文擠成細長柱；
   分欄後正文獲得約 600px 寬度，接近舒適閱讀寬度，卡片高度大幅下降。 */

/* 播放器容器：固定 16:9，避免視頻載入時佈局跳動 */
.vplayer{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;
  background:#0e1013;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.vplayer video{width:100%;height:100%;display:block;object-fit:contain;background:#0e1013}
.vplayer img{width:100%;height:100%;display:block;object-fit:cover}
/* 未上線狀態：海報變灰 + 中文字樣，避免被當成壞圖 */
.vplayer.pending img{filter:grayscale(.55) brightness(.72)}
.vpend{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}

.vbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.vmeta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.vtag{font-size:.68rem;font-weight:700;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:5px;padding:2px 7px;letter-spacing:.03em}
.vtag.ghost{background:var(--bg-soft);color:var(--muted);border:1px solid var(--line-2)}
.vcard h3{font-size:1.02rem;margin:0 0 8px;letter-spacing:-.01em;line-height:1.45}
.vcard p{font-size:.85rem;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.vfoot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:13px;border-top:1px solid var(--line-2)}
.vread{display:inline-flex;align-items:center;gap:6px;font-size:.81rem;font-weight:650;
  color:var(--accent);transition:.16s}
.vread:hover{text-decoration:underline}
.vread.disabled{color:var(--muted);cursor:default;font-weight:600}
.vread.disabled:hover{text-decoration:none}
.vplat{font-size:.78rem;color:var(--muted);font-weight:600;margin-left:auto}
.vplat:hover{color:var(--accent)}

/* ---------- 文章列表 ---------- */
.alist{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.acard{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.2s}
.acard:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.aimg{display:block;background:#0e1013}
.aimg img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/3}
.abody{padding:15px 16px 16px;min-width:0;display:flex;flex-direction:column}
.ameta{font-size:.7rem;color:var(--muted);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:7px;display:flex;gap:8px;align-items:center}
.acard h3{font-size:.98rem;margin:0 0 7px;line-height:1.45;letter-spacing:-.01em}
.acard h3 a{color:inherit}
.acard h3 a:hover{color:var(--accent)}
.acard p{font-size:.83rem;color:var(--ink-2);line-height:1.68;margin:0 0 12px}
.acard .vread{margin-top:auto}

/* ---------- 文章詳情 ---------- */
.asource{margin:26px 0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.asource-h{display:flex;align-items:center;gap:8px;padding:11px 15px;font-size:.78rem;
  font-weight:700;color:var(--ink-2);background:var(--bg-soft);border-bottom:1px solid var(--line-2)}
.asource-f{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:12px 15px;
  font-size:.83rem;color:var(--ink-2);border-top:1px solid var(--line-2)}
.abody-full p{font-size:.95rem;color:var(--ink-2);line-height:1.95;margin-bottom:16px}
.adisclaim{margin-top:24px;padding:13px 16px;background:var(--bg-soft);
  border-left:3px solid var(--line);border-radius:var(--radius-sm);
  font-size:.8rem;color:var(--muted);line-height:1.75}
.arel{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2)}
.arel h4{font-size:.86rem;font-weight:750;margin-bottom:12px;letter-spacing:.02em}
.arel ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.arel li{font-size:.88rem;line-height:1.6;padding-left:16px;position:relative}
.arel li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.55}
.arel a{color:var(--ink-2)}
.arel a:hover{color:var(--accent)}

@media (max-width:820px){
  .vgrid,.alist{grid-template-columns:1fr}
  .acard{grid-template-columns:140px minmax(0,1fr)}
}
@media (max-width:900px){
  /* 窄屏上下堆疊：兩欄在 900px 以下會讓正文過窄。 */
  .vcard{grid-template-columns:1fr;
    grid-template-areas:"left" "article"}
  .vcard .varticle{border-left:0;border-top:1px solid var(--line-2);
    border-radius:0 0 var(--radius-lg) var(--radius-lg)}
}
@media (max-width:560px){
  .vgrid{gap:16px}
  .vbody{padding:14px 15px 15px}
  .vcard h3{font-size:.96rem}
  .acard{grid-template-columns:1fr}
  .aimg img{aspect-ratio:16/9}
  .abody{padding:13px 14px 15px}
  .abody-full p{font-size:.9rem;line-height:1.85}
  .asource-f{font-size:.79rem}
}

/* ---------- 媒體列表：視頻 + 內嵌文章（用戶要求「不要跳轉」） ---------- */
/* 右欄（文章）給淺背景：與左欄視頻區形成視覺分區。
   先前只有一條分隔線，右欄是白底、左欄也是白底，
   加上左欄下方大片留白，整卡看起來「沒做完」。
   給區塊明確底色後，留白成為刻意的分區而不是缺失。 */
.vcard .varticle{grid-area:article;border-left:1px solid var(--line-2);
  padding:20px 24px 22px;margin:0;align-self:stretch;
  background:var(--bg-soft);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.vcard .varticle > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;font-size:.84rem;font-weight:700;color:var(--accent)}
.vcard .varticle > summary::-webkit-details-marker{display:none}
.vcard .varticle > summary::marker{content:""}
.vcard .varticle > summary::after{content:"▾";margin-left:auto;color:var(--muted);
  transition:transform .2s;font-size:.9rem}
.vcard .varticle[open] > summary::after{transform:rotate(180deg)}
.vcard .varticle .abody-inline{padding-top:14px}
.vcard .varticle .abody-inline p{font-size:.87rem;line-height:1.85;color:var(--ink-2);
  margin-bottom:13px}
.vcard .varticle .abody-inline p:last-child{margin-bottom:0}
.vcard .varticle .afull{display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;font-size:.8rem;font-weight:650;color:var(--muted)}
.vcard .varticle .afull:hover{color:var(--accent)}

/* ===== 媒體列表：精簡版式 =====
/* 目標：這是「視頻列表頁」，一屏應能看到 2–3 條，而不是一條占滿一屏。
   先前每條 865px（右欄文章全展開撐開），一屏只看得到一條，
   使用者反饋「排版不簡潔」。 */

/* 播放器限寬收緊：橫版 380px（約 214px 高），左欄不再显得空旷 */
/* 左欄內容頂部對齊，緊湊排列 */
/* 標題與摘要收緊行距 */
.vcard .vbody h3{font-size:.98rem;margin:0 0 6px;line-height:1.4}
.vcard .vbody p{font-size:.82rem;line-height:1.6;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 折疊後的文章：一條窄條，不搶視覺 */
.vcard .varticle{background:#fafbfc;border-left:1px solid var(--line-2);
  padding:0;border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.vcard .varticle > summary{padding:16px 22px;font-size:.85rem;font-weight:700;
  color:var(--accent);display:flex;align-items:center;gap:8px;cursor:pointer}
.vcard .varticle > summary::after{content:"▾";margin-left:auto;color:var(--muted);
  transition:transform .2s}
.vcard .varticle[open] > summary::after{transform:rotate(180deg)}
.vcard .varticle[open] > summary{border-bottom:1px solid var(--line-2)}
.vcard .varticle .abody-inline{padding:18px 22px 6px}
.vcard .varticle .afull{margin:0 22px 20px}
/* 卡片：去掉多余留白，圓角保留 */
/* 無文章時（整理中）也緊湊 */
.vcard.no-article > .vleft > .vbody{padding:14px 18px 16px}

/* ===== 媒體列表：緊湊單行（最終版）=====
/* 列表頁回歸「列表」：限寬的緊湊單行，一屏看 3 條以上。
   先前兩欄佈局是為「文章全展開」設計的；文章折疊後右欄只剩一行字，
   兩欄結構失去意義，還在欄間留下大片空白（截圖確認）。 */
.vgrid{max-width:1000px;gap:16px}
.vcard{display:grid;gap:0;align-items:start;
  /* 左欄自適應：豎版視頻收窄後左欄也跟著收，
     避免固定 360px 時視頻與文字之間出現空隙（截圖確認）。 */
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  grid-template-areas:"left body";
  background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.vcard > .vleft{grid-area:left;display:flex;flex-direction:column;min-width:0}
/* 列表頁播放器：**橫版與豎版都用同一高度帶**（220px），
   寬度按 aspect-ratio 自動決定，並同樣左對齊 —— 
   先前只限 height 時，橫版會撐滿自適應左欄（實測 733×220），
   而豎版只有 124×220，兩者寬度差異過大；
   豎版置中又與下方左對齊的文字不齊。
   現在：兩者都 max-width 限制 + 左對齊。 */
.vcard > .vleft > .vplayer{border-radius:var(--radius) 0 0 var(--radius);
  max-height:220px;width:auto;max-width:360px;
  margin:0;align-self:start;justify-self:start}
.vcard > .vleft > .vplayer.portrait{max-width:130px}
.vcard > .vleft > .vbody{grid-area:body;padding:18px 22px 20px}
.vcard .vbody h3{font-size:1rem;margin:0 0 8px;line-height:1.42}
.vcard .vbody p{font-size:.85rem;line-height:1.65;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard .vbody .vmeta{margin-bottom:10px}
.vcard .vfoot{padding-top:10px;border-top:1px solid var(--line-2);margin-top:auto;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* 連結不可折行：先前被壓成「Read the / article」三行（截圖確認） */
.vcard .vfoot .vread{white-space:nowrap}
/* 列表頁不再內嵌正文：只留「讀整理的文章」連結（詳見獨立文章頁） */
.vcard .varticle{display:none}

@media (max-width:820px){
  .vgrid{max-width:100%}
  .vcard{grid-template-columns:1fr;grid-template-areas:"left" "body"}
  .vcard > .vleft > .vplayer{border-radius:var(--radius) var(--radius) 0 0;
    max-height:none;width:100%;max-width:100%}
  /* 窄屏改單列：豎版居中且限制高度，避免占滿整屏 */
  .vcard > .vleft > .vplayer.portrait{max-width:130px;max-height:420px;
    width:auto;margin:0;justify-self:start}
}

/* ===== 媒體列表：唯一權威規則（清理後）=====
/* ⚠️ 本區塊是媒體卡的**唯一權威定義**。
   先前改了 4 版、每版追加而不刪舊規則，導致：
     .vgrid 是單列，.vcard 卻是兩列網格；
     .vleft 被當成獨立網格項目，寬度收成 130px 窄柱（截圖確認）。
   今後改動請**直接改這裡**，不要再追加新區塊。 */
.vgrid{display:grid;gap:16px;max-width:1000px;grid-template-columns:1fr}

/* 用 flex 橫排，不用 grid：
   先前用 grid + 包裹層 .vleft，而 .vleft 是 flex column，
   視頻與信息只能上下堆疊 —— 我卻一直以為它們在兩個網格列裡。
   flex 更直接：.vplayer 按自身寬高比定寬，.vbody 吃剩餘寬度。 */
.vcard{display:flex;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.2s}
.vcard:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}

/* 播放器：橫豎版同一高度帶（220px），寬度按比例自動、左對齊 */
.vcard > .vplayer{flex:0 0 auto;max-height:220px;width:auto;max-width:360px;
  margin:0;border-radius:0}
.vcard > .vplayer.portrait{max-width:130px}
.vcard > .vbody{flex:1 1 auto;min-width:0;padding:16px 20px 18px}

.vcard .vbody h3{font-size:1rem;margin:0 0 8px;line-height:1.42;letter-spacing:-.01em}
.vcard .vbody p{font-size:.85rem;color:var(--ink-2);line-height:1.65;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard .vbody .vmeta{margin-bottom:10px}
/* 列表頁不內嵌正文：正文在獨立文章頁（article-*.html）。 */
.vcard .varticle{display:none}

@media (max-width:820px){
  .vgrid{max-width:100%}
  .vcard{flex-direction:column}
  .vcard > .vplayer{max-height:none;max-width:100%;width:100%}
  .vcard > .vplayer.portrait{max-height:400px;width:auto;max-width:220px;margin:0 auto}
}

/* ===== 文章：分場景實拍圖 =====
/* 從視頻截取的分場景實拍圖。用戶要求「配圖用視頻裡的圖片，要分場景出圖」。
   兩列自適應：圖較寬時並排，窄屏單列。 */
.shots-wrap{margin:34px 0 30px}
.shots-h{font-size:1rem;margin:0 0 16px;display:flex;align-items:center;gap:8px;
  color:var(--ink)}
.shots{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.shot{margin:0;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.shot figcaption{padding:11px 13px 13px;font-size:.79rem;line-height:1.6;
  color:var(--ink-2);border-top:1px solid var(--line)}
@media (max-width:560px){
  .shots{grid-template-columns:1fr;gap:16px}
  .shot img{aspect-ratio:4/3}
}

/* ===== 文章：段落內插圖（小圖）=====
/* 用戶要求「每一段話插進去場景圖片，場景圖片不要太大」。
   段內插圖：寬度受限、居中、圖註小字。 */
.abody-full figure.pshot{margin:22px 0 26px;max-width:340px}
.abody-full figure.pshot img{display:block;width:100%;height:auto;
  border-radius:var(--radius);border:1px solid var(--line)}
.abody-full figure.pshot figcaption{margin-top:9px;font-size:.76rem;line-height:1.6;
  color:var(--muted)}
/* 同一段後有多張圖時，兩張並排（仍保持較小） */
.abody-full figure.pshot + figure.pshot{margin-top:14px}
.pshot-row{display:flex;gap:16px;flex-wrap:wrap;margin:22px 0 26px}
.pshot-row figure.pshot{margin:0;max-width:300px}
@media (max-width:560px){
  .abody-full figure.pshot{max-width:100%}
}

/* ===== 媒體卡：文章簡介 =====*/
/* 列表頁每張視頻卡給一句文章簡介 + 連結，方便客戶了解詳情。
   用戶原話：「這個視頻排版的空的地方就是文章的簡單介紹，可以點擊進去」 */
.vcard .vintro{margin-top:2px}
.vcard .vintro p{font-size:.84rem;line-height:1.7;color:var(--ink-2);margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vcard .vbody > .vread{display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:700;color:var(--accent);white-space:nowrap}
.vcard .vbody > .vread .arr{transition:transform .18s}
.vcard .vbody > .vread:hover .arr{transform:translateX(3px)}
.vcard .vbody > .vread:hover{text-decoration:underline}
@media (max-width:560px){
  .vcard .vintro p{-webkit-line-clamp:4}
}

/* 技術示意圖（PIL 繪製，橫版 1200×760）：
   在 340px 的手機欄寬下，圖中文字會小到看不清。
   所以示意圖用比實拍圖更大的寬度上限，窄屏時幾乎滿寬。 */
@media (max-width:560px){
}

/* 技術示意圖（PIL 繪製，橫版 1200×760）：
   在 340px 的欄寬下圖中文字會看不清，所以給它更大的寬度上限。
   ⚠️ 用顯式類名 `.pshot-wide`（渲染時由 pages.py 寫入），
      不用 `:has()` —— 先前那版 `:has(img[src*=/diagrams/])`
      連引號都被吞掉了，選擇器無效，寬度自然沒生效。 */
.abody-full figure.pshot.pshot-wide{max-width:680px}
@media (max-width:560px){
  .abody-full figure.pshot.pshot-wide{max-width:100%}
}

/* ===== 文章卡與視頻卡：卡片網格重排 =====
/* 用戶反饋：「2篇文章沒有封面圖片…文章卡片可以重新排版一下，視頻也是一樣」

   原狀：.alist / .vgrid 都是單列滿寬，縮略圖佔左欄約一半，
        右側文字被擠成窄條（截圖裡標題下的摘要折成 4 行）。
   重排：卡片網格 3 列，縮略圖置於卡片上方並固定 16:9，
        文字區獲得正常寬度。 */

.alist,.vgrid{display:grid;gap:22px;max-width:1180px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* ---------- 文章卡 ---------- */
.acard{display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.2s}
.acard:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.acard .aimg{display:block;background:var(--bg-soft)}
.acard .aimg img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:center}
.acard .abody{padding:16px 18px 18px;display:flex;flex-direction:column;
  flex:1 1 auto;min-width:0}
.acard .ameta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-bottom:9px;font-size:.78rem;color:var(--accent);font-weight:700}
.acard h3{font-size:1.02rem;margin:0 0 8px;line-height:1.42;letter-spacing:-.01em}
.acard h3 a{color:var(--ink)}
.acard .abody p{font-size:.85rem;line-height:1.68;color:var(--ink-2);margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard .vread{margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:700;color:var(--accent);white-space:nowrap}
.acard .vread:hover{text-decoration:underline}

/* ---------- 視頻卡（同一套網格節奏） ---------- */
.vcard{display:flex;flex-direction:column;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.2s}
.vcard:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
/* 縮略圖置頂：寬度撐滿卡片，比例固定 16:9 */
.vcard > .vplayer{width:100%;max-width:100%;max-height:none;
  aspect-ratio:16/9 !important;border-radius:0}
.vcard > .vplayer video{width:100%;height:100%;object-fit:cover}
.vcard .vbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1 1 auto}
.vcard .vbody h3{font-size:1.02rem;margin:0 0 8px;line-height:1.42;letter-spacing:-.01em}
.vcard .vbody p{font-size:.85rem;line-height:1.68;color:var(--ink-2);margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vcard .vfoot{margin-top:auto;padding-top:0;border-top:0}
.vcard .vbody > .vread{display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:700;color:var(--accent);white-space:nowrap}

@media (max-width:820px){
  .alist,.vgrid{grid-template-columns:1fr;gap:18px}
  .acard .aimg img,.vcard > .vplayer{aspect-ratio:16/9}
}

/* ===== 卡片縮略圖與 AI 角標 =====
/* 列表頁縮略圖統一：AI 生成圖，16:9，並帶「AI 場景示意圖」角標。
   規範書要求每張 AI 圖都標明 —— 列表頁是訪客第一眼看到的地方。 */
.acard .aimg,.vcard .vthumb{position:relative;display:block;
  background:var(--bg-soft);overflow:hidden}
.acard .aimg img,.vcard .vthumb img{display:block;width:100%;
  aspect-ratio:16/9;object-fit:cover;object-position:center}
.vcard .vthumb{border-radius:0}
/* AI 角標已依用戶要求全站移除（2026-10-10）。
   樣式一併刪除，避免以後誤用。若要恢復，見 git 歷史。 */
/* ⚠️ 不要再隱藏 .vcard > .vplayer —— 媒體頁是視頻列表，必須有播放器。
   （曾因加 display:none 導致「視頻不見了」，已移除。） */
.vcard .vthumb-wrap{position:relative;display:block}
/* 列表頁播放器統一 16:9：
   · 與文章卡縮略圖比例一致，整個列表節奏統一
   · AI 封面本身是橫幅構圖，16:9 顯示最自然
   · 視頻源是 1:1，用 object-fit:cover 填充不留黑邊
   需要 !important 覆蓋 video_block 輸出的行內 aspect-ratio。 */
.vcard .vthumb-wrap > .vplayer{width:100%;max-width:100%;max-height:none;
  aspect-ratio:16/9 !important;border-radius:0}
.vcard .vthumb-wrap > .vplayer video{width:100%;height:100%;object-fit:cover}
/* 角標避讓原生播放控件（控件條約 40px 高）——先前壓在進度條上 */

/* ===== 頁腳地址塊（香港 / 廣州）=====*/
/* 頁腳分列兩個地點：香港總辦事處（商務/接待）與廣州生產基地。
   保持 NAP 一致是 GEO（地理定位）的前提。

   ⚠️ 注意：不要把類名寫成 `.faddr b` 之外的形式，
      也不要給子 span 加 `.block` —— 項目的雙語機制用
      `.t-en:not(.block):not(.flex)` 判斷，`.block` 是有語義的類。
   實測（computed style）：EN 模式下 span.t-en 為 inline 且已顯示，
      只是原先 0.8rem 的字號與地址顏色接近，看起來像沒顯示。 */
.faddr{margin-top:14px;padding-left:11px;line-height:1.7;
  border-left:2px solid var(--line-2)}
.faddr b{display:block;font-size:.86rem;font-weight:700;
  color:var(--accent);letter-spacing:.01em;margin-bottom:3px}
.faddr a{color:inherit}

/* ===== 品牌形象區 + 品類卡圖 =====*/
/* 首頁品牌形象區（用戶提供的品牌拼圖）。
   兩欄：圖片左、文案右；窄屏堆疊。 */
.brandstory{padding:64px 0}
.brandstory .bs-grid{display:grid;gap:38px;align-items:center;
  grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.brandstory .bs-fig{margin:0}
.brandstory .bs-fig img{display:block;width:100%;height:auto;
  border-radius:var(--radius-lg);border:1px solid var(--line)}
.brandstory .bs-text h2{margin:8px 0 14px}
.brandstory .bs-text p{font-size:.92rem;line-height:1.8;color:var(--ink-2);
  margin:0 0 14px}
@media (max-width:860px){
  .brandstory{padding:44px 0}
  .brandstory .bs-grid{grid-template-columns:1fr;gap:24px}
}

/* 品類卡若帶圖：圖在上、文字在下（僅面霜類有圖，其餘維持純文字卡）

   ⚠️ 關鍵：align-items:start
   只有一張卡有圖時，它會撐高整行，其餘文字卡被拉伸 → 下半截空白
   （截圖可見，看起來像內容缺失）。加 align-items:start 後
   每張卡只佔自身內容高度，不再被拉長。

   但仍需注意：一行裡一張有圖四張沒圖，視覺上不平衡。
   徹底解決要嘛給別類也配圖，要嘛把有圖的卡單獨成區。 */
.grid{align-items:start}
.card.has-img{padding:0;overflow:hidden}
/* 品類圖容器：16:9 + 略偏上裁切。
   五張源圖比例不一（精華 16:9；面霜/潔面/洗護 1:1）：
     · 精華圖是 16:9 且**文案貼左緣** —— 4:3 會切掉「LUMIKEY」首字母（實測過）
     · 方版圖構圖上重下輕，品類名與主產品都在上半部
   故以 16:9 為準：精華圖零裁切；方圖保留上方約 61%，正好是要展示的部分。
   object-position 取 center 20%，多留一點品類名區域。
   ⚠️ 以後配品類圖請給 16:9，與容器一致就不必裁切。 */
.card.has-img .card-img{display:block;width:100%;aspect-ratio:16/9;
  object-fit:cover;object-position:center 20%}
.card.has-img .card-body{padding:13px 16px 15px}
/* 濃縮版品類卡：副標題已刪（品類圖裡本來就有同樣文字），
   只留標題 + 配方數，讓圖占卡高約 73% */
.card.has-img .card-body h3{margin:0;font-size:1.02rem;line-height:1.35}
.card.has-img .catn{display:block;margin-top:5px;font-size:.78rem;
  color:var(--muted);letter-spacing:.01em}

/* ===== 品類圖區（配方目錄頁）=====*/
/* 配方目錄頁的品類圖（目前僅面霜類有圖）。 */
.catshow{margin:26px 0 4px}
.catgrid{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.catfig{margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.catfig img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:center 20%}
.catfig figcaption{padding:14px 16px 16px;font-size:.85rem;line-height:1.65;
  color:var(--ink-2)}
.catfig figcaption b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:5px}
.catfig-n{display:block;margin-top:9px;font-size:.78rem;color:var(--muted)}

/* 社媒渠道卡：主頁短網址（去掉 https:// 便於閱讀與核對）

   ⚠️ 不要用 word-break:break-all —— 它會在任意字元斷開，
      把 instagram.com/lumikey 切成 "…/lu" + "mikey"，比不換行更難讀。
      改用 normal + overflow-wrap:anywhere：優先整詞，放不下才斷。 */
.qrurl{display:block;margin-top:7px;font-size:.66rem;color:var(--muted);
  word-break:normal;overflow-wrap:anywhere;line-height:1.45;
  letter-spacing:-.01em}

/* ===== 各國合夥人頁：各區負責人 =====
   沿用 HANDSOME 的真人頭像（160px 圓形，姓名／電話已裁走）。
   版面與上方「十個市場」同節奏：2 列緊湊卡。 */
.repgrid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.repcard{display:flex;gap:15px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.repav{flex:0 0 auto;width:64px;height:64px;border-radius:50%;overflow:hidden;
  background:#eceae5;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:.72rem;font-weight:700;
  color:var(--muted);text-align:center;line-height:1.25}
.repav img{width:100%;height:100%;object-fit:cover;display:block}
.repbody{min-width:0;flex:1}
.repname{font-weight:700;font-size:1.02rem;margin:0 0 4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.repname small{font-weight:500;font-size:.76rem;color:var(--muted)}
.repname em{font-style:normal;font-size:.69rem;font-weight:700;color:#b03a53;
  background:#fdeef2;padding:2px 8px;border-radius:99px}
.reptel{font-size:.82rem;color:var(--muted);margin:0 0 9px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reptel a{color:inherit}
/* 圖標與標籤綁在一起，換行時不拆散 */
.replab{display:inline-flex;align-items:center;gap:5px}
/* 佔位圓：放人物圖標，不放文字 */
.repav-todo{color:#b9bcc2;border-style:dashed}
.repcty{display:flex;flex-wrap:wrap;gap:6px}
.repcty span{font-size:.73rem;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:99px;padding:2px 9px;color:var(--ink-2)}
.repcty span.t1{border-color:#e8c6d0;color:#b03a53;background:#fdeef2}
.repsup{margin-top:8px;font-size:.75rem;color:var(--muted);line-height:1.6}
@media (max-width:860px){
  .repgrid{grid-template-columns:1fr}
  .repav{width:54px;height:54px}
}

/* 渠道卡上的帳號名／號碼（如「蜜糖媽媽 · 小紅書號 5426367654」） */
.qrhandle{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);
  margin:-2px 0 6px}

/* 平台標籤：已發佈（可點）與未發佈（灰、僅對內頁出現） */
.vplat-off{opacity:.55;cursor:default}
.vplats{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ===== 鍏у鍒嗙櫦鍙帮紙鍏ч儴闋侊級=====
   涓€姊濆収瀹逛竴寮靛崱锛氬乏婵冪府鍦栥€佸彸璩囪▕銆傛墜姗熶笂鏀圭偤涓婁笅鍫嗙枈銆?*/
.hubgate{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;max-width:420px}
.hubgate-row{display:flex;gap:10px;margin-top:12px}
.hubgate-row input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:#fff;color:inherit}
.hublist{display:flex;flex-direction:column;gap:18px}
.hubcard{display:flex;gap:18px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.hubthumb{flex:0 0 auto;width:120px;height:120px;border-radius:10px;
  object-fit:cover;background:var(--bg-soft);display:block}
.hubthumb-ph{display:block}
.hubbody{min-width:0;flex:1}
.hubmeta{font-size:.75rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:6px}
.hubbody h3{margin:0 0 10px;font-size:1.02rem}
.hubplats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.hubplat{font-size:.73rem;border-radius:99px;padding:2px 10px;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.hubplat.on{border-color:#bfe0d6;background:#e7f5f2;color:#0f7b6c;font-weight:600}
.hubplat.draft{border-color:#e8c6d0;background:#fdeef2;color:#b03a53}
.hubplat.off{opacity:.6}
.hubdraft{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;
  margin-bottom:8px;overflow:hidden}
.hubdraft.empty{color:var(--muted);font-size:.85rem;padding:12px 14px}
.hubdraft>summary{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 14px;cursor:pointer;list-style:none;font-size:.86rem}
.hubdraft>summary::-webkit-details-marker{display:none}
.hubdraft>summary::before{content:"▸";color:var(--muted);margin-right:2px;
  transition:transform .15s}
.hubdraft[open]>summary::before{transform:rotate(90deg)}
.hubdraft>summary b{flex:1}
.hubdraft-n{font-size:.75rem;color:var(--muted);font-weight:400}
.hubdraft[open]>summary{border-bottom:1px solid var(--line)}
.hubdraft-t{padding:11px 14px 0}
.hubdraft-f{padding:0 14px 12px;display:flex;justify-content:flex-end}
.hubdraft-t{font-size:.85rem;line-height:1.7;white-space:pre-wrap;
  word-break:break-word;max-height:260px;overflow:auto}
[data-copy].copied{color:#0f7b6c;border-color:#bfe0d6}
.hubfoot{margin-top:4px}
.hublink{font-size:.85rem}
@media (max-width:720px){
  .hubcard{flex-direction:column}
  .hubthumb{width:100%;height:170px}
}

/* ===== 分發台卡片：摘要、正文、配圖 ===== */
.hubexcerpt{font-size:.85rem;color:var(--ink-2);margin:0 0 12px;line-height:1.65}
.hubbod{background:#fff;border:1px solid var(--line);border-radius:10px;
  margin-bottom:8px;overflow:hidden}
.hubbod>summary{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 14px;cursor:pointer;list-style:none;font-size:.86rem;
  font-weight:600}
.hubbod>summary::-webkit-details-marker{display:none}
.hubbod>summary::before{content:"▸";color:var(--muted);margin-right:2px;
  transition:transform .15s}
.hubbod[open]>summary::before{transform:rotate(90deg)}
.hubbod>summary b{flex:1}
.hubbod[open]>summary{border-bottom:1px solid var(--line)}
.hubbod-t{padding:12px 14px;font-size:.88rem;line-height:1.75;max-height:420px;
  overflow:auto}
.hubbod-t p{margin:0 0 10px}
.hubshots{display:grid;gap:8px;padding:12px 14px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.hubshot img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);display:block;background:var(--bg-soft)}
.hubplat-h{font-size:.73rem;color:var(--muted);align-self:center;margin-right:2px}

/* ===== 聯繫頁小紅書卡的近期內容縮圖條 ===== */
.qctiles{margin:10px 0 4px;width:100%}
.qctiles-h{display:block;font-size:.72rem;color:var(--muted);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.04em}
.qctiles-r{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qctile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);display:block;background:var(--bg-soft)}

/* ===== 平台貼文預覽（分發台卡片內）=====
   用戶指出「排版太長方形了不好看」——
   所以預覽**限寬 420px**（手機寬度），看起來像一條平台貼文，
   而不是一整欄的全寬長方塊。 */
.pdwrap{display:flex;justify-content:center;padding:14px}
.pdphone{width:100%;max-width:420px}
.pdimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:12px}
.pdimg img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;
  display:block;background:var(--bg-soft);border:1px solid var(--line)}
.pd-douyin .pdimg img,.pd-channels .pdimg img,.pd-tiktok .pdimg img{aspect-ratio:9/16}
.pd-youtube .pdimg img{aspect-ratio:16/9}
.pd-linkedin .pdimg img{aspect-ratio:191/100}
.pd-instagram .pdimg img{aspect-ratio:4/5}
.pd-alibaba1688 .pdimg img,.pd-alibaba .pdimg img,.pd-facebook .pdimg img{aspect-ratio:1}
.pdnote{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:8px}
.pdnote-h{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.pdphone .hubdraft-t{max-height:300px;overflow:auto}
.pdphone .hubdraft-f{padding:0}

/* 圖片下載角標 */
.pdimg{position:relative;display:block}
.pdimg-dl{position:absolute;right:6px;bottom:6px;width:22px;height:22px;
  border-radius:50%;background:rgba(0,0,0,.62);color:#fff;display:flex;
  align-items:center;justify-content:center;pointer-events:none}
.pdhint{font-size:.72rem;color:var(--muted);margin:-6px 0 12px;text-align:center}
.pdnote-h{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap}
.pdnote-how{font-size:.7rem;color:var(--muted);font-weight:400}

/* ===== 筆記式內容區（對外，聯繫頁）=====
   圖在上、字在下，像小紅書筆記 —— 用戶要「看起來很舒服」。 */
.notegrid{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.notecard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .18s,transform .18s}
.notecard:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-2px)}
.notecard img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:var(--bg-soft)}
.notebody{padding:12px 14px 16px;display:flex;flex-direction:column;gap:5px}
.notecat{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#b03a53}
.notebody b{font-size:.95rem;line-height:1.4}
.notecap{font-size:.78rem;color:var(--muted);line-height:1.55}
@media (max-width:980px){.notegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.notegrid{grid-template-columns:1fr}}

/* ===== 渠道精簡膠囊（聯繫頁）=====
   用戶選「A+B 混合」：渠道收成一行膠囊，版面讓給下面的內容卡。 */
.chpills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.chpill{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:8px 15px;
  font-size:.84rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:border-color .16s,color .16s}
.chpill:hover{border-color:#e8c6d0;color:#b03a53}
.chpill::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#0f7b6c;flex:0 0 auto}
.chpill em{font-style:normal;font-weight:400;color:var(--muted);font-size:.78rem}
.chpill-off{opacity:.62}
.chpill-off::before{background:#b9bcc2}
.chpill-off:hover{border-color:var(--line);color:var(--ink-2)}

/* ===== 取料台首頁的卡片（濃縮圖 ＋ 簡短介紹）===== */
.hublist{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.hubcard{display:flex;gap:18px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
  text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s}
.hubcard:hover{box-shadow:0 6px 22px rgba(0,0,0,.08);transform:translateY(-2px)}
.hubcard-img{flex:0 0 auto;width:132px;height:132px;border-radius:12px;
  object-fit:cover;display:block;background:var(--bg-soft)}
.hubcard-img-ph{display:block}
.hubcard-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.hubcard-b b{font-size:1.02rem;line-height:1.4}
.hubcard-intro{margin:0;font-size:.85rem;line-height:1.65;color:var(--ink-2)}
.hubcard-meta{margin-top:auto;font-size:.75rem;color:var(--muted);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap}
.hubcard-go{color:#b03a53;font-weight:700}
.hubcard.is-empty{opacity:.62}
.hubcard.is-empty .hubcard-go{display:none}

/* ===== 取料頁 ===== */
.pickup-back{margin:0 0 18px;font-size:.85rem}
.pickup-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:22px}
.pickup-cover{width:180px;height:180px;border-radius:12px;object-fit:cover;
  flex:0 0 auto;background:var(--bg-soft)}
.pickup-count{font-size:.8rem;color:var(--muted);margin:0}
@media (max-width:860px){
  .hublist{grid-template-columns:1fr}
  .pickup-head{flex-direction:column}
  .pickup-cover{width:100%;height:190px}
}
.picklist{display:flex;flex-direction:column;gap:10px}
/* 頁腳的內部取料台入口：與版權同級，不搶眼 */
.fbot-r{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.fhub{color:inherit;opacity:.5;text-decoration:none;font-size:.9em}
.fhub:hover{opacity:.9;text-decoration:underline}

/* ===== 內容頁版面（重排：圖只出現一次，文案獨立成表）===== */
.pdsection{margin-bottom:30px}
.pdh{font-size:.95rem;margin:0 0 14px;color:var(--ink-2);font-weight:700}
.pdgallery{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px}
.pdspecs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pdspec{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  font:600 .8rem/1 inherit;color:var(--ink-2);cursor:pointer}
.pdspec em{font-style:normal;font-size:.72rem;color:var(--muted)}
.pdspec.on{background:#fdeef2;border-color:#e8c6d0;color:#b03a53}
.pdspec.on em{color:#b03a53}
.pdgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pdgrid[hidden]{display:none}
.pdimg{position:relative;display:block;border-radius:10px;overflow:hidden}
.pdimg img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:10px}
.pdgrid[data-spec$="9x16"] .pdimg img{aspect-ratio:9/16}
.pdgrid[data-spec$="16x9"] .pdimg img{aspect-ratio:16/9}
.pdgrid[data-spec$="4x5"] .pdimg img{aspect-ratio:4/5}
.pdgrid[data-spec$="1x1"] .pdimg img{aspect-ratio:1}
.pdgrid[data-spec$="191x100"] .pdimg img{aspect-ratio:191/100}
.pdtexts{display:flex;flex-direction:column;gap:8px}
.pdtext{background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.pdtext>summary{display:flex;align-items:center;gap:12px;padding:13px 16px;
  cursor:pointer;list-style:none;font-size:.88rem}
.pdtext>summary::-webkit-details-marker{display:none}
.pdtext>summary::before{content:"▸";color:var(--muted);transition:transform .15s}
.pdtext[open]>summary::before{transform:rotate(90deg)}
.pdtext>summary b{flex:0 0 auto}
.pdcount{color:var(--muted);font-size:.78rem;flex:1}
.pdcount .pdunv{font-style:normal;opacity:.7}
.pdover{color:#b03a53;font-weight:700;font-size:.78rem}
.pdtext[open]>summary{border-bottom:1px solid var(--line)}
.pdbody{padding:14px 16px;font-size:.88rem;line-height:1.8;white-space:pre-wrap;
  word-break:break-word;max-height:420px;overflow:auto}
.pdact{padding:0 16px 14px;display:flex;justify-content:flex-end}

/* 頁腳取料台入口：中英並列（站點默認英文，只寫英文用戶找不到） */
.fhub-cn{margin-right:4px}
.fhub-en{opacity:.7}

/* ===== 渠道卡片（一排）=====
   用戶：「做成卡片一排」。每張 = 平台圖標 + 平台名（+ 帳號名）。 */
.chcards{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.chcard{display:flex;flex-direction:column;align-items:center;gap:7px;
  width:104px;padding:15px 8px 13px;background:#fff;border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:inherit;text-align:center;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.chcard:hover{border-color:#e8c6d0;box-shadow:0 4px 14px rgba(0,0,0,.06);
  transform:translateY(-2px)}
.chcard-ico{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;background:var(--bg-soft);
  color:#b03a53}
.chcard b{font-size:.8rem;font-weight:700;line-height:1.3}
.chcard em{font-style:normal;font-size:.7rem;color:var(--muted);
  line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.chcard-off{opacity:.5}
.chcard-off .chcard-ico{background:#f1f2f4;color:#a9adb4}
.chcard-off:hover{border-color:var(--line);box-shadow:none;transform:none}
@media (max-width:560px){
  .chcard{width:calc(33.333% - 8px)}
}

/* ===== 按平台分的取料頁 ===== */
.pplink{display:inline-block;margin-top:10px;font-size:.82rem;color:var(--muted)}
.pplist{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.ppcard{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px}
.pphead{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.ppcover{width:88px;height:88px;border-radius:10px;object-fit:cover;
  flex:0 0 auto;background:var(--bg-soft)}
.pphead-b{min-width:0;flex:1}
.pphead-b b{display:block;font-size:1rem;margin:2px 0 6px}
.ppimgs{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  margin-bottom:4px}
.pptext{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.pptext-h{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ppact{display:flex;justify-content:flex-end;margin-top:10px}
.ppcard .pdbody{max-height:300px;overflow:auto;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px}
@media (max-width:560px){
  .ppcover{width:64px;height:64px}
  .ppcard{padding:15px 16px}
}

/* 渠道卡片：濃縮圖為主，平台圖標當角標 */
.chcard{padding:0 0 12px;overflow:hidden}
.chcard-img{position:relative;display:block;width:100%;aspect-ratio:1;
  background:var(--bg-soft)}
.chcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.chcard-badge{position:absolute;right:6px;bottom:6px;width:26px;height:26px;
  border-radius:8px;background:rgba(255,255,255,.94);color:#b03a53;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.14)}
.chcard b{margin-top:10px;padding:0 6px}
.chcard em{padding:0 6px}
.chcard-ico{width:40px;height:40px;border-radius:11px;background:var(--bg-soft);
  color:#b03a53;display:flex;align-items:center;justify-content:center;
  margin-top:15px}
.chcard-off .chcard-img img{filter:grayscale(1);opacity:.6}

/* 渠道卡片加寬以容納簡介 */
.chcards{gap:14px}
.chcard{width:168px;padding-bottom:14px}
.chcard-intro{font-size:.72rem;line-height:1.5;color:var(--muted);
  padding:0 10px;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
@media (max-width:700px){
  .chcard{width:calc(50% - 7px)}
}
@media (max-width:400px){
  .chcard{width:100%}
}

/* 平台總覽頁 */
.pfgrid .pfcard{width:152px}
.pfcount{font-size:.7rem;color:#b03a53;font-weight:700;margin-top:3px}
.pfcount-0{color:var(--muted);font-weight:400}

/* 取料台首頁的平台入口 */
.hubsw{margin:0 0 18px}

/* ===== 渠道卡片：做小、一排更多（用戶：「卡片做小點，排列多點」）=====
   原本 168px／一排 6 張 → 124px／一排 9 張。
   同步縮小內距、字號、角標，讓「一排多個」不顯得擠。 */
.chcards{gap:10px}
.chcard{width:124px;padding-bottom:10px}
.chcard b{font-size:.74rem;margin-top:8px;padding:0 5px}
.chcard em{font-size:.66rem;padding:0 5px}
.chcard-intro{font-size:.66rem;line-height:1.42;padding:0 7px;margin-top:4px}
.chcard-badge{width:21px;height:21px;right:4px;bottom:4px;border-radius:6px}
.chcard-badge svg{width:12px;height:12px}
.chcard-ico{width:34px;height:34px;margin-top:12px}
/* 斷點：桌面 8 張 → 平板 5 張 → 手機 3 張（用戶要「排列多點」） */
@media (max-width:900px){ .chcard{width:calc(20% - 8px)} }
@media (max-width:640px){ .chcard{width:calc(33.333% - 7px)} }
@media (max-width:400px){ .chcard{width:calc(33.333% - 7px)} }

/* ===== 品類數據卡（取代廣告圖卡）=====
   用戶：「做工廠的太多廣告圖不是那麼好」「我們就是說數據」。
   把品類做成可讀的數據表，客戶一眼看到「這一類做什麼、什麼規格、起訂多少」。 */
.datacard{display:block;text-decoration:none;color:inherit;padding:22px 24px}
.datacard h3{margin:0 0 6px;font-size:1.02rem}
.catblurb{font-size:.86rem;line-height:1.6;color:var(--muted);margin:0 0 16px}
.datalist{margin:0;padding:0;border-top:1px solid var(--line)}
.datarow{display:flex;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.datarow dt{flex:0 0 92px;font-size:.78rem;color:var(--muted);margin:0}
.datarow dd{flex:1;margin:0;font-size:.86rem;line-height:1.5;
  font-variant-numeric:tabular-nums}
.datanote{font-size:.76rem;line-height:1.6;color:var(--muted);margin:13px 0 0}

/* ===== 品牌段：純文字排版 ===== */
.brandstory .bs-lead{max-width:760px}
.brandstory .bs-lead h2{margin:8px 0 16px}
.bs-intro{font-size:1rem;line-height:1.85;color:var(--ink-2);margin:0}
.bs-points{list-style:none;counter-reset:bs;margin:26px 0 0;padding:0;
  max-width:860px;border-top:1px solid var(--line)}
.bs-points li{counter-increment:bs;position:relative;
  padding:16px 0 16px 56px;border-bottom:1px solid var(--line);
  font-size:.95rem;line-height:1.6;color:var(--ink)}
.bs-points li::before{content:counter(bs, decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font-family:var(--font-display,serif);font-size:1.05rem;
  color:#b03a53;letter-spacing:.02em}
.bs-foot{max-width:760px;margin-top:26px}
.bs-foot p{font-size:.92rem;line-height:1.85;color:var(--ink-2);margin:0 0 18px}
@media (max-width:640px){
  .bs-points li{padding:14px 0 14px 42px}
  .datarow dt{flex-basis:72px}
}

/* ===== 產品卡：圖區 → 緊湊元資料行 =====
   用戶：「做工廠的太多廣告圖不是那麼好」「我們就是說數據」。
   保留 .vis 選擇器（products.js 依賴），只把它從高圖區壓成一條資訊行。 */
.pcard .vis.compact{display:flex;align-items:center;gap:10px;
  min-height:0;height:auto;padding:13px 16px;
  background:var(--bg-soft);border-bottom:1px solid var(--line)}
.pcard .vis.compact .sw{position:static;margin:0}
.pcard .vis.compact .swatch{display:block;width:16px;height:16px;
  border-radius:5px;border:1px solid rgba(0,0,0,.10)}
.pcard .vis.compact .format{position:static;margin:0;color:var(--ink-2);
  font-size:.78rem;font-weight:600}
.pcard .vis.compact .hot{position:static;margin:0 0 0 auto}

/* ===== 香型選型冊 =====
   按香調家族分組的清單。色點用瓶身顏色，客戶仍能對應實物。 */
.scentwrap{display:grid;gap:26px;margin-top:6px}
.scentgroup{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px 24px}
.scentgroup h3{margin:0 0 14px;font-size:1rem;display:flex;align-items:center;gap:10px}
.scentcount{font-size:.74rem;font-weight:600;color:#b03a53;
  background:#fdeef2;border-radius:99px;padding:2px 9px}
.scentlist{list-style:none;margin:0;padding:0;
  display:grid;gap:0;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.scent{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.86rem}
.scent-dot{flex:0 0 auto;width:14px;height:14px;border-radius:5px;
  border:1px solid rgba(0,0,0,.10)}
.scent-n{flex:1;min-width:0}
.scent-c{flex:0 0 auto;font-size:.7rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .scentgroup{padding:16px 18px}
  .scentlist{grid-template-columns:1fr}
}