/* 随异文化衫定制 · 产品手册 样式（移动优先，桌面自适应）
   主色：暖砖红 #d4553c
   —— 设计系统 token 化（前后台共用，便于迁移小程序时复用） —— */

:root {
  /* 颜色 */
  --bg: #f6f7f9;
  --card: #ffffff;
  --line: #e5e7eb;            /* 分割线（单一定义，避免重复覆盖） */
  --text: #1f2937;            /* 正文 */
  --muted: #6b7280;           /* 次要文字（4.6:1 达标，原 #8b93a1 仅 2.9:1） */
  --accent: #d4553c;         /* 品牌主色（填充/大号文字） */
  --accent-ink: #b8432e;     /* 浅底上的小号主色文字（4.5:1+，用于价格/导航激活） */
  --accent-soft: #fdeee9;
  --gold: #9a6a1a;            /* 收藏星（原 #e0a13a 仅 2.25:1，加深到达标） */
  --fav-red: #e4393c;        /* 已收藏高亮红（白字 4.24:1，仅用于大号） */
  --fav-on: #ffffff;

  /* 圆角 */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* 间距（4px 基准 scale） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 字号 */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 20px;
  --text-4xl: 22px;
  --text-5xl: 28px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
  --shadow: 0 1px 3px rgba(17, 24, 39, .06), 0 6px 20px rgba(17, 24, 39, .05);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, .08);

  /* 焦点环（键盘导航可见性，WCAG 2.4.7） */
  --focus-ring: 0 0 0 3px rgba(212, 85, 60, .35);

  --tab-h: 56px;
  --detail-bar-h: 62px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }

/* 键盘焦点可见性（鼠标点击不显示，键盘 Tab 显示） */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: none; border-color: var(--accent); }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  height: 54px; padding: 0 var(--space-3);
  background: #fff; border-bottom: 1px solid var(--line);
}
.tb-back {
  border: none; background: none; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--accent);
  padding: 0; justify-self: start;
}
.tb-back.hidden { display: none; }
.tb-title { justify-self: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xl); font-weight: 600; color: var(--text); }
.topbar-right { justify-self: end; display: flex; align-items: center; }
.nav-fav {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  padding: 0 12px; font-size: var(--text-md); font-weight: 500;
  cursor: pointer; height: 32px; line-height: 32px; text-decoration: none;
  box-sizing: border-box;
}
.nav-fav .tb-ic { display: none; }
.nav-fav .tb-txt { color: var(--accent-ink); text-align: center; }
.nav-fav:active { background: var(--accent-soft); }
.prod-toolbar .nav-fav { align-self: center; }
.fav-count {
  background: var(--accent); color: #fff; border-radius: var(--radius-pill);
  font-size: var(--text-xs); line-height: 16px; min-width: 16px; text-align: center;
  padding: 0 5px; margin-left: 2px;
}
.fav-count:empty { display: none; }

/* ---------- 主体与底栏 ---------- */
#app { max-width: 1080px; margin: 0 auto; padding: var(--space-3) var(--space-3) calc(var(--tab-h) + var(--space-6)); }
.view h2 { font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-4); }
.back {
  border: none; background: none; color: var(--muted);
  font-size: var(--text-md); padding: var(--space-1) 0; margin-bottom: var(--space-3); cursor: pointer;
}

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--tab-h); display: flex;
  background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 1080px; margin: 0 auto;
}
body.cat-active .tabbar { display: none; }
body.cat-active #view-category { bottom: 0; }
/* 收藏页是 tab 页（对齐小程序）：顶部标题栏整个隐藏（底部 tab 已标识），内容顶到顶 + 底部 tabBar 保留 */
body.fav-active .topbar { display: none; }
body.fav-active #view-fav { top: 0; }
body.home-active .topbar,
body.mine-active .topbar,
body.cases-active .topbar { display: none; }
body.product-active .tabbar,
body.case-active .tabbar { display: none; }
body.home-active #app,
body.mine-active #app,
body.cases-active #app { padding-top: calc(env(safe-area-inset-top) + 10px); }
body.product-active #app { padding-bottom: var(--space-6); }
body.product-active .topbar,
body.case-active .topbar { display: none; }
body.product-active #app { padding: 0 var(--space-3) calc(var(--detail-bar-h) + env(safe-area-inset-bottom) + var(--space-4)); }
body.case-active #app { padding: 0; padding-bottom: calc(var(--detail-bar-h) + env(safe-area-inset-bottom) + var(--space-4)); }

