/* ============================================================
   产品详情页 · 数据驱动板块样式 v4 —— 去线框版
   配合 js/product-detail.js
   设计原则：用底色、留白和柔和投影分层，不再依赖描边
   依赖 css/style.css 设计变量: --d3-blue / --d3-navy / --d3-muted / --d3-line
   ============================================================ */

/* ---------- 锚点导航（吸附在 86px 吸顶 header 下方） ---------- */
#pd-nav{display:none;position:sticky;top:86px;z-index:29;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(8,47,80,.07)}
.pd-nav-inner{display:flex;gap:2px;overflow-x:auto;padding:0 max(34px,calc((100% - 1340px)/2));scrollbar-width:none}
.pd-nav-inner::-webkit-scrollbar{display:none}
.pd-nav-inner a{flex:0 0 auto;padding:14px 15px;font-size:11px;font-weight:500;color:#6d808b;border-bottom:2px solid transparent;transition:.2s}
.pd-nav-inner a:hover{color:var(--d3-blue);border-bottom-color:var(--d3-blue)}

/* ---------- Hero：深蓝渐变 + 斜切 + 网点纹理 ---------- */
.d3d-hero{position:relative;overflow:hidden;
  background:linear-gradient(112deg,#06263f 0%,#082f50 44%,#0c4778 76%,#15618f 100%)}
.d3d-hero::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.6px);
  background-size:22px 22px;opacity:.45;
  -webkit-mask-image:linear-gradient(115deg,#000 25%,transparent 72%);
          mask-image:linear-gradient(115deg,#000 25%,transparent 72%)}
.d3d-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62px;background:#fff;
  clip-path:polygon(0 100%,100% 0,100% 100%)}
.d3d-hero .d3d-image{border-radius:3px;box-shadow:0 34px 80px rgba(0,0,0,.4)}
.d3d-hero .d3d-image::before{content:"";position:absolute;top:-18px;right:-18px;width:92px;height:92px;
  background:rgba(127,192,226,.16);transform:rotate(45deg)}
.d3d-hero .d3d-info>span{color:#8fc1de;letter-spacing:.26em}
.d3d-hero .d3d-info h1{color:#fff;font-size:clamp(34px,3.4vw,46px);letter-spacing:.01em}
.d3d-hero .d3d-meta{margin:14px 0 0;font:500 11px Arial;letter-spacing:.06em;color:#8fb4c9}
.d3d-hero .d3d-slogan{position:relative;font-size:21px;line-height:1.7;color:#dcecf5;margin:26px 0 0;padding-left:18px}
.d3d-hero .d3d-slogan::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;
  background:linear-gradient(180deg,#ff6b5e,#e54b4b)}
.d3d-hero .d3d-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.d3d-hero .d3d-cta a{display:inline-block;padding:13px 24px;background:#e54b4b;color:#fff;font-size:11.5px;letter-spacing:.06em;transition:.25s}
.d3d-hero .d3d-cta a:hover{background:#ff6b5e;transform:translateY(-2px);box-shadow:0 14px 28px rgba(229,75,75,.35)}
.d3d-hero .d3d-cta a.ghost{background:transparent;color:#cfe6f2;border:1px solid rgba(255,255,255,.35)}
.d3d-hero .d3d-cta a.ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}

/* ---------- 板块骨架：三种变体（全部无描边，靠底色/投影分层） ---------- */
.pd{padding:96px max(34px,calc((100% - 1340px)/2));scroll-margin-top:140px;position:relative;overflow:hidden}
.pd-plain{background:#fff}
.pd-alt{background:
  radial-gradient(760px 360px at 100% 0,rgba(31,124,181,.08),transparent 62%),
  radial-gradient(560px 300px at 0 100%,rgba(31,124,181,.07),transparent 58%),
  #eef5f9}
.pd-band{background:linear-gradient(118deg,#082f50 0%,#0c4778 55%,#15618f 100%)}
.pd-inner{position:relative;z-index:1}

/* 板块标题：渐变大序号 + 菱形 + 延伸线 */
.pd-head{display:flex;align-items:center;gap:24px;margin-bottom:46px}
.pd-head>b{font:700 58px/1 Arial;color:#dcebf3;letter-spacing:-.03em;flex:0 0 auto}
.pd-head>div{flex:0 0 auto}
.pd-head>div::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;
  background:linear-gradient(135deg,var(--d3-blue),#7fc0e2);transform:rotate(45deg)}
.pd-head span{font:600 9px Arial;letter-spacing:.24em;color:var(--d3-blue)}
.pd-head h2{font-size:31px;letter-spacing:.02em;color:var(--d3-navy);margin-top:7px}
.pd-head::after{content:"";flex:1;height:1px;margin-left:12px;background:linear-gradient(90deg,rgba(12,71,120,.12),transparent)}
.pd-band .pd-head>b{color:rgba(255,255,255,.22)}
.pd-band .pd-head>div::before{background:linear-gradient(135deg,#ff6b5e,#ffb199)}
.pd-band .pd-head span{color:#7fc0e2}
.pd-band .pd-head h2{color:#fff}
.pd-band .pd-head::after{background:linear-gradient(90deg,rgba(255,255,255,.28),transparent)}

/* ---------- 段落 / 列表（去分隔线，用间距呼吸） ---------- */
.pd-list{list-style:none;max-width:1000px}
.pd-list li{font-size:13px;line-height:2.1;color:#4d6472;padding:10px 0 10px 30px;position:relative}
ul.pd-list li::before{content:"";position:absolute;left:4px;top:22px;width:7px;height:7px;background:var(--d3-blue);transform:rotate(45deg)}
ul.pd-list li:first-child{font-size:13.5px;color:#33505f;font-weight:500}
ol.pd-list{counter-reset:pd}
ol.pd-list li{counter-increment:pd;padding-left:52px}
ol.pd-list li::before{content:counter(pd,decimal-leading-zero);position:absolute;left:0;top:12px;width:auto;height:auto;background:none;color:var(--d3-blue);font:700 15px Arial;transform:none}

/* 使用方法：菱形序号时间线 */
ol.pd-steps li{padding-left:60px;min-height:50px}
ol.pd-steps li::before{content:"";left:8px;top:15px;width:22px;height:22px;
  background:linear-gradient(135deg,var(--d3-blue),#7fc0e2);opacity:.18;transform:rotate(45deg)}
ol.pd-steps li::after{content:counter(pd,decimal-leading-zero);position:absolute;left:13px;top:11px;
  font:700 12px Arial;color:var(--d3-blue)}
.pd-band ol.pd-steps li{color:#c6d9e6}
.pd-band ul.pd-list li{color:#c6d9e6}
.pd-band ul.pd-list li:first-child{color:#fff}
.pd-band ul.pd-list li::before{background:#7fc0e2}

/* ---------- 卡片（无描边：白底 + 柔和投影 + 顶部渐变条） ---------- */
.pd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.pd-cards article{background:linear-gradient(180deg,#fdfeff,#f7fbfd);border-radius:6px;padding:26px 24px 24px;
  position:relative;overflow:hidden;box-shadow:0 6px 22px rgba(8,47,80,.07);transition:.25s}
.pd-cards article::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--d3-blue),#8ec9e6);opacity:0;transition:.25s}
.pd-cards article:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(8,47,80,.15)}
.pd-cards article:hover::before{opacity:1}
.pd-cards article>b{display:inline-block;font:700 11px Arial;color:var(--d3-blue);background:#e8f3f9;padding:4px 10px;letter-spacing:.1em;border-radius:2px}
.pd-cards h3{font-size:15.5px;color:var(--d3-navy);margin:14px 0 9px;padding-bottom:10px;position:relative}
.pd-cards h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:linear-gradient(90deg,var(--d3-blue),#8ec9e6)}
.pd-cards p{font-size:11.5px;line-height:1.95;color:var(--d3-muted)}

/* 深色横幅里的卡片（治疗优势等） */
.pd-band .pd-cards article{background:rgba(255,255,255,.08);border-radius:6px;box-shadow:none;backdrop-filter:blur(2px)}
.pd-band .pd-cards article::before{background:linear-gradient(90deg,#ff6b5e,#ffb199)}
.pd-band .pd-cards article:hover{background:rgba(255,255,255,.14);box-shadow:0 18px 38px rgba(0,0,0,.32)}
.pd-band .pd-cards article>b{background:rgba(255,255,255,.14);color:#8fc1de}
.pd-band .pd-cards h3{color:#fff}
.pd-band .pd-cards h3::after{background:linear-gradient(90deg,#ff6b5e,#ffb199)}
.pd-band .pd-cards p{color:#b9cfe0}

/* 传统方式对比：本品高亮 */
.pd-cards.pd-trad article.pd-ours{background:linear-gradient(180deg,#eef7fc,#fdfeff);box-shadow:0 14px 32px rgba(31,124,181,.18)}
.pd-cards.pd-trad article.pd-ours::before{opacity:1}
.pd-cards.pd-trad article.pd-ours h3{color:var(--d3-blue)}

/* ---------- 参数键值表（软面板，无描边） ---------- */
.pd-kv{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;max-width:1100px}
.pd-kv>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 18px;
  background:linear-gradient(180deg,#f8fbfd,#f3f8fb);border-radius:6px;align-items:baseline}
.pd-kv dt{font-size:11px;color:#7e93a0}
.pd-kv dt::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;vertical-align:1px;
  background:linear-gradient(135deg,var(--d3-blue),#7fc0e2);transform:rotate(45deg)}
.pd-kv dd{font-size:12.5px;color:var(--d3-navy);font-weight:500;line-height:1.7}

/* ---------- 通用表格（圆角投影容器，弱化行线） ---------- */
.pd-tablewrap{max-width:1100px;overflow-x:auto;border-radius:8px;box-shadow:0 12px 32px rgba(8,47,80,.09);background:#fff}
.pd-table{width:100%;border-collapse:collapse;font-size:11.5px;min-width:520px}
.pd-table th,.pd-table td{padding:13px 18px;text-align:left;border-bottom:1px solid rgba(12,71,120,.06);color:#51656f;white-space:nowrap}
.pd-table thead th{background:linear-gradient(135deg,#0c3a5e,var(--d3-navy));color:#fff;font-weight:600;font-size:11px;letter-spacing:.05em;white-space:nowrap;border-bottom:0}
.pd-table tbody tr{transition:background .15s}
.pd-table tbody tr:hover{background:#f2f8fc}
.pd-table tbody tr:last-child th,.pd-table tbody tr:last-child td{border-bottom:0}
.pd-table tbody th{font-weight:600;color:var(--d3-navy);background:#f7fafc}
.pd-table .pd-price{color:#e54b4b;font-size:12.5px}
.pd-table td.pd-vs-ours,.pd-table th.pd-vs-ours{color:var(--d3-navy);font-weight:600;background:#f0f8fd}
.pd-table thead th.pd-vs-ours{color:#fff;background:var(--d3-blue)}

/* ---------- 科室卡片（左侧渐变条 + 投影，无描边） ---------- */
.pd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:14px;max-width:1100px}
.pd-chips li{padding:10px 15px;background:#eef5f9;border-radius:3px;font-size:11px;color:var(--d3-navy)}
.pd-chips.pd-depts li{display:block;flex:0 0 calc(33.333% - 10px);padding:19px 18px 17px 40px;position:relative;
  background:linear-gradient(180deg,#fdfeff,#f7fbfd);border-radius:6px;box-shadow:0 6px 20px rgba(8,47,80,.06);transition:.2s}
.pd-chips.pd-depts li::before{content:"";position:absolute;left:16px;top:24px;width:10px;height:10px;
  background:linear-gradient(135deg,var(--d3-blue),#7fc0e2);transform:rotate(45deg)}
.pd-chips.pd-depts li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:6px 0 0 6px;
  background:linear-gradient(180deg,var(--d3-blue),#7fc0e2)}
.pd-chips.pd-depts li:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(8,47,80,.13)}
.pd-chips.pd-depts li b{display:block;font-size:14px;color:var(--d3-blue);margin-bottom:5px}
.pd-chips.pd-depts li{font-size:10.5px;line-height:1.85;color:var(--d3-muted)}

/* ---------- 提示 / 徽章 ---------- */
.pd-note{max-width:1100px;margin-top:24px;padding:15px 20px;background:#fff8ef;border-radius:4px;
  box-shadow:inset 3px 0 0 #e8a33d;font-size:11.5px;line-height:1.95;color:#7a6242}
.pd-badge{display:inline-block;margin-bottom:22px;padding:10px 18px;background:linear-gradient(135deg,#e54b4b,#ff6b5e);
  color:#fff;font-size:11.5px;letter-spacing:.06em;border-radius:3px}

/* ---------- 临床文献卡片 ---------- */
.pd-lits{display:grid;gap:16px;max-width:1100px}
.pd-lits article{background:linear-gradient(180deg,#fdfeff,#f8fbfd);border-radius:6px;padding:28px 30px;
  position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(8,47,80,.07);transition:.2s}
.pd-lits article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--d3-blue),#7fc0e2)}
.pd-lits article::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;
  background:rgba(31,124,181,.05);transform:rotate(45deg)}
.pd-lits article:hover{box-shadow:0 16px 36px rgba(8,47,80,.12)}
.pd-lits article>b{font:700 11px Arial;color:var(--d3-blue);letter-spacing:.1em}
.pd-lits h3{font-size:15.5px;line-height:1.65;color:var(--d3-navy);margin:9px 0 14px}
.pd-lits dl div{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:9px 0}
.pd-lits dt{font-size:10.5px;color:var(--d3-blue);font-weight:600}
.pd-lits dd{font-size:11px;line-height:1.9;color:var(--d3-muted)}

/* 分组小标题 */
.pd-sub{font-size:16.5px;color:var(--d3-navy);margin:38px 0 16px;padding-left:14px;position:relative}
.pd-sub::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--d3-blue),#7fc0e2)}
.pd-sub:first-child{margin-top:0}

/* ---------- 滚动入场动画（仅在 JS 可用时启用） ---------- */
.pd-js .pd-reveal{opacity:0;transform:translateY(30px)}
.pd-js .pd-reveal.pd-in{opacity:1;transform:none;transition:opacity .7s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
.pd-js .pd-reveal.pd-in .pd-cards article{animation:pdUp .55s both}
.pd-js .pd-reveal.pd-in .pd-cards article:nth-child(2){animation-delay:.07s}
.pd-js .pd-reveal.pd-in .pd-cards article:nth-child(3){animation-delay:.14s}
.pd-js .pd-reveal.pd-in .pd-cards article:nth-child(4){animation-delay:.21s}
.pd-js .pd-reveal.pd-in .pd-cards article:nth-child(5){animation-delay:.28s}
.pd-js .pd-reveal.pd-in .pd-cards article:nth-child(6){animation-delay:.35s}
.pd-js .pd-reveal.pd-in .pd-cards article:nth-child(7){animation-delay:.42s}
.pd-js .pd-reveal.pd-in .pd-cards article:nth-child(8){animation-delay:.49s}
@keyframes pdUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .pd-js .pd-reveal{opacity:1;transform:none}
  .pd-js .pd-reveal.pd-in .pd-cards article{animation:none}
}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .pd{padding:64px 20px;scroll-margin-top:140px}
  .pd-head{gap:16px;margin-bottom:30px}
  .pd-head>b{font-size:40px}
  .pd-head h2{font-size:24px}
  .pd-kv{grid-template-columns:1fr}
  .pd-chips.pd-depts li{flex:0 0 calc(50% - 7px)}
  .d3d-hero::after{height:40px}
}
@media(max-width:600px){
  #pd-nav{top:72px}
  .pd{padding:52px 20px;scroll-margin-top:126px}
  .pd-chips.pd-depts li{flex:0 0 100%}
  .pd-kv>div{grid-template-columns:1fr;gap:4px}
  .pd-lits dl div{grid-template-columns:1fr;gap:2px}
  .pd-nav-inner{padding:0 20px}
  .d3d-cta a{flex:1;text-align:center}
}