/* =========================================================
   票易春 · 产品中心 新版样式
   品牌色：主蓝 #2154CF / 点缀金 #d6b161 / 浅底 #F4F7FC
   ========================================================= */
:root{
  --pc-primary:#2154CF;
  --pc-primary-dark:#1740a3;
  --pc-accent:#d6b161;
  --pc-text:#2f3440;
  --pc-text-light:#777;
  --pc-bg:#F4F7FC;
  --pc-border:#eceff8;
  --pc-radius:14px;
  --pc-shadow:0 8px 30px rgba(33,84,207,.08);
  --pc-shadow-hover:0 18px 45px rgba(33,84,207,.18);
}

/* ---------- 区块容器 ---------- */
.product-section{padding:70px 0 90px;background:var(--pc-bg);}
.product-layout{display:flex;gap:30px;align-items:flex-start;}
.product-side{flex:0 0 260px;max-width:260px;}
.product-main{flex:1 1 auto;min-width:0;}

/* ---------- 侧边栏分类 ---------- */
.pc-sidebar{background:#fff;border-radius:var(--pc-radius);box-shadow:var(--pc-shadow);
  overflow:hidden;margin-bottom:24px;}
.pc-sidebar h3{margin:0;padding:18px 22px;background:var(--pc-primary);color:#fff;
  font-size:17px;letter-spacing:1px;}
.pc-sidebar ul{list-style:none;margin:0;padding:8px 0;}
.pc-sidebar li a{display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;color:var(--pc-text);font-size:15px;border-left:3px solid transparent;
  transition:.25s;text-decoration:none;}
.pc-sidebar li a:hover{background:var(--pc-bg);color:var(--pc-primary);}
.pc-sidebar li a.active{background:var(--pc-bg);color:var(--pc-primary);font-weight:600;
  border-left-color:var(--pc-primary);}
