:root {
  --bg: #f6f4ef;
  --card: #ffffff;
  --ink: #2b2620;
  --ink-2: #6f675c;
  --muted: #a79e90;
  --line: #ece7df;
  --accent: #b5743a;       /* 焦糖棕，家具调性 */
  --accent-2: #8a5a2b;
  --price: #c0392b;        /* 红色=价格（国内习惯） */
  --ok: #3a8a52;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(60, 45, 25, .08);
  --maxw: 480px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #efe9e0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

/* 手机外壳：桌面端居中成手机预览 */
.phone {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(0,0,0,.12);
}
@media (min-width: 520px) {
  body { padding: 16px 0; }
  .phone { min-height: calc(100vh - 32px); border-radius: 22px; overflow: hidden; }
}

/* 顶部栏 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px 8px;
}
.brand-row { display: flex; align-items: center; gap: 8px; position: relative; }
.brand-row.no-logo { justify-content: center; }
.brand-row.no-logo .brand-sub { text-align: center; }
/* 返回箭头：二级页顶栏只留箭头（无 logo / 品牌名 / 副标题），用最小行高撑住顶栏高度 */
.topbar.has-back .brand-row { padding-left: 34px; min-height: 30px; }
.topbar.has-back .brand-row.no-logo { padding-left: 0; }
.back-btn { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; z-index: 2; padding: 0 4px; }
.brand-logo {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px;
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.brand-sub { font-size: 11px; color: var(--muted); }
.search {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  background: #f1ece3; border-radius: 999px; padding: 8px 12px; color: var(--ink-2);
}
.search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--ink); }

/* 可输入搜索栏：输入框在左、放大镜按钮在右（首页 / 顶栏 / 搜索页共用） */
.sbar {
  margin-top: 8px; display: flex; align-items: center;
  background: #f1ece3; border-radius: 999px; padding: 4px 4px 4px 16px;
}
.sbar.block { margin: 0 0 14px; }
.sbar.inline { margin: 0; flex: 1; min-width: 0; }
.sbar-input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 8px 6px 8px 0; font-size: 14px; color: var(--ink);
}
.sbar-input::placeholder { color: var(--muted); }
.sbar-input::-webkit-search-cancel-button,
.sbar-input::-webkit-search-decoration { display: none; }
.sbar-btn {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 6px rgba(181, 116, 58, .28);
}
.sbar-btn:active { opacity: .88; transform: scale(.96); }

/* 主内容 */
.main { flex: 1; padding: 12px; padding-bottom: 76px; }

/* 轮播 */
.banner { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 14px; }
.banner-track { display: flex; transition: transform .4s ease; }
.slide {
  min-width: 100%; height: 150px; display: grid; place-items: center; color: #fff;
  font-size: 20px; font-weight: 700; letter-spacing: 1px; text-align: center; padding: 0 20px;
}
.banner-dots { display: flex; justify-content: center; gap: 6px; margin: -8px 0 12px; position: relative; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .5; }
.dot.active { background: var(--accent); opacity: 1; width: 16px; border-radius: 3px; }

