/* ============ 聚镒日用 静态站样式（复刻1688旺铺风格） ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --blue:#1a6df8; --blue-dark:#0d5ce0; --blue-light:#eff8ff;
  --orange:#ff5b00; --red:#ff2900; --orange-light:#fcf1ee;
  --text:#222; --text-sub:#666; --text-light:#999;
  --border:#e8e8e8; --bg:#f4f4f4;
}
body{ font-family:-apple-system,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--text); background:var(--bg); font-size:14px; line-height:1.6; }
a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.detail-imgs{ max-width:100%; }
@media (max-width:1240px){ .container{ padding:0 16px; } }

/* ---------- 顶部条 ---------- */
.topbar{ background:#f8f8f9; border-bottom:1px solid var(--border); font-size:12px; color:var(--text-sub); }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:34px; }
.topbar .links{ display:flex; gap:18px; }
.topbar .links a:hover{ color:var(--blue); }
.lang-switch{ display:flex; gap:8px; align-items:center; }
.lang-switch button{ border:1px solid var(--border); background:#fff; padding:2px 10px; border-radius:3px;
  cursor:pointer; font-size:12px; color:var(--text-sub); }
.lang-switch button.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
/* ---------- 店铺头部 ---------- */
.shop-header{ background:linear-gradient(135deg,#1a6df8 0%,#4a8cff 100%); color:#fff; padding:26px 0; }
.shop-header .wrap{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.logo-box{ width:76px; height:76px; background:#fff; border-radius:10px; display:flex;
  align-items:center; justify-content:center; font-size:26px; font-weight:800; color:var(--blue);
  box-shadow:0 4px 14px rgba(0,0,0,.15); flex-shrink:0; }
.shop-title h1{ font-size:24px; font-weight:700; letter-spacing:.5px; }
.shop-title .sub{ font-size:13px; opacity:.9; margin-top:4px; }
.shop-badges{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.badge{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  padding:3px 10px; border-radius:12px; font-size:12px; }
.shop-stats{ margin-left:auto; display:flex; gap:28px; text-align:center; }
.shop-stats .num{ font-size:22px; font-weight:700; }
.shop-stats .lbl{ font-size:12px; opacity:.85; }
/* ---------- 导航 ---------- */
.mainnav{ background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.04); }
.mainnav .wrap{ display:flex; gap:4px; overflow-x:auto; }
.mainnav a{ padding:14px 18px; font-size:15px; color:var(--text-sub); white-space:nowrap;
  border-bottom:2px solid transparent; transition:.2s; }
.mainnav a:hover{ color:var(--blue); }
.mainnav a.active{ color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }
/* ---------- 通用区块 ---------- */
.section{ background:#fff; border-radius:8px; padding:24px; margin:18px 0; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.section-title{ font-size:19px; font-weight:700; margin-bottom:18px; padding-left:12px;
  border-left:4px solid var(--blue); line-height:1.2; }
.section-title small{ font-size:13px; color:var(--text-light); font-weight:400; margin-left:8px; }
/* ---------- 公司介绍 ---------- */
.company-grid{ display:grid; grid-template-columns:1fr 320px; gap:28px; }
.company-text p{ color:var(--text-sub); margin-bottom:12px; text-align:justify; }
.company-text .en{ color:var(--text-light); font-size:13px; font-style:italic; }
.info-card{ background:var(--blue-light); border-radius:8px; padding:18px; }
.info-card h4{ font-size:14px; margin-bottom:12px; color:var(--blue); }
.info-row{ display:flex; padding:7px 0; border-bottom:1px dashed #d6e8ff; font-size:13px; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ color:var(--text-sub); width:76px; flex-shrink:0; }
.info-row .v{ color:var(--text); flex:1; }
.score-list{ margin-top:14px; }
.score-item{ display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:13px; }
.score-item .name{ width:64px; color:var(--text-sub); }
.score-bar{ flex:1; height:7px; background:#dbe9ff; border-radius:4px; overflow:hidden; }
.score-bar i{ display:block; height:100%; background:linear-gradient(90deg,#1a6df8,#4a8cff); border-radius:4px; }
.score-item .val{ width:28px; text-align:right; font-weight:600; color:var(--blue); }
/* ---------- 分类筛选 ---------- */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.filter-bar button{ padding:7px 18px; border:1px solid var(--border); background:#fff; border-radius:20px;
  cursor:pointer; font-size:13px; color:var(--text-sub); transition:.2s; }
.filter-bar button:hover{ border-color:var(--blue); color:var(--blue); }
.filter-bar button.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.filter-bar button .cnt{ opacity:.7; font-size:12px; margin-left:3px; }
/* ---------- 商品卡片 ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.product-card{ background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden;
  transition:.25s; display:flex; flex-direction:column; }
.product-card:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(26,109,248,.16);
  border-color:#bcd6ff; }
.product-card .thumb{ width:100%; aspect-ratio:1/1; background:#fafafa; overflow:hidden; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.35s; }
.product-card:hover .thumb img{ transform:scale(1.06); }
.product-card .info{ padding:12px; flex:1; display:flex; flex-direction:column; }
.product-card .title{ font-size:13px; line-height:1.45; height:38px; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:var(--text); }
.product-card .title-en{ font-size:11px; color:var(--text-light); height:16px; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; margin-top:3px; }
.product-card .price-row{ display:flex; align-items:baseline; justify-content:space-between; margin-top:10px; }
.product-card .price{ color:var(--red); font-weight:700; font-size:18px; }
.product-card .price .cur{ font-size:13px; }
.product-card .sold{ font-size:12px; color:var(--text-light); }
.product-card .moq{ font-size:12px; color:var(--text-sub); margin-top:4px; }
/* ---------- 分页 ---------- */
.pager{ display:flex; justify-content:center; gap:6px; margin:26px 0; flex-wrap:wrap; }
.pager button{ min-width:36px; height:36px; padding:0 12px; border:1px solid var(--border); background:#fff;
  border-radius:5px; cursor:pointer; font-size:13px; color:var(--text-sub); }
.pager button:hover:not(:disabled){ border-color:var(--blue); color:var(--blue); }
.pager button.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.pager button:disabled{ opacity:.4; cursor:not-allowed; }
/* ---------- 商品详情 ---------- */
.detail-grid{ display:grid; grid-template-columns:440px 1fr; gap:32px; }
.detail-img{ border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fafafa; }
.detail-info h1{ font-size:21px; line-height:1.4; margin-bottom:10px; }
.detail-info .en-title{ font-size:14px; color:var(--text-light); margin-bottom:16px; font-style:italic; }
.price-box{ background:linear-gradient(135deg,#fff5f2,#fff); border:1px solid #ffd9cc;
  border-radius:8px; padding:16px 20px; margin-bottom:18px; }
.price-box .big{ color:var(--red); font-size:32px; font-weight:800; }
.price-box .big .cur{ font-size:18px; }
.price-box .lbl{ font-size:13px; color:var(--text-sub); }
.detail-meta{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.detail-meta .row{ display:flex; }
.detail-meta .k{ width:90px; color:var(--text-sub); }
.detail-meta .v{ color:var(--text); font-weight:500; }
.btn-buy{ display:inline-block; margin-top:22px; padding:13px 42px; background:linear-gradient(135deg,#ff7a00,#ff5b00);
  color:#fff; border-radius:6px; font-size:16px; font-weight:600; box-shadow:0 4px 14px rgba(255,91,0,.3); transition:.2s; }
.btn-buy:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,91,0,.4); }
.back-link{ display:inline-block; margin-bottom:16px; color:var(--blue); font-size:14px; }
.back-link:hover{ text-decoration:underline; }
/* ---------- 页脚 ---------- */
.footer{ background:#2b2f36; color:#a8b0ba; padding:32px 0 24px; margin-top:36px; font-size:13px; }
.footer .wrap{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.footer h4{ color:#fff; font-size:15px; margin-bottom:12px; }
.footer p{ line-height:1.9; }
.footer a:hover{ color:#fff; }
.footer .copy{ grid-column:1/-1; border-top:1px solid #3d434b; padding-top:16px; margin-top:8px;
  text-align:center; font-size:12px; color:#7a828c; }
/* ---------- 语言切换（英文模式） ---------- */
body.lang-en .zh{ display:none !important; }
body.lang-zh .en{ display:none !important; }
/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .company-grid{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:1fr; }
  .shop-stats{ margin-left:0; width:100%; justify-content:space-around; }
  .footer .wrap{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .product-card .title{ font-size:12px; height:34px; }
}

/* ---------- 分类卡片 ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.cat-card{ background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden;
  text-align:center; transition:.25s; padding-bottom:12px; }
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 8px 22px rgba(26,109,248,.16); border-color:#bcd6ff; }
.cat-card .cat-img{ width:100%; aspect-ratio:1/1; overflow:hidden; background:#fafafa; }
.cat-card .cat-img img{ width:100%; height:100%; object-fit:cover; transition:.35s; }
.cat-card:hover .cat-img img{ transform:scale(1.08); }
.cat-card .cat-name{ font-size:14px; font-weight:600; margin-top:10px; color:var(--text); }
.cat-card .cat-cnt{ font-size:12px; color:var(--text-light); margin-top:2px; }
@media(max-width:900px){
  .cat-grid{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
  .cat-card .cat-name{ font-size:12px; }
}

/* 详情长图区 */
.detail-section{margin:40px 0}
.detail-section h2{
  font-size:22px;
  border-left:4px solid #1a6df8;
  padding-left:12px;
  margin-bottom:20px
}

/* 图片容器：纵向排列，完全无间隙 */
.detail-imgs{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;                /* 关键：flex 纵向无间距 */
  line-height:0;        /* 关键：干掉行内元素底部幽灵空白 */
  font-size:0;          /* 关键：干掉 HTML 换行/空格产生的字符间隙 */
}

/* 单张长图 */
.detail-imgs .detail-img{
  display:block;        /* 退出 inline，避免 baseline 底部留白 */
  width:100%;
  height:auto;
  margin:0;             /* 清掉所有外边距 */
  padding:0;
  border:0;
  border-radius:0;      /* 不要圆角 */
  background:#f5f5f5;
  vertical-align:top;   /* 双保险：防基线对齐缝隙 */
}

/* 详情页画廊 */
.detail-wrap{display:flex;gap:32px;margin:24px 0;flex-wrap:wrap}
.gallery{flex:0 0 560px;max-width:100%}
.gallery-main-box{position:relative;border:1px solid #eee;border-radius:8px;overflow:hidden;background:#fff}
.gallery-main{width:100%;display:block;aspect-ratio:1;object-fit:cover}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:26px;cursor:pointer;opacity:0;transition:.2s}
.gallery-main-box:hover .gnav{opacity:1}
.gprev{left:12px}.gnext{right:12px}
.gcount{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.5);color:#fff;padding:2px 10px;border-radius:12px;font-size:13px}
.gthumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.gthumb{width:72px;height:72px;object-fit:cover;border:2px solid transparent;border-radius:6px;cursor:pointer;flex:0 0 auto}
.gthumb.active{border-color:#1a6df8}
.buy-box{flex:1;min-width:300px;background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.p-title{font-size:20px;line-height:1.5;margin-bottom:16px}
.p-price{color:#ff5000;font-size:16px;background:#fff5ef;padding:12px 16px;border-radius:6px;margin-bottom:16px}
.p-price b{font-size:28px}
.p-meta{display:flex;gap:20px;color:#666;font-size:14px;margin-bottom:16px}
.p-attrs{color:#666;font-size:14px;line-height:2;margin-bottom:20px;border-top:1px dashed #eee;padding-top:12px}
.buy-btn{display:inline-block;background:#1a6df8;color:#fff;padding:12px 40px;border-radius:24px;text-decoration:none;font-size:16px}
.buy-btn:hover{background:#0f5ce0}
.breadcrumb{color:#999;font-size:13px;margin:16px 0}
.breadcrumb a{color:#666;text-decoration:none}