/* ==========================================================================
   think3d-site.css — Think3d.cn 前台共享样式（伪静态动态页 / 内容页 / TAG 聚合页）
   与 think3d-*.html 原型页保持同一套设计 Token，视觉零割裂。
   约定：所有色值取自原型页 :root，不新增未登记的颜色。
   ========================================================================== */

:root{
  --blue-900:#152a63;
  --blue-800:#1E3A8A;
  --blue-700:#2547a8;
  --blue-100:#e3eaf9;
  --green-500:#10B981;
  --green-600:#0d9668;
  --gold-500:#F59E0B;
  --ink-900:#111827;
  --ink-700:#1F2937;
  --ink-500:#4b5563;
  --ink-300:#9ca3af;
  --gray-100:#F3F4F6;
  --gray-50:#F9FAFB;
  --white:#ffffff;

  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(17,24,39,.06);
  --shadow-md:0 6px 18px -6px rgba(30,58,138,.14);
  --shadow-lg:0 18px 40px -12px rgba(30,58,138,.22);

  --t-fast:150ms cubic-bezier(.22,1,.36,1);
  --t-med:350ms cubic-bezier(.22,1,.36,1);

  --container:1200px;
}

html[lang="zh"] body{font-family:'Inter','PingFang SC','Microsoft YaHei',system-ui,sans-serif}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3,html[lang="zh"] h4,
html[lang="zh"] .btn{letter-spacing:0}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink-700);
  background:var(--white);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-900);line-height:1.2}
h1{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:700;letter-spacing:-.015em}
h3{font-size:1.15rem;font-weight:600}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-6)}

/* ============ Header ============ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(30,58,138,.08);
}
.head-in{display:flex;align-items:center;gap:var(--space-6);height:76px}
.site-head .logo{
  display:flex;align-items:center;gap:10px;flex:none;
  font-family:var(--font-display);font-weight:700;font-size:1.22rem;
  color:var(--ink-900);letter-spacing:-.01em;
}
.main-nav{display:flex;gap:20px;margin-left:auto;align-items:center}

/* ===== 移动端菜单（CMS / 产品 / 分类 / 标签等所有服务端渲染页共用）=====
   修复：原先 ≤980px 只有 .main-nav{display:none}，**没有替代品** ——
   手机用户在这些页面上完全无法切换栏目。 */
