/* ══════════════════════════════════════════
   质方生物官网前端 v5
   企业色：深灰 #1e2530 + 蓝绿点缀 #00a896
   去除所有 Emoji，保留圆角卡片风格
══════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
:root {
  /* 主色：深灰 */
  --c:    #1a3a6b;
  --c3:   #2d6abf;   /* 卡片分类标签色 */
  --c2:   #15306b;   /* 深一档，hover用 */
  /* 点缀色：蓝绿 */
  --ac:   #1a3a6b;
  --ac2:  #15306b;   /* 深蓝深，hover用 */
  --acl:  #e8edf8;   /* 深蓝浅背景 */
  --acl2: #c5d3ee;   /* 深蓝浅边框 */
  /* 中性色 */
  --bg:   #f4f6fa;
  --w:    #ffffff;
  --ink:  #111827;
  --ink2: #374151;
  --ink3: #6b7280;
  --bd:   rgba(0,0,0,0.07);
  --bd2:  rgba(0,0,0,0.12);
  /* 尺寸 */
  --r:    8px;
  --max:  1440px;
}
html { scroll-behavior: smooth }
body {
  font-family: "PingFang SC","Noto Sans SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit }
img { max-width: 100%; display: block }
button { cursor: pointer; font-family: inherit }

/* ══ HEADER ══ */
.header {
  background: var(--w);
  border-bottom: 1px solid var(--bd2);
  position: sticky; top: 0; z-index: 200;
}
.header-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0 28px; height: 72px;
  display: flex; align-items: center;
  justify-content: center; gap: 24px;
  position: relative;
}
/* Logo 区域：图片 + 竖线 + 文字 */
.logo {
  display: flex; align-items: center;
  gap: 14px; cursor: pointer; flex-shrink: 0;
  text-decoration: none;
}
.logo-img { height: 44px; width: auto; flex-shrink: 0; align-self: center }
.logo-divider {
  width: 2px;
  background: #d0d5dd;
  flex-shrink: 0;
  align-self: stretch;
}
.logo-text {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
}
.logo-name {
  font-size: 17px; font-weight: 600;
  color: var(--ink); white-space: nowrap; line-height: 1.2;
}
.logo-name-en {
  font-size: 13px; color: var(--ink3);
  white-space: nowrap; line-height: 1.2;
  letter-spacing: 0.02em;
}
.logo-placeholder {
  height: 40px; width: 130px;
  background: var(--c);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6);
  letter-spacing: 0.15em;
}

/* 搜索框 */
.search-box {
  display: flex; width: 380px; flex-shrink: 0;
  border: 1.5px solid var(--c); border-radius: var(--r); overflow: hidden;
}
.search-box input {
  flex: 1; padding: 9px 16px;
  border: none; outline: none;
  font-size: 14px; font-family: inherit;
  background: #fff; color: var(--ink);
}
.search-box input::placeholder { color: #bbb }
.search-clear-btn {
  background: #fff; color: #999;
  border: none; border-left: 1px solid #e5e7eb;
  padding: 0 12px; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  transition: color .15s;
}
.search-clear-btn:hover { color: var(--ink) }
.search-btn {
  background: var(--c); color: #fff;
  border: none; padding: 0 22px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap; transition: background .15s;
  display: flex; align-items: center; gap: 7px;
}
.search-btn:hover { background: var(--c2) }
.search-btn svg { flex-shrink: 0 }

/* 手机汉堡 */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 4px;
  position: absolute; right: 16px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px }
