/* =========================================================
   哟哟哟 · 服装展示站  ·  共享样式
   风格配方：Monocle Magazine（杂志编辑感）
   气质关键词：有品味、值得逛  —— 米白纸感底 / 墨黑字 / 墨绿一点强调
   设计手法（每页 ≥2，首屏 ≥1）：
     1 超大字标题 · 2 大留白 · 3 不对称分栏 · 4 杂志三层标题
     5 编号与规则线 · 6 图片破格出血 · 7 克制色块 · 8 微动效 · 9 字体配对
   ========================================================= */

/* ---------- 1. 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

/* ---------- 2. 设计变量（配方接口 · 不许私改） ---------- */
:root{
  /* 颜色：主色=墨黑 · 底色=米白纸感 · 强调=墨绿 · 中性=暖灰 */
  --c-ink:#1b1a17;          /* 主文字 */
  --c-ink-2:#57534b;        /* 次要文字 */
  --c-ink-3:#8d877c;        /* 弱化文字 / 占位 */
  --c-surface:#f8f5ef;      /* 页面底色（米白纸感） */
  --c-surface-2:#ffffff;    /* 纯白（卡片） */
  --c-ground:#efe9de;       /* 区块底 / 占位块底（暖米） */
  --c-accent:#2f4a3c;       /* 强调色：墨绿 */
  --c-accent-2:#24382e;     /* 强调色深档 */
  --c-line:#ded6c8;         /* 细线 */
  --c-line-2:#cfc5b4;       /* 细线深档 */

  /* 字体：衬线标题 + 无衬线正文（手法 9 字体配对） */
  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",Georgia,"Times New Roman",serif;
  --font-body:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-latin:"Georgia","Times New Roman",serif;

  --radius:2px;             /* 近直角 —— 杂志感不用圆角 */
  --shadow:none;            /* 无阴影 —— 装饰只靠 1px 细线 */

  --sp1:8px; --sp2:16px; --sp3:24px; --sp4:32px; --sp5:48px; --sp6:72px;
  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
}

/* ---------- 3. 基础排版 ---------- */
body{
  background:var(--c-surface);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.16; letter-spacing:.01em; }
::selection{ background:var(--c-accent); color:#fff; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- 4. 通用部件 ---------- */
/* 杂志三层标题（手法 4） */
.kicker{
  display:inline-block;
  font-family:var(--font-body);
  font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-accent);
}
.kicker-light{ color:#dfe6df; }
.headline{ font-size:clamp(28px,4.4vw,44px); margin:14px 0 10px; }
.headline-light{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4.4vw,44px); color:#fff; margin:14px 0 10px; line-height:1.18; }
.dek{ font-size:clamp(15px,1.6vw,18px); color:var(--c-ink-2); font-style:italic; }
.section-head{ max-width:660px; }

/* 按钮（三态齐全 · 高度 ≥44px） */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 26px;
  border:1px solid transparent; border-radius:var(--radius);
  font-size:14px; font-weight:600; letter-spacing:.04em;
  transition:background-color .2s cubic-bezier(.22,1,.36,1),
             color .2s cubic-bezier(.22,1,.36,1),
             border-color .2s cubic-bezier(.22,1,.36,1),
             transform .2s cubic-bezier(.22,1,.36,1);
}
.btn-primary{ background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.btn-primary:hover{ background:var(--c-accent-2); border-color:var(--c-accent-2); }
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-ink); }
.btn-ghost:hover{ background:var(--c-ink); color:var(--c-surface); }
.btn-ghost:active{ transform:translateY(1px); }
.btn-light{ background:#fff; color:var(--c-accent); border-color:#fff; }
.btn-light:hover{ background:var(--c-ground); border-color:var(--c-ground); }
.btn-block{ width:100%; }
.btn:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* 文字按钮（列表尾部） */
.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; letter-spacing:.05em;
  color:var(--c-accent); padding-bottom:2px; position:relative;
}
.text-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.text-link:hover::after{ transform:scaleX(1); }
.text-link:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }

/* 图片占位块（默认配图策略） */
.ph{
  background:var(--c-ground);
  border:1px solid var(--c-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--c-ink-3); position:relative; overflow:hidden;
  width:100%;
}
.ph[data-ratio="3:4"]{ aspect-ratio:3/4; }
.ph[data-ratio="4:5"]{ aspect-ratio:4/5; }
.ph[data-ratio="1:1"]{ aspect-ratio:1/1; }
.ph[data-ratio="16:9"]{ aspect-ratio:16/9; }
.ph-icon{ width:34px; height:34px; stroke:currentColor; fill:none; stroke-width:1.4; }
.ph-cap{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }

