/* ============================================================
   旺德福 · 商品列表页 / 商品详情页
   设计依据：《wonderfulgov产品列表页模板.html》《wonderfulgov产品详情页模板.html》
   色板：深墨绿 #1B3A2F / 中绿 #2D5A47 / 点缀金 #C9A96E / 暖白 #FAF9F6
        暖米 #F5F3EE / 浅绿 #F1F4F0 / 正文 #2C2C2C / 次要 #6B6B6B / 描边 #E0DDD5
   ============================================================ */

:root{
  --wf-ink:#1B3A2F;
  --wf-green:#2D5A47;
  --wf-gold:#C9A96E;
  --wf-cream:#FAF9F6;
  --wf-warm:#F5F3EE;
  --wf-mist:#F1F4F0;
  --wf-text:#2C2C2C;
  --wf-muted:#6B6B6B;
  --wf-line:#E0DDD5;
  --wf-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
            "Microsoft YaHei","Noto Sans SC",sans-serif;
}

/* ---------- 基础容器 ---------- */
.wf-shop,
.wf-single{
  font-family:var(--wf-font);color:var(--wf-text);line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.wf-shop *,.wf-single *{box-sizing:border-box;}
.wf-shop a,.wf-single a{text-decoration:none;}

.wf-c{
  max-width:1200px;margin:0 auto;padding:0 24px;
}

/* ---------- 面包屑 ---------- */
.wf-crumb{
  background:var(--wf-warm);border-bottom:1px solid var(--wf-line);
}
.wf-crumb .wf-c{
  font-size:13px;color:var(--wf-muted);letter-spacing:.02em;
  padding-top:13px;padding-bottom:13px;line-height:1.7;
}
.wf-crumb a{color:var(--wf-muted);transition:color .2s ease;}
.wf-crumb a:hover{color:var(--wf-gold);}
.wf-crumb .wf-sep{margin:0 9px;color:#BEB8AA;}
.wf-crumb .wf-here{color:var(--wf-ink);}

/* ---------- 页头 ---------- */
.wf-cathead{
  position:relative;overflow:hidden;background:var(--wf-cream);
  padding:52px 0 48px;
}
.wf-cathead::after{
  content:"";position:absolute;right:-110px;top:-330px;width:460px;height:460px;
  border-radius:50%;border:1px solid rgba(201,169,110,.22);pointer-events:none;
}
.wf-cathead::before{
  content:"";position:absolute;right:-40px;top:-250px;width:260px;height:260px;
  border-radius:50%;background:rgba(201,169,110,.06);pointer-events:none;
}
.wf-cathead .wf-c{position:relative;z-index:2;}
.wf-eyebrow{
  color:var(--wf-gold);font-size:12px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;line-height:1.5;margin:0 0 16px;
}
.wf-cathead h1{
  margin:0 0 16px;color:var(--wf-ink);font-size:40px;font-weight:700;line-height:1.28;
  letter-spacing:.01em;
}
.wf-cathead .wf-lead{
  margin:0;color:var(--wf-muted);font-size:16px;line-height:1.95;max-width:780px;
}
.wf-cathead .wf-rule{width:56px;height:2px;background:var(--wf-gold);margin:26px 0 0;}

/* ---------- 两栏 ---------- */
.wf-layout{
  display:flex;align-items:flex-start;gap:44px;
  padding:44px 0 64px;
}
.wf-layout>.wf-c{display:flex;align-items:flex-start;gap:44px;width:100%;}
.wf-side{
  flex:0 0 220px;max-width:220px;
  position:sticky;top:86px;
}
.wf-side h2{
  margin:0 0 14px;color:var(--wf-ink);font-size:15px;font-weight:700;
  letter-spacing:.1em;padding-bottom:11px;border-bottom:2px solid var(--wf-gold);
}
.wf-tree,.wf-tree ul{list-style:none;margin:0;padding:0;}
.wf-tree a{
  display:block;transition:all .2s ease;text-decoration:none;
}
.wf-tree>.wf-g{margin:0 0 6px;}
.wf-tree .wf-l1{
  font-size:14px;font-weight:700;color:var(--wf-ink);padding:11px 0 8px;
  border-bottom:1px solid #EDE9DF;letter-spacing:.02em;
}
.wf-tree .wf-l1:hover{color:var(--wf-gold);}
.wf-tree .wf-l2{
  font-size:13px;color:var(--wf-muted);padding:6px 0 6px 14px;
  border-left:2px solid #EDE9DF;line-height:1.5;
}
.wf-tree .wf-l2:hover{color:var(--wf-gold);border-left-color:var(--wf-gold);padding-left:18px;}
.wf-tree .is-here{color:var(--wf-gold);border-left-color:var(--wf-gold);font-weight:600;}
.wf-tree .wf-l1.is-here{border-bottom-color:var(--wf-gold);}
.wf-side .wf-side-cta{
  display:block;margin:22px 0 0;padding:13px 16px;text-align:center;
  border:1px solid var(--wf-line);border-radius:3px;background:#FFFFFF;
  color:var(--wf-ink);font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:all .24s ease;
}
.wf-side .wf-side-cta:hover{background:var(--wf-ink);border-color:var(--wf-ink);color:#FFFFFF;}

.wf-main{flex:1 1 0;min-width:0;}

/* ---------- 工具条 ---------- */
.wf-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 24px;padding:0 0 14px;
  border-bottom:1px solid var(--wf-line);
}
.wf-bar .wf-count{color:var(--wf-muted);font-size:13px;letter-spacing:.02em;}
.wf-bar .wf-count b{color:var(--wf-ink);font-weight:700;}
.wf-bar form{margin:0;}
.wf-bar select{
  appearance:none;-webkit-appearance:none;font-family:var(--wf-font);
  font-size:13px;color:var(--wf-ink);background:#FFFFFF;border:1px solid var(--wf-line);
  border-radius:3px;padding:8px 34px 8px 12px;cursor:pointer;line-height:1.4;
  background-image:linear-gradient(45deg,transparent 50%,var(--wf-muted) 50%),
                   linear-gradient(135deg,var(--wf-muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 15px,calc(100% - 12px) 15px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.wf-bar select:hover{border-color:var(--wf-gold);}

/* ---------- 商品网格 ---------- */
.wf-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}

.wf-prod{
  display:flex;flex-direction:column;height:100%;
  background:#FFFFFF;border:1px solid var(--wf-line);border-radius:4px;overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.wf-prod:hover{border-color:var(--wf-gold);box-shadow:0 10px 26px rgba(27,58,47,.10);
  transform:translateY(-3px);}
.wf-prod-thumb{
  display:block;position:relative;background:#FFFFFF;
  aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid #F0EDE6;
}
.wf-prod-thumb img{
  width:100%;height:100%;object-fit:contain;display:block;padding:18px;
  transition:transform .34s ease;
}
.wf-prod:hover .wf-prod-thumb img{transform:scale(1.04);}
.wf-prod-body{
  display:flex;flex-direction:column;flex:1 1 auto;padding:18px 18px 16px;
}
.wf-prod-cat{
  display:inline-block;align-self:flex-start;margin:0 0 10px;padding:3px 9px;
  background:var(--wf-mist);color:var(--wf-green);font-size:11px;font-weight:600;
  letter-spacing:.06em;border-radius:2px;
}
.wf-prod-title{
  margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.5;color:var(--wf-ink);
}
.wf-prod-title a{color:var(--wf-ink);transition:color .2s ease;}
.wf-prod:hover .wf-prod-title a{color:var(--wf-gold);}
.wf-prod-desc{
  margin:0 0 16px;color:var(--wf-muted);font-size:13px;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wf-prod-foot{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--wf-warm);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.wf-prod-moq{color:var(--wf-muted);font-size:12px;letter-spacing:.02em;}
.wf-prod-go{
  color:var(--wf-gold);font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:color .2s ease,letter-spacing .2s ease;white-space:nowrap;
}
.wf-prod:hover .wf-prod-go{color:var(--wf-ink);letter-spacing:.06em;}
.wf-prod-tag{
  position:absolute;top:12px;left:12px;z-index:2;padding:3px 9px;border-radius:2px;
  background:var(--wf-gold);color:var(--wf-ink);font-size:11px;font-weight:700;
  letter-spacing:.06em;
}

/* 「来图定制」占位卡（列表为空或补位） */
.wf-prod--custom{background:var(--wf-cream);border-style:dashed;border-color:var(--wf-gold);}
.wf-prod--custom .wf-prod-thumb{
  background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.wf-prod--custom .wf-prod-thumb span{
  font-size:36px;line-height:1;color:var(--wf-gold);font-weight:300;
}
.wf-prod--custom:hover .wf-prod-thumb span{color:var(--wf-ink);}

/* ---------- 空状态 ---------- */
.wf-empty{
  padding:64px 24px;text-align:center;background:var(--wf-cream);
  border:1px dashed var(--wf-line);border-radius:4px;
}
.wf-empty .wf-empty-ico{
  display:block;margin:0 auto 18px;width:52px;height:52px;line-height:50px;text-align:center;
  border:1px solid var(--wf-gold);border-radius:50%;color:var(--wf-gold);font-size:22px;
}
.wf-empty h3{margin:0 0 10px;color:var(--wf-ink);font-size:19px;font-weight:700;}
.wf-empty p{margin:0 0 22px;color:var(--wf-muted);font-size:14px;line-height:1.9;}
.wf-empty .wf-btn{display:inline-block;}

/* ---------- 按钮 ---------- */
.wf-btn{
  display:inline-block;padding:13px 30px;border-radius:3px;font-size:14px;
  font-weight:600;letter-spacing:.06em;line-height:1.4;text-align:center;
  transition:all .25s ease;border:1px solid transparent;cursor:pointer;
  font-family:var(--wf-font);
}
.wf-btn--primary{background:var(--wf-ink);color:#FFFFFF;border-color:var(--wf-ink);}
.wf-btn--primary:hover{background:var(--wf-green);border-color:var(--wf-green);color:#FFFFFF;
  transform:translateY(-1px);}
.wf-btn--ghost{background:transparent;color:var(--wf-ink);border-color:var(--wf-line);}
.wf-btn--ghost:hover{background:var(--wf-warm);border-color:var(--wf-gold);color:var(--wf-ink);}
.wf-btn--gold{background:var(--wf-gold);color:var(--wf-ink);border-color:var(--wf-gold);}
.wf-btn--gold:hover{background:#D8BB85;border-color:#D8BB85;transform:translateY(-1px);}

/* ---------- 分页 ---------- */
.wf-pager{margin:44px 0 0;display:flex;justify-content:center;}
.wf-pager .page-numbers{
  list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap;
  align-items:center;justify-content:center;
}
.wf-pager .page-numbers li{margin:0;padding:0;list-style:none;}
.wf-pager .page-numbers a,
.wf-pager .page-numbers span{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--wf-line);border-radius:3px;background:#FFFFFF;
  color:var(--wf-ink);font-size:13px;font-weight:500;text-decoration:none;
  transition:all .22s ease;
}
.wf-pager .page-numbers a:hover{border-color:var(--wf-gold);color:var(--wf-gold);}
.wf-pager .page-numbers .current{
  background:var(--wf-ink);border-color:var(--wf-ink);color:#FFFFFF;font-weight:700;
}
.wf-pager .page-numbers .dots{border:none;background:none;color:var(--wf-muted);}

/* ============================================================
   商品详情页
   ============================================================ */

/* 商品标题区（替代页头） */
.wf-pd-head{background:var(--wf-cream);position:relative;overflow:hidden;padding:44px 0 40px;}
.wf-pd-head::after{
  content:"";position:absolute;right:-110px;top:-330px;width:460px;height:460px;
  border-radius:50%;border:1px solid rgba(201,169,110,.20);pointer-events:none;
}
.wf-pd-head .wf-c{position:relative;z-index:2;}

/* 顶部：图 + 信息 */
.wf-pd-top{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
}
.wf-pd-gallery{margin:0;}
.wf-pd-shot{
  position:relative;background:#FFFFFF;border:1px solid var(--wf-line);
  border-radius:4px;overflow:hidden;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
}
.wf-pd-shot img{
  width:100%;height:100%;object-fit:contain;display:block;padding:28px;
}
.wf-pd-thumbs{
  display:flex;gap:10px;margin:12px 0 0;padding:0;list-style:none;flex-wrap:wrap;
}
.wf-pd-thumbs li{margin:0;padding:0;}
.wf-pd-thumbs img{
  width:72px;height:72px;object-fit:contain;background:#FFFFFF;border:1px solid var(--wf-line);
  border-radius:3px;padding:6px;cursor:pointer;transition:border-color .2s ease;
}
.wf-pd-thumbs img:hover{border-color:var(--wf-gold);}

.wf-pd-info .wf-pd-cat{
  display:inline-block;margin:0 0 14px;padding:4px 10px;background:var(--wf-mist);
  color:var(--wf-green);font-size:11px;font-weight:600;letter-spacing:.08em;border-radius:2px;
}
.wf-pd-info h1{
  margin:0 0 12px;color:var(--wf-ink);font-size:30px;font-weight:700;line-height:1.35;
  letter-spacing:.01em;
}
.wf-pd-sub{
  margin:0 0 22px;color:var(--wf-muted);font-size:14.5px;line-height:1.85;
  padding-bottom:22px;border-bottom:1px solid var(--wf-line);
}
.wf-pd-facts{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none;
}
.wf-pd-facts li{
  margin:0;padding:7px 13px;background:#FFFFFF;border:1px solid var(--wf-line);
  border-radius:2px;color:var(--wf-ink);font-size:12.5px;font-weight:600;letter-spacing:.03em;
}
.wf-pd-facts li b{color:var(--wf-gold);font-weight:700;margin-right:5px;}
.wf-pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px;}
.wf-pd-actions .wf-btn{min-width:132px;}
.wf-pd-note{margin:0;color:var(--wf-muted);font-size:12.5px;line-height:1.9;letter-spacing:.02em;}

/* ---------- 正文分节 ---------- */
.wf-pd-body{padding:0 0 8px;}
.wf-pd-body>h2,
.wf-pd-sec>h2{
  position:relative;margin:52px 0 20px;padding:0 0 12px 18px;
  color:var(--wf-ink);font-size:23px;font-weight:700;line-height:1.45;
  border-bottom:1px solid var(--wf-line);
}
.wf-pd-body>h2::before,
.wf-pd-sec>h2::before{
  content:"";position:absolute;left:0;top:5px;bottom:16px;width:3px;background:var(--wf-gold);
}
.wf-pd-body>h2:first-child{margin-top:0;}
.wf-pd-body p{margin:0 0 16px;color:#3A3A3A;font-size:15px;line-height:1.95;}
.wf-pd-body ul,.wf-pd-body ol{margin:0 0 18px;padding-left:22px;}
.wf-pd-body li{margin:0 0 9px;color:#3A3A3A;font-size:15px;line-height:1.9;}
.wf-pd-body li::marker{color:var(--wf-gold);}
.wf-pd-body strong{color:var(--wf-ink);font-weight:700;}

/* 特点网格 */
.wf-feat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 8px;padding:0;
  list-style:none;
}
.wf-feat-grid>li{
  margin:0;padding:20px 20px 18px;background:var(--wf-cream);
  border:1px solid #EFEBE2;border-radius:4px;list-style:none;
  transition:border-color .26s ease,background .26s ease;
}
.wf-feat-grid>li:hover{border-color:var(--wf-gold);background:#FFFFFF;}
.wf-feat-grid h3{
  margin:0 0 8px;color:var(--wf-ink);font-size:15px;font-weight:700;line-height:1.5;
}
.wf-feat-grid p{margin:0;color:var(--wf-muted);font-size:13px;line-height:1.8;}

/* 规格表 */
.wf-spec{
  width:100%;border-collapse:collapse;margin:0 0 8px;table-layout:fixed;
  border:1px solid var(--wf-line);border-radius:4px;overflow:hidden;
}
.wf-spec th,.wf-spec td{
  padding:12px 16px;text-align:left;font-size:14px;line-height:1.8;
  border-bottom:1px solid var(--wf-line);vertical-align:top;
}
.wf-spec tr:last-child th,.wf-spec tr:last-child td{border-bottom:none;}
.wf-spec th{
  width:26%;background:var(--wf-warm);color:var(--wf-ink);font-weight:600;
  border-right:1px solid var(--wf-line);letter-spacing:.03em;
}
.wf-spec td{color:#3A3A3A;background:#FFFFFF;}

/* 问答 */
.wf-faq{margin:0 0 8px;border-top:1px solid var(--wf-line);}
.wf-faq .wf-qa{padding:16px 0;border-bottom:1px solid var(--wf-line);}
.wf-faq h3{
  margin:0 0 7px;color:var(--wf-ink);font-size:15px;font-weight:700;line-height:1.6;
  padding-left:20px;position:relative;
}
.wf-faq h3::before{
  content:"Q";position:absolute;left:0;top:0;color:var(--wf-gold);font-weight:700;
  font-size:13px;
}
.wf-faq p{margin:0;padding-left:20px;color:var(--wf-muted);font-size:14px;line-height:1.9;}

/* ---------- 相关产品 ---------- */
.wf-related{margin:56px 0 0;}
.wf-related h2{
  margin:0 0 22px;color:var(--wf-ink);font-size:23px;font-weight:700;line-height:1.45;
  position:relative;padding:0 0 12px 18px;border-bottom:1px solid var(--wf-line);
}
.wf-related h2::before{
  content:"";position:absolute;left:0;top:5px;bottom:16px;width:3px;background:var(--wf-gold);
}

/* ---------- 详情页 CTA ---------- */
.wf-pd-cta{
  margin:56px 0 0;padding:44px 32px;background:var(--wf-ink);border-radius:4px;
  text-align:center;position:relative;overflow:hidden;
}
.wf-pd-cta::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60px;height:2px;background:var(--wf-gold);
}
.wf-pd-cta h2{margin:0 0 12px;color:#FFFFFF;font-size:26px;font-weight:700;line-height:1.4;}
.wf-pd-cta p{margin:0 0 24px;color:rgba(255,255,255,.86);font-size:15px;line-height:1.9;}

/* ---------- 详情页两栏外壳 ---------- */
.wf-single .wf-layout{padding:40px 0 72px;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .wf-cathead h1{font-size:34px;}
  .wf-layout>.wf-c{gap:32px;}
  .wf-side{flex:0 0 190px;max-width:190px;}
  .wf-grid{grid-template-columns:repeat(2,1fr);}
  /* 补位卡只在 3 列桌面端有意义，2 列/1 列时隐藏 */
  .wf-prod--pad{display:none;}
  /* 平板：图与信息上下排，避免两栏都挤 */
  .wf-pd-top{grid-template-columns:1fr;gap:26px;}
  .wf-pd-gallery{max-width:520px;}
  .wf-pd-actions .wf-btn{min-width:0;padding:12px 22px;}
  .wf-pd-info h1{font-size:26px;}
}

@media (max-width:767px){
  .wf-c{padding:0 20px;}
  .wf-cathead{padding:38px 0 34px;}
  .wf-cathead::after,.wf-cathead::before{display:none;}
  .wf-cathead h1{font-size:27px;}
  .wf-cathead .wf-lead{font-size:14.5px;line-height:1.9;}
  .wf-cathead .wf-rule{margin-top:20px;}

  .wf-layout{padding:28px 0 52px;}
  .wf-layout>.wf-c{display:block;}
  /* 手机端隐藏 16 条分类树，避免先滚一屏链接 */
  .wf-side{display:none;}
  .wf-main{width:100%;}

  .wf-grid{grid-template-columns:1fr;gap:16px;}
  .wf-prod-thumb{aspect-ratio:16/10;}

  .wf-pd-head{padding:32px 0 30px;}
  .wf-pd-top{grid-template-columns:1fr;gap:26px;}
  .wf-pd-info h1{font-size:23px;}
  .wf-pd-shot{aspect-ratio:4/3;}
  .wf-pd-shot img{padding:18px;}
  .wf-pd-actions{display:block;}
  .wf-pd-actions .wf-btn{display:block;width:100%;margin:0 0 10px;}
  .wf-pd-actions .wf-btn:last-child{margin-bottom:0;}

  .wf-feat-grid{grid-template-columns:1fr;gap:12px;}
  .wf-pd-body>h2,.wf-pd-sec>h2,.wf-related h2{font-size:20px;margin-top:40px;}
  .wf-pd-body p,.wf-pd-body li{font-size:14.5px;line-height:1.9;}
  .wf-spec th,.wf-spec td{padding:10px 12px;font-size:13px;}
  .wf-spec{table-layout:auto;}
  .wf-spec th{width:34%;}
  .wf-pd-cta{padding:34px 22px;border-radius:0;}
  .wf-pd-cta h2{font-size:21px;}
  .wf-pd-cta p{font-size:14px;}
}