.pc-sidebar li a span{font-size:12px;color:#bbb;}
.pc-sidebar .pc-promo{margin:14px;padding:18px;border-radius:10px;
  background:linear-gradient(135deg,#2154CF,#1740a3);color:#fff;text-align:center;}
.pc-sidebar .pc-promo b{display:block;font-size:15px;margin-bottom:4px;}
.pc-sidebar .pc-promo span{font-size:12px;opacity:.85;}

/* ---------- 产品网格 ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:1199px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575px){.product-grid{grid-template-columns:1fr;}}

.pc-card{background:#fff;border-radius:var(--pc-radius);overflow:hidden;
  box-shadow:var(--pc-shadow);transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
  display:flex;flex-direction:column;}
.pc-card:hover{transform:translateY(-8px);box-shadow:var(--pc-shadow-hover);}
.pc-card .pc-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,#e9eefb,#dbe4fb);display:block;}
.pc-card .pc-thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.pc-card:hover .pc-thumb img{transform:scale(1.08);}
.pc-card .pc-tag{position:absolute;top:14px;left:14px;background:rgba(33,84,207,.92);
  color:#fff;font-size:12px;padding:5px 12px;border-radius:20px;backdrop-filter:blur(4px);}
.pc-card .pc-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.pc-card .pc-title{font-size:17px;font-weight:700;color:var(--pc-text);margin:0 0 10px;line-height:1.4;}
.pc-card .pc-title a{color:inherit;text-decoration:none;}
.pc-card .pc-title a:hover{color:var(--pc-primary);}
.pc-card .pc-desc{color:var(--pc-text-light);font-size:14px;line-height:1.7;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.pc-card .pc-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  color:var(--pc-primary);font-weight:600;font-size:14px;text-decoration:none;}
.pc-card .pc-more i{transition:transform .25s;}
.pc-card:hover .pc-more i{transform:translateX(5px);}

.pc-empty{background:#fff;border-radius:var(--pc-radius);padding:60px 20px;text-align:center;
  color:var(--pc-text-light);box-shadow:var(--pc-shadow);}

/* ---------- 详情页 ---------- */
.pd-layout{display:flex;gap:36px;align-items:flex-start;}
.pd-main{flex:1 1 auto;min-width:0;}

.pd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
  background:#fff;border-radius:var(--pc-radius);box-shadow:var(--pc-shadow);padding:34px;margin-bottom:30px;}
@media(max-width:991px){.pd-hero{grid-template-columns:1fr;}}
.pd-gallery .pd-main-img{border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#e9eefb,#dbe4fb);aspect-ratio:4/3;}
.pd-gallery .pd-main-img img{width:100%;height:100%;object-fit:cover;}

.pd-info h1{font-size:26px;margin:0 0 14px;color:var(--pc-text);line-height:1.35;}
.pd-info .pd-sub{color:var(--pc-primary);font-weight:600;margin-bottom:18px;font-size:15px;}
.pd-meta{display:flex;flex-wrap:wrap;gap:18px;padding:16px 0;
  border-top:1px solid var(--pc-border);border-bottom:1px solid var(--pc-border);
  margin:18px 0;color:var(--pc-text-light);font-size:14px;}
.pd-meta span{display:inline-flex;align-items:center;gap:6px;}
.pd-lead{color:var(--pc-text-light);line-height:1.9;font-size:15px;margin-bottom:22px;}
.pd-actions{display:flex;gap:14px;flex-wrap:wrap;}
.pd-btn{padding:12px 26px;border-radius:30px;font-weight:600;font-size:15px;transition:.25s;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.pd-btn.primary{background:var(--pc-primary);color:#fff;}
.pd-btn.primary:hover{background:var(--pc-primary-dark);box-shadow:0 8px 20px rgba(33,84,207,.3);}
.pd-btn.ghost{background:#fff;color:var(--pc-primary);border:1px solid var(--pc-primary);}
.pd-btn.ghost:hover{background:var(--pc-bg);}

.pd-content{background:#fff;border-radius:var(--pc-radius);box-shadow:var(--pc-shadow);
  padding:38px;line-height:1.9;color:#444;font-size:15px;overflow-x:auto;}
.pd-content h3,.pd-content h4{color:var(--pc-text);margin:22px 0 12px;}
.pd-content p{margin:0 0 14px;}
.pd-content img{max-width:100%;height:auto;border-radius:10px;margin:14px 0;}
.pd-content table{border-collapse:collapse;width:100% !important;margin:18px 0;
  table-layout:fixed !important;font-size:14px;background:#fff;}
/* 后台录入表格常带内联 width:909px 等，必须用 !important 压过，否则仍会横向溢出 */
.pd-content table *{max-width:100% !important;}
.pd-content th,.pd-content td{border:1px solid var(--pc-border);padding:11px 14px;
  text-align:left;word-break:break-word !important;overflow-wrap:break-word !important;
  white-space:normal !important;vertical-align:top;}
.pd-content th{background:var(--pc-bg);color:var(--pc-primary);font-weight:700;}
.pd-content tbody tr:nth-child(even){background:#fafbfe;}
.pd-content tbody tr:hover{background:#eef3ff;}

/* 侧边栏相关产品推荐 */
.pc-rel{background:#fff;border-radius:var(--pc-radius);box-shadow:var(--pc-shadow);
  padding:18px 18px 6px;margin-bottom:24px;}
.pc-rel h4{margin:0 0 14px;font-size:15px;color:var(--pc-text);
  padding-left:12px;border-left:3px solid var(--pc-primary);}
.pc-rel ul{list-style:none;margin:0;padding:0;}
.pc-rel li a{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px dashed var(--pc-border);text-decoration:none;color:var(--pc-text);transition:.2s;}
.pc-rel li:last-child a{border-bottom:none;}
.pc-rel li a:hover{color:var(--pc-primary);}
.pc-rel-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,#e9eefb,#dbe4fb);}
.pc-rel-thumb img{width:100%;height:100%;object-fit:cover;}
.pc-rel-title{font-size:14px;line-height:1.45;}

/* ---------- 响应式：侧边栏转为顶部 ---------- */
@media(max-width:991px){
  .product-layout,.pd-layout{flex-direction:column;}
  .product-side{flex:none;max-width:100%;width:100%;}
  .pc-sidebar,.pc-rel{display:none;}
}