/* ============================================================
   Sourmo · SEO 商品/列表页样式（v2 视觉升级）
   只改视觉，不动任何 class 名与 DOM 结构；18 万页共用本文件。
   ============================================================ */
:root{
  /* 主色：1688 橙；强调：橙红；底：浅灰 */
  --mai:#E23C00;
  --mai-2:#FF6A00;
  --accent:#FF4400;
  --accent-soft:#FFF3EC;
  --bg:#F5F5F5;
  --card:#FFFFFF;
  --bd:#EFEFEF;
  --bd-soft:#F4F4F4;
  --tx:#1F1F1F;
  --tx-2:#3A3A3A;
  --mut:#6B6B6B;
  --shadow-1:0 1px 2px rgba(18,24,21,.04), 0 1px 3px rgba(18,24,21,.03);
  --shadow-2:0 2px 6px rgba(18,24,21,.05), 0 14px 34px -14px rgba(255,80,0,.16);
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --ease:cubic-bezier(.22,.72,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei","Noto Sans Thai",sans-serif;
  background:var(--bg);color:var(--tx);line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
a{color:var(--mai);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--accent)}
img{max-width:100%}
::selection{background:#FFE8DC;color:#B33A00}

/* ---------- 顶栏：墨绿渐变 + 细分隔线 + 药丸 CTA ---------- */
.hd{
  background:#FFFFFF;
  color:#1F1F1F;position:relative;
  border-bottom:1px solid #EFEFEF;
  box-shadow:none;
}
.hd::after{display:none}
.hd-in{max-width:1140px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-weight:800;font-size:19px;letter-spacing:-.015em;color:#FF5000;display:inline-flex;align-items:center;gap:9px}
.brand::before{
  content:"";width:9px;height:9px;border-radius:3px;background:#FF5000;
  box-shadow:0 0 0 4px rgba(255,80,0,.16);
}
.brand span{color:#E23C00;font-weight:700}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{color:#444444;font-size:13.5px;letter-spacing:.01em;position:relative}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:#FF5000;
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav a:hover{color:#FF5000}
.nav a:hover::after{transform:scaleX(1)}
.nav-cta{
  background:linear-gradient(90deg,#FF5000,#FF7A18);color:#fff!important;padding:9px 18px;border-radius:999px;
  font-weight:700;font-size:13px;letter-spacing:.01em;
  box-shadow:0 6px 16px -10px rgba(255,68,0,.6);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.nav-cta:hover{background:linear-gradient(90deg,#F04600,#F06A00);transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}

/* ---------- 面包屑 ---------- */
.bc{max-width:1140px;margin:0 auto;padding:14px 20px 0;font-size:12px;color:var(--mut);letter-spacing:.02em}
.bc a{color:var(--mut)}
.bc a:hover{color:var(--mai)}


/* ---------- 列表页标题带 ---------- */
.kbar{
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 100%);
  border-bottom:1px solid var(--bd);
}
.kin{max-width:1140px;margin:0 auto;padding:30px 20px 24px}
.kbar h1{font-size:clamp(23px,2.6vw,31px);margin:0 0 10px;letter-spacing:-.02em}
.kbar .lead{margin:0 0 16px;max-width:780px;font-size:14px;color:var(--mut)}
.kmeta{display:flex;flex-wrap:wrap;gap:8px}
.kmeta span{
  font-size:11.8px;color:#4A4A4A;background:#FAFAFA;border:1px solid var(--bd);
  border-radius:999px;padding:5px 12px;letter-spacing:.01em;
}
.kmeta .km-a{background:var(--mai);color:#fff;border-color:var(--mai);font-weight:700}

/* ---------- 容器 ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:20px 20px 56px}

/* ---------- 主卡片 ---------- */
.item{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-1);
  animation:rise .5s var(--ease) both;
}
.item-top{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:30px}
@media(max-width:860px){.item-top{grid-template-columns:1fr;gap:20px}.item{padding:18px}}

/* ---------- 图集：主图 + 一行缩略条（比 4 列网格更整齐） ---------- */
.gal{display:flex;flex-wrap:wrap;gap:8px}
.gal a{display:block;background:#F7F7F7;border-radius:var(--r-sm);overflow:hidden;position:relative}
.gal a::after{
  content:"";position:absolute;inset:0;box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;
  border-radius:inherit;pointer-events:none;
}
.gal-main{flex:0 0 100%}
.gal a:not(.gal-main){flex:1 1 0;min-width:56px;max-width:150px}
.gal img{
  width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1;
  transition:transform .55s var(--ease),filter .4s var(--ease);
}
.gal-main img{aspect-ratio:4/3}
.gal a:hover img{transform:scale(1.035)}

/* ---------- 标题与价格 ---------- */
h1{font-size:22px;line-height:1.34;margin-bottom:8px;font-weight:750;letter-spacing:-.015em;text-wrap:pretty}
.zh{font-size:12.5px;color:var(--mut);margin-bottom:14px;letter-spacing:.01em}
.price{
  font-size:27px;color:var(--accent);margin:6px 0 12px;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.price span{font-size:12.5px;color:var(--mut);font-weight:500;letter-spacing:0}

/* ---------- 要点列表 ---------- */
.facts{list-style:none;margin:14px 0;font-size:14px;color:var(--tx-2)}
.facts li{padding:7px 0;border-bottom:1px solid var(--bd-soft)}
.facts li:last-child{border-bottom:none}
.facts b{color:var(--tx);font-weight:650}

/* ---------- 按钮 ---------- */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 14px}
.cta{
  background:linear-gradient(135deg,#25D366,#0FB861);color:#fff!important;
  padding:12px 22px;border-radius:var(--r-md);font-weight:700;font-size:14.5px;
  box-shadow:0 8px 20px -10px rgba(6,199,85,.75);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),filter .2s var(--ease);
}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(6,199,85,.8);filter:saturate(1.06)}
.cta:active{transform:translateY(0) scale(.99)}
.cta2{
  background:#fff;color:var(--mai)!important;border:1px solid var(--bd);
  padding:12px 20px;border-radius:var(--r-md);font-weight:650;font-size:14.5px;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.cta2:hover{border-color:#FF9C6E;background:#FFF7F3;transform:translateY(-1px)}
.idline{font-size:12px;color:var(--mut);letter-spacing:.02em}
.idline code{background:#F4F4F4;padding:2px 6px;border-radius:5px;font-size:11.5px;color:#4A4A4A}

/* ---------- 小标题 / 正文 ---------- */
h2{font-size:17px;margin:26px 0 10px;font-weight:750;letter-spacing:-.01em;position:relative;padding-left:12px}
h2::before{
  content:"";position:absolute;left:0;top:.42em;width:3px;height:.9em;border-radius:2px;
  background:linear-gradient(180deg,#FF5000,#FFA05C);
}
.lead{color:var(--mut);margin:8px 0 18px;font-size:14.5px}
.subnav{margin:10px 0 16px;font-size:13px;line-height:2.1;color:var(--tx-2)}
.subnav a{border-bottom:1px solid transparent}
.subnav a:hover{border-bottom-color:#FFC7AC}

/* ---------- 规格表 ---------- */
.spec{width:100%;border-collapse:collapse;font-size:13.5px}
.spec th{
  text-align:left;color:var(--mut);width:34%;font-weight:600;padding:9px 12px;
  border-bottom:1px solid var(--bd-soft);vertical-align:top;background:#FCFBF8;
}
.spec td{padding:9px 12px;border-bottom:1px solid var(--bd-soft);color:var(--tx-2)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}

/* ---------- 卡片网格（同类推荐） ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px;margin-top:12px}
.card{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:9px;
  display:block;box-shadow:var(--shadow-1);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
  animation:rise .48s var(--ease) both;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#FFD3BE}
.card-img{display:block;background:#F7F7F7;border-radius:9px;overflow:hidden}
.card-img img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.card:hover .card-img img{transform:scale(1.045)}
.card-t{
  font-size:12.5px;color:var(--tx-2);margin:9px 0 5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.9em;transition:color .2s var(--ease);
}
.card:hover .card-t{color:var(--tx)}
.card-p{
  display:block;font-size:13.5px;color:var(--accent);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.card-p em{font-style:normal;color:var(--mut);font-weight:500;font-size:11.5px;letter-spacing:0}
/* 入场错峰：前 12 张依次浮现 */
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.05s}
.card:nth-child(3){animation-delay:.08s}.card:nth-child(4){animation-delay:.11s}
.card:nth-child(5){animation-delay:.14s}.card:nth-child(6){animation-delay:.17s}
.card:nth-child(7){animation-delay:.2s}.card:nth-child(8){animation-delay:.23s}
.card:nth-child(n+9){animation-delay:.26s}

/* ---------- 分页 ---------- */
.pag{margin:22px 0;font-size:13.5px}
.pag a,.pag .cur{
  padding:7px 13px;border:1px solid var(--bd);border-radius:9px;margin-right:5px;
  background:#fff;display:inline-block;margin-bottom:6px;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
  font-variant-numeric:tabular-nums;
}
.pag a:hover{border-color:var(--mai-2);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.pag .cur{background:var(--mai);color:#fff;border-color:var(--mai);font-weight:650}

/* ---------- FAQ ---------- */
.faq dt{font-weight:700;margin-top:12px;font-size:14px;color:var(--tx)}
.faq dd{color:var(--tx-2);font-size:13.8px;margin-left:0;margin-top:3px}

/* ---------- SEO 说明块 ---------- */
.seonote{
  margin-top:22px;padding:14px 16px;background:#FFF7F3;border-left:3px solid #FF6A00;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px;color:var(--tx-2);
}

/* ---------- 页脚 ---------- */
.ft{background:#F7F7F7;border-top:1px solid #EDEDED;color:#666;margin-top:36px}
.ft-in{max-width:1140px;margin:0 auto;padding:26px 20px;font-size:12.5px;line-height:1.9}
.ft-line{margin-bottom:8px}
.ft-links a{color:#444;transition:color .2s var(--ease)}
.ft-links a:hover{color:#FF5000}
.ft-note{margin-top:8px;color:#8A8A8A}

/* ---------- 动效 ---------- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* 已移除 animation-timeline 淡入：进度算不出来时卡片会一直 opacity:0 */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .card:hover,.cta:hover,.cta2:hover,.pag a:hover{transform:none}
}
@media (max-width:520px){
  h1{font-size:19px}
  .price{font-size:23px}
  .cta,.cta2{flex:1 1 auto;text-align:center}
  .grid-cards{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
}