/* 图标统一（线性 · 1.5px · 无色） */
.ico{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- 5. 顶部信息栏（第一行：LOGO + 定位 | 电话） ---------- */
.topbar{ border-bottom:1px solid var(--c-line); background:var(--c-surface); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; padding-bottom:16px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  width:44px; height:44px; flex:none; border:1px solid var(--c-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1;
  background:var(--c-ink); color:var(--c-surface);
}
.brand-name{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:.22em; line-height:1.1; }
.brand-tag{ font-size:11.5px; color:var(--c-ink-3); letter-spacing:.08em; margin-top:3px; }
.topbar-tel{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--c-ink); white-space:nowrap; }
.topbar-tel:hover{ color:var(--c-accent); }
.topbar-tel small{ font-weight:400; color:var(--c-ink-3); }

/* ---------- 6. 主导航（第二行：整宽） ---------- */
.mainnav{ position:sticky; top:0; z-index:40; background:rgba(248,245,239,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--c-line); }
.nav-inner{ display:flex; align-items:center; gap:20px; min-height:60px; }
.nav-list{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); margin-right:auto; }
.nav-list a{
  position:relative; display:inline-block; padding:8px 0;
  font-size:14.5px; font-weight:600; letter-spacing:.06em; color:var(--c-ink-2);
  transition:color .2s cubic-bezier(.22,1,.36,1);
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--c-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-list a:hover{ color:var(--c-ink); }
.nav-list a:hover::after{ transform:scaleX(1); }
.nav-list a.is-active{ color:var(--c-accent); }
.nav-list a.is-active::after{ transform:scaleX(1); }
.nav-list a:focus-visible{ outline:2px solid var(--c-accent); outline-offset:4px; }
.nav-cta{ min-height:42px; padding:0 22px; }
.nav-toggle{
  display:none; align-items:center; gap:8px;
  min-height:44px; padding:0 12px; background:transparent;
  border:1px solid var(--c-line-2); border-radius:var(--radius);
  font-size:13.5px; font-weight:600; letter-spacing:.08em;
}
.nav-toggle:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }

/* ---------- 7. 首屏 ---------- */
.hero{ padding:clamp(28px,5vw,64px) var(--pad) clamp(56px,9vw,110px); }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,56px); align-items:center; }
.hero-title{
  font-size:clamp(52px,12.5vw,124px);   /* 手法 1 超大字标题 */
  font-weight:700; line-height:.98; letter-spacing:-.01em;
  margin:16px 0 22px;
}
.hero-dek{ font-size:clamp(15px,1.7vw,18px); color:var(--c-ink-2); max-width:34ch; font-style:italic; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-media .ph{ width:100%; }

/* ---------- 8. 区块（手法 2 大留白 · 手法 5 编号与规则线） ---------- */
.section{ padding:clamp(76px,11vw,150px) 0; }
.section-line{ border-top:1px solid var(--c-line); }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4.5vw,56px); }
.section-head-row .section-head{ margin-bottom:0; }

/* ---------- 9. 商品卡 ---------- */
.grid{ display:grid; gap:clamp(16px,2.4vw,28px); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{ display:flex; flex-direction:column; }
.card-media{ position:relative; display:block; overflow:hidden; }
.card-media .ph{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
.card:hover .card-media .ph{ transform:scale(1.035); }
.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--c-accent); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px;
}
.badge-ghost{ background:var(--c-surface); color:var(--c-accent); border:1px solid var(--c-line-2); }
.card-body{ padding:15px 2px 0; }
.card-cat{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); }
.card-title{ font-family:var(--font-display); font-size:18px; font-weight:700; margin:7px 0 6px; line-height:1.35; }
.card-desc{ font-size:13.5px; color:var(--c-ink-2); line-height:1.6; }
.card-price{ margin-top:10px; font-size:14px; font-weight:600; color:var(--c-ink); }
.card-price small{ color:var(--c-ink-3); font-weight:400; }
.card-hoverable:hover .card-title{ color:var(--c-accent); }

/* ---------- 10. 目录式编号列表（手法 5 + 3 不对称） ---------- */
.toc-list{ border-top:1px solid var(--c-line); }
.toc-list li{ border-bottom:1px solid var(--c-line); }
.toc-item{ display:grid; grid-template-columns:64px 1fr auto 40px; align-items:center; gap:clamp(14px,3vw,36px); padding:clamp(20px,3vw,30px) 4px; transition:padding-left .25s cubic-bezier(.22,1,.36,1), color .2s; }
.toc-item:hover{ padding-left:16px; color:var(--c-accent); }
.toc-num{ font-family:var(--font-latin); font-size:15px; color:var(--c-ink-3); letter-spacing:.08em; }
.toc-name{ font-family:var(--font-display); font-size:clamp(19px,2.4vw,26px); font-weight:700; }
.toc-desc{ font-size:13.5px; color:var(--c-ink-2); max-width:42ch; }
.toc-arrow{ justify-self:end; font-size:20px; color:var(--c-ink-3); transition:transform .25s cubic-bezier(.22,1,.36,1); }
.toc-item:hover .toc-arrow{ transform:translateX(6px); }