/* ---------- 商品详情页底部固定操作栏 ---------- */
.detail-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--detail-bar-h) + env(safe-area-inset-bottom));
  padding: 0 var(--space-3) env(safe-area-inset-bottom);
  align-items: center; gap: var(--space-3);
  background: #fff; border-top: 1px solid var(--line);
  max-width: 1080px; margin: 0 auto;
  box-shadow: 0 -2px 12px rgba(17, 24, 39, .06);
}
body.product-active .detail-bar,
body.case-active .detail-bar { display: flex; }
.detail-bar .db-ic {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: none; border: none; cursor: pointer; padding: var(--space-1) 2px;
  color: var(--accent); flex: 0 0 auto; position: relative; min-width: 48px; min-height: 44px;
}
.detail-bar .db-ic-g { font-size: 22px; line-height: 1; color: var(--accent); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.detail-bar .db-ic-g svg { width: 22px; height: 22px; }
.detail-bar .db-ic-t { font-size: var(--text-xs); line-height: 1.2; color: var(--accent); }
.detail-bar .db-ic:active { opacity: .6; }
.detail-bar .db-badge {
  position: absolute; top: -2px; right: 4px; background: var(--accent); color: #fff;
  font-size: 10px; line-height: 15px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; text-align: center; font-style: normal;
}
.detail-bar .db-badge:empty { display: none; }  /* 0/空时不渲染角标（对齐收藏无角标铁律） */
.detail-bar .db-main {
  flex: 1; height: 42px; border: none; border-radius: var(--radius-pill); cursor: pointer;
  background: linear-gradient(135deg, #f4725c, #d4553c); color: #fff;
  font-size: var(--text-xl); font-weight: 600; margin-left: var(--space-2);
  box-shadow: 0 4px 12px rgba(212, 85, 60, .28);
}
.detail-bar .db-main:active { filter: brightness(.96); }
body.cat-active #view-category,
body.fav-active #view-fav { padding-top: env(safe-area-inset-top); }
body.kb-active .tabbar { display: none; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: var(--text-base); color: var(--muted); min-height: 44px;
}
.tab .ic { display: none; }
.tab.active { color: var(--accent); font-weight: 600; }

/* ---------- 首页底部备案号（工信部合规，2026-09-09 备案通过） ---------- */
.site-icp {
  padding: var(--space-3) 0 var(--space-4);
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.site-icp a {
  color: inherit;
  text-decoration: none;
}
.site-icp a:hover {
  color: #374151;
  text-decoration: underline;
}

/* ---------- 首页 hero + 分类网格 ---------- */
.hero { padding: var(--space-2) var(--space-1) var(--space-4); }
.hero .dz-img {
  width: 100%; display: block; border-radius: 14px; margin-bottom: var(--space-2);
  box-shadow: 0 4px 14px rgba(0,0,0,.08); background: #f4f4f4;
}
.dianzhao {
  aspect-ratio: 16 / 6; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px var(--space-4);
  background: linear-gradient(135deg, var(--accent), #b8432e);
  border-radius: var(--radius); box-shadow: var(--shadow); color: #fff;
}
.dz-name { font-size: clamp(20px, 6vw, 28px); font-weight: 800; letter-spacing: 2px; }
.dz-slogan { font-size: clamp(12px, 3.4vw, 15px); margin-top: var(--space-2); opacity: .92; }

.cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0; row-gap: var(--space-3);
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(6, 1fr); } }
/* 首页分类：纯图标 + 下方文字，无卡片框；图标为正方形铺满列宽，图标之间无间隙 */
.cat-cell {
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; box-shadow: none; border-radius: 0; padding: 0;
  transition: transform .12s;
}
.cat-cell:active { transform: scale(.97); }
.cat-cell img { width: 68%; aspect-ratio: 1 / 1; object-fit: contain; display: block; margin: 0 auto var(--space-1); background: transparent; }
.cat-cell span { font-size: var(--text-sm); font-weight: 600; text-align: center; line-height: 1.3; }

/* ---------- 分类详情：左侧二级标签栏 + 右侧产品列表 ---------- */
#view-category {
  position: fixed; top: 54px; bottom: var(--tab-h); left: 0; right: 0;
  display: flex; align-items: stretch; overflow: hidden;
  max-width: 1080px; margin: 0 auto; padding: var(--space-2) var(--space-3) 0;
  background: var(--bg);
}
body.cat-active .topbar { display: none; }
body.cat-active #view-category { top: 0; bottom: 0; }
/* 收藏页是 tab 页（对齐小程序）：topbar 标题 + tabBar 都保留，内容区夹在中间 */
#view-fav {
  position: fixed; top: 54px; bottom: var(--tab-h); left: 0; right: 0;
  display: flex; align-items: stretch; overflow: hidden;
  max-width: 1080px; margin: 0 auto; padding: var(--space-2) var(--space-3) 0;
  background: var(--bg);
}
.mine-page { padding: var(--space-3); max-width: 600px; margin: 0 auto; }
.mine-entry {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--space-4) var(--space-3); margin-bottom: var(--space-4); text-decoration: none; color: var(--text);
  transition: transform .12s;
}
.mine-entry:active { transform: scale(.99); }
.mine-entry .me-ic { font-size: 20px; color: var(--accent); }
.mine-entry .me-txt { flex: 1; font-size: var(--text-xl); font-weight: 600; }
.mine-entry .me-count { color: var(--muted); font-size: var(--text-md); }
.mine-entry .me-arrow { font-size: 20px; color: var(--muted); }
.cat-side {
  flex: 0 0 80px; display: flex; flex-direction: column;
  background: #f6f6f6; border-right: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.sub-tags {
  flex: 1; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
  display: flex; flex-direction: column; gap: 2px; padding: 6px 0;
}
.sub-tags::-webkit-scrollbar { display: none; }
.sub-tag {
  flex: 0 0 auto; width: 100%; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: var(--text-base); line-height: 1.3; padding: var(--space-2) 4px; cursor: pointer;
  background: none; color: var(--muted); border: none;
  border-left: 3px solid transparent; transition: all .12s;
}
.sub-tag.on { color: var(--accent-ink); background: #fff; border-left-color: var(--accent); font-weight: 600; }
.sub-tag:active { background: var(--accent-soft); }
.cat-side-bottom {
  flex: 0 0 auto; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) 0;
}
.cat-side-bottom .cat-side-btn + .cat-side-btn { border-top: 1px solid var(--line); }
.cat-side-btn {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; font-size: var(--text-base); line-height: 1.2; padding: 11px 6px; cursor: pointer;
  background: none; border: none;
  border-left: 3px solid transparent; transition: all .12s; text-decoration: none;
  color: var(--accent); font-weight: 600;
}
.cat-side-btn .csi { font-size: 16px; line-height: 1; }
.cat-side-btn:active { background: var(--accent-soft); }
.cat-main { flex: 1; min-width: 0; overflow-y: auto; padding: 0 0 var(--space-2) 10px; scrollbar-width: none; -ms-overflow-style: none; }
.cat-main::-webkit-scrollbar { display: none; }