.mm { display: none; background: #fff; border-bottom: 1px solid var(--bd) }
.mm.open { display: block }
.mm a { display: block; padding: 13px 20px; font-size: 14px; color: var(--ink2); border-bottom: .5px solid var(--bd) }
.mm .mph { color: var(--ac); font-weight: 600 }

/* ══ BANNER ══ */
.banner-wrap { max-width: var(--max); margin: 16px auto 0; padding: 0 28px }
.banner-box {
  position: relative; overflow: hidden;
  border-radius: var(--r); height: 360px;
  background: var(--c);
}
.banner-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.4,0,.2,1) }
.banner-slide {
  flex-shrink: 0; width: 100%; height: 100%;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
/* Banner 背景（深灰系渐变，统一调性） */
.bs-1 { background: linear-gradient(130deg, #0f2347 0%, #1a3a6b 55%, #1e4d8c 100%) }
.bs-2 { background: linear-gradient(130deg, #0c2a4a 0%, #1a5276 55%, #0d3d6b 100%) }
.bs-3 { background: linear-gradient(130deg, #1a2a0a 0%, #2d4a1a 55%, #1e3d10 100%) }
.bs-4 { background: linear-gradient(130deg, #1a0a2a 0%, #3d1a5e 55%, #2a0d4a 100%) }

.slide-inner { padding: 0 60px; max-width: 580px; position: relative; z-index: 2 }
.slide-kicker {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.25);
  padding: 4px 14px; border-radius: var(--r);
  margin-bottom: 18px;
}
.slide-title {
  font-size: 36px; font-weight: 700; color: #fff;
  line-height: 1.22; letter-spacing: -.01em;
  margin-bottom: 12px; white-space: pre-line;
}
.slide-sub {
  font-size: 15px; color: rgba(255,255,255,.55);
  line-height: 1.75; margin-bottom: 28px; white-space: pre-line;
}
.slide-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--c);
  padding: 11px 28px; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  border: none; font-family: inherit; transition: background .15s;
}
.slide-cta:hover { opacity: .88 }

/* Banner 右侧几何装饰（替代 Emoji） */
.slide-deco {
  position: absolute; right: 0; top: 0; bottom: 0; width: 300px;
  pointer-events: none; overflow: hidden;
}
.slide-deco::before,
.slide-deco::after {
  content: '';
  position: absolute; top: 50%; right: 60px;
  border-radius: 50%; transform: translateY(-50%);
}
.slide-deco::before {
  width: 200px; height: 200px;
  border: 1px solid rgba(0,168,150,.15);
}
.slide-deco::after {
  width: 300px; height: 300px;
  border: 1px solid rgba(0,168,150,.08);
}

/* Banner 控件 */
.b-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10 }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; transition: all .22s }
.dot.on { background: #fff; width: 20px; border-radius: 3px }
.b-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: rgba(255,255,255,.8); transition: background .15s;
}
.b-arr:hover { background: rgba(255,255,255,.18) }
.b-prev { left: 14px }
.b-next { right: 14px }

/* ══ SHOP BODY ══ */
.shop-body {
  max-width: var(--max); margin: 14px auto 56px;
  padding: 0 28px;
  display: grid; grid-template-columns: 196px 1fr;
  gap: 14px; align-items: start;
  flex: 1;
  width: 100%;
}

/* ── 左侧分类导航 ── */
.sidebar {
  background: var(--w); border: 1px solid var(--bd);
  border-radius: var(--r); overflow: hidden;
  position: sticky; top: 78px;
}
.sb-head {
  font-size: 12px; font-weight: 700;
  color: #fff; background: var(--c);
  padding: 11px 14px;
  letter-spacing: .06em; text-transform: uppercase;
}
.sb-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; cursor: pointer;
  font-size: 13px; color: var(--ink2);
  border-bottom: 1px solid var(--bd);
  transition: background .12s;
  border-left: 2px solid transparent;
}
.sb-item:last-of-type { border-bottom: none }
.sb-item:hover { background: var(--acl) }
.sb-item.on { background: var(--acl); color: var(--ac2); font-weight: 600; border-left-color: var(--ac) }
.sb-row { display: flex; align-items: center; gap: 8px }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bd2); flex-shrink: 0; transition: background .12s }
.sb-item.on .sb-dot { background: var(--ac) }
.sb-item:hover .sb-dot { background: var(--ac2) }
.sb-cnt {
  font-size: 11px; padding: 1px 7px;
  border-radius: 10px; background: rgba(0,0,0,.05);
  color: var(--ink3); flex-shrink: 0;
}
.sb-item.on .sb-cnt { background: var(--acl2); color: var(--ac2) }
.sb-filter-head {
  font-size: 11px; font-weight: 600; color: var(--ink3);
  padding: 9px 14px 6px;
  border-top: 3px solid var(--bg); border-bottom: 1px solid var(--bd);
  letter-spacing: .06em; text-transform: uppercase;
  background: #fafafa;
}
.fopt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 13px; color: var(--ink2);
  cursor: pointer; border-bottom: 1px solid var(--bd);
}
.fopt:last-child { border-bottom: none }
.fopt input { accent-color: var(--ac); width: 13px; height: 13px }