/* ---------- 11. 强调色块（手法 7 克制色块） ---------- */
.accent-section{ background:var(--c-accent); color:#fff; padding:clamp(64px,9vw,120px) 0; }
.accent-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,72px); align-items:center; } /* 手法 3 不对称 */
.accent-text p{ color:#d9e0d9; max-width:46ch; margin-top:6px; }
.accent-actions{ margin-top:28px; }
.stat-list{ display:grid; gap:0; border-top:1px solid rgba(255,255,255,.24); }
.stat-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 2px; border-bottom:1px solid rgba(255,255,255,.24); }
.stat-num{ font-family:var(--font-latin); font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:.01em; }
.stat-label{ font-size:13px; color:#cfd8cf; letter-spacing:.05em; }

/* ---------- 12. 关于 / 信任 ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,72px); align-items:center; } /* 手法 3 */
.about-body p{ color:var(--c-ink-2); margin-bottom:16px; max-width:56ch; }
.fact-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.fact-chip{ border:1px solid var(--c-line-2); border-radius:999px; padding:6px 14px; font-size:12.5px; color:var(--c-ink-2); letter-spacing:.04em; }

/* ---------- 13. 在线咨询 / 联系 ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:start; }
.contact-list{ margin-top:26px; border-top:1px solid var(--c-line); }
.contact-list li{ display:flex; align-items:center; gap:14px; padding:15px 2px; border-bottom:1px solid var(--c-line); font-size:14.5px; }
.contact-list .ico{ color:var(--c-accent); }
.contact-list b{ font-weight:600; }
.contact-list .muted{ color:var(--c-ink-3); font-weight:400; font-size:12.5px; }
.form{ background:var(--c-surface-2); border:1px solid var(--c-line); padding:clamp(22px,3vw,32px); }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--c-ink-2); margin-bottom:8px; }
.form-field input,.form-field textarea{
  width:100%; min-height:46px; padding:11px 14px;
  background:var(--c-surface); border:1px solid var(--c-line-2); border-radius:var(--radius);
  font-size:14.5px; transition:border-color .2s, box-shadow .2s;
}
.form-field textarea{ min-height:118px; resize:vertical; line-height:1.6; }
.form-field input:focus,.form-field textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 2px rgba(47,74,60,.18); }
.form .btn{ width:100%; }
.form-note{ display:none; margin-top:14px; font-size:13.5px; color:var(--c-accent); font-weight:600; }
.form-note.is-show{ display:block; }
.form-hint{ margin-top:12px; font-size:12px; color:var(--c-ink-3); }

/* ---------- 14. 页脚 ---------- */
.footer{ background:var(--c-ink); color:#cfc9bd; padding:clamp(48px,7vw,80px) 0 30px; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr); gap:clamp(24px,4vw,48px); }
.footer h3{ font-family:var(--font-display); color:#fff; font-size:17px; letter-spacing:.16em; margin-bottom:14px; }
.footer p,.footer li{ font-size:13.5px; line-height:2; }
.footer a:hover{ color:#fff; }
.footer .ico{ color:#8f9a8f; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-bottom{ margin-top:clamp(32px,5vw,56px); padding-top:22px; border-top:1px solid rgba(255,255,255,.16); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#9a948a; }
.footer-bottom .ph-note{ color:#7f7a70; }

/* ---------- 15. 右下角悬浮「在线咨询」 ---------- */
.consult-fab{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:60;
  display:inline-flex; align-items:center; gap:9px;
  min-height:52px; padding:0 22px;
  background:var(--c-accent); color:#fff; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(27,26,23,.22);
  transition:transform .2s cubic-bezier(.22,1,.36,1), background-color .2s;
}
.consult-fab:hover{ transform:translateY(-2px); background:var(--c-accent-2); }
.consult-fab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.consult-fab .ico{ width:20px; height:20px; }

/* ---------- 16. 微动效（手法 8） ---------- */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }

/* ---------- 17. 响应式（<768px 破格/非对称一律收回） ---------- */
@media (max-width:960px){
  .about-grid,.accent-grid,.contact-grid,.footer-grid{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .toc-item{ grid-template-columns:44px 1fr 40px; }
  .toc-desc{ display:none; }
}
@media (min-width:961px){
  /* 首屏：不对称 5:7 + 图片向右出血到屏幕边缘（手法 3 + 6） */
  .hero{ padding-right:0; padding-left:max(var(--pad), calc((100vw - var(--wrap)) / 2)); }
  .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .hero-media .ph{ aspect-ratio:4/5; }
}
@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav-inner{ flex-wrap:wrap; }
  .nav-list{
    order:3; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.22,1,.36,1);
  }
  .nav-list.is-open{ max-height:340px; }
  .nav-list a{ padding:14px 2px; border-top:1px solid var(--c-line); }
  .nav-list a::after{ display:none; }
  .nav-list a.is-active{ color:var(--c-accent); }
  .nav-cta{ margin-left:auto; }
  .topbar-tel small{ display:none; }
}
@media (max-width:560px){
  .brand-tag{ display:none; }
  .hero-actions .btn{ flex:1 1 auto; }
  .footer-bottom{ flex-direction:column; }
}

/* ---------- 18. 尊重系统「减弱动态效果」 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* =========================================================
   19. 内页通用：页头 + 面包屑 + 三列网格
   ========================================================= */
.page-hero{ padding:clamp(40px,6vw,80px) 0 clamp(28px,4vw,46px); border-bottom:1px solid var(--c-line); }
.page-hero .headline{ font-size:clamp(32px,5.4vw,58px); }
.page-hero .dek{ max-width:54ch; margin-top:2px; }
.crumb{ font-size:12.5px; color:var(--c-ink-3); letter-spacing:.04em; margin-bottom:14px; }
.crumb a:hover{ color:var(--c-accent); }
.grid-3{ grid-template-columns:repeat(3,1fr); }

/* =========================================================
   20. 全部产品：筛选 / 搜索 / 排序 / 分页
   ========================================================= */
.shop-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--c-line); margin-bottom:clamp(28px,4vw,44px); }
.chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border:1px solid var(--c-line-2); border-radius:999px; font-size:13.5px; color:var(--c-ink-2); transition:all .2s cubic-bezier(.22,1,.36,1); }
.chip:hover{ border-color:var(--c-ink); color:var(--c-ink); }
.chip.is-active{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.shop-controls{ display:flex; align-items:center; gap:12px; }
.shop-search,.shop-sort{ min-height:44px; padding:0 14px; background:var(--c-surface-2); border:1px solid var(--c-line-2); border-radius:var(--radius); font-size:14px; }
.shop-search{ min-width:210px; }
.shop-search:focus,.shop-sort:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 2px rgba(47,74,60,.16); }
.shop-count{ font-size:13px; color:var(--c-ink-3); letter-spacing:.04em; margin-bottom:20px; }
.shop-empty{ grid-column:1/-1; padding:64px 0; text-align:center; color:var(--c-ink-2); }
.page-box{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:clamp(36px,5vw,56px); }
.page-btn{ min-width:46px; height:46px; padding:0 12px; background:transparent; border:1px solid var(--c-line-2); border-radius:var(--radius); font-size:14px; color:var(--c-ink-2); transition:all .2s cubic-bezier(.22,1,.36,1); }
.page-btn:hover{ border-color:var(--c-ink); color:var(--c-ink); }
.page-btn.is-active{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; }

/* =========================================================
   21. 商品详情
   ========================================================= */
.pd-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(28px,5vw,64px); align-items:start; }
.pd-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.pd-title{ font-size:clamp(26px,3.6vw,40px); margin:10px 0 14px; }
.pd-desc{ color:var(--c-ink-2); font-size:15.5px; }
.pd-price{ margin:22px 0; padding:18px 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.pd-price b{ display:block; font-family:var(--font-display); font-size:20px; margin-bottom:6px; }
.pd-price small{ color:var(--c-ink-3); font-size:12.5px; }
.pd-opt{ margin-bottom:20px; }
.opt-label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--c-ink-2); margin-bottom:10px; }
.opt-row{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{ display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border:1px solid var(--c-line-2); border-radius:var(--radius); font-size:13.5px; color:var(--c-ink-2); cursor:pointer; transition:all .2s cubic-bezier(.22,1,.36,1); }
.opt:hover{ border-color:var(--c-ink); color:var(--c-ink); }
.opt.is-active{ border-color:var(--c-accent); color:var(--c-accent); box-shadow:inset 0 0 0 1px var(--c-accent); }
.pd-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:6px 0 24px; }
.pd-note{ background:var(--c-ground); border:1px solid var(--c-line); padding:16px 18px; font-size:13.5px; color:var(--c-ink-2); }
.pd-note p + p{ margin-top:9px; }
.pd-long{ margin-top:clamp(48px,7vw,80px); padding-top:clamp(30px,4vw,48px); border-top:1px solid var(--c-line); max-width:780px; }
.pd-long > p{ color:var(--c-ink-2); margin:14px 0 26px; }
.pd-spec{ border-top:1px solid var(--c-line); }
.pd-spec li{ display:flex; justify-content:space-between; gap:16px; padding:13px 2px; border-bottom:1px solid var(--c-line); font-size:14px; }
.pd-spec span{ color:var(--c-ink-3); }
.pd-spec b{ font-weight:600; text-align:right; }

