/*!
 * eyou-seo-product-righttoc.css
 * Namespaced styles for EyouCMS product pages with right-side ToC + CTA
 * Namespace: .sxp
 */
.sxp{
  --px-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
             "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --px-text:#1d2228; --px-sub:#5c6670; --px-muted:#8a95a0;
  --px-bg:#ffffff; --px-card:#ffffff; --px-soft:#f6f9fc; --px-border:#e6eef2;
  --px-brand:#116bc4; --px-brand-2:#0b4d8d; --px-success:#16a34a;
  --px-h1:30px; --px-h2:22px; --px-h3:18px;
  --px-radius:14px; --px-radius-sm:10px;
  --px-shadow:0 8px 28px rgba(17,107,196,.08); --px-shadow-sm:0 3px 12px rgba(0,0,0,.06);
}
.sxp, .sxp *{ box-sizing:border-box; }
.sxp{ font-family:var(--px-font); color:var(--px-text); background:transparent; line-height:1.85; }
.sxp .px-container{ max-width:1150px; margin:0 auto; padding:18px 16px; }
.sxp .px-card{ background:var(--px-card); border:1px solid var(--px-border); border-radius:var(--px-radius); box-shadow:var(--px-shadow); }
.sxp .px-pad{ padding:16px; }
.sxp .px-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; background:var(--px-brand); color:#fff; text-decoration:none; box-shadow:var(--px-shadow-sm); transition:transform .18s ease, box-shadow .18s ease, background .2s ease; }
.sxp .px-btn:hover{ transform:translateY(-1px); box-shadow:var(--px-shadow); background:var(--px-brand-2); }
.sxp .px-btn-ghost{ background:transparent; color:var(--px-brand); border:1px solid var(--px-brand); }
.sxp .px-ribbon{ height:4px; border-radius:999px; background:var(--px-brand); margin:2px 0 10px; }
.sxp .px-h1{ font-size:var(--px-h1); font-weight:800; line-height:1.2; margin:8px 0 6px; }
.sxp .px-meta{ display:flex; flex-wrap:wrap; gap:10px 16px; color:var(--px-sub); font-size:13.5px; margin:6px 0 8px; }
.sxp .px-meta i{ font-style:normal; color:var(--px-muted); }

.sxp .px-layout{ display:grid; grid-template-columns: 1fr 300px; gap:22px; }
.sxp .px-aside{ min-width:0; }
.sxp .px-sticky{ position:sticky; top:88px; }

 /* ToC card */