/* 分类导航 */
.section-title { font-weight: 700; font-size: 15px; margin: 6px 2px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.section-title a, .section-title .more { font-size: 12px; color: var(--muted); font-weight: 400; cursor: pointer; }
/* 固定标题（不可点）：精选好物 / 商品分类 / 家具风格 / 品牌优选 */
.section-title.is-static { cursor: default; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.cat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cat-icon {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 24px;
  color: #fff; box-shadow: var(--shadow);
}
.cat-name { font-size: 12px; color: var(--ink-2); }

/* 家具风格模块 */
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin: 0 0 18px; }
.style-item { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.style-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; color: #fff; box-shadow: var(--shadow); }
.style-name { font-size: 12px; color: var(--ink-2); }

/* 商品网格 */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; cursor: pointer;
}
.card-img { height: auto; aspect-ratio: 4 / 3; position: relative; }
.card-img .ph { position: absolute; inset: 0; }
.tag {
  position: absolute; left: 8px; top: 8px; background: rgba(43,38,32,.7); color: #fff;
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
}
.card-body { padding: 8px 9px 10px; }
.card-name { font-size: 13px; color: var(--ink); line-height: 1.35; height: 35px; overflow: hidden; }
.card-price { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; }
.price { color: var(--price); font-weight: 700; font-size: 16px; }
.price small { font-size: 11px; font-weight: 400; }
.card-brand { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* 模块级隐藏价格（舒享家/尊享家/梦享家：首页卡片 + 专区二级页都不显示价格） */
.no-price .card-price { display: none; }

/* 二级页商品列表：一行只展示一个产品（单列大卡） */
.grid-1 { grid-template-columns: 1fr; }
.grid-1 .card-img { height: auto; aspect-ratio: 4 / 3; }
.grid-1 .card-body { padding: 10px 12px 12px; }
.grid-1 .card-name { font-size: 15px; height: auto; }
.grid-1 .price { font-size: 19px; }
.grid-1 .card-brand { font-size: 12px; margin-top: 5px; }

/* 列表头部 */
.list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.back { font-size: 18px; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; }
.list-title { font-weight: 700; font-size: 17px; }

/* 详情页 */
.detail-img { height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow); }
.detail-img .ph { position: absolute; inset: 0; }
.detail-thumbs { display: flex; gap: 8px; margin: 10px 0; }
.thumb { width: 56px; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.thumb.active { border-color: var(--accent); }
.d-block { background: var(--card); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); margin-bottom: 12px; }
.d-name { font-size: 18px; font-weight: 700; }
.d-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.d-price { display: flex; align-items: baseline; gap: 10px; margin: 10px 0; }
.d-price .price { font-size: 24px; }
/* 隐藏价格的商品（舒享家/尊享家/梦享家）：详情页不显示金额，改为引导咨询 */
.d-price.d-price-ask { color: var(--ink-2); font-size: 15px; font-weight: 600; }
/* v-107：详情页规格 chip 行（.spec-row / .spec）已删除 —— 规格信息统一在「产品参数」表展示，不重复 */
.d-desc { margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.d-desc :is(p) { margin: 6px 0; }
/* 备注信息栏（后台「商品备注」录入，v-113 恢复展示）：放在「规格选择」正下方。
   浅底纯色块（无左侧竖条）+「备注：」文字前缀（v-101 定稿形态） */
.d-remark {
  margin-top: 10px; padding: 9px 11px; background: #f7f3ec; border-radius: 10px;
}
.d-remark-t { font-weight: 700; color: var(--accent); margin-right: 2px; }
.d-remark-c { min-width: 0; color: var(--ink-2); font-size: 13px; line-height: 1.62; word-break: break-word; }
.d-remark-c :is(p) { margin: 0; }
.d-remark-c :is(p + p) { margin-top: 6px; }
.d-remark-c :is(img) { max-width: 100%; height: auto; border-radius: 8px; }

/* 详情页规格选择（尺寸 / 颜色 / 材质…）：选中后价格实时变成「售价 + 差价」 */
.d-opts { margin-top: 12px; }
.opt-g + .opt-g { margin-top: 12px; }
.opt-g-t { font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
.opt-items { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-i {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 9px; padding: 7px 12px; font-size: 12.5px; line-height: 1.2; cursor: pointer;
  font-family: inherit; transition: all .16s;
}
.opt-i .d { font-size: 11px; color: var(--muted); margin-left: 5px; font-weight: 400; }
.opt-i.on { border-color: var(--accent); background: #fdf5ea; color: var(--accent-2); font-weight: 700; }
.opt-i.on .d { color: var(--accent); }
.opt-i:active { transform: scale(.97); }
/* 购物车 / 结算 / 我的：所选规格 */
.cart-opts { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
/* 需咨询商品（舒享家/尊享家/梦享家）：可加购，不可在线下单 */
.cart-ask { font-size: 12px; color: var(--accent); margin-top: 3px; font-weight: 600; }
.ask-tip {
  background: #fff7ee; border: 1px solid #f0d9c0; border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; margin: 12px 0;
}
.ask-tip-t { font-size: 13.5px; font-weight: 700; color: var(--accent-2); }
.ask-tip-d { font-size: 12.5px; color: #6b5a48; line-height: 1.6; margin-top: 4px; }
.ask-tip-d b { color: var(--accent-2); }
.ask-tip-a { display: flex; gap: 8px; margin-top: 8px; }
.btn.is-off { opacity: .55; filter: grayscale(.35); }

/* --- 详情页可选区块：产品参数 / 图文详情 --- */
.sec-h {
  font-size: 15px; font-weight: 700; padding-left: 10px; margin-bottom: 10px; position: relative;
}
.sec-h::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px; background: var(--accent);
}
/* 参数表：分组标题 + 「标签 / 值」两列，行间虚线分隔 */
.p-group + .p-group { margin-top: 12px; }
.p-group-t { font-size: 12.5px; font-weight: 600; color: var(--accent-2); margin-bottom: 4px; }
.p-row {
  display: flex; gap: 10px; padding: 6px 0; font-size: 12.5px; line-height: 1.55;
  border-bottom: 1px dashed var(--line);
}
.p-row:last-child { border-bottom: 0; padding-bottom: 0; }
.p-l { flex: 0 0 84px; color: var(--muted); }
.p-v { flex: 1; color: var(--ink); }
/* 图文详情：图 + 标题 + 说明 卡片流
   图片一律按自身原始比例完整显示（详情图多为竖版长图，不能裁成 4:3 只露顶部）
   整块左右负外边距抵消容器留白 → 图片通栏铺满屏幕宽度 */
.rich-wrap { padding: 12px 0 4px; margin: 0 -12px 12px; border-radius: 0; }
.rich-wrap .sec-h { margin: 0 14px 10px; }
/* v-102：去掉「图文详情」小标题，按钮行直接靠左（不再有左侧橙色小竖条） */
.rich-wrap .sec-h.rich-head { padding-left: 0; }
.rich-wrap .sec-h.rich-head::before { display: none; }
/* v-100：标题右侧「详情图 / 实拍图」独立切换按钮 + 两个互斥面板 */
.sec-h .rich-tabs { margin-left: 0; display: inline-flex; gap: 7px; vertical-align: middle; }
.rich-tab {
  font-size: 12.5px; font-weight: 600; color: var(--accent); background: transparent;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 20px; padding: 3px 12px; line-height: 1.5;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rich-tab.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.rich-pane { display: none; }
.rich-pane.on { display: block; }
.rich-shots .rich-it img { cursor: zoom-in; }
.rich-it { margin: 0; }
.rich-it + .rich-it { margin-top: 0; }
.rich-it img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 0; background: #f3ede4; cursor: zoom-in;
}
.rich-it figcaption { padding: 10px 14px 0; }

/* 图片全屏查看器：点击图文详情里的图片 → 黑底铺满整屏，再点一次关闭 */
.viewer {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .93);
  display: grid; place-items: center; overflow: auto; -webkit-overflow-scrolling: touch;
}
.viewer img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.viewer .v-close {
  position: fixed; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px; line-height: 36px; text-align: center;
}
.viewer .v-tip {
  position: fixed; left: 0; right: 0; bottom: 22px; text-align: center;
  color: rgba(255, 255, 255, .72); font-size: 12.5px;
}

/* 品牌小程序码弹窗（v-115）：品牌配了 qrcode 后点它弹出，长按识别打开小程序 */
.qrpop {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .55);
  display: none; place-items: center; padding: 20px; box-sizing: border-box;
}
.qrpop .qr-box {
  width: 100%; max-width: 300px; background: #fff; border-radius: 14px; padding: 18px 16px 14px;
  text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.qrpop .qr-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.qrpop .qr-img {
  margin: 14px auto 10px; width: 200px; height: 200px; background: #f6f4f0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qrpop .qr-img img { max-width: 100%; max-height: 100%; display: block; }
.qrpop .qr-tip { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.qrpop .mp-link {
  margin: 12px auto 0; padding: 9px 11px; max-width: 100%; max-height: 64px; overflow: auto;
  background: #f6f4f0; border-radius: 8px; text-align: left;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2); word-break: break-all;
  -webkit-user-select: all; user-select: all;
}
.qrpop .mp-copy {
  margin-top: 10px; height: 38px; line-height: 38px; border-radius: 19px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
}
.qrpop .mp-copy:active { opacity: .75; }
.qrpop .qr-sub { margin-top: 4px; font-size: 12px; color: var(--muted); min-height: 0; }
.qrpop .qr-sub:empty { display: none; }
.qrpop .qr-close {
  margin-top: 14px; height: 36px; line-height: 36px; border-radius: 18px;
  background: #f2efe9; color: var(--ink-2); font-size: 13.5px;
}
.rich-it h4 { margin: 0; font-size: 14px; font-weight: 700; }
.rich-it p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }

/* 图文详情（后台富文本编辑器录入的 HTML）
   图片与老结构同一口径：按自身原始比例完整显示、通栏铺满，点图可全屏看；
   文字类内容左右留 14px，图片不加边距（通栏），所以用「只给文字块加边距」的写法 */
.rich-html { font-size: 13.5px; color: var(--ink-2); }
.rich-html img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 0; background: #f3ede4; cursor: zoom-in; margin: 0 auto;
}
.rich-html figure { margin: 0; }
.rich-html video { width: 100%; display: block; background: #000; }
.rich-html iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.rich-html p, .rich-html h1, .rich-html h2, .rich-html h3, .rich-html h4, .rich-html h5, .rich-html h6,
.rich-html ul, .rich-html ol, .rich-html blockquote, .rich-html pre, .rich-html table {
  margin-left: 14px; margin-right: 14px;
}
.rich-html p { margin-top: 0; margin-bottom: 10px; line-height: 1.75; }
.rich-html h1, .rich-html h2, .rich-html h3, .rich-html h4 { margin-top: 14px; margin-bottom: 8px; font-size: 15px; color: var(--ink); }
.rich-html ul, .rich-html ol { margin-top: 0; margin-bottom: 10px; padding-left: 22px; }
.rich-html li { margin: 4px 0; line-height: 1.7; }
.rich-html blockquote { margin-top: 10px; margin-bottom: 10px; padding: 8px 12px; border-left: 3px solid var(--line); background: #faf6f0; }
.rich-html pre { margin-top: 10px; margin-bottom: 10px; padding: 10px 12px; background: #f6f3ee; border-radius: 6px; overflow-x: auto; font-size: 12.5px; }
.rich-html table { width: auto; border-collapse: collapse; margin-top: 10px; margin-bottom: 10px; }
.rich-html th, .rich-html td { border: 1px solid var(--line); padding: 6px 8px; font-size: 12.5px; }
.rich-html a { color: var(--accent-2); text-decoration: underline; }

/* v-112：操作按钮组已从页面底部移到「产品参数」上方（文档流内的白底卡片），不再粘底 */
.bar-actions { background: transparent; padding: 2px; display: flex; gap: 10px; }
.d-act { padding: 10px; }
.btn {
  border: 0; border-radius: 999px; padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer; flex: 1;
}
.btn-cart { background: #f3e3d2; color: var(--accent-2); }
.btn-buy { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.btn-fav { background: #fff; border: 1px solid var(--line); color: var(--ink-2); flex: 0 0 auto; padding: 12px 14px; }
.btn-fav.on { color: #e25563; border-color: #f0c4ca; }
.btn-block { width: 100%; }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.btn-sm { flex: 0 0 auto; padding: 7px 14px; font-size: 12.5px; font-weight: 600; }
.btn-danger { background: #fff; border: 1px solid #e6c3c3; color: #c0505f; }
.btn:active { transform: scale(.98); }

/* 购物车 */
.cart-item { display: flex; gap: 10px; background: var(--card); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); margin-bottom: 10px; align-items: center; }
.cart-img { width: 70px; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; flex: none; }
.cart-info { flex: 1; min-width: 0; }
.cart-info .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qty button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 16px; cursor: pointer; }
.qty span { min-width: 22px; text-align: center; }
.empty { text-align: center; color: var(--muted); padding: 60px 0; }
.empty .big { font-size: 40px; }

.summary { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.summary .total { font-weight: 700; }
.summary .total .price { font-size: 20px; }

/* 底部 tab */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--maxw);
  background: #fff; border-top: 1px solid var(--line); display: flex; z-index: 40;
}
.tab { flex: 1; padding: 8px 0 10px; text-align: center; color: var(--muted); font-size: 11px; cursor: pointer; }
/* 图标必须是彩色 emoji：显式指定彩色 emoji 字体族，避免落到 Segoe UI Symbol 等单色字体变成黑白线稿 */
.tab .ic {
  font-size: 20px; display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "Segoe UI Symbol", sans-serif;
  font-variant-emoji: emoji;
}
.tab.active { color: var(--accent); }
.tab .badge {
  position: absolute; transform: translate(14px, -2px); background: var(--price); color: #fff;
  font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 999px; padding: 0 4px;
}

/* 表单 */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 14px; outline: none; background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* 咨询页 */
.cs-contact { background: #faf7f2; border-radius: 12px; padding: 4px 12px; }
.cs-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.cs-row:last-child { border-bottom: 0; }
.cs-row span { color: var(--muted); }
.cs-row b { font-weight: 600; }
.cs-row b[data-tel] { color: var(--accent); cursor: pointer; }

/* 售后页 */
.as-tip { background: #f3ede4; color: var(--ink-2); font-size: 12px; border-radius: 10px; padding: 9px 12px; line-height: 1.5; }
.as-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.as-add { width: 64px; height: 64px; border: 1.5px dashed var(--line); border-radius: 10px; display: grid; place-items: center; font-size: 26px; color: var(--muted); cursor: pointer; background: #faf7f2; }
.as-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.as-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #efeae1; }
.as-thumb img { width: 100%; height: 100%; object-fit: cover; }
.as-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 18px; text-align: center; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; font-size: 12px; cursor: pointer; }

/* 成功页 */
.success { text-align: center; padding: 60px 20px; }
.success .ok { font-size: 56px; }
.success h2 { margin: 14px 0 6px; }
.success p { color: var(--ink-2); }
.order-no { background: #f3ede4; border-radius: 10px; padding: 8px; display: inline-block; margin-top: 8px; font-weight: 600; }

/* 占位图文字 */
.ph-label { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.92); font-weight: 700; font-size: 15px; text-align: center; padding: 0 12px; }

/* 我的页 */
.mine-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.mine-ava { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 26px; flex: 0 0 auto; }
.mine-uinfo { flex: 1; min-width: 0; }
.mine-uphone { font-size: 12px; opacity: .9; margin-top: 2px; }
/* 卡片内只剩这一行文案时的样式（已去掉「欢迎来到莱沃精装家」/「莱沃会员」标题） */
.mine-uphone.is-solo { font-size: 13.5px; opacity: .95; margin-top: 0; }
/* 已登录：这行显示会员手机号，作为账号标识略放大加粗 */
.mine-uphone.is-acct { font-size: 15px; font-weight: 600; opacity: 1; margin-top: 0; letter-spacing: .4px; }
.mine-login { flex: 0 0 auto; background: #fff; color: var(--accent-2); padding: 9px 18px; }
.mine-link { font-size: 13px; opacity: .92; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 5px 12px; cursor: pointer; flex: 0 0 auto; }
.mine-list { padding: 6px 12px; }
.mine-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.mine-row:last-child { border-bottom: 0; }
.mine-thumb { width: 48px; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; background-size: cover; background-position: center; background-color: #efeae1; flex: 0 0 auto; }
.mine-ricon { width: 48px; height: 48px; border-radius: 8px; background: #f3ede4; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
.mine-rinfo { flex: 1; min-width: 0; }
.mine-rname { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-rsub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mine-rprice { font-size: 14px; font-weight: 600; color: var(--accent-2); flex: 0 0 auto; }
.mine-arrow { color: var(--muted); font-size: 20px; flex: 0 0 auto; }

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(43,38,32,.92); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13px; z-index: 99;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.toast.show { opacity: 1; }

.skel { background: linear-gradient(90deg,#eee,#f6f6f6,#eee); background-size: 200% 100%; animation: sk 1.1s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

/* 尊享家模块 */
.zunxiang { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 14px; padding: 14px; }
.zx-banner {
  position: relative; min-height: 118px; border-radius: 12px; margin-bottom: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  padding: 14px 16px; font-size: 18px; font-weight: 700; letter-spacing: 1px; text-align: center;
}
/* 可点的 banner（带 data-go）显示手型光标 */
.zx-banner[data-go] { cursor: pointer; }
/* banner 文案层：压在场景图/渐变之上，加阴影保证可读；主行 + 副标题行 */
.zx-bt-text {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.zx-bt-main { font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.25; }
.zx-bt-sub { font-size: 12px; font-weight: 500; letter-spacing: .5px; opacity: .95; line-height: 1.3; }
.zx-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.zx-scroll::-webkit-scrollbar { display: none; }
/* 家模块大图下方：2 张纯主图（2 列 × 1 行，仅图片无文字；大图展示） */
/* 家模块大图下方：2 张纯主图，整体宽度为原尺寸的 2/3、居中 */
.zx-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.zx-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; cursor: pointer; background: #efeae1; }
.zx-thumb .ph { position: absolute; inset: 0; }
/* 左1右2 三张布局（舒享家/尊享家/梦享家）
   三张图统一 4:3，顶部对齐、底部平齐（左图底 = 右列底）。
   设容器宽 W、间距 g=10px、卡片文字区高 t=41px、右列宽 r、左列宽 W−g−r：
     左列高 = 0.75(左宽) + t          右列高 = 2 × 0.75r + g + 2t
   两式相等 → 0.75(W − g − r) + t = 1.5r + g + 2t
            → 2.25r = 0.75W − 1.75g − t
            → r = (W − 78px) / 3 = 33.333% − 26px
   ⚠️ 用 grid 百分比轨道承载这个值（v-92）：早期用 flex + flex-basis 踩了两个坑——
   ① 子项 `.zx-card { flex: 0 0 auto }` 的 auto 会覆盖「basis=auto 回退 width」，
      导致父级写 width 被彻底忽略；② flex-basis 不接受 clamp()，浏览器按无效值丢弃
      → 右列回落成内容尺寸（390px 视口下 113px、列高 253px，反而比左列高，
      两张小图被撑成方块的根因）。grid 轨道的百分比按容器内容宽解析，无上述问题。 */
.zx-thumbs.layout-3 {
  --zx-gap: 10px;
  display: grid;
  grid-template-columns: 1fr calc((100% - 78px) / 3);
  gap: var(--zx-gap);
  align-items: start;
}
.zx-thumbs.layout-3 .zx-left { min-width: 0; }
.zx-thumbs.layout-3 .zx-right {
  min-width: 0; display: flex; flex-direction: column; gap: var(--zx-gap);
}
.zx-thumbs.layout-3 .zx-left .zx-card { min-width: 0; }
/* 左图不用 aspect-ratio（部分手机 UA 对弹性加宽元素的 aspect-ratio 取不到定值，
   会回退成固有尺寸而塌陷）→ 改用 padding 撑高的固定比例盒。 */
.zx-thumbs.layout-3 .zx-left .zx-card .zx-img { height: auto; aspect-ratio: auto; padding-top: 75%; }
.zx-thumbs.layout-3 .zx-right .zx-card { flex: 0 0 auto; min-width: 0; }
.zx-thumbs.layout-3 .zx-right .zx-card .zx-img { height: auto; aspect-ratio: 4 / 3; }
/* 左右卡文字区高度统一（41px = 名称区 37px + 卡片下内边距 4px）→ 三图底部平齐
   名称区 37px = 7px 上内边距 + 2 行 × 15px，恰好 2 行；overflow 裁切在 padding box，
   故下留白改用卡片 padding-bottom（否则第 3 行文字会从下内边距里露头）
   ⚠️ 这个高度直接参与 3:2 宽度比的推导（左宽 = 3 × 右宽 + 4/3 × gap + 4/3 × 2 × 该高度），
      改字号/行高/内边距时必须重算右列比例，否则三图底部不再平齐。 */
.zx-thumbs.layout-3 .zx-card { padding-bottom: 4px; }
.zx-thumbs.layout-3 .zx-card .zx-name {
  font-size: 12.5px; line-height: 1.2; padding: 7px 8px 0; height: 37px; box-sizing: border-box;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 舒享家/尊享家/梦享家三模块：不显示产品价格 */
.zx-thumbs.layout-3 .zx-card .zx-price { display: none; }
/* 带产品参数的卡片（图 + 名称 + 价格） */
.zx-card { cursor: pointer; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.zx-card .zx-img { width: 100%; aspect-ratio: 4 / 3; position: relative; background: #efeae1; }
.zx-card .zx-img .ph { position: absolute; inset: 0; }
.zx-card .zx-name { font-size: 13px; color: var(--ink); line-height: 1.35; padding: 8px 9px 0; height: 44px; overflow: hidden; }
.zx-card .zx-price { color: var(--accent); font-weight: 700; font-size: 15px; padding: 4px 9px 10px; }

/* 舒享家 / 尊享家 / 梦想家 三模块配色区分（banner 无场景图时的渐变回退） */
.zone-shu .zx-banner { background: linear-gradient(135deg, #5fa8a2, #3f7d7a); }
.zone-zun .zx-banner { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.zone-meng .zx-banner { background: linear-gradient(135deg, #b07ec8, #8a5aa8); }
.zone-chuang .zx-banner { background: linear-gradient(135deg, #e08a4a, #c0623a); }
/* 商用家具：商务蓝（展示逻辑与创意好品一致，仅配色区分） */
.zone-shang .zx-banner { background: linear-gradient(135deg, #4a6fa5, #2f4a72); }

/* ============ 二级专区页（按参考图布置） ============ */
/* 搜索栏：橙框胶囊 + 搜索按钮 */
.msbar {
  display: flex; align-items: center; margin: 0 0 12px;
  border: 2px solid var(--accent); border-radius: 999px; overflow: hidden; background: #fff;
}
.msbar-input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 11px 16px; font-size: 14px; color: var(--ink);
}
.msbar-input::placeholder { color: var(--muted); }
.msbar-input::-webkit-search-cancel-button { display: none; }
.msbar-btn {
  flex: none; border: 0; cursor: pointer; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 1px;
  padding: 12px 24px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.msbar-btn:active { opacity: .88; }

/* 商品分类折叠面板 */
.zpanel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 12px; overflow: hidden; }
.zpanel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; font-weight: 700; font-size: 15px; cursor: pointer; user-select: none;
}
.zpanel-right { display: flex; align-items: center; gap: 8px; }
.zpanel-count { font-size: 12px; font-weight: 400; color: var(--muted); }
.zpanel-arrow { color: var(--muted); font-size: 15px; line-height: 1; transition: transform .25s; }
.zpanel.collapsed .zpanel-arrow { transform: rotate(180deg); }
.zpanel-body { padding: 0 8px 6px; }
.zpanel.collapsed .zpanel-body { display: none; }

/* 分类三级页：无分类面板时的一行统计（如「床 · 共 4 件」） */
.zstat { font-size: 12px; color: var(--muted); margin: 0 2px 10px; }

/* 分类小图（选中橙框 + 浅底） */
.zcats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 2px; }
.zcat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 2px 8px; border-radius: 12px; border: 1.5px solid transparent;
}
.zcat-thumb {
  width: 54px; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; font-size: 22px; background: #f2ece2;
}
.zcat-name { font-size: 12px; color: var(--ink-2); }
.zcat.active { border-color: var(--accent); background: #fdf5ea; }
.zcat.active .zcat-name { color: var(--accent-2); font-weight: 600; }

/* ============ 自适应（平板 / 桌面铺开） ============
   手机端（<768px）外观完全不变；宽屏只放大容器 + 增加网格列数。
   --maxw 是全局内容宽度，.phone 与 #tabbar 都跟着它变。 */
@media (min-width: 560px)  { :root { --maxw: 640px; } }
@media (min-width: 768px)  { :root { --maxw: 820px; } }
@media (min-width: 1024px) { :root { --maxw: 1180px; } }
@media (min-width: 1440px) { :root { --maxw: 1280px; } }

/* 创意好品 / 商用家具：始终渲染 4 张卡，手机上只显示前 2 张，宽屏 4 列全显 */
.zx-thumbs:not(.layout-3) .zx-card:nth-child(n+3) { display: none; }

/* 顶部三模块容器（手机 = 普通块级，宽屏 = 三列并排） */
.zone-row { display: block; }

@media (min-width: 768px) {
  body { padding: 18px 0; }
  .main { padding: 16px; padding-bottom: 84px; }
  .slide { height: 190px; font-size: 24px; }
  .zx-banner { min-height: 132px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .style-grid { grid-template-columns: repeat(6, 1fr); gap: 16px 12px; }
  /* 商品分类：与上方「家具风格 / 品牌优选」同一 6 列网格 → 首个图标左边缘与上方完全对齐
     （不再居中收窄；分类多于 6 个时自动换行，节奏与上方一致） */
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
  .cat-icon { width: 64px; height: 64px; font-size: 28px; }
  .zcats { grid-template-columns: repeat(6, 1fr); }
  /* 左1右2 三连：右列宽度由上面的 grid 轨道公式统一算（r = (W − 78px) / 3），
     这里不再覆写，768~1023px 容器 700~790px 时自动得到 207~237px，正好是原来的取值区间。 */
  /* 创意好品 / 商用家具：4 列 */
  .zx-thumbs:not(.layout-3) { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .zx-thumbs:not(.layout-3) .zx-card:nth-child(n+3) { display: block; }
  /* 详情页左右分栏：左图 + 右信息 */
  .detail-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .detail-page .detail-img { grid-column: 1; grid-row: 1; }
  .detail-page .detail-thumbs { grid-column: 1; grid-row: 2; margin-top: 0; }
  .detail-page .d-info { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; }
  /* 参数 / 图文详情：通栏放在分栏下方 */
  .detail-page .d-wide { grid-column: 1 / -1; margin: 18px 0 0; }
  /* 图文详情：每张图独占一整行、铺满通栏宽度（不再并排缩成小图），上下零间距连成长图流 */
  .detail-page .rich { display: block; }
  .detail-page .rich .rich-it + .rich-it { margin-top: 0; }
  .detail-page .rich-wrap { margin-left: 0; margin-right: 0; border-radius: var(--radius); overflow: hidden; }
  /* 说明文字限制行宽，避免在超宽行上一行拉到底 */
  .detail-page .rich .rich-it figcaption { max-width: 780px; }
  /* 参数分组并排两列，避免通栏下大片留白 */
  .detail-page .pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; align-items: start; }
  .detail-page .pgrid .p-group + .p-group { margin-top: 0; }
  .detail-page .d-spacer { display: none; }
  /* v-112：按钮组已移进 .d-act（.d-wide 通栏）放在「产品参数」上方，不再需要跨列/底部留白 */
  .detail-page .d-act { padding: 14px; }
  .detail-page .bar-actions { position: static; border: 0; padding: 0; }
}

@media (min-width: 1024px) {
  .phone { border-radius: 18px; }
  .slide { height: 220px; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  /* 专区二级页：宽屏由「一行一个」改为一行 3 个（手机端不变） */
  .grid-1 { grid-template-columns: repeat(3, 1fr); }
  /* 舒享家 / 尊享家 / 梦享家 三模块并排 */
  .zone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  /* 并排后单模块只剩 ~290~380px，右列同样走公式（r ≈ 71~99px），保持三图底部平齐。 */
  .zone-row .zunxiang { margin-bottom: 0; }
  .zx-banner { min-height: 118px; }
  .cart-item { padding: 12px 14px; }
  /* 底部导航改悬浮胶囊（不再是通栏） */
  #tabbar {
    max-width: 460px; bottom: 16px; border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 10px 30px rgba(60, 45, 25, .18); overflow: hidden;
  }
  .tab { font-size: 12px; padding: 9px 0 11px; }
  .tab .ic { font-size: 21px; }
}

@media (min-width: 1440px) {
  .main { padding: 20px; }
}

/* 首页底部：管理后台入口（不显眼，仅内部使用） */
.admin-entry { text-align: center; padding: 14px 0 22px; }
.admin-entry a { font-size: 12px; color: #c3c7cd; }
.admin-entry a:hover { color: var(--accent); }

/* 登录 / 注册 */
.lg-wrap { padding-top: 16px; }
.lg-card { padding: 16px 14px 14px; }
/* 登录方式切换 */
.lg-tabs { display: flex; background: #efeae1; border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.lg-tab { flex: 1; text-align: center; padding: 9px 0; font-size: 13.5px; border-radius: 999px; color: var(--ink-2); cursor: pointer; transition: all .18s; }
.lg-tab.on { background: #fff; color: var(--accent-2); font-weight: 600; box-shadow: 0 2px 8px rgba(60, 45, 25, .10); }
/* 手机号 + 验证码同行 */
.lg-row { display: flex; gap: 10px; align-items: flex-start; }
.lg-row .field { flex: 1; min-width: 0; }
.lg-send {
  flex: 0 0 auto; height: 41px; margin-top: 21px; padding: 0 14px; border: 0; border-radius: 10px;
  background: #f3e3d2; color: var(--accent-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.lg-send:disabled { opacity: .5; cursor: default; font-weight: 400; }
.lg-submit { margin-top: 6px; }
/* 底部换乘链接 */
.lg-alt { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }
.lg-alt a { color: var(--accent); cursor: pointer; }
.lg-alt i { font-style: normal; margin: 0 10px; color: var(--line); }
/* 协议勾选 */
.lg-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 2px 0 10px; cursor: pointer; }
.lg-agree input { margin: 3px 0 0; flex: none; accent-color: var(--accent); }
/* 小提示 */
.lg-tip { margin-top: 12px; background: #f3ede4; color: var(--ink-2); font-size: 12px; border-radius: 10px; padding: 9px 12px; line-height: 1.6; text-align: center; }
.lg-tip b { color: var(--accent-2); }
/* 宽屏：表单居中收窄，观感更整 */
@media (min-width: 768px) {
  .lg-wrap { max-width: 460px; margin: 0 auto; padding-top: 18px; }
}

/* 备案号页脚（工信部要求：网站首页底部中间位置，链接至 beian.miit.gov.cn） */
.icp-footer { margin-top: auto; text-align: center; padding: 16px 16px 72px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.icp-footer a { color: var(--muted); text-decoration: none; }
.icp-footer a:active { opacity: .6; }
@media (min-width: 768px) {
  /* 宽屏底部 tabbar 为悬浮胶囊（bottom:16px），预留更高间距避免遮挡 */
  .icp-footer { padding-bottom: 92px; font-size: 12px; }
}