/* =========================================================
   22. 关于我们：指标 / 时间线 / 价值
   ========================================================= */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,32px); padding:clamp(26px,3vw,38px) 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.metrics .m-num{ font-family:var(--font-latin); font-size:clamp(26px,4vw,44px); font-weight:700; line-height:1; }
.metrics .m-label{ display:block; font-size:12.5px; color:var(--c-ink-3); letter-spacing:.05em; margin-top:8px; }
.timeline{ border-top:1px solid var(--c-line); }
.timeline li{ display:grid; grid-template-columns:120px 1fr; gap:clamp(16px,3vw,40px); padding:22px 2px; border-bottom:1px solid var(--c-line); }
.timeline .tl-year{ font-family:var(--font-latin); font-size:19px; color:var(--c-accent); letter-spacing:.04em; }
.timeline .tl-body h3{ font-family:var(--font-display); font-size:18px; margin-bottom:5px; }
.timeline .tl-body p{ font-size:14px; color:var(--c-ink-2); }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); }
.value{ border-top:2px solid var(--c-ink); padding-top:18px; }
.value .num{ display:block; font-family:var(--font-latin); font-size:12.5px; color:var(--c-ink-3); letter-spacing:.1em; margin-bottom:12px; }
.value h3{ font-family:var(--font-display); font-size:19px; margin-bottom:8px; }
.value p{ font-size:14px; color:var(--c-ink-2); }

/* =========================================================
   23. 联系我们：二维码 / 地图 / 双栏
   ========================================================= */
.qr-box{ display:flex; align-items:center; gap:18px; border:1px solid var(--c-line); background:var(--c-surface-2); padding:18px; }
.qr-box .ph{ width:108px; height:108px; flex:none; }
.qr-box .qr-txt b{ display:block; font-family:var(--font-display); font-size:16px; margin-bottom:4px; }
.qr-box .qr-txt span{ font-size:13px; color:var(--c-ink-3); }
.map-box{ border:1px solid var(--c-line); background:var(--c-ground); }
.map-box .ph{ aspect-ratio:16/9; border:0; background:transparent; }
.contact-2col{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(28px,5vw,64px); align-items:start; }