/* ---------- 产品网格卡 ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card {
  display: block; position: relative; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; cursor: pointer;
}
.card .thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #f1f2f4; }
.card .body { padding: var(--space-2) var(--space-3) var(--space-3); }
.card .name { font-size: var(--text-base); line-height: 1.35; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .price { color: var(--accent-ink); font-size: var(--text-md); font-weight: 700; margin-top: var(--space-1); }
.card .price small { color: var(--muted); font-weight: 400; font-size: var(--text-xs); margin-left: var(--space-1); }
.card .mat { color: var(--muted); font-size: var(--text-xs); margin-top: 3px; }
.card .star {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--gold); font-size: 18px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.card .star.on { color: var(--fav-on); background: var(--fav-red); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; font-size: var(--text-md); }

/* ---------- 分类页横向产品列表（原版横排白卡） ---------- */
.product-list { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  position: relative; display: flex; align-items: stretch;
  background: var(--card); border-radius: 6px; box-shadow: var(--shadow);
  padding: 0; cursor: pointer; transition: transform .12s; overflow: hidden;
}
.list-item:active { transform: scale(.99); }
.list-item .li-thumb {
  flex: 0 0 auto; width: 100px; height: 100px; object-fit: cover; background: #f1f2f4;
}
.list-item .li-body { flex: 1; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.list-item .li-name {
  font-size: var(--text-md); font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list-item .li-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.list-item .li-price { color: var(--accent-ink); font-size: var(--text-md); font-weight: 700; }
.list-item .li-price small { color: var(--muted); font-weight: 400; font-size: var(--text-base); margin-left: 2px; }
/* ★ 收藏按钮：跟价格同一行（卡片底部右侧），不再绝对定位到中部 */
.list-item .li-cart {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; background: none;
  color: #ccc; font-size: 20px; cursor: pointer; line-height: 1;
  transition: color .15s;
}
.list-item .li-cart.on { color: var(--fav-red); }

/* ---------- 产品详情 ---------- */
.detail { display: block; }
@media (min-width: 900px) {
  .detail { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-end; }
  .detail .gallery { flex: 1; min-width: 0; }
  .detail .info { flex: 1; min-width: 0; margin-top: 0; }
  .detail .detail-imgs { width: 100%; margin: var(--space-4) calc(-1 * var(--space-3)) 0; }
}
.detail .gallery { flex: 1; min-width: 0; position: relative; }   /* relative：供头图轮播指示点绝对定位 */
.detail .slider {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; background: #f1f2f4;
  margin-left: -14px; margin-right: -14px; scroll-behavior: smooth;
  scrollbar-width: none;
}
.detail .slider::-webkit-scrollbar { display: none; }
.detail .slide {
  flex: 0 0 100%; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  scroll-snap-align: center; scroll-snap-stop: always; display: block; cursor: zoom-in;
}
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  /* 完整显示不裁切：头图 1:1 等比缩放视觉不变；详情长图按比例撑满高度全貌可见
     （旧写法宽高同锁 min(96vw,92vh)+cover 会把长图硬裁成中间一块正方形） */
  width: auto; height: auto; max-width: 96vw; max-height: 92vh;
  object-fit: contain; object-position: center; border-radius: 8px; background: #000;
}
.lightbox .lb-close {
  position: absolute; top: 14px; right: 16px; width: 40px; height: 40px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.detail .info { flex: 1; min-width: 0; margin-top: var(--space-4); }
@media (min-width: 900px) { .detail .info { margin-top: 0; } }
.detail .info h2 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.detail .price-row { display: flex; align-items: center; gap: var(--space-3); }
.detail .price-wrap { flex: 1; min-width: 0; }
.detail .price { color: var(--accent-ink); font-size: var(--text-4xl); font-weight: 800; }
.detail .price small { color: var(--muted); font-weight: 400; font-size: var(--text-md); margin-left: var(--space-2); }
.detail .price-hint { font-size: var(--text-base); color: var(--muted); margin-top: 3px; line-height: 1.5; }
.detail .prod-cat { font-size: var(--text-base); color: var(--muted); margin: var(--space-1) 0 2px; }
.detail .price-row .fav-btn { flex: 0 0 auto; width: auto; padding: 0 var(--space-4); height: 40px; font-size: var(--text-md); }
.detail .attrs { margin: var(--space-4) 0; }
.detail .attrs > div { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: var(--text-md); }
.detail .attrs .lbl { flex: 0 0 48px; color: var(--muted); }
.detail .attrs .color-row { align-items: flex-start; padding: var(--space-3) 0; }
.detail .attrs .color-row .lbl { padding-top: var(--space-1); }
.detail .attrs .rel-row { display: flex; align-items: center; }
.detail .attrs .rel-link { color: var(--accent-ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
/* 案例详情「同款可定制」区块 */
.case-products { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.case-products .cp-label { font-size: var(--text-sm); color: var(--muted); margin-right: 2px; }
.case-products .cp-link { display: inline-flex; align-items: center; color: var(--accent-ink); font-weight: 600; font-size: var(--text-md); text-decoration: none; background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; }
.case-products .cp-link:active { opacity: .7; }
.detail .intro { font-size: var(--text-md); line-height: 1.6; color: #374151; white-space: pre-wrap; }
.detail .div-line { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }
/* 详情图与简介之间 20px 间隔用 padding-top 承载（margin 区域不渲染背景，会露灰底）；
   白底从 padding 起就生效，与信息卡连成一体无灰带 */
.detail .detail-imgs { margin: 0 calc(-1 * var(--space-3)) 0; padding-top: var(--space-5); background: #fff; }
/* 「商品详情」标题已移除，详情图直接接在简介下方（样式一并清理） */
.detail .di-grid { display: block; }
.detail .di-grid .di {
  width: 100%; height: auto; display: block;
  background: #f2f2f2; cursor: zoom-in; margin: 0;
}
/* 详情图紧贴简介：<p class="intro"> 浏览器默认有 margin-bottom: 1em，
   flush-bottom 时一并归零，否则无论 .info padding 多紧最后都顶一条缝 */
.detail .info.flush-bottom .intro { margin-bottom: 0; }

/* 产品详情：移动端信息区卡片化优化 */
@media (max-width: 899px) {
  .detail .info {
    background: #fff;
    border-radius: 16px 16px 0 0;
    margin: -12px -14px 0;
    padding: 20px 16px var(--space-6);
    position: relative;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .04);
  }
  /* 有详情图时去掉信息卡底部留白，让详情图紧贴简介；
     无详情图则保留留白，避免卡片内容贴底（类名由 renderProduct 按有无详情图切换） */
  .detail .info.flush-bottom { padding-bottom: 0; }
  .detail .info h2 { font-size: var(--text-2xl); line-height: 1.35; margin: 0 0 var(--space-2); }
  .detail .prod-cat { font-size: var(--text-sm); margin: 0 0 var(--space-3); }
  .detail .price-row { align-items: flex-start; margin-bottom: var(--space-2); }
  .detail .price-wrap { display: flex; flex-direction: column; gap: 2px; }
  .detail .price { font-size: 28px; }
  .detail .price small { font-size: var(--text-sm); }
  .detail .price-hint { font-size: var(--text-sm); color: #9ca3af; margin-top: 0; }
  .detail .price-row .fav-btn {
    height: 34px; padding: 0 14px; border-radius: 17px;
    font-size: var(--text-sm); border-color: var(--line);
    color: var(--muted); background: #f9fafb;
  }
  /* 收藏激活态：本块 .detail .price-row .fav-btn（0-3-0）会压住全局 .fav-btn.on（0-2-0），
     导致手机端点击收藏不变色；用更高特异性恢复红色激活态 */
  .detail .price-row .fav-btn.on {
    color: var(--fav-on); background: var(--fav-red); border-color: var(--fav-red);
  }
  .detail .attrs {
    background: #f9fafb; border-radius: var(--radius);
    padding: var(--space-3); margin: var(--space-4) 0;
  }
  /* 去掉每行下划线：原 border-bottom 靠 :last-child 清除，但「关联/案例」两行常隐藏，
     导致真正最后可见的「面料」行残留一条悬空线，故整条取消 */
  .detail .attrs > div {
    border-top: none; border-bottom: none;
    padding: var(--space-2) 0; align-items: center;
  }
  .detail .attrs .lbl { flex: 0 0 40px; font-size: var(--text-sm); color: #9ca3af; }
  .detail .attrs .color-row { align-items: center; padding: var(--space-2) 0; }
  .detail .attrs .color-row .lbl { padding-top: 0; }
  .detail .intro { font-size: var(--text-md); line-height: 1.7; color: #4b5563; }
  .detail .div-line { margin: var(--space-3) 0; }
  .detail .detail-imgs { margin: 0 calc(-1 * var(--space-3)) 0; padding-top: var(--space-5); background: #fff; }
  /* （「商品详情」标题已移除，移动端样式一并清理） */
}

/* 底部分享面板（参考小程序样式） */
.share-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; justify-content: flex-end; }
.share-sheet[hidden] { display: none; }
.share-sheet .share-mask { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.share-sheet .share-body { position: relative; background: #f7f8fa; border-radius: 18px 18px 0 0; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); animation: slideUp .22s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.share-sheet .share-title { text-align: center; font-size: var(--text-lg); color: #111; margin-bottom: var(--space-4); }
.share-sheet .share-actions { display: flex; justify-content: space-around; padding: var(--space-2) 0 var(--space-5); }
.share-sheet .share-action { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); background: none; border: none; cursor: pointer; padding: var(--space-2) 12px; color: #333; }
.share-sheet .share-action .sa-ic {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; flex: 0 0 auto;
}
.share-sheet .share-action .sa-wechat { background: #07c160; }
.share-sheet .share-action .sa-link { background: #576b95; }
.share-sheet .share-action .sa-poster { background: #fa5151; }
.share-sheet .share-action .sa-txt { font-size: var(--text-base); line-height: 1.35; text-align: center; }
.share-sheet .share-action .sa-txt small { display: block; font-size: var(--text-xs); color: var(--muted); }
.share-sheet .share-cancel {
  width: 100%; height: 48px; border-radius: 10px; border: none; background: #fff;
  font-size: var(--text-xl); color: #111; cursor: pointer; margin-top: var(--space-2);
}
.share-sheet .share-cancel:active { background: #f2f2f2; }

/* 海报展示弹窗 */
.poster-modal { position: fixed; inset: 0; z-index: 1210; display: flex; align-items: center; justify-content: center; padding: 20px; }
.poster-modal[hidden] { display: none; }
.poster-modal .poster-mask { position: absolute; inset: 0; background: rgba(0,0,0,.75); }
.poster-modal .poster-body { position: relative; width: min(86vw, 360px); background: #fff; border-radius: 14px; padding: var(--space-3); text-align: center; }
.poster-modal #dPosterImg { width: 100%; height: auto; border-radius: 10px; display: block; background: #f2f2f2; }
.poster-modal .poster-tip { font-size: var(--text-base); color: var(--muted); margin: var(--space-3) 0 var(--space-4); }
.poster-modal .poster-close { width: 100%; height: 44px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font-size: var(--text-lg); cursor: pointer; }
.poster-modal .poster-close:active { filter: brightness(.95); }
.act-row { display: flex; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.fav-btn {
  flex: 1; height: 44px; border-radius: 10px; font-size: var(--text-lg); cursor: pointer; border: 1px solid var(--line);
  background: #fff; color: #555; transition: background .15s, color .15s, border-color .15s;
}
.fav-btn.on { background: var(--fav-red); color: var(--fav-on); border-color: var(--fav-red); }

/* ---------- 颜色色卡（多色不靠滑，平铺一屏看完） ---------- */
.swatches { flex: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.sw {
  width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .12); background: #fff; flex: 0 0 auto; position: relative;
  transition: transform .1s;
}
.sw-light { border-color: rgba(0, 0, 0, .28); }
.sw:active { transform: scale(.92); }
.sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.sw[data-nohex] {
  width: auto; height: 28px; border-radius: var(--radius-pill); padding: 0 11px;
  font-size: var(--text-base); color: var(--muted); background: #f4f5f7; border-color: var(--line);
}
.sw-name { font-size: var(--text-base); color: var(--muted); margin-left: 2px; }
.sw-img {
  width: 64px; height: auto; border-radius: var(--radius-sm); overflow: hidden; padding: 5px 5px 7px;
  border: 2px solid var(--line); background: #f4f5f7;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
}
.sw-img img {
  width: 100%; height: auto; max-height: 56px; object-fit: contain; display: block; background: transparent;
}
.sw-img span {
  width: 100%; font-size: var(--text-xs); line-height: 1.3; color: var(--muted);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-img.sw-on { border-color: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.hint { font-size: var(--text-base); color: var(--muted); margin-top: var(--space-2); }

/* ---------- 案例 ---------- */
.case-grid .case-card .intro-short {
  color: var(--muted); font-size: var(--text-xs); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.case-detail { padding-bottom: 20px; }
.case-slider { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #f5f5f5; }
.case-slider .slides { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.case-slider .slides::-webkit-scrollbar { display: none; }
.case-slider .slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; position: relative; }
.case-slider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-counter { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.45); color: #fff; font-size: var(--text-base); padding: var(--space-1) 10px; border-radius: var(--radius-pill); pointer-events: none; }
.case-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.case-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .15s; }
.case-dot.on { background: #fff; }
/* 商品详情头图（#dDots）：商品图多为白底，案例页同款白色圆点会隐形。
   改深色点 + 白描边（深色头图上靠白描边可辨），激活点用品牌色 */
#dDots { bottom: 14px; }  /* 商品页头图圆点上移 2px（12→14），阿彪 17:00 反馈太贴底 */
#dDots .case-dot { background: rgba(17,24,39,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
#dDots .case-dot.on { background: var(--accent); box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
.case-body { padding: var(--space-4); }
.case-title { font-size: var(--text-3xl); font-weight: 700; line-height: 1.4; margin: 0 0 var(--space-2); color: #111827; }
.case-customer { color: var(--accent-ink); font-size: var(--text-base); font-weight: 600; }
.case-intro { font-size: var(--text-lg); line-height: 1.7; color: #374151; white-space: pre-wrap; }
.case-industry { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); pointer-events: none; }
.case-industry .ind-chip { cursor: default; }
.case-industry .ind-chip:active { transform: none; }
.case-customer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.case-customer-row .fav-btn { flex: 0 0 auto; width: auto; padding: 0 var(--space-4); height: 40px; font-size: var(--text-md); }

/* ---------- 联系方式（内容来自后台「设置」页） ---------- */
.contact-box {
  margin-top: var(--space-6); background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: var(--space-4);
}
.contact-box .ct-note { font-size: var(--text-base); color: var(--muted); line-height: 1.6; margin-bottom: var(--space-3); }
.contact-box .ct-wx { display: flex; align-items: center; gap: var(--space-3); }
.contact-box .ct-lbl { font-size: var(--text-base); color: var(--muted); flex: 0 0 auto; }
.contact-box .ct-id {
  flex: 1; font-size: 17px; font-weight: 700; color: var(--accent-ink);
  letter-spacing: .5px; user-select: all; -webkit-user-select: all;
}
.contact-box .ct-copy {
  background: var(--accent); color: #fff; border: none; height: 34px;
  padding: 0 var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-base); cursor: pointer; flex: 0 0 auto;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--space-6)); transform: translateX(-50%) translateY(20px);
  background: rgba(31,41,55,.92); color: #fff; padding: var(--space-3) 18px; border-radius: var(--radius-pill);
  font-size: var(--text-md); opacity: 0; pointer-events: none; transition: all .2s; z-index: 50; max-width: 80%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 产品搜索 / 价格排序工具条 ---------- */
.prod-toolbar {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 var(--space-4);
}
.search-box { position: relative; flex: 1; min-width: 0; }
.search-box .prod-search { width: 100%; }
.prod-search {
  flex: 1; min-width: 0; height: 40px; padding: 0 var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; font-size: var(--text-md); color: var(--text); outline: none;
}
.prod-search:focus { border-color: var(--accent); }
/* 搜索框内 ✕ 一键清空（对齐小程序 search-clear） */
.search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; line-height: 24px; text-align: center;
  color: #bbb; font-size: 16px; cursor: pointer;
}
.sort-toggle {
  flex: 0 0 auto; height: 32px; padding: 0 12px;
  display: flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  background: #fff; font-size: var(--text-md); color: var(--text); outline: none; cursor: pointer;
  transition: border-color .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.sort-toggle:active { border-color: var(--accent); color: var(--accent); }
.sort-toggle .sort-arrow { font-size: 16px; line-height: 1; color: var(--accent); }

/* ---------- 案例行业标签筛选 ---------- */
.industry-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4);
}
.ind-chip {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: var(--text-base); padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer;
  transition: all .12s; white-space: nowrap;
}
.ind-chip.on { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.ind-chip.dim { opacity: .38; pointer-events: none; cursor: default; }
.ind-chip:active { transform: scale(.97); }