.sxp .px-toc-card{ margin-bottom:14px; }
.sxp .px-toc-card .px-toc-title{ font-weight:800; margin-bottom:8px; color:#0f172a; }
.sxp .px-toc-inner{ max-height:calc(100vh - 260px); overflow:auto; padding-right:4px; }
.sxp .px-toc-inner a{ display:block; line-height:1.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#334155; text-decoration:none; }
.sxp .px-toc-inner a.px-l2{ margin-left:12px; opacity:.9; font-size:.95em; }
.sxp .px-toc-inner a:hover{ color:var(--px-brand); text-decoration:underline; }
.sxp .px-toc-inner::-webkit-scrollbar{ width:8px; }
.sxp .px-toc-inner::-webkit-scrollbar-thumb{ background:#d9e4ef; border-radius:8px; }
.sxp .px-toc-inner:hover::-webkit-scrollbar-thumb{ background:#c1d6ea; }

 /* CTA */
.sxp .px-aside-card{ background:var(--px-card); border:1px solid var(--px-border); border-radius:var(--px-radius); box-shadow:var(--px-shadow); padding:16px; }
.sxp .px-aside-hd{ font-size:18px; font-weight:800; color:#0b1220; margin-bottom:8px; }
.sxp .px-aside-sub{ color:var(--px-sub); font-size:13.5px; margin-bottom:12px; }
.sxp .px-aside-list{ list-style:none; padding:0; margin:10px 0 12px; }
.sxp .px-aside-list li{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--px-border); }
.sxp .px-aside-list li:last-child{ border-bottom:0; }
.sxp .px-aside-tel{ font-weight:800; color:#0b1220; text-decoration:none; }
.sxp .px-aside-list a{ color:var(--px-brand); text-decoration:none; font-weight:600; }
.sxp .px-aside-list a:hover{ text-decoration:underline; }
.sxp .px-aside-btn{ width:100%; margin:6px 0 0; justify-content:center; }
.sxp .px-aside-note{ margin-top:10px; font-size:12.5px; color:var(--px-muted); }

 /* Top: gallery + info */
.sxp .px-top{ display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; }
.sxp .px-gallery .px-big{ border:1px solid var(--px-border); border-radius:12px; overflow:hidden; box-shadow:var(--px-shadow-sm); aspect-ratio: 4 / 3; display:flex; align-items:center; justify-content:center; background:#fff; }
.sxp .px-gallery .px-big img{ width:100%; height:100%; object-fit:contain; display:block; }
.sxp .px-thumbs{ display:grid; grid-auto-flow: column; grid-auto-columns: 110px; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.sxp .px-thumbs img{ width:110px; height:80px; object-fit:cover; border:1px solid var(--px-border); border-radius:8px; cursor:pointer; background:#fff; }
.sxp .px-thumbs img.active{ outline:2px solid var(--px-brand); }

.sxp .px-info h1{ font-size:24px; font-weight:800; margin:0 0 6px; }
.sxp .px-ul{ list-style:none; padding:0; margin:10px 0; color:#444; }
.sxp .px-ul li{ padding:6px 0; border-bottom:1px dashed var(--px-border); }
.sxp .px-ul li:last-child{ border-bottom:0; }
.sxp .px-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.sxp .px-price{ font-weight:900; font-size:22px; color:#0b1220; }

 /* Sections */
.sxp .px-section{ margin:18px 0 8px; }
.sxp .px-section h2{ position:relative; padding-left:16px; font-size:var(--px-h2); margin:1.4em 0 .6em; font-weight:800; color:#0b1220; }
.sxp .px-section h2:before{ content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:6px; background: var(--px-h2-accent, var(--px-brand)); border-radius:6px; }
.sxp .px-content{ font-size:16px; color:var(--px-text); }
.sxp .px-content p{ margin:0 0 1em; }
.sxp .px-content h3{ font-size:var(--px-h3); margin:1.1em 0 .4em; font-weight:700; color:#0b1220; }
.sxp .px-content ul,.sxp .px-content ol{ padding-left:1.2em; margin:0 0 1em; }
.sxp .px-content img{ max-width:100%; border-radius:10px; margin:12px auto; display:block; box-shadow:var(--px-shadow-sm); }

.sxp .px-spec{ width:100%; border-collapse:collapse; margin:10px 0; font-size:15px; background:#fff; box-shadow:var(--px-shadow-sm); }
.sxp .px-spec th,.sxp .px-spec td{ border:1px solid var(--px-border); padding:.7em .85em; text-align:left; }
.sxp .px-spec th{ background:var(--px-soft); color:#0f172a; }

 /* Tabs */
.sxp .px-tabs{ background:#f3f6fb; border-radius:10px; padding:8px; display:flex; gap:8px; margin:16px 0 8px; }
.sxp .px-tabs button{ border:1px solid transparent; border-radius:10px; padding:8px 14px; background:transparent; cursor:pointer; font-weight:600; }
.sxp .px-tabs button.active{ border-color:var(--px-brand); background:#fff; color:#116bc4; }
.sxp .px-panels .px-panel{ display:none; }
.sxp .px-panels .px-panel.active{ display:block; }

 /* Related products */
.sxp .px-rel{ margin:18px 0 8px; }
.sxp .px-relgrid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.sxp .px-relitem{ border:1px solid var(--px-border); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--px-shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.sxp .px-relitem:hover{ transform:translateY(-2px); box-shadow:var(--px-shadow); }
.sxp .px-relitem img{ width:100%; height:140px; object-fit:cover; display:block; }
.sxp .px-relitem h3{ font-size:15px; margin:8px 10px 6px; color:#0b1220; }

 /* Mobile */
@media (max-width:1100px){ .sxp .px-top{ grid-template-columns:1fr; } }
@media (max-width:768px){ .sxp .px-relgrid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .sxp .px-relgrid{ grid-template-columns: 1fr; } }

 /* Dark mode */
@media (prefers-color-scheme: dark){
  .sxp{ --px-text:#e8edf2; --px-sub:#a6b1bb; --px-muted:#8fa1b1; --px-bg:#0b1220; --px-card:#101827; --px-soft:#0f1a2a; --px-border:#243445; }
}
.sxp .px-faq summary::-webkit-details-marker{ display:none; }

.sxp .px-faq details{
  border:1px solid #e8eef4;
  border-radius:12px;
  background:#fff;
  padding:14px 16px;
  margin:10px 0;
  box-shadow:
    8px 8px 16px rgba(15,23,42,.08),
    -8px -8px 16px rgba(255,255,255,.80);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.sxp .px-faq details:hover{
  transform: translateY(-1px);
  box-shadow:
    10px 10px 20px rgba(15,23,42,.10),
    -10px -10px 20px rgba(255,255,255,.85);
  border-color:#dbe7f3;
}
.sxp .px-faq details[open]{ border-color:#cfe1f5; }

.sxp .px-faq summary{
  position:relative; cursor:pointer; font-weight:700; color:#0b1220;
  padding-left:32px; padding-right:24px;
}
.sxp .px-faq summary:before{
  content:""; position:absolute; left:8px; top:50%;
  width:14px; height:14px; border-radius:50%; transform:translateY(-50%);
  background: linear-gradient(145deg, #f7fbff, #eef4fb);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.12), inset -2px -2px 4px rgba(255,255,255,.9);
}
.sxp .px-faq summary:after{
  content:""; position:absolute; right:6px; top:50%;
  width:10px; height:10px; border-right:2px solid #6b7280; border-bottom:2px solid #6b7280;
  transform: translateY(-50%) rotate(-45deg); transition: transform .2s ease;
}
.sxp .px-faq details[open] summary:after{ transform: translateY(-50%) rotate(45deg); }

.sxp .px-faq .px-a{
  margin-top:10px; padding-top:10px; border-top:1px dashed #e6eef2;
  color:#5c6670; font-size:15px; line-height:1.85;
}

@media (prefers-color-scheme: dark){
  .sxp .px-faq details{
    background:#101827; border-color:#243445;
    box-shadow:
      8px 8px 16px rgba(0,0,0,.45),
      -8px -8px 16px rgba(255,255,255,.03);
  }
  .sxp .px-faq summary:before{
    background: linear-gradient(145deg, #111b28, #0e1622);
    box-shadow: inset 2px 2px 4px rgba(0,0,0,.5), inset -2px -2px 4px rgba(255,255,255,.06);
  }
}

/* 固定主图尺寸 + 缩略图等比：避免版心抖动 */
.px-gallery{display:grid; grid-template-rows:auto auto; gap:10px;}
.px-big{background:#fff; border:1px solid #e6eef4; border-radius:12px; overflow:hidden;
  /* 固定比例：4:3 可自行改为 1/1 或 16/9 */
  aspect-ratio: 4 / 3;
  display:grid; place-items:center;
}
.px-big img{width:100%; height:100%; object-fit:contain;}

.px-thumbs{display:flex; gap:10px; overflow:auto; padding:4px 2px;}
.px-thumbs img{flex:0 0 auto; border:1px solid #e6eef4; border-radius:10px; padding:2px;
  aspect-ratio: 4 / 3; width:120px; height:auto; object-fit:cover; cursor:pointer; opacity:.85; transition:opacity .2s, transform .2s;
  background:#fff;
}
.px-thumbs img:hover{opacity:1; transform:translateY(-1px);}
.px-thumbs img.active{box-shadow:0 0 0 2px #2e5c86 inset; opacity:1;}

/* 顶部 Tabs 改为 <a>，美观且可复制链接带 hash */
.px-tabs{display:flex; gap:12px; border-bottom:1px solid #e8eef4; margin:14px 0 6px;}
.px-tabs a{padding:10px 14px; border-radius:10px 10px 0 0; background:#f7fafc; text-decoration:none; color:#334155; font-weight:600;}
.px-tabs a.active{background:#fff; border:1px solid #e8eef4; border-bottom-color:#fff; color:#0b1220;}

/* 面板切换 */
.px-panel{display:none;}
.px-panel.active{display:block;}

/* 锚点占位，避免滚动时被顶部覆盖 */
.px-anchor{display:block; position:relative; top:-80px; height:0; visibility:hidden;}

/* 面包屑与卡片之间更紧凑 */
.sxp .px-breadcrumb{ margin-bottom: 8px; }          /* 如没有该类名，就给放面包屑的容器加 */
.sxp .px-card{ margin-top: 0; }                      /* 保守：明确卡片不自带上外边距 */

/* 卡片内部顶部别太空：把内边距和标题上边距都压一压 */
.sxp .px-card.px-pad{ padding-top: 10px; }           /* 从 16px 改为 10px */
.sxp .px-card .px-h1,
.sxp .px-card h1{ margin-top: 0; }                   /* 标题顶边对齐卡片内边缘 */

/* 保险：避免首个子元素的 margin 折叠抬高整体（有些布局会遇到） */
.sxp .px-card{ overflow: hidden; }                   /* 你卡片有圆角，这样也更干净 */

/* ===== 极简收紧：面包屑 ⇢ 第一张卡片 之间 ===== */

/* 1) 面包屑本身下边距再缩小 */
.wrapper > nav.px-breadcrumb{
  margin: 2px 0 4px !important;
}

/* 2) 紧跟在“面包屑 wrapper”后面的 main.wrapper 不要再抬头 */
.wrapper + main.wrapper{
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden;                 /* 阻断首元素外边距折叠 */
}

/* 3) .sxp 容器顶部内边距再缩（18 → 4）*/
.sxp .px-container{
  padding-top: 4px;
}

/* 4) 第一张卡片顶部更贴（16 → 6），并阻断折叠 */
.sxp .px-card{ overflow: hidden; }
.sxp .px-card.px-pad{ padding-top: 6px; }

/* 5) 卡片里的第一个孩子（你的 .px-ribbon）不再额外往下推 */
.sxp .px-card > :first-child{ margin-top: 0 !important; }

/* ===== 仅限【nybanner 下的面包屑 wrapper】以及紧随其后的 main.wrapper ===== */

/* A) 面包屑 wrapper 自身，把上下 padding 压到极小 */
.nybanner + .wrapper{
  padding-top: 4px;   /* 这里就是压掉 .wrapper 的默认 padding-top 的关键 */
  padding-bottom: 6px;
  margin-bottom: 0;   /* 避免和下一个 main.wrapper 叠加 */
}

/* 面包屑内部自己几乎不占额外空间 */
.nybanner + .wrapper > nav.px-breadcrumb{
  margin: 0;          /* 你前面已经有 2~4px 的设置，这里统一为 0 更干净 */
}

/* B) 面包屑 wrapper 后紧跟的 main.wrapper，不要再抬头 */
.nybanner + .wrapper + main.wrapper{
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden;   /* 防止首子元素 margin 折叠抬高整体 */
}

/* C) 容器与卡片：保持你想要的紧凑（可按需微调） */
.sxp .px-container{ padding-top: 4px; }
.sxp .px-card{ overflow: hidden; }           /* 阻断折叠，也与圆角更贴合 */
.sxp .px-card.px-pad{ padding-top: 6px; }    /* 8 or 6，自己看视觉舒适度 */
.sxp .px-card > :first-child{ margin-top: 0 !important; } /* .px-ribbon 顶部不再往下推 */

/* === Sticky 修复：覆盖 overflow 裁剪，放在文件末尾提升权重 === */
.wrapper + main.wrapper{ overflow: visible !important; }
.nybanner + .wrapper + main.wrapper{ overflow: visible !important; }