/* ---------- 响应式补丁 ---------- */
@media (max-width:960px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .pd-grid,.contact-2col{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .value-grid{ grid-template-columns:1fr; }
  .timeline li{ grid-template-columns:84px 1fr; }
}
@media (max-width:560px){
  .shop-toolbar{ flex-direction:column; align-items:stretch; }
  .shop-controls{ flex-direction:column; align-items:stretch; }
  .shop-search,.shop-sort{ width:100%; min-width:0; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   24. 表单下拉框 + 常见问题折叠
   ========================================================= */
.form-field select{
  width:100%; min-height:46px; padding:11px 14px;
  background:var(--c-surface); border:1px solid var(--c-line-2); border-radius:var(--radius);
  font-size:14.5px; transition:border-color .2s, box-shadow .2s;
}
.form-field select:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 2px rgba(47,74,60,.18); }

.faq{ border-top:1px solid var(--c-line); }
.faq > li{ border-bottom:1px solid var(--c-line); }
.faq summary{ list-style:none; cursor:pointer; position:relative; padding:20px 40px 20px 2px; font-family:var(--font-display); font-size:17px; font-weight:700; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--c-ink-3); line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq summary:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
.faq details p{ padding:0 2px 22px; color:var(--c-ink-2); font-size:14.5px; max-width:72ch; }

/* =========================================================
   25. 真实图片（云端有图时替换占位框）
   ========================================================= */
.ph-img{ width:100%; display:block; object-fit:cover; background:var(--c-ground); }
.card-media .ph-img{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
.card:hover .card-media .ph-img{ transform:scale(1.035); }
.price-num{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--c-ink); }
.pd-media > .ph-img{ border:1px solid var(--c-line); }

/* =========================================================
   26. 后台管理（admin.html）
   ========================================================= */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; background:var(--c-surface); }
.auth-card{ width:100%; max-width:430px; background:var(--c-surface-2); border:1px solid var(--c-line); padding:clamp(24px,4vw,38px); }
.auth-brand{ text-align:center; margin-bottom:26px; }
.auth-brand .brand-name{ font-size:22px; letter-spacing:.24em; }
.auth-brand p{ font-size:13px; color:var(--c-ink-3); margin-top:8px; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--c-line); margin-bottom:22px; }
.tab{ flex:1; padding:11px 6px; background:none; border:0; border-bottom:2px solid transparent; font-size:14px; color:var(--c-ink-2); transition:color .2s, border-color .2s; }
.tab.is-active{ color:var(--c-accent); border-bottom-color:var(--c-accent); font-weight:600; }
.auth-panel{ display:none; }
.auth-panel.is-active{ display:block; }
.mode-switch{ display:flex; gap:8px; margin-bottom:16px; }
.mode-switch button{ flex:1; min-height:42px; background:var(--c-ground); border:1px solid var(--c-line); border-radius:var(--radius); font-size:13px; color:var(--c-ink-2); }
.mode-switch button.is-active{ background:var(--c-ink); color:var(--c-surface); border-color:var(--c-ink); }
.code-row{ display:flex; gap:10px; align-items:stretch; }
.code-row input{ flex:1; }
.code-row .btn{ min-width:118px; }
.msg{ display:none; margin-top:14px; font-size:13.5px; padding:11px 14px; border-radius:var(--radius); line-height:1.55; }
.msg.is-show{ display:block; }
.msg.ok{ background:#e8efe9; color:#2f4a3c; border:1px solid #cfe0d3; }
.msg.err{ background:#f7ecec; color:#8a3b3b; border:1px solid #e6cdcd; }
.admin-bar{ background:var(--c-ink); color:#fff; }
.admin-bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; flex-wrap:wrap; }
.admin-bar .brand-name{ color:#fff; font-size:17px; letter-spacing:.2em; }
.admin-bar .who{ font-size:12.5px; color:#cfc9bd; }
.admin-wrap{ padding:clamp(24px,4vw,48px) 0 90px; }
.admin-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.admin-stat{ border:1px solid var(--c-line); background:var(--c-surface-2); padding:18px; }
.admin-stat b{ display:block; font-family:var(--font-latin); font-size:28px; line-height:1.1; }
.admin-stat span{ font-size:12.5px; color:var(--c-ink-3); }
.admin-2col{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(20px,3vw,32px); align-items:start; }
.panel{ border:1px solid var(--c-line); background:var(--c-surface-2); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--c-line); }
.panel-head h2{ font-family:var(--font-display); font-size:17px; }
.panel-body{ padding:18px; }
.plist{ width:100%; border-collapse:collapse; }
.plist th{ text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); padding:10px 8px; border-bottom:1px solid var(--c-line); white-space:nowrap; }
.plist td{ padding:11px 8px; border-bottom:1px solid var(--c-line); font-size:13.5px; vertical-align:middle; }
.plist tr:hover td{ background:var(--c-ground); }
.plist .t-name{ font-weight:600; }
.plist .t-actions{ text-align:right; white-space:nowrap; }
.mini{ min-height:34px; padding:0 12px; font-size:12.5px; border:1px solid var(--c-line-2); background:transparent; border-radius:var(--radius); transition:all .2s; }
.mini:hover{ border-color:var(--c-ink); }
.mini-danger{ color:#8a3b3b; border-color:#e0c9c9; }
.mini-danger:hover{ background:#8a3b3b; color:#fff; border-color:#8a3b3b; }
/* 「实心」小按钮：配色和「保存」按钮（.btn-primary）完全一致，只是尺寸仍按 .mini。
   为什么不能直接写 .mini{background:...}：.mini 在样式表里排在 .btn-primary 后面，
   会把 primary 的底色覆盖成透明，所以用「两段类名」把权重提上去，只影响挂了
   is-solid 的那几个按钮，列表行里的小按钮（编辑/删除/设为主图）不受影响。 */
.mini.is-solid{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.mini.is-solid:hover{ background:var(--c-accent-2); border-color:var(--c-accent-2); }
.pill{ display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; }
.pill-on{ background:#e8efe9; color:#2f4a3c; }
.pill-off{ background:var(--c-ground); color:var(--c-ink-3); }
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.check-row{ display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:14px; }
.check-row input{ width:18px; height:18px; }
.empty-note{ padding:44px 18px; text-align:center; color:var(--c-ink-2); font-size:14px; }
.editor-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
@media (max-width:900px){
  .admin-2col{ grid-template-columns:1fr; }
  .admin-stats{ grid-template-columns:1fr; }
  .form-2col{ grid-template-columns:1fr; }
}

/* =========================================================
   27. 手机端优化（≤820px）
   —— 底部导航栏 / 触控尺寸 / 表单防缩放 / 表格横滑 / 间距收紧
   说明：底部导航栏在 HTML 里是每个页面都有的 .mobilenav 节点，
        桌面端 display:none 不显示，手机上才出现。
   ========================================================= */
.mobilenav{ display:none; }

/* 触控统一：去掉点击高亮、去掉 300ms 延迟 */
a,button,input,select,textarea,label,summary{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

@media (max-width:820px){

  /* -------- 27.1 底部导航栏（App 式固定底栏） -------- */
  .mobilenav{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(248,245,239,.97);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--c-line);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:56px; padding:9px 2px 7px;
    font-size:11px; letter-spacing:.04em; color:var(--c-ink-3);
    transition:color .2s cubic-bezier(.22,1,.36,1);
  }
  .mn-item .ico{ width:22px; height:22px; stroke-width:1.5; }
  .mn-item.is-active{ color:var(--c-accent); font-weight:600; }
  .mn-item.is-active .ico{ stroke-width:1.9; }
  .mn-item:active{ color:var(--c-accent); }

  /* 手机上底部栏已接管「在线咨询」，右下角悬浮按钮隐藏，避免入口打架 */
  .consult-fab{ display:none !important; }

  /* 页脚留出底栏高度（深色底延伸到手机底边，观感更整齐） */
  .footer{ padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)); }

  /* -------- 27.2 表单/输入框：16px 防 iOS 自动放大 -------- */
  .form-field input,
  .form-field textarea,
  .form-field select,
  .shop-search,
  .shop-sort,
  .code-row input{ font-size:16px; }

  /* -------- 27.3 区块间距收紧（手机上手势滚动距离更短） -------- */
  .section{ padding:clamp(52px,10vw,84px) 0; }
  .hero{ padding-top:clamp(28px,7vw,44px); padding-bottom:clamp(32px,7vw,52px); }
  .page-hero{ padding:clamp(30px,6vw,48px) 0 clamp(22px,4vw,32px); }

  /* -------- 27.4 商品网格：两列 + 更紧凑的间距（电商手机标准） -------- */
  .grid{ gap:16px 12px; }
  .card-body{ padding:11px 2px 0; }
  .card-title{ font-size:16px; margin:5px 0 4px; }
  .card-desc{ font-size:12.5px; line-height:1.55; }
  .card-price{ margin-top:7px; font-size:13.5px; }
  .badge{ top:8px; left:8px; font-size:9.5px; padding:4px 7px; }

  /* -------- 27.5 首屏：手机上改成上字下图，标题收一档 -------- */
  .hero-grid{ gap:24px; }
  .hero-title{ font-size:clamp(44px,15vw,72px); }
  .hero-dek{ font-size:15.5px; }
  .hero-actions{ gap:10px; }
  .hero-media .ph{ aspect-ratio:4/5; }

  /* -------- 27.6 目录式列表 / 时间线：手机上单列更易读 -------- */
  .toc-item{ grid-template-columns:36px 1fr 28px; }

  /* -------- 27.7 商品详情：操作按钮铺满，方便拇指点 -------- */
  .pd-actions .btn{ flex:1 1 100%; }
  .pd-thumbs{ gap:8px; }

  /* -------- 27.8 后台：表格横向滑动 + 面板收边（手机上也能改产品） -------- */
  .admin-bar .wrap{ min-height:56px; }
  .admin-wrap{ padding:20px 0 70px; }
  .panel-body{ padding:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .plist{ min-width:540px; }
  .admin-stat b{ font-size:24px; }
  .editor-actions .btn{ flex:1 1 100%; }
  .auth-card{ padding:24px 20px; }
}

/* -------- 27.9 小屏手机（≤420px）：再收一档 -------- */
@media (max-width:420px){
  .grid-3{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr 1fr; }
  .timeline li{ grid-template-columns:1fr; gap:6px; }
  .timeline .tl-year{ font-size:16px; }
  .qr-box{ flex-direction:column; align-items:flex-start; text-align:left; }
  .shop-controls{ gap:8px; }
  .nav-cta{ padding:0 16px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .foot-note, .footer-bottom{ font-size:11.5px; }
}

/* 打印时隐藏底栏与悬浮按钮 */
@media print{
  .mobilenav,.consult-fab{ display:none !important; }
}

/* =========================================================
   28. 后台「账号管理」模块
   —— 一级切换标签 + 账号表格 + 密码遮罩 + 导入导出工具条
   ========================================================= */

/* -------- 28.1 后台一级切换（产品管理 / 账号管理） -------- */
.admin-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:1px solid var(--c-line);
  margin-bottom:22px;
}
.admin-tab{
  appearance:none; background:none; border:0;
  border-bottom:2px solid transparent;
  padding:12px 20px; margin-bottom:-1px;
  font-family:var(--font-display); font-size:16px; font-weight:700;
  color:var(--c-ink-3); letter-spacing:.02em;
  transition:color .2s cubic-bezier(.22,1,.36,1), border-color .2s;
}
.admin-tab:hover{ color:var(--c-ink); }
.admin-tab.is-active{ color:var(--c-accent); border-bottom-color:var(--c-accent); }
.admin-tab:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

/* -------- 28.2 面板显隐 -------- */
.apane{ display:none; }
.apane.is-active{ display:block; }

/* -------- 28.3 账号列表工具条 -------- */
.acc-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; padding:16px 18px; border-bottom:1px solid var(--c-line);
}
.acc-toolbar .shop-controls{ flex-wrap:wrap; }
.acc-toolbar .shop-search{ min-width:240px; }
.acc-count{ font-family:var(--font-body); font-size:12.5px; font-weight:400; color:var(--c-ink-3); letter-spacing:.04em; }

/* -------- 28.3b 下拉筛选（select 复用 .shop-sort 外观） -------- */
.acc-toolbar select.shop-sort{
  min-width:136px; cursor:pointer; color:var(--c-ink);
  padding-right:32px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b63' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
/* 清空条件按钮：低调一点，不抢「新增」的注意力 */
.acc-toolbar .mini.acc-clear-btn{ color:var(--c-ink-3); border-color:var(--c-line-2); }

/* 产品列表在左栏，控件更紧凑 */
.prod-toolbar .shop-search{ min-width:150px; }
.prod-toolbar select.shop-sort{ min-width:112px; }

/* -------- 28.4 账号表格 -------- */
.acc-table td{ white-space:nowrap; }
.acc-table .acc-shop{ display:flex; flex-direction:column; gap:2px; white-space:normal; min-width:140px; }
.acc-table .acc-shop b{ font-weight:600; }
.acc-table .acc-sub{ font-size:11.5px; color:var(--c-ink-3); line-height:1.5; }
.acc-table .acc-plat{
  display:inline-block; font-size:11.5px; padding:2px 9px;
  border:1px solid var(--c-line-2); border-radius:999px;
  color:var(--c-ink-2); white-space:nowrap;
}
.acc-table .acc-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; }
.acc-table .acc-mask{ letter-spacing:.14em; color:var(--c-ink-3); }
.acc-table .acc-contact{ white-space:normal; font-size:12.5px; color:var(--c-ink-2); line-height:1.6; min-width:150px; }
.acc-table .acc-contact span{ display:block; }
.acc-table .acc-contact .none{ color:var(--c-ink-3); }
.acc-table .t-actions{ white-space:nowrap; }
.acc-table td .mini + .mini{ margin-left:5px; }
.acc-eye{ min-height:28px; padding:0 9px; font-size:11.5px; }

/* 密码/账号复制按钮在表格里更紧凑 */
.acc-table .acc-copy{ min-height:28px; padding:0 9px; font-size:11.5px; }

/* -------- 28.5 账号模块手机端适配 -------- */
@media (max-width:820px){
  .admin-tab{ padding:11px 14px; font-size:15px; }
  .acc-toolbar{ flex-direction:column; align-items:stretch; padding:14px; }
  .acc-toolbar .shop-controls{ flex-direction:column; align-items:stretch; }
  .acc-toolbar .shop-search{ width:100%; min-width:0; }
  .acc-toolbar select.shop-sort{ width:100%; min-width:0; }
  .acc-toolbar .mini{ width:100%; }
  .acc-toolbar .acc-count{ text-align:right; }
  .acc-table{ min-width:760px; }
}
@media (max-width:420px){
  .admin-tab{ flex:1; padding:11px 6px; font-size:14px; }
}

/* =========================================================
   29. 后台 · 产品图片上传 / 列表缩略图（自建后端版）
   ========================================================= */
.upload-row{ display:flex; gap:10px; align-items:stretch; }
.upload-row input[type="text"]{ flex:1 1 auto; min-width:0; }
.upload-row .btn{ flex:0 0 auto; white-space:nowrap; }

.upload-preview{
  display:flex; align-items:center; gap:12px;
  margin-top:10px; padding:10px;
  background:var(--c-ground); border:1px solid var(--c-line);
}
.upload-preview img{
  width:76px; height:76px; object-fit:cover;
  border:1px solid var(--c-line-2); background:var(--c-surface-2);
}

.plist .t-prod{ display:flex; align-items:center; gap:10px; }
.plist .t-thumb{
  width:40px; height:54px; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--c-line); background:var(--c-ground);
}
.plist .t-thumb-empty{
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--c-ink-3); letter-spacing:.06em;
}

@media (max-width:820px){
  .upload-row{ flex-wrap:wrap; }
  .upload-row .btn{ width:100%; }
}

/* =========================================================
   30. 后台 · 多图上传 + 自定义品类（自建后端 v2）
   ========================================================= */

/* ---- 30.1 多图缩略图网格 ---- */
.img-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; margin-top:12px; }
.img-grid:empty{ display:none; margin-top:0; }
.img-item{
  position:relative; border:1px solid var(--c-line); background:var(--c-surface-2);
  border-radius:var(--radius); overflow:hidden;
}
.img-item.is-main{ border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent) inset; }
.img-item img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.img-badge{
  position:absolute; top:0; left:0; z-index:1;
  padding:2px 7px; font-size:10.5px; letter-spacing:.06em;
  background:var(--c-accent); color:#fff;
}
.img-acts{ display:flex; gap:4px; padding:5px; border-top:1px solid var(--c-line); background:var(--c-surface); }
.img-acts .mini{ flex:1 1 auto; min-height:28px; padding:0 4px; font-size:11.5px; white-space:nowrap; }
.img-acts .img-cur{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--c-ink-3); letter-spacing:.04em;
}