/* ── 右侧商品区 ── */
.shop-main { min-width: 0 }
.list-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--w); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 10px 16px;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.list-count { font-size: 13px; color: var(--ink3) }
.list-bar-left { display: flex; align-items: center; gap: 10px }
/* 分类筛选按钮：PC端隐藏，手机端显示 */
.filter-toggle-btn {
  display: none;
  align-items: center; gap: 6px;
  padding: 6px 13px;
  border: 1.5px solid var(--c);
  border-radius: var(--r);
  background: #fff; color: var(--c);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.filter-toggle-btn:hover { background: var(--acl) }
.filter-toggle-btn.active { background: var(--c); color: #fff }
.list-count strong { color: var(--ink); font-weight: 600 }
.bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.srow { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink3) }
.sbtn {
  padding: 4px 12px; border: 1px solid var(--bd2);
  border-radius: var(--r); background: #fff;
  font-size: 13px; color: var(--ink2); transition: all .12s;
}
.sbtn.on { background: var(--c); color: #fff; border-color: var(--c) }
.lrow { display: flex; gap: 3px }
.lbtn {
  width: 28px; height: 28px; border: 1px solid var(--bd2);
  border-radius: var(--r); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink3); transition: all .12s;
}
.lbtn.on { background: var(--c); color: #fff; border-color: var(--c) }

/* ── 商品网格 ── */
.pgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px }
.pgrid.lv { grid-template-columns: 1fr }
.skeleton { height: 300px; border-radius: var(--r); background: linear-gradient(90deg,#eee 25%,#e4e4e4 50%,#eee 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── 商品卡片 ── */
.pcard {
  background: var(--w); border: 1px solid var(--bd);
  border-radius: var(--r); overflow: hidden;
  cursor: pointer; transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.pcard:hover { box-shadow: 0 4px 20px rgba(26,58,107,.12); transform: translateY(-2px) }

/* 产品图片区：无图时显示专业线框占位 */
.pc-img {
  width: 100%; aspect-ratio: 1/1;
  background: #f0f3f8;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--bd);
}
.pc-img img { width: 100%; height: 100%; object-fit: cover }
.pc-img-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(145deg, #eef2f9 0%, #e4eaf5 100%);
}
.pc-img-ph-icon {
  width: 48px; height: 48px;
  border: 1.5px solid rgba(26,58,107,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pc-img-ph-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--c); stroke-width: 1.5; opacity: .4 }
.pc-img-ph span { font-size: 11px; color: var(--ink3); opacity: .55; letter-spacing: .04em }

/* 徽章 */
.pc-badge { position: absolute; top: 0; left: 0; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 0 0 var(--r) 0 }
.bn { background: var(--c); color: #fff }
.bh { background: #c0392b; color: #fff }
.bc2 { background: var(--c); color: #fff }

/* 卡片内容 */
.pc-body { padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1 }
.pc-sku { font-size: 11px; color: #bbb; font-family: "SF Mono","Menlo",monospace; margin-bottom: 4px }
.pc-cat { font-size: 11px; color: var(--c3); font-weight: 600; letter-spacing: .04em; margin-bottom: 4px }
.pc-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pc-desc { font-size: 12px; color: var(--ink3); line-height: 1.65; margin-bottom: 8px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px }
.pc-tag { font-size: 10px; padding: 2px 7px; border-radius: 2px; background: var(--acl); color: var(--c); font-weight: 500; border: 1px solid var(--acl2) }
.pc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--bd) }
.pc-cta {
  font-size: 12px; font-weight: 600; color: var(--c);
  background: var(--acl); border: 1px solid var(--acl2);
  padding: 5px 13px; border-radius: 2px;
  white-space: nowrap; transition: all .12s;
}
.pc-cta:hover { background: var(--c); color: #fff; border-color: var(--c) }
.pc-more { font-size: 12px; color: #bbb; transition: color .12s }
.pc-more:hover { color: var(--ac) }

/* 列表视图 */
.pgrid.lv .pcard { flex-direction: row; height: 120px }
.pgrid.lv .pc-img { width: 120px; height: 120px; aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--bd); border-radius: var(--r) 0 0 var(--r); flex-shrink: 0 }
.pgrid.lv .pc-body { flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px }
.pgrid.lv .pc-desc { display: none }
.pgrid.lv .pc-info { flex: 1; min-width: 0 }
.pgrid.lv .pc-tags { margin-bottom: 0 }
.pgrid.lv .pc-foot { border-top: none; padding-top: 0; border-left: 1px solid var(--bd); padding-left: 16px; flex-direction: column; gap: 8px; align-items: flex-start; flex-shrink: 0; width: 120px }

/* 分页 */
.pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; padding-bottom: 4px }
.pg { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--bd); border-radius: var(--r); background: #fff; font-size: 13px; color: var(--ink2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; font-family: inherit }
.pg:hover { border-color: var(--ac); color: var(--ac) }
.pg.on { background: var(--c); color: #fff; border-color: var(--c) }
.pg.dis { opacity: .3; cursor: default; pointer-events: none }

/* ══ 产品详情页 ══ */
.detail-view { display: none; padding-bottom: 48px }
.back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink3); background: none; border: none; padding: 14px 0; transition: color .15s }
.back-btn:hover { color: var(--ac) }
.dt-card { background: #fff; border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden }
.dt-top { display: grid; grid-template-columns: 320px 1fr; gap: 0; align-items: stretch }
.dt-img-col { padding: 28px; border-right: 1px solid var(--bd); display: flex; flex-direction: column; gap: 14px; background: #fafbfc; height: 100% }
.dt-img { border: 1px solid var(--bd); border-radius: var(--r); background: #f0f2f5; aspect-ratio: 1/1; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden }
.dt-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; cursor: zoom-in; transition: opacity .15s }
.dt-img img:hover { opacity: .88 }
.dt-img-zoom-hint { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .2s }
.dt-img:hover .dt-img-zoom-hint { opacity: 1 }

/* 灯箱 */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 1000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity .25s }
.lightbox.on { opacity: 1; pointer-events: auto }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--r); box-shadow: 0 8px 48px rgba(0,0,0,.5); transform: scale(.92); transition: transform .25s }
.lightbox.on img { transform: scale(1) }
.lightbox-close { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.12); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s }
.lightbox-close:hover { background: rgba(255,255,255,.25) }
.dt-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg,#f0f3f8,#e8ecf5) }
.dt-img-ph svg { opacity: .2 }
.dt-badge-pos { position: absolute; top: 0; left: 0; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 0 0 var(--r) 0 }
.pdf-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ac); background: #fff; border: 1px solid var(--bd2); padding: 9px 16px; border-radius: var(--r); transition: all .15s }
.pdf-btn:hover { background: var(--acl); border-color: var(--ac) }
.dt-info { padding: 32px 36px }
.dt-cat { font-size: 11px; color: var(--ac2); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px }
.dt-name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); margin-bottom: 8px }
.dt-sku { font-size: 12px; color: #bbb; font-family: monospace; padding-bottom: 16px; border-bottom: 1px solid var(--bd); margin-bottom: 16px }
.dt-desc { font-size: 14px; color: var(--ink2); line-height: 1.9; margin-bottom: 20px }
.dt-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px }
.dt-tag { font-size: 12px; padding: 4px 12px; border-radius: var(--r); background: var(--acl); color: var(--c); font-weight: 500; border: 1px solid var(--acl2) }
.cbox { background: var(--acl); border: 1px solid var(--acl2); border-radius: var(--r); padding: 20px 22px }
.cbox-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px }
.cbox-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.cb1, .cb2 {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--c);
  border: 1.5px solid #c5d3ee;
  padding: 10px 24px; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: all .18s;
  user-select: none;
}
.cb1:hover, .cb2:hover { border-color: #1a3a6b; background: #e8edf8 }
.cb1.active, .cb2.active { background: var(--c); color: #fff; border-color: var(--c) }
.cbox-sub { font-size: 12px; color: var(--ink3) }
.cbox-sub a { color: var(--ac); font-weight: 500; cursor: pointer }
.spec-wrap { padding: 0 28px 24px }
.spec-head { font-size: 13px; font-weight: 600; color: var(--ink); padding: 18px 0 12px; border-bottom: 1px solid var(--bd) }
.spec-tbl { width: 100%; border-collapse: collapse; font-size: 13px }
.spec-tbl tr { border-bottom: 1px solid var(--bd) }
.spec-tbl tr:last-child { border-bottom: none }
.spec-tbl td { padding: 10px 14px }
.spec-tbl td:first-child { color: var(--ink3); width: 28%; background: #fafbfc; font-weight: 500 }
.spec-tbl td:last-child { color: var(--ink) }
.rel-wrap { padding: 0 28px 28px }
.rel-head { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px }
.rel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px }
.rc { background: #fff; border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: box-shadow .15s }
.rc:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1) }
.rc-img { aspect-ratio: 1/1; background: #f0f2f5; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--bd) }
.rc-img svg { opacity: .25 }
.rc-body { padding: 8px 10px }
.rc-name { font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.rc-cat { font-size: 11px; color: var(--ink3); margin-top: 2px }

/* ══ FOOTER：仅备案号 ══ */
.footer { background: #1a3a6b; padding: 20px 28px; text-align: center }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.35); line-height: 1.8 }
.footer-copy a { color: rgba(255,255,255,.45); transition: color .15s }
.footer-copy a:hover { color: rgba(255,255,255,.8) }

/* ══ Toast ══ */
.toast { position: fixed; bottom: 28px; right: 28px; background: var(--c); color: #fff; padding: 11px 22px; border-radius: var(--r); font-size: 13px; z-index: 999; transform: translateY(80px); opacity: 0; transition: all .3s; pointer-events: none }
.toast.show { transform: translateY(0); opacity: 1 }

/* ══ 响应式 ══ */
@media(max-width:1200px) { .pgrid { grid-template-columns: repeat(3,1fr) } }
@media(max-width:960px) {
  .hamburger { display: none }
  .shop-body { grid-template-columns: 1fr }
  .filter-toggle-btn { display: inline-flex }
  /* 手机端侧边栏：折叠面板形式，展开时在商品列表上方 */
  .sidebar { display: none; position: static }
  .sidebar.open {
    display: block;
    border-radius: var(--r);
    margin-bottom: 12px;
    border: 1.5px solid var(--c);
    animation: slideDown .2s ease;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px) }
    to   { opacity: 1; transform: translateY(0) }
  }
  .banner-box { height: 260px }
  .slide-title { font-size: 26px }
  .dt-top { grid-template-columns: 1fr }
  .dt-img-col { border-right: none; border-bottom: 1px solid var(--bd) }
  .rel-grid { grid-template-columns: repeat(3,1fr) }
}
@media(max-width:640px) {
  .header-inner { justify-content: center; padding: 0 14px; gap: 10px }
  .logo-name, .logo-name-en { display: none }
  .logo-divider { display: block }
  .logo-img { height: 36px }
  .search-box { width: auto; flex: 1; min-width: 0 }
  .search-box input { min-width: 0; width: 0 }
  .search-clear-btn { display: none }
  .search-btn { padding: 0 16px; font-size: 13px }
  .hamburger { display: none !important }
  .banner-wrap, .shop-body { padding-left: 14px; padding-right: 14px }
  .banner-box { height: 190px }
  .slide-inner { padding: 0 20px }
  .slide-title { font-size: 19px }
  .slide-sub { display: none }
  .slide-deco { display: none }
  .pgrid { grid-template-columns: repeat(2,1fr); gap: 8px }
  .pgrid.lv { grid-template-columns: 1fr }
  .rel-grid { grid-template-columns: repeat(2,1fr) }
  .list-bar { flex-direction: column; align-items: flex-start }
  .dt-info { padding: 18px }
  .spec-wrap, .rel-wrap { padding-left: 18px; padding-right: 18px }
  .cbox-btns { flex-direction: column }
  .cb1, .cb2 { justify-content: center }
}