.burger{
  display:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;
  border-radius:10px;place-items:center;cursor:pointer;color:var(--ink-700);flex:none;
}
.burger svg{width:20px;height:20px}
.mobile-nav{
  display:none;flex-direction:column;padding:12px 24px 20px;gap:2px;
  border-top:1px solid rgba(30,58,138,.08);background:#fff;
}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:13px 14px;border-radius:10px;font-weight:500;color:var(--ink-700);font-size:.95rem}
.mobile-nav a:hover{background:var(--blue-100)}
.mobile-nav a.sub{padding-left:28px;font-size:.88rem;color:var(--ink-500)}   /* 与静态页导航统一间距 */
.nav-item{position:relative}
.nav-item > a{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-size:.93rem;font-weight:500;color:var(--ink-500);
  padding:10px 14px;border-radius:var(--radius-sm);transition:color var(--t-fast),background var(--t-fast);
  /* 导航等宽：让 CMS/产品/分类等所有服务端渲染页的栏目宽度与间距一致 */
  min-width:96px;
}
.nav-item:hover > a{color:var(--blue-800);background:var(--blue-100)}
.nav-sub{
  position:absolute;top:calc(100% + 8px);left:0;width:300px;
  background:#fff;border:1px solid rgba(30,58,138,.1);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:120;
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub{display:block}
/* BUGFIX：子菜单原本 top:calc(100% + 8px)，与父项之间有 8px 空隙。
   鼠标从父项下移到子菜单时会经过这段空隙 —— :hover 瞬间丢失，菜单
   display:none，表现为"一拉就闪退/点不开"。用透明桥接条把空隙填上，
   桥接条属于 .nav-sub（.nav-item 的后代），悬停它仍算悬停父项。 */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-sub a{
  display:block;padding:9px 12px;border-radius:var(--radius-sm);
  font-size:.9rem;color:var(--ink-500);
}
.nav-sub a:hover{background:var(--gray-50);color:var(--blue-800)}

/* ---------- 导航下拉：纯文字、上下单列 ---------- */
/* 2026-10-10：移除下拉里的图片 banner 卡片（旧 .nav-sub--mega + .nav-bn-row），
   改为纯文字垂直列表。下面两条是防御性的：万一仍有旧缓存页面带 --mega 类，
   也强制按上下单列渲染，不会回到左右分栏。 */
.nav-sub--mega{display:none;left:50%;transform:translateX(-50%)}
.nav-item:hover .nav-sub--mega,
.nav-item:focus-within .nav-sub--mega{display:block}
@media (max-width:1024px){ .nav-sub--mega{display:none!important} }
.head-right{display:flex;align-items:center;gap:var(--space-3);flex:none}
.lang-sw{display:flex;border:1px solid rgba(30,58,138,.14);border-radius:var(--radius-pill);overflow:hidden;background:#fff}
.lang-sw a{padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--ink-500)}
.lang-sw a.on{background:var(--blue-800);color:#fff}
.lang-sw select{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--radius-pill);background:#fff;color:var(--ink-700);font:600 .78rem/1.2 Inter,system-ui,sans-serif;padding:8px 30px 8px 13px;min-height:34px;cursor:pointer}
.lang-sw select:focus-visible{outline:3px solid rgba(16,185,129,.3);outline-offset:2px}
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .main-nav,html[dir="rtl"] .head-right,html[dir="rtl"] .pd-cta{flex-direction:row-reverse}
html[dir="rtl"] .pd-kv th,html[dir="rtl"] .pd-kv td{text-align:right}

/* ============ Layout ============ */
.site-main{padding:var(--space-8) var(--space-6) var(--space-16)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-8);align-items:start}
.layout.solo{grid-template-columns:minmax(0,1fr)}
.layout-side{display:grid;gap:var(--space-4);position:sticky;top:100px}
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout-side{position:static}
  .main-nav{display:none}
  .burger{display:grid}   /* 用汉堡+移动菜单替代，而不是单纯隐藏 */
}