/* ---- 30.2 品类：新增 / 管理（面板已挪到后台「产品设置」页签） ---- */
.cat-add-row{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-add-row input{ flex:1 1 140px; min-width:0; }
.cat-add-row .btn{ flex:0 0 auto; }
.cat-chips{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.cat-chips:empty{ display:none; margin-top:0; }
.cat-item{
  padding:9px 11px 11px; font-size:12.5px;
  background:var(--c-surface-2); border:1px solid var(--c-line-2); border-radius:var(--radius);
}
.cat-item.is-used{ background:var(--c-ground); }
.cat-item-top{ display:flex; align-items:center; gap:8px; }
.cat-item .cat-chip-name{ font-weight:500; }
.cat-item.is-used .cat-chip-name{ color:var(--c-ink-3); font-weight:400; }
.cat-item .cat-used-tag{ font-size:10.5px; color:var(--c-ink-3); letter-spacing:.04em; }
.cat-item .cat-del{
  margin-left:auto; min-height:24px; padding:0 8px; font-size:13px; line-height:1; cursor:pointer;
  border:1px solid var(--c-line-2); background:transparent; border-radius:var(--radius); color:var(--c-ink-3);
}
.cat-item .cat-del:hover{ border-color:#8a3b3b; color:#8a3b3b; }
.cat-item .cat-desc-input{ width:100%; margin-top:7px; font-size:12.5px; min-height:32px; padding:5px 9px; }

/* ---- 30.3 前台详情页：多图切换 ---- */
.pd-thumbs-multi{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)) !important; }
.pd-thumbs .pd-thumb{
  padding:0; aspect-ratio:1/1; cursor:pointer; overflow:hidden;
  border:1px solid var(--c-line); background:var(--c-surface-2); border-radius:var(--radius);
}
.pd-thumbs .pd-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.pd-thumbs .pd-thumb.is-active{ border-color:var(--c-ink); box-shadow:0 0 0 1px var(--c-ink) inset; }

@media (max-width:820px){
  .img-grid{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; }
}

/* =========================================================
   31. 后台 · 咨询留言 + 站点设置（自建后端 v3）
   ========================================================= */

/* ---- 31.1 标签上的未读小红点 ---- */
.tab-badge{
  display:inline-block; margin-left:7px; vertical-align:2px;
  min-width:18px; padding:1px 6px; border-radius:999px;
  background:#b4442f; color:#fff;
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:0; line-height:16px; text-align:center;
}
.tab-badge[hidden]{ display:none; }

/* ---- 31.2 面板标题上的操作按钮 ---- */
.head-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---- 31.3 留言表格 ---- */
.inq-table td{ vertical-align:top; }
.inq-table .inq-time{ white-space:nowrap; color:var(--c-ink-3); font-size:12.5px; }
.inq-table .inq-msg{ white-space:normal; min-width:220px; max-width:420px; line-height:1.6; color:var(--c-ink-2); }
.inq-table tr.is-unread td{ background:rgba(47,74,60,.045); }
.inq-table tr.is-unread .t-name{ font-weight:700; }
.inq-table tr.is-unread .inq-time{ position:relative; }
.inq-table tr.is-unread .inq-time::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:7px;
  border-radius:50%; background:#b4442f; vertical-align:1px;
}

