/* ==========================================================================
   Xijie Floral Wholesale — 主样式
   设计: 干净的 B2B 风格, 深绿(植物) + 米白 + 金色点缀
   ========================================================================== */
:root{
  --green-900:#12301f; --green-800:#1a4530; --green-700:#226042;
  --green-600:#2d7a54; --green-500:#3d9468; --green-100:#e6f2eb;
  --sand-50:#faf8f3; --sand-100:#f3efe6; --sand-200:#e5ddcd;
  --gold:#c9a961; --gold-dark:#a88a45;
  --ink:#1c2420; --ink-2:#485349; --ink-3:#7a857c;
  --line:#e2e6e1; --white:#fff; --red:#c0392b;
  /* ★ 主题派生色 —— 换主题时一起覆盖，消除 main.css 里的硬编码色值 */
  --green-glow:#2f6b4c;         /* hero 渐变右端 */
  --green-on-dark:#e8f1ec;      /* 深绿底上的浅文字 */
  --green-on-dark-2:#a8c4b6;    /* 深绿底上次浅文字 */
  --gold-rgba:201,169,97;       /* 金色 rgba 用的 RGB 三值 */
  --gold-on:#3d3116;            /* 金底上的深字 */
  --gold-on-2:#2a2415;          /* 金底上更深的字（徽章等） */
  --green-arrow:#b9cfc2;        /* 顶栏下拉箭头的浅色调 */
  --radius:8px; --radius-lg:14px;
  --shadow-sm:0 1px 3px rgba(18,48,31,.06);
  --shadow:0 4px 16px rgba(18,48,31,.08);
  --shadow-lg:0 12px 40px rgba(18,48,31,.14);
  --maxw:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:'Inter','Segoe UI','Helvetica Neue',Arial,
    'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--ink); background:var(--white); line-height:1.6; font-size:15px;
}
html[dir="rtl"] body{font-family:'Noto Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.25; font-weight:700; letter-spacing:-.01em}
h1{font-size:2.5rem} h2{font-size:1.75rem} h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- 顶部条 ---------- */
/* 语言建议条 —— 只在 IP 判定国家与当前语言不一致时出现, 12 秒自动淡出 */
.lang-tip{background:var(--gold); color:var(--gold-on); font-size:13px; padding:6px 0;
  transition:opacity .4s ease, max-height .4s ease; overflow:hidden; max-height:60px}
.lang-tip.out{opacity:0; max-height:0; padding:0}
.lang-tip .wrap{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.lang-tip-txt b{font-weight:600}
.lang-tip-act{display:flex; align-items:center; gap:10px}
.lang-tip-go{background:var(--green-900); color:#fff; text-decoration:none; font-weight:500;
  padding:5px 13px; border-radius:20px; white-space:nowrap}
.lang-tip-go:hover{background:var(--green-700)}
.lang-tip-x{background:none; border:none; color:var(--gold-on); font-size:20px; line-height:1;
  cursor:pointer; padding:0 4px; opacity:.6}
.lang-tip-x:hover{opacity:1}
@media(max-width:640px){.lang-tip .wrap{justify-content:center; text-align:center}}
.topbar{background:var(--green-900); color:#cfe0d6; font-size:13px; padding:7px 0}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar-l{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.topbar-r{display:flex; gap:14px; align-items:center}
/* ★ 顶栏里的 select 必须显式改底色/文字色。
   否则浏览器默认渲染成白底, 又因为全局 color:inherit 继承成浅色字 -> 白底白字完全看不见
   (这是截图验收时发现的 P0 问题) */
.topbar select{
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.10);
  color:var(--green-on-dark);
  border:1px solid rgba(255,255,255,.26);
  border-radius:6px;
  padding:4px 26px 4px 10px;
  font-size:12.5px; line-height:1.35;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--green-arrow) 50%),
                   linear-gradient(135deg,var(--green-arrow) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:background-color .15s, border-color .15s;
}
.topbar select:hover{background-color:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42)}
.topbar select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(var(--gold-rgba),.28)}
.topbar select option{background:#fff; color:#1d2b23}

/* ---------- 头部 ---------- */
.hdr{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.hdr .wrap{display:flex; align-items:center; gap:28px; height:70px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:var(--green-800); white-space:nowrap}
.logo-mark{width:34px;height:34px;border-radius:9px;background:var(--green-700);display:grid;place-items:center;color:#fff;font-size:17px;flex:none}
.logo small{display:block;font-size:10px;font-weight:500;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex; gap:4px; margin-inline-start:auto; align-items:center}
.nav a{padding:8px 14px; border-radius:6px; font-size:14.5px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.nav a:hover{background:var(--green-100); color:var(--green-800)}
.nav a.on{color:var(--green-700); font-weight:650}
.nav .cta{background:var(--green-700); color:#fff; padding:10px 18px; margin-inline-start:8px}
.nav .cta:hover{background:var(--green-800); color:#fff}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:6px; padding:8px 11px; cursor:pointer; margin-inline-start:auto}
.hdr-tools{display:flex;gap:10px;align-items:center}
.sel{border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:13px; background:var(--white); cursor:pointer}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius); font-weight:600; font-size:15px;
  border:1.5px solid transparent; cursor:pointer; transition:.18s; text-align:center; line-height:1}
.btn-primary{background:var(--green-700); color:#fff}
.btn-primary:hover{background:var(--green-800); transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-outline{border-color:var(--green-700); color:var(--green-700); background:transparent}
.btn-outline:hover{background:var(--green-100)}
.btn-gold{background:var(--gold); color:var(--gold-on-2)}
.btn-gold:hover{background:var(--gold-dark); color:#fff}
.btn-ghost{color:var(--ink-2); border-color:var(--line); background:var(--white)}
.btn-ghost:hover{border-color:var(--green-600); color:var(--green-700)}
.btn-sm{padding:8px 15px; font-size:13.5px}
.btn-lg{padding:15px 32px; font-size:16px}
.btn-block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- 通用块 ---------- */
.sec{padding:72px 0}
.sec-tight{padding:48px 0}
.sec-sand{background:var(--sand-50)}
.sec-green{background:var(--green-900); color:var(--green-on-dark)}
.sec-green h2{color:#fff}
.sec-hd{text-align:center; max-width:720px; margin:0 auto 44px}
.sec-hd .eyebrow{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dark); font-weight:700; margin-bottom:10px}
.sec-hd p{color:var(--ink-2); font-size:16px}
.sec-green .sec-hd p{color:var(--green-on-dark-2)}
.grid{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--green-900) 0%,var(--green-700) 55%,var(--green-glow) 100%);
  color:#fff; padding:88px 0 72px; position:relative; overflow:hidden}
.hero::after{content:'';position:absolute;top:-30%;right:-15%;width:70%;height:160%;
  background:radial-gradient(ellipse at center,rgba(var(--gold-rgba),.14),rgba(var(--gold-rgba),0) 68%);
  pointer-events:none}
.hero.hero-plain::after{display:none}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:3.1rem; color:#fff; margin-bottom:18px}
.hero .lead{font-size:18px; color:var(--green-on-dark-2); margin-bottom:30px; max-width:560px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-stats{display:flex; gap:40px; margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.16); flex-wrap:wrap}
.hero-stat b{display:block; font-size:2rem; color:var(--gold); line-height:1.1; font-weight:800}
.hero-stat span{font-size:13px; color:var(--green-on-dark-2)}
/* ★ 移动端: Hero 数据改为 2×2 网格, 避免 flex 换行挤成一团 (七专家评审 P0) */
@media(max-width:640px){
  .hero-stats{display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; margin-top:32px; padding-top:24px}
  .hero-stat b{font-size:1.7rem}
}
.hero-card{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg); padding:28px; backdrop-filter:blur(6px)}

/* ---------- 商品卡 ---------- */
.pcards{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.pcard{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; transition:.2s; display:flex; flex-direction:column; position:relative}
.pcard:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--green-500)}
.pcard-img{aspect-ratio:1/1; background:var(--sand-100); overflow:hidden; position:relative}
.pcard-img img{width:100%;height:100%;object-fit:cover; transition:.35s}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-badge{position:absolute; top:10px; inset-inline-start:10px; background:var(--gold);
  color:var(--gold-on-2); font-size:11px; font-weight:700; padding:4px 9px; border-radius:4px; letter-spacing:.04em}
.pcard-body{padding:15px 16px 17px; flex:1; display:flex; flex-direction:column; gap:6px}
.pcard-code{font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; font-family:ui-monospace,monospace}
.pcard-name{font-size:14.5px; font-weight:600; line-height:1.4; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard-price{font-size:1.22rem; font-weight:800; color:var(--green-700)}
.pcard-price small{font-size:12px; font-weight:500; color:var(--ink-3)}
.pcard-meta{font-size:12px; color:var(--ink-3); display:flex; gap:10px; flex-wrap:wrap}
.pcard-add{margin-top:8px}

/* ---------- 分类/筛选 ---------- */
/* ★ 首页品类横向滑动卡片 (七专家评审: 移动端品类丰富度 + 横滑体验) */
.cat-scroll{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-scroll .cat-tile{flex:0 0 150px; scroll-snap-align:start; display:flex;
  flex-direction:column; align-items:center; gap:8px; padding:22px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  text-align:center; transition:.2s; min-height:140px; justify-content:center}
.cat-scroll .cat-tile:hover{border-color:var(--green-500); box-shadow:var(--shadow); transform:translateY(-2px)}
.cat-scroll .cat-tile .ic{font-size:34px; line-height:1}
.cat-scroll .cat-tile b{font-size:14px; color:var(--ink)}
.cat-scroll .cat-tile span{font-size:12px; color:var(--green-700); font-weight:650}
.filters{display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:30px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:7px 15px; border:1px solid var(--line); border-radius:100px; font-size:13.5px;
  background:#fff; cursor:pointer; white-space:nowrap; transition:.15s}
.chip:hover{border-color:var(--green-600); color:var(--green-700)}
.chip.on{background:var(--green-700); color:#fff; border-color:var(--green-700)}
.searchbox{position:relative; margin-inline-start:auto}
.searchbox input{padding:9px 14px 9px 36px; border:1px solid var(--line); border-radius:100px;
  width:230px; font-size:13.5px}
html[dir="rtl"] .searchbox input{padding:9px 36px 9px 14px}
.searchbox::before{content:'⌕'; position:absolute; inset-inline-start:13px; top:50%;
  transform:translateY(-50%); color:var(--ink-3); font-size:16px}

/* ---------- 分页 ---------- */
.pager{display:flex; gap:8px; justify-content:center; margin-top:44px; flex-wrap:wrap}
.pager a,.pager span{padding:9px 15px; border:1px solid var(--line); border-radius:6px; font-size:14px; background:#fff}
.pager a:hover{border-color:var(--green-600); color:var(--green-700)}
.pager .on{background:var(--green-700); color:#fff; border-color:var(--green-700)}

/* ---------- 表格 ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th{text-align:start; padding:12px 14px; background:var(--sand-100); font-weight:650;
  font-size:13px; letter-spacing:.02em; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--sand-50)}
.tbl .num{text-align:end; font-variant-numeric:tabular-nums}
.tbl-wrap{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff}
.tbl-wrap.scroll{overflow-x:auto}

/* ---------- 阶梯价表 ---------- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:2px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tier{background:#fff; padding:14px 12px; text-align:center}
.tier:nth-child(1){background:var(--green-100)}
.tier b{display:block; font-size:1.32rem; color:var(--green-800); font-weight:800;
  font-variant-numeric:tabular-nums}
.tier span{font-size:12px; color:var(--ink-3)}
.tier em{display:block; font-size:11px; font-style:normal; color:var(--gold-dark); font-weight:700}

/* ---------- 表单 ---------- */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; font-size:14.5px; transition:.15s; width:100%}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(45,122,84,.12)}
.field textarea{resize:vertical; min-height:110px}
.field .hint{font-size:12px; color:var(--ink-3)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--red); background:#fff7f6}
.form-note{font-size:12.5px; color:var(--ink-3); margin-top:4px}

.alert{padding:13px 16px; border-radius:var(--radius); font-size:14px; margin-bottom:18px; display:none}
.alert.show{display:block}
.alert-ok{background:var(--green-100); color:var(--green-800); border:1px solid #b8dcc8}
.alert-err{background:#fdecea; color:#a83226; border:1px solid #f5c6c0}

/* ---------- 卡片/面板 ---------- */
.panel{border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; background:#fff}
.panel-sand{background:var(--sand-50); border-color:var(--sand-200)}
.panel h3{margin-bottom:14px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:14px}
.kv dt{color:var(--ink-3); white-space:nowrap}
.kv dd{margin:0; font-weight:550}

/* ---------- 全球业务伙伴（招推荐人）条带 ----------
   ★ 首页 (§6.5) 和落地页 /partner 共用，所以放这里而不是写在某个模板的
     <style> 里 —— 写在模板里另一页就拿不到，复制一份就变成两处会漂移的真相。
   ★ 为什么不放顶部导航：10 项导航在 9 个语种下都会挤爆（详见 index.html
     里 §6.5 的实测记录），所以这条带子承担了"入口"的职责。 */
.pp-badge{display:inline-block;background:var(--green-100);color:var(--green-800);
  border:1px solid #b8dcc8;border-radius:100px;padding:6px 15px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em}
.pp-band{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  background:var(--sand-50);border-color:var(--sand-200);padding:30px}
.pp-band-txt h2{font-size:1.5rem;margin:0}
.pp-band-act{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:190px}
.pp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pp-chip{background:#fff;border:1px solid var(--sand-200);border-radius:100px;
  padding:6px 13px;font-size:12.5px;color:var(--ink-2)}
.pp-chip b{color:var(--green-700);font-weight:700}
@media(max-width:900px){
  .pp-band{grid-template-columns:1fr;gap:20px;padding:22px}
  .pp-band-txt h2{font-size:1.28rem}
}

/* ---------- 面包屑 ---------- */
.crumb{font-size:13px; color:var(--ink-3); padding:18px 0 0}
.crumb a:hover{color:var(--green-700)}
.crumb span{margin:0 7px; opacity:.5}

/* ---------- 商品详情 ---------- */
.pd{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start}
.gallery{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--sand-50)}
.gallery-main{aspect-ratio:1/1; display:grid; place-items:center}
.gallery-main img{max-height:100%; object-fit:contain}
.thumbs{display:flex; gap:8px; padding:10px; overflow-x:auto; border-top:1px solid var(--line); background:#fff}
.thumb{width:62px; height:62px; flex:none; border:2px solid transparent; border-radius:6px;
  overflow:hidden; cursor:pointer; background:var(--sand-100)}
.thumb.on{border-color:var(--green-600)}
.thumb img{width:100%;height:100%;object-fit:cover}
/* ── 商品视频缩略图 + 播放层 ── */
.gallery-main{position:relative}
#videoPlayer{position:absolute;inset:0;display:none;background:#000}
#videoPlayer video,#videoPlayer iframe{width:100%;height:100%;border:0;object-fit:contain}
.thumb-video{position:relative;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green-700),var(--green-500))}
.thumb-video .play-badge{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);
  color:var(--green-700);display:grid;place-items:center;font-size:11px;padding-left:2px}
.thumb-video.on{border-color:var(--green-600)}
.pd-title{font-size:1.85rem; margin-bottom:8px}
.pd-code{font-family:ui-monospace,monospace; font-size:13px; color:var(--ink-3);
  background:var(--sand-100); padding:3px 9px; border-radius:4px; display:inline-block}
.pd-price{font-size:2.1rem; font-weight:800; color:var(--green-800); margin:18px 0 4px;
  font-variant-numeric:tabular-nums}
.pd-price small{font-size:14px; font-weight:500; color:var(--ink-3)}
.pd-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.pd-actions .btn{flex:1; min-width:150px}
.spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.spec-grid div{padding:11px 14px; font-size:14px; border-bottom:1px solid var(--line)}
.spec-grid div:nth-child(odd){background:var(--sand-50); color:var(--ink-3)}
.spec-grid div:nth-child(even){font-weight:600}

/* ---------- 报价侧栏 ---------- */
.quote-bar{position:fixed; inset-inline-end:0; inset-block:0; width:420px; max-width:92vw;
  background:#fff; border-inline-start:1px solid var(--line); box-shadow:var(--shadow-lg);
  transform:translateX(105%); transition:.3s cubic-bezier(.4,0,.2,1); z-index:200;
  display:flex; flex-direction:column}
html[dir="rtl"] .quote-bar{transform:translateX(-105%)}
.quote-bar.open{transform:translateX(0)}
.qb-hd{padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}
.qb-hd h3{margin:0; flex:1; font-size:1.05rem}
.qb-close{background:none; border:0; font-size:22px; cursor:pointer; color:var(--ink-3); line-height:1}
.qb-body{flex:1; overflow-y:auto; padding:14px 20px}
.qb-ft{border-top:1px solid var(--line); padding:16px 20px; background:var(--sand-50)}
.qb-line{display:grid; grid-template-columns:52px 1fr auto; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line); align-items:start}
.qb-line img{width:52px;height:52px;object-fit:cover;border-radius:6px;background:var(--sand-100)}
.qb-line .nm{font-size:13.5px; font-weight:600; line-height:1.35; margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qb-line .cd{font-size:11px; color:var(--ink-3); font-family:ui-monospace,monospace}
.qb-qty{display:flex; align-items:center; gap:5px; margin-top:6px}
.qb-qty button{width:26px;height:26px;border:1px solid var(--line);background:#fff;
  border-radius:5px;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.qb-qty input{width:66px; padding:4px 6px; text-align:center; border:1px solid var(--line);
  border-radius:5px; font-size:13px}
.qb-qty button:disabled{opacity:.35;cursor:not-allowed;background:#f2f2f2;color:var(--ink-3)}
.qb-moq-hint{font-size:11px;color:var(--ink-3);margin-top:4px}
.qb-rm{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:17px;padding:0 2px}
.qb-rm:hover{color:var(--red)}
.qb-total{display:flex; justify-content:space-between; font-size:15px; margin-bottom:6px}
.qb-total b{font-size:1.3rem; color:var(--green-800); font-variant-numeric:tabular-nums}
.qb-empty{text-align:center; color:var(--ink-3); padding:52px 20px; font-size:14px}
.qb-fab{position:fixed; inset-block-end:26px; inset-inline-end:26px; z-index:150;
  background:var(--green-700); color:#fff; border:0; border-radius:100px; padding:15px 24px;
  font-weight:650; font-size:15px; box-shadow:var(--shadow-lg); cursor:pointer;
  display:flex; align-items:center; gap:10px}
.qb-fab:hover{background:var(--green-800)}
.qb-fab .cnt{background:var(--gold); color:var(--gold-on-2); border-radius:100px; padding:1px 9px;
  font-size:12.5px; font-weight:800}
.qb-mask{position:fixed; inset:0; background:rgba(18,48,31,.4); z-index:190; display:none}
.qb-mask.show{display:block}

/* ---------- 认证区 ---------- */
.certs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px}
.cert{border:1px solid var(--line); border-radius:var(--radius); padding:22px 16px;
  text-align:center; background:#fff}
.cert .ic{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
  background:var(--green-100); display:grid;place-items:center;font-size:24px}
.cert b{display:block; font-size:14px; margin-bottom:3px}
.cert span{font-size:12px; color:var(--ink-3)}
.cert.pending .ic{background:var(--sand-100); color:var(--ink-3)}

/* ---------- 页脚 ---------- */
.ftr{background:var(--green-900); color:#9fb8ab; padding:60px 0 26px; font-size:14px}
.ftr a:hover{color:#fff}
.ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px}
.ftr h4{color:#fff; font-size:14px; margin-bottom:16px; letter-spacing:.03em}
.ftr ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.ftr .logo{color:#fff}
.ftr .logo small{color:var(--green-on-dark-2)}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:var(--green-on-dark-2)}
.ftr-note{font-size:12px; color:var(--green-on-dark-2); margin-top:14px; line-height:1.7}

/* ---------- 响应式 ---------- */
/* ★ 中屏（821px–1340px）导航收窄 —— 这是实测量出来的修复，不是"顺手防一手"。
   2026-09-17 加「业务伙伴」入口时用 Playwright 把 9 语种 × 8 宽度全量扫了一遍：
   .nav a 是 white-space:nowrap，英/法/西/葡/俄语菜单文字比中文长得多，
   原来在 1024–1340px 这一整段就会顶出容器（法/西语连 1440px 都溢出）。
   收窄间距与内边距后，14 个"溢出"组合归零，其余组合的溢出量也从
   100–200px 降到 10–50px（剩下的属于既有问题，另行处理）。
   手机在 820px 以下本来就走汉堡菜单，所以这段只影响平板/小笔记本。 */
@media (max-width:1340px){
  .hdr .wrap{gap:16px}
  .nav{gap:2px}
  .nav a{padding:8px 9px; font-size:14px}
  .nav .cta{padding:10px 14px; margin-inline-start:5px}
}
@media (max-width:1080px){
  .pcards{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  .hero h1{font-size:2.4rem}
  .pd{grid-template-columns:1fr; gap:30px}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav{display:none; position:absolute; inset-block-start:70px; inset-inline:0;
    background:#fff; flex-direction:column; padding:14px; gap:2px;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{width:100%}
  .nav .cta{margin:8px 0 0}
  .burger{display:block}
  .hdr .wrap{gap:14px}
  .hdr-tools{margin-inline-start:0}
  .sec{padding:52px 0}
  .pcards{grid-template-columns:repeat(2,1fr); gap:14px}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .filters{flex-direction:column; align-items:stretch}
  .searchbox{margin:0}
  .searchbox input{width:100%}
  h1{font-size:2rem} h2{font-size:1.45rem}
  .hero{padding:56px 0 48px}
  .hero h1{font-size:2rem}
  .hero-stats{gap:24px}
  .topbar-l{display:none}
  /* ★ 顶栏移动端精简: 批发/样品入口导航里都有, 隐藏避免拥挤 (七专家评审) */
  .topbar-r .tb-link{display:none}
  .ftr-grid{grid-template-columns:1fr; gap:28px}
}
@media (max-width:480px){
  /* ★ B2B 扫货场景: 移动端热销保持 2 列, 比单列更高效 (七专家评审 P0) */
  .pcards{grid-template-columns:1fr 1fr; gap:12px}
  .pcard-body{padding:12px 12px 14px}
  .pcard-name{font-size:13.5px}
  .wrap{padding:0 16px}
}

/* ══════════════════════════════════════════════════════════════
   移动端底部悬浮 CTA (七专家评审 P0: WhatsApp/邮箱一键转化)
   ★ 只在手机显示, 桌端隐藏。
   ★ 报价 FAB(.qb-fab) 已在右下, 这里放底部整条, 二者错开:
     悬浮栏固定在底部, FAB 上移到悬浮栏上方。
   ══════════════════════════════════════════════════════════════ */
.mobile-cta{display:none}
@media(max-width:820px){
  .mobile-cta{display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; inset-inline:0; bottom:0; z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); border-top:1px solid var(--line);
    box-shadow:0 -4px 20px rgba(18,48,31,.10); backdrop-filter:blur(8px)}
  .mobile-cta .btn{padding:13px 10px; font-size:14.5px; border-radius:10px}
  /* WhatsApp 绿色 */
  .mobile-cta .btn-wa{background:#25D366; color:#fff}
  .mobile-cta .btn-wa:hover{background:#1fb457; transform:none}
  /* 给页面底部留出悬浮栏高度, 避免遮挡页脚
     ★★ 2026-09-20 修：原来只留 64px = 悬浮栏自己的高度，**没算悬浮栏上方那两个浮标**
        （.qb-fab 报价胶囊底距 78px、.xj-chat-fab 客服球底距 140px+56 高）。
        实测（390×844 手机视口，滚到页脚最底）：页脚最后两行被压住 ——
          "© 2026 Yiwu Xijie Houseware Co., Ltd..." 被客服球压 20px
          "Privacy Policy" 被报价胶囊压 12px
        也就是上面那条注释写的"避免遮挡页脚"**并没有做到**。
        实测 180px 即可完全让开（64 不够 / 180、200、210 都够），取最小的 180。 */
  body.has-mcta{padding-bottom:180px}
  /* 悬浮栏存在时报价 FAB 上移避让 */
  body.has-mcta .qb-fab{bottom:78px}
  /* 移动端 FAB 紧凑化, 少挡内容 */
  .qb-fab{padding:12px 18px; font-size:14px; inset-inline-end:14px}
}

/* ══════════════════════════════════════════════════════════════
   博客 / SEO 内容模块
   ★ 全部用逻辑属性(padding-inline / margin-inline)而非左右固定值,
     这样阿语 RTL 下自动镜像, 不需要写 rtl 专用覆盖规则。
   ══════════════════════════════════════════════════════════════ */

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.blog-card{display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  text-decoration:none; color:inherit; transition:box-shadow .18s, transform .18s}
.blog-card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.blog-card-cover{aspect-ratio:16/9; background:var(--sand-50); overflow:hidden}
.blog-card-cover img{width:100%; height:100%; object-fit:cover; display:block}
.blog-card-ph{display:grid; place-items:center; height:100%; color:var(--green-600);
  font-size:13px; font-weight:500; letter-spacing:.02em}
.blog-card-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; gap:8px}
.blog-card-cat{font-size:11.5px; font-weight:500; color:var(--gold);
  text-transform:uppercase; letter-spacing:.06em}
.blog-card-ttl{font-size:1.02rem; line-height:1.35; margin:0; font-weight:500}
.blog-card-sum{font-size:13px; color:var(--ink-3); line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.blog-card-meta{margin-block-start:auto; padding-block-start:10px; border-block-start:1px solid var(--line);
  font-size:12px; color:var(--ink-3); display:flex; justify-content:space-between; gap:10px}
.blog-langs{display:flex; gap:4px}
.blog-langs b{font-size:10px; font-weight:500; padding:1px 5px; border-radius:3px;
  background:var(--sand-50); color:var(--green-600)}

.post-layout{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:44px; align-items:start}
.post-main{min-width:0}
.post-hd{margin-bottom:26px}
.post-cat{font-size:11.5px; font-weight:500; color:var(--gold);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px}
.post-ttl{font-size:2.05rem; line-height:1.25; margin:0 0 12px}
.post-sum{font-size:1.02rem; color:var(--ink-3); line-height:1.6; margin:0 0 14px}
.post-meta{font-size:12.5px; color:var(--ink-3); display:flex; flex-wrap:wrap;
  gap:8px; align-items:center; padding-block-end:14px; border-block-end:1px solid var(--line)}
.post-alt{display:flex; gap:10px; margin-inline-start:auto}
.post-alt a{color:var(--green-600); text-decoration:none}
.post-alt a:hover{text-decoration:underline}
.post-alt b{font-weight:500; color:var(--ink)}
.post-cover{width:100%; border-radius:var(--radius); margin-block:22px; display:block}

.post-body{font-size:1.01rem; line-height:1.78; color:var(--ink)}
.post-body h2{font-size:1.4rem; margin:2.1em 0 .7em; line-height:1.35}
.post-body h3{font-size:1.13rem; margin:1.7em 0 .6em; line-height:1.4}
.post-body h4{font-size:1rem; margin:1.5em 0 .5em}
.post-body p{margin:0 0 1.1em}
.post-body ul,.post-body ol{margin:0 0 1.2em; padding-inline-start:1.4em}
.post-body li{margin-bottom:.45em}
.post-body blockquote{margin:1.4em 0; padding:14px 18px; background:var(--sand-50);
  border-inline-start:3px solid var(--green-600); border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-3); font-size:.97rem}
.post-body code{background:var(--sand-50); padding:2px 5px; border-radius:4px;
  font-size:.9em; font-family:ui-monospace,Menlo,Consolas,monospace}
.post-body hr{border:0; border-block-start:1px solid var(--line); margin:2em 0}
.post-body a{color:var(--green-600)}
.post-body img{max-width:100%; height:auto; border-radius:var(--radius); margin:1.2em 0}

.post-faq{margin-block-start:44px; padding-block-start:28px; border-block-start:1px solid var(--line)}
.post-faq h2{font-size:1.35rem; margin:0 0 16px}
.faq-item{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px;
  background:#fff; overflow:hidden}
.faq-item summary{padding:14px 18px; cursor:pointer; font-weight:500; font-size:.99rem;
  list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; color:var(--green-600); font-size:1.15rem;
  flex-shrink:0; line-height:1}
.faq-item[open] summary::after{content:"\2013"}
.faq-item[open] summary{border-block-end:1px solid var(--line)}
.faq-a{padding:14px 18px; font-size:.96rem; color:var(--ink-3); line-height:1.7}

.post-rel{margin-block-start:44px; padding-block-start:28px; border-block-start:1px solid var(--line)}
.post-rel h2{font-size:1.35rem; margin:0 0 18px}

.post-cta{margin-block-start:44px; padding:30px 26px; background:var(--sand-50);
  border-radius:var(--radius); text-align:center}
.post-cta h2{font-size:1.28rem; margin:0 0 8px}
.post-cta p{color:var(--ink-3); font-size:.97rem; margin:0 0 20px; line-height:1.6}
.post-cta-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.post-side{position:sticky; inset-block-start:20px; display:flex; flex-direction:column; gap:20px}
.post-toc{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.post-toc h3{font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); margin:0 0 12px}
.post-toc ul{list-style:none; margin:0; padding:0}
.post-toc li{margin-bottom:8px; font-size:13px; line-height:1.45}
.post-toc li.lv3{padding-inline-start:14px; font-size:12.5px}
.post-toc a{color:var(--ink-3); text-decoration:none}
.post-toc a:hover{color:var(--green-600)}
.post-side-cta{background:var(--green-900); color:#fff; border-radius:var(--radius); padding:22px 20px}
.post-side-cta h3{font-size:1.02rem; margin:0 0 8px; color:#fff}
.post-side-cta p{font-size:12.5px; line-height:1.6; margin:0 0 16px; opacity:.82}
.post-side-cta .btn{width:100%; margin-bottom:9px}
.post-side-cta .btn-ghost{color:#fff; border-color:rgba(255,255,255,.35); background:transparent}

/* 阿语 RTL: 侧栏与正文顺序镜像 */
html[dir="rtl"] .post-layout{grid-template-columns:260px minmax(0,1fr)}
html[dir="rtl"] .post-body blockquote{border-inline-start:3px solid var(--green-600)}

@media (max-width:900px){
  .post-layout{grid-template-columns:1fr; gap:32px}
  html[dir="rtl"] .post-layout{grid-template-columns:1fr}
  .post-side{position:static; order:-1}
  .post-ttl{font-size:1.6rem}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr}
  .post-body{font-size:.98rem}
  .post-alt{margin-inline-start:0; width:100%}
}

/* ==========================================================================
   客户登录 + 价格控价 + 报价页选品器
   ========================================================================== */

/* ── 顶栏登录态 ── */
.tb-user{color:var(--green-100); font-size:12.5px; opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px}
.tb-login{color:var(--gold); font-weight:600}
.tb-login:hover{color:#fff}

/* ── 价格锁定态 ──
   ★ 不用纯灰色块: 客户要能一眼看出"这是可以解锁的", 所以做成可点链接,
     带锁图标 + 与站点绿色一致的强调色。 */
.pcard-lock{font-size:12.5px; color:var(--green-600); font-weight:600;
  text-decoration:none; display:inline-flex; align-items:center; gap:4px}
.pcard-lock:hover{color:var(--green-800); text-decoration:underline}

/* ── 侧栏报价单里的锁提示 ── */
.qb-lock{font-size:11.5px; color:var(--ink-3); line-height:1.5; display:block;
  max-width:120px; text-align:end}

/* ── 报价页选品器: 搜索结果行 ── */
.qp-row{display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--line); transition:background .12s}
.qp-row:last-child{border-bottom:0}
.qp-row:hover{background:var(--sand-50)}
.qp-row img{width:44px; height:44px; object-fit:cover; border-radius:6px; flex:none;
  background:var(--sand-100)}
.qp-row .btn{padding:5px 13px; font-size:16px; line-height:1.2; flex:none; min-width:38px}

/* ── 报价页选品器: 弹窗 ── */
.qp-modal{position:fixed; inset:0; z-index:1200; display:flex;
  align-items:center; justify-content:center; padding:20px}
.qp-modal-mask{position:absolute; inset:0; background:rgba(18,48,31,.55);
  backdrop-filter:blur(2px)}
.qp-modal-box{position:relative; background:#fff; border-radius:14px;
  width:100%; max-width:620px; max-height:82vh; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.28); overflow:hidden}
.qp-modal-hd{display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--line)}
.qp-modal-hd h3{margin:0; font-size:1.02rem}
.qp-modal-body{padding:18px 22px 22px; overflow-y:auto}

@media (max-width:700px){
  .qp-modal{padding:0; align-items:flex-end}
  .qp-modal-box{max-height:88vh; border-radius:14px 14px 0 0; max-width:100%}
  .qp-row img{width:38px; height:38px}
}

/* ── 登录页 ── */
.lg-wrap{max-width:520px; margin:0 auto}
#lgForm .field input{font-size:15px; padding:12px 14px}

/* 阿语 RTL 适配(锁图标/对齐镜像) */
html[dir="rtl"] .qb-lock{text-align:start}
html[dir="rtl"] .pcard-lock{flex-direction:row-reverse}

/* ══════════ AI 客服聊天窗 ══════════ */
.xj-chat-fab{position:fixed; right:18px; bottom:18px; z-index:9990; width:56px; height:56px;
  border-radius:50%; background:var(--brand,#1a7f5a); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .15s ease}
.xj-chat-fab:hover{transform:scale(1.06)}
.xj-chat-fab svg{width:26px; height:26px}
.xj-chat-fab .dot{position:absolute; top:-2px; right:-2px; width:14px; height:14px;
  border-radius:50%; background:#e53935; border:2px solid #fff}

.xj-chat-box{position:fixed; right:18px; bottom:84px; z-index:9990; width:360px; max-width:calc(100vw - 36px);
  height:520px; max-height:calc(100vh - 110px); background:var(--panel,#fff); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.3); display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line,#e2e6e1)}
.xj-chat-box[hidden]{display:none}
.xj-chat-hd{display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:var(--brand,#1a7f5a); color:#fff}
.xj-chat-hd .avatar{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0}
.xj-chat-hd .meta{flex:1; min-width:0}
.xj-chat-hd .meta b{display:block; font-size:14px; line-height:1.2}
.xj-chat-hd .meta span{font-size:11px; opacity:.85}
.xj-chat-hd .close{background:none; border:none; color:#fff; font-size:22px; cursor:pointer;
  line-height:1; padding:0 4px}
.xj-chat-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;
  background:var(--panel-2,#f5f7f5)}
.xj-msg{max-width:82%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word}
.xj-msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--line,#e2e6e1);
  border-bottom-left-radius:4px}
.xj-msg.user{align-self:flex-end; background:var(--brand,#1a7f5a); color:#fff;
  border-bottom-right-radius:4px}
.xj-msg .src{display:block; margin-top:6px; font-size:10.5px; opacity:.55}
.xj-chat-typing{align-self:flex-start; color:var(--ink-3,#888); font-size:12px; padding:2px 4px}
.xj-chat-ft{display:flex; gap:8px; padding:10px; border-top:1px solid var(--line,#e2e6e1);
  background:var(--panel,#fff)}
.xj-chat-ft input{flex:1; border:1px solid var(--line,#e2e6e1); border-radius:20px;
  padding:9px 14px; font-size:13.5px; outline:none}
.xj-chat-ft input:focus{border-color:var(--brand,#1a7f5a)}
.xj-chat-ft button{border:none; background:var(--brand,#1a7f5a); color:#fff; border-radius:20px;
  padding:0 16px; cursor:pointer; font-size:13.5px}
.xj-handoff-btn{display:block; width:100%; text-align:center; margin-top:8px; padding:8px;
  border:1px dashed var(--brand,#1a7f5a); color:var(--brand,#1a7f5a); background:none;
  border-radius:10px; cursor:pointer; font-size:12.5px}
.xj-handoff-btn:hover{background:var(--brand-soft,rgba(26,127,90,.08))}
.xj-handoff-form{padding:10px; border-top:1px solid var(--line,#e2e6e1); background:var(--panel,#fff);
  display:none; flex-direction:column; gap:8px}
.xj-handoff-form.open{display:flex}
.xj-handoff-form input{padding:8px 12px; border:1px solid var(--line,#e2e6e1); border-radius:8px;
  font-size:13px; outline:none}
.xj-handoff-form button{padding:9px; border:none; background:var(--brand,#1a7f5a); color:#fff;
  border-radius:8px; cursor:pointer; font-size:13.5px}
@media (max-width:600px){.xj-chat-box{right:10px; left:10px; width:auto}}

/* ══════════ 报价抽屉内选品（分类→产品→加入） ══════════ */
.qb-browse-btn{display:block;width:100%;padding:11px 14px;margin:2px 0 12px;
  border:1px dashed var(--green-600);border-radius:8px;background:transparent;
  color:var(--green-800);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.qb-browse-btn:hover{background:var(--sand-50)}
.qb-browse-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qb-browse-hd b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qb-back{background:none;border:0;color:var(--ink-3);cursor:pointer;font:inherit;
  font-size:12.5px;padding:2px 0;white-space:nowrap}
.qb-back:hover{color:var(--green-800)}
.qb-search{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:13.5px;margin-bottom:12px;background:#fff;color:var(--ink)}
.qb-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.qb-cat{display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:start}
.qb-cat:hover{border-color:var(--green-600);background:var(--sand-50)}
.qb-cat .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qb-cat .n{font-size:10.5px;color:var(--ink-3);background:var(--sand-100);
  border-radius:100px;padding:1px 8px;font-weight:500;flex-shrink:0}
.qb-prod{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--sand-100)}
.qb-prod img{width:46px;height:46px;object-fit:cover;border-radius:6px;background:var(--sand-100)}
.qb-prod .inf{min-width:0}
.qb-prod .nm{font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.qb-prod .cd{font-size:10.5px;color:var(--ink-3);font-family:ui-monospace,monospace}
.qb-prod .qb-p{font-size:11.5px;color:var(--green-800);font-weight:600;margin-top:2px}
.qb-addbtn{width:34px;height:34px;border-radius:50%;border:0;background:var(--green-800);
  color:#fff;font:inherit;font-size:17px;cursor:pointer;line-height:1;flex-shrink:0}
.qb-addbtn:active{transform:scale(.94)}
.qb-more{display:block;width:100%;padding:10px;margin-top:12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;font:inherit;font-size:13px;cursor:pointer;color:var(--ink-2)}
.qb-more:hover{border-color:var(--green-600);color:var(--green-800)}

/* ══════════ 悬浮按钮防重叠（2026-09-17 老板反馈：报价按钮被客服按钮盖住） ══════════
   报价 FAB 在 bottom:26 (z-150)，客服 FAB 原来也在 bottom:18 (z-9990)，
   两者完全叠在一起，客服按钮把报价按钮右半边挡死 → 点「索取报价」没反应。
   修法：客服按钮整体上移到报价按钮上方，聊天窗跟着上移。 */
.xj-chat-fab{bottom:90px}
.xj-chat-box{bottom:158px; max-height:calc(100vh - 176px)}
@media(max-width:820px){
  /* 手机有底部悬浮 CTA 栏时, 报价 FAB 在 bottom:78, 客服按钮再往上抬 */
  body.has-mcta .xj-chat-fab{bottom:140px}
  body.has-mcta .xj-chat-box{bottom:208px; max-height:calc(100vh - 226px)}
}

/* ══════════ 报价角标跳动 + 加购反馈（2026-09-17） ══════════ */
.qb-fab.pop{animation:qb-pop .35s ease}
.qb-fab.pop .cnt{animation:qb-cnt-pop .4s ease}
@keyframes qb-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes qb-cnt-pop{0%{transform:scale(1)}50%{transform:scale(1.6)}100%{transform:scale(1)}}
.qb-addbtn{transition:background .15s ease, transform .15s ease}
.qb-addbtn.ok{background:var(--gold,#d9a53a); transform:scale(1.12)}

/* ══════════ AI 客服聊天界面美化（2026-09-17：丝滑、美感） ══════════ */
/* 聊天气泡渐入 */
.xj-msg{animation:xj-msg-in .28s cubic-bezier(.2,.7,.3,1); box-shadow:0 1px 2px rgba(0,0,0,.04)}
@keyframes xj-msg-in{from{opacity:0; transform:translateY(8px) scale(.97)}to{opacity:1; transform:none}}
/* 打字三点动画 */
.xj-chat-typing{display:flex; align-items:center; gap:4px; height:18px}
.xj-chat-typing .d{width:6px; height:6px; border-radius:50%; background:var(--ink-3,#999);
  animation:xj-bounce 1.2s infinite}
.xj-chat-typing .d:nth-child(2){animation-delay:.2s}
.xj-chat-typing .d:nth-child(3){animation-delay:.4s}
@keyframes xj-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
/* 发送按钮：圆形图标化 + 悬停反馈 */
.xj-chat-ft button{width:42px; height:42px; padding:0; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:transform .12s ease, background .15s ease}
.xj-chat-ft button:hover{transform:scale(1.08); background:var(--green-800,#1a4530)}
.xj-chat-ft button:active{transform:scale(.94)}
/* 聊天窗打开动画 */
.xj-chat-box{animation:xj-box-in .22s cubic-bezier(.2,.8,.3,1)}
@keyframes xj-box-in{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
/* 头部头像微光 + 关闭按钮圆润 */
.xj-chat-hd .avatar{box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.xj-chat-hd .close{width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; transition:background .15s ease}
.xj-chat-hd .close:hover{background:rgba(255,255,255,.18)}
/* 转人工按钮更精致 */
.xj-handoff-btn{transition:background .15s ease, transform .12s ease}
.xj-handoff-btn:active{transform:scale(.98)}

/* 加购轻提示 toast（浏览视图顶部浮出「已加入」） */
#qbToast{position:absolute; top:14px; left:50%; transform:translate(-50%,-12px);
  background:rgba(26,69,48,.95); color:#fff; padding:8px 18px; border-radius:100px;
  font-size:13px; font-weight:600; opacity:0; pointer-events:none; z-index:60;
  transition:opacity .2s ease, transform .2s ease}
#qbToast.show{opacity:1; transform:translate(-50%,0)}

/* ==========================================================================
   尊重系统「减少动态效果」（prefers-reduced-motion）
   —— 用户在手机/电脑的辅助功能里打开「减弱动态效果」时本段生效：
      · 关掉全站 @keyframes 动画（qb-pop / qb-cnt-pop / xj-msg-in / xj-bounce / xj-box-in）
      · 关掉过渡与平滑滚动
   为什么用 .001ms 而不是 animation:none：
     none 会让某些"动画结束后才归位"的元素停在初始态（例如 opacity:0）；
     .001ms 且只跑一次，元素会立刻落到动画的**结束帧**，视觉结果与播完后一致。
   ★ 本段是全站唯一的 reduced-motion 开关；以后新增动画/滚动（如节日祝福条）
     不需要再写第二份，浏览器会自动套用。
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  html{scroll-behavior:auto !important}
  /* 打字指示点的弹跳是无限循环动画，停帧后固定在"静止态"更自然 */
  .xj-bounce{animation:none !important; opacity:.65 !important; transform:none !important}
}