/* ============ Breadcrumb ============ */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.84rem;color:var(--ink-300);margin-bottom:var(--space-6);
}
.crumbs a{color:var(--ink-500);transition:color var(--t-fast)}
.crumbs a:hover{color:var(--blue-800)}
.crumbs i{font-style:normal;color:var(--ink-300)}
.crumbs .crumb-cur{color:var(--ink-900);font-weight:600}
.crumbs .crumb-plain{color:var(--ink-500)}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:13px 26px;border-radius:var(--radius-pill);min-height:46px;white-space:nowrap;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.btn-primary{background:var(--green-500);color:#fff;box-shadow:0 4px 14px -4px rgba(16,185,129,.5)}
.btn-primary:hover{background:var(--green-600);transform:translateY(-2px)}
.btn-blue{background:var(--blue-800);color:#fff}
.btn-blue:hover{background:var(--blue-700);transform:translateY(-2px)}
.btn-outline{border:1.5px solid var(--blue-100);color:var(--blue-800);background:#fff}
.btn-outline:hover{border-color:var(--blue-800);background:var(--blue-100)}
.btn-sm{padding:9px 18px;font-size:.85rem;min-height:40px}

/* ============ Blocks / Cards ============ */
.block{margin-bottom:var(--space-8)}
.block-head{margin-bottom:var(--space-6)}
.block-head h2{margin-bottom:6px}
.block-head p{color:var(--ink-500);font-size:.95rem}
.card{
  background:#fff;border:1px solid rgba(30,58,138,.1);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--space-6);
}
.card-pad-sm{padding:var(--space-4)}

.page-hero{
  background:linear-gradient(135deg,var(--blue-900),var(--blue-800) 60%,var(--blue-700));
  color:#fff;border-radius:var(--radius-lg);padding:var(--space-12) var(--space-8);
  margin-bottom:var(--space-8);
}
.page-hero h1{color:#fff}
.page-hero p{color:#c7d6f5;margin-top:var(--space-3);max-width:720px}
.page-hero .hero-tags{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:8px}
.page-hero .hero-tags a{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:var(--radius-pill);padding:6px 14px;font-size:.82rem;
}
.page-hero .hero-tags a:hover{background:rgba(255,255,255,.22)}

/* ============ Product grid ============ */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}
.prod-card{
  border:1px solid rgba(30,58,138,.1);border-radius:var(--radius-md);overflow:hidden;
  background:#fff;transition:transform var(--t-fast),box-shadow var(--t-fast);display:block;
}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.prod-thumb{height:132px;display:flex;align-items:center;justify-content:center;position:relative}
.prod-thumb span{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.65);
}
.prod-body{padding:var(--space-4)}
.prod-body h3{font-size:.98rem;margin-bottom:4px}
.prod-body .sku{font-size:.76rem;color:var(--ink-300);font-family:ui-monospace,monospace}
.prod-body .price{margin-top:10px;font-family:var(--font-display);font-weight:700;color:var(--blue-800)}
.prod-body .price small{font-weight:500;color:var(--ink-300);font-size:.78rem}

/* ============ Article / rich text ============ */
.article-head h1{margin-bottom:var(--space-3)}
.article-head .sub{color:var(--ink-500);font-size:1.02rem}
.article-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:.82rem;color:var(--ink-300);
  margin:var(--space-4) 0 var(--space-6);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--gray-100);
}
.article-cover{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-6);box-shadow:var(--shadow-md)}

.rich{font-size:1.02rem;color:var(--ink-700)}
.rich > * + *{margin-top:var(--space-4)}
.rich h2{margin-top:var(--space-8);padding-left:14px;border-left:4px solid var(--green-500)}
.rich h3{margin-top:var(--space-6);color:var(--blue-800)}
.rich p{line-height:1.85}
.rich ul,.rich ol{padding-left:1.4em}
.rich li{margin:6px 0}
.rich a{color:var(--blue-700);text-decoration:underline;text-underline-offset:3px}
.rich a:hover{color:var(--green-600)}
.rich img{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin:var(--space-4) auto}
.rich figure{text-align:center}
.rich figcaption{font-size:.82rem;color:var(--ink-300);margin-top:8px}
.rich blockquote{
  background:var(--gray-50);border-left:4px solid var(--blue-100);
  padding:var(--space-4) var(--space-6);border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--ink-500);
}
.rich code{
  background:var(--gray-100);border-radius:6px;padding:2px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--blue-900);
}
.rich pre{
  background:var(--ink-900);color:#e5edff;border-radius:var(--radius-md);
  padding:var(--space-4);overflow:auto;font-size:.88rem;line-height:1.6;
}
.rich pre code{background:none;color:inherit;padding:0}
.rich table{width:100%;border-collapse:collapse;font-size:.92rem;overflow:hidden;border-radius:var(--radius-md)}
.rich th,.rich td{border:1px solid var(--gray-100);padding:10px 12px;text-align:left}
.rich th{background:var(--gray-50);font-weight:600;color:var(--ink-900)}
.rich video{width:100%;border-radius:var(--radius-md);background:#000}
.rich hr{border:none;border-top:1px solid var(--gray-100)}

.seo-inlink{border-bottom:1px dashed var(--green-500)}

/* ============ Lists ============ */
.post-list{display:grid;gap:var(--space-4)}
.post-item{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-4);
  border:1px solid rgba(30,58,138,.1);border-radius:var(--radius-md);
  padding:var(--space-4);background:#fff;transition:box-shadow var(--t-fast),transform var(--t-fast);
}
.post-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.post-item .thumb{
  height:80px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--blue-800),var(--blue-700));
}
.post-item h3{font-size:1.02rem;margin-bottom:6px}
.post-item p{color:var(--ink-500);font-size:.9rem}
.post-item .meta{font-size:.78rem;color:var(--ink-300);margin-top:8px}
@media (max-width:640px){.post-item{grid-template-columns:minmax(0,1fr)}}

/* ============ Sidebar widgets ============ */
.widget h3{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-300);
  margin-bottom:var(--space-3);
}
.widget{
  background:#fff;border:1px solid rgba(30,58,138,.1);border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-4) var(--space-4);
}
.widget ul{list-style:none;display:grid;gap:2px}
.widget li a{
  display:block;padding:8px 10px;border-radius:var(--radius-sm);
  font-size:.9rem;color:var(--ink-500);transition:background var(--t-fast),color var(--t-fast);
}
.widget li a:hover{background:var(--blue-100);color:var(--blue-800)}
.widget .mini-tag{
  display:inline-block;margin:0 6px 6px 0;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--gray-50);border:1px solid var(--gray-100);font-size:.8rem;color:var(--ink-500);
}
.widget .mini-tag:hover{border-color:var(--green-500);color:var(--green-600)}
.widget .cta{
  background:linear-gradient(150deg,var(--blue-800),var(--blue-900));
  color:#fff;border:none;
}
.widget .cta h3{color:#a9c0f0}
.widget .cta p{color:#dbe6fb;font-size:.9rem;margin-bottom:var(--space-4)}

/* ============ TAG cloud ============ */
.tagcloud{
  margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--gray-100);
}
.tagcloud h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-300);margin-bottom:var(--space-4)}
.taglist{display:flex;flex-wrap:wrap;gap:10px}
.tag{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--radius-pill);
  background:var(--gray-50);border:1px solid var(--gray-100);font-size:.86rem;color:var(--ink-500);
  transition:all var(--t-fast);
}
.tag span{
  background:var(--blue-100);color:var(--blue-800);border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:700;padding:1px 8px;
}
.tag:hover{border-color:var(--green-500);color:var(--green-600);background:#fff;transform:translateY(-2px)}

/* ============ Pagination ============ */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--space-8)}
.pager a,.pager span{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gray-100);border-radius:var(--radius-sm);font-size:.9rem;
  color:var(--ink-500);padding:0 12px;
}
.pager a:hover{border-color:var(--blue-800);color:var(--blue-800)}
.pager .cur{background:var(--blue-800);border-color:var(--blue-800);color:#fff;font-weight:600}
.pager .off{opacity:.4}
.pager .info{margin-left:12px;border:none;color:var(--ink-300);font-size:.84rem}

/* ============ Footer ============ */
.site-foot{
  background:var(--ink-900);color:#94a3b8;margin-top:var(--space-16);
  padding:var(--space-12) 0 var(--space-8);
}
.foot-links{display:grid;gap:var(--space-6);margin-bottom:var(--space-8)}
.foot-col h4{
  color:#e2e8f5;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-3);
}
.foot-col a{display:block;font-size:.88rem;padding:5px 0;color:#94a3b8;transition:color var(--t-fast)}
.foot-col a:hover{color:var(--gold-500)}
.foot-note{
  border-top:1px solid rgba(255,255,255,.1);padding-top:var(--space-6);
  font-size:.82rem;display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
}

/* ============ 404 ============ */
.hero-404{
  text-align:center;padding:var(--space-16) var(--space-6);
}
.hero-404 h1{font-size:clamp(3.5rem,10vw,6rem);color:var(--blue-100);margin-bottom:var(--space-2)}
.hero-404 p{color:var(--ink-500);margin-bottom:var(--space-6)}

/* ============ Utilities ============ */
.muted{color:var(--ink-500)}
.small{font-size:.84rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-pill);
  font-size:.76rem;font-weight:600;background:var(--blue-100);color:var(--blue-800);
}
.pill-green{background:#d1fae5;color:var(--green-600)}
.pill-gold{background:#fef3c7;color:#b45309}
.pill-gray{background:var(--gray-100);color:var(--ink-500)}