/* ---- 31.4 站点设置：单图选择 ---- */
.upload-preview .mini{ margin-left:auto; flex:0 0 auto; }
.upload-preview img{ object-fit:cover; }

/* ---- 31.5 后台手机端：表格横滑 + 按钮铺满 ---- */
@media (max-width:820px){
  .inq-table{ min-width:820px; }
  .head-actions{ width:100%; }
  .head-actions .btn{ flex:1 1 auto; }
}

/* =========================================================
   32. 前台 · 站点信息注入后的样式（地图 / 占位替换）
   ========================================================= */

/* 占位框被真实图片替换后：去掉内边距与居中留白 */
.ph.is-filled{ padding:0; gap:0; background:var(--c-ground); }

/* 地图：嵌入的地图铺满 16:9 区域 */
.map-frame{ padding:0; gap:0; }
.map-frame iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; }

/* 「在高德 / 百度地图打开」按钮（没设置地址时不显示） */
.map-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.map-links:empty{ display:none; margin-top:0; }

/* 咨询表单的蜜罐字段：视觉上完全隐藏，但不影响无障碍朗读不到的机器人 */
.hp-field{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 提交结果提示：成功 / 失败用不同颜色 */
.form-note.is-err{ color:#a8412c; }
.form-note.is-ok{ color:var(--c-accent); }

/* =========================================================
   33. 后台：列表表头锁定 + 产品设置面板
   ========================================================= */

/* ---- 33.1 表头锁定 ----
   产品 / 账号 / 留言三个列表共用 .plist：往下滚长列表时，列名一直贴在顶上。
   注意：原来用 border-collapse:collapse，表头的下边框是由「表格」绘制的，
        锁定后那条边框会留在原地不跟着走。换成 separate 后，边框归单元格所有，
        才会跟着表头一起停住。 */
.plist{ border-collapse:separate; border-spacing:0; }
.plist thead th{
  position:sticky; top:0; z-index:3;
  background:var(--c-surface-2);
  box-shadow:0 1px 0 var(--c-line);
}

/* ---- 33.2 「产品设置」面板 ---- */
/* 表单里那种「像链接的按钮」（例如跳到「产品设置」） */
.linklike{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; font-size:inherit; color:var(--c-accent); cursor:pointer;
  border-bottom:1px solid currentColor; line-height:1.25;
}
.linklike:hover{ opacity:.75; }
/* 首页文案按区块分段的小标题 */
.pset-sub{
  font-family:var(--font-display); font-size:14.5px; font-weight:700;
  margin:24px 0 12px; padding-top:16px; border-top:1px solid var(--c-line);
}
.pset-sub:first-of-type{ margin-top:4px; padding-top:0; border-top:0; }