/* ============================================
   PRODUCTS — page-specific styles
   ============================================ */

.prod-page{padding:80px 0 100px;background:var(--bg)}

/* ===== CATEGORY (top) TAB STRIP ===== */
.cat-tabs{
  display:flex;flex-wrap:wrap;gap:0;
  background:#fff;border:1px solid var(--line);
  margin-bottom:50px;
}
.cat-tab{
  flex:1 1 0;min-width:160px;
  font-family:var(--sans);
  background:transparent;border:none;
  padding:18px 20px;
  font-size:14px;font-weight:700;letter-spacing:.5px;
  color:var(--ink);text-align:center;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.3s;
  border-right:1px solid var(--line);
  position:relative;
}
.cat-tab:last-child{border-right:none}
.cat-tab:hover{background:var(--bg-alt);color:var(--primary-dark)}
.cat-tab.active{
  background:var(--ink);color:#fff;
}
.cat-tab.active::after{
  content:"";position:absolute;left:50%;bottom:-1px;
  transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink);
  margin-bottom:-12px;
}

/* ===== PANELS ===== */
.cat-panel{display:none}
.cat-panel.active{display:block}
.std-panel{display:none}
.std-panel.active{display:block}

/* ===== STANDARD (sub) TABS ===== */
.std-tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;
  margin-bottom:40px;
  border-bottom:1px solid var(--line);
}
.std-tab{
  font-family:var(--sans);
  background:transparent;border:none;
  padding:14px 22px;
  font-size:13px;font-weight:600;letter-spacing:.5px;
  color:var(--muted);cursor:pointer;
  position:relative;transition:.3s;
  border-bottom:3px solid transparent;
  margin-bottom:-1px;
}
.std-tab:hover{color:var(--ink)}
.std-tab.active{
  color:var(--ink);
  border-bottom-color:var(--primary);
}

/* ===== SPEC SLIDER ===== */
.gangcai-spec-wrap{
  position:relative;
  margin:0 auto 30px;
  max-width:910px;
}
.spec-slider{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  min-height:600px;
}
/* ── Arrow navigation (outside .spec-slider so not clipped) ── */
.spec-arrow{
  position:absolute;top:50%;z-index:10;
  transform:translateY(-50%);
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s,box-shadow .2s;
  text-decoration:none;
  line-height:1;
}
.spec-arrow:hover{
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.spec-arrow svg{width:20px;height:20px;flex-shrink:0;}
.spec-arrow-prev{left:-80px;}
.spec-arrow-next{right:-80px;}
.spec-img{
  display:none;
  width:100%;height:auto;
}
.spec-img.active{display:block;animation:specFade .4s ease}
@keyframes specFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* slide toggle shared by image slides and table slides */
.spec-slide{display:none}
.spec-slide.active{display:block;animation:specFade .4s ease}

/* ── Spec table slide (styled to match the spec-sheet reference) ── */
.spec-table-card{width:100%;background:#fff}
/* Header block above a spec table: title + description (left), figure (right) */
.spec-thead-block{
  display:flex;align-items:center;gap:30px;
  padding:26px 28px 22px;background:#fff;
}
.spec-thead-main{flex:1 1 auto;min-width:0}
.spec-thead-title{
  font-family:var(--sans);
  font-size:26px;font-weight:800;line-height:1.3;
  letter-spacing:-.3px;color:#1a2430;
  margin:0 0 14px;padding-bottom:14px;
  border-bottom:2px solid #5b9bd5;   /* blue underline */
}
.spec-thead-desc{
  font-family:var(--sans);
  font-size:15px;line-height:1.9;color:#6b7480;
}
.spec-thead-fig{flex:0 0 auto}
.spec-thead-fig img{display:block;width:auto;max-width:220px;max-height:120px}
/* Content image shown below the header block, above the table */
.spec-content-img{padding:0 28px 22px;background:#fff}
.spec-content-img img{display:block;width:100%;height:auto;border-radius:4px}
/* Navy title bar — also applied to a <caption> pasted with the table */
.spec-table-title,
.spec-table-card caption{
  background:#12335f;               /* dark navy header bar */
  color:#fff;
  caption-side:top;
  text-align:center;
  font-family:var(--sans);
  font-size:16px;font-weight:700;
  letter-spacing:1px;
  padding:16px 20px;
  line-height:1.4;
}
.spec-table-scroll{overflow-x:auto}
/* Applies to both the built-in .spec-table and any table pasted via WYSIWYG */
.spec-table,
.spec-table-card table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--sans);
  font-size:13px;
  color:#2a3442;
}
.spec-table th,
.spec-table-card table th{
  background:#f4f7fb;               /* near-white header row */
  color:#12335f;
  font-weight:700;
  text-align:center;
  padding:14px 16px;
  border:1px solid #e5eaf2;
  box-shadow:inset 0 -2px 0 #1a4d8f; /* navy-blue divider under header */
  white-space:nowrap;
}
.spec-table td,
.spec-table-card table td{
  padding:11px 16px;
  border:1px solid #e6ebf2;
  text-align:center;
  color:#3a4553;
}
.spec-table tbody tr:nth-child(even),
.spec-table-card table tbody tr:nth-child(even){background:#f6f9fc}
.spec-table tbody tr:hover,
.spec-table-card table tbody tr:hover{background:#eef4fb}
/* When a pasted table has no <th> at all, treat its first row as the header */
.spec-table-card table:not(:has(th)) tr:first-child td{
  background:#f4f7fb;color:#12335f;font-weight:700;
  box-shadow:inset 0 -2px 0 #1a4d8f;
}

/* legacy single-image wrap (for non-H-Beam panels still using one image) */
.spec-img-wrap{
  display:flex;justify-content:center;
  margin:0 auto 30px;
  max-width:910px;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}
.spec-img-wrap .spec-img{display:block}

/* ===== SPEC PAGER ===== */
.spec-pager{
  display:flex;justify-content:center;align-items:center;
  gap:8px;flex-wrap:wrap;
  margin-top:30px;
  margin-bottom:60px;
}
.spec-pager a{
  font-family:var(--sans);
  min-width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;
  font-size:13px;font-weight:600;
  color:var(--ink);background:#fff;
  border:1px solid var(--line);
  transition:.3s;
}
.spec-pager a:hover{border-color:var(--ink)}
.spec-pager a.active{
  background:var(--primary);border-color:var(--primary);color:var(--ink);
}

/* ============================================
   PRODUCT SHOWCASE
   ============================================ */
.prod-showcase{padding:90px 0 120px;background:var(--bg-alt)}
.prod-showcase .services-head{margin-bottom:50px}
.showcase-sub{
  max-width:680px;margin:18px auto 0;
  font-size:15px;line-height:1.85;color:var(--muted);
  text-align:center;
}

.showcase-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.showcase-card{
  display:block;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  position:relative;
  aspect-ratio:4/3;
  transition:.4s;
}
.showcase-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(14,18,23,0) 60%, rgba(14,18,23,.2) 100%);
  opacity:0;transition:.4s;
}
.showcase-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.showcase-card:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow);
  transform:translateY(-4px);
}
.showcase-card:hover img{transform:scale(1.06)}
.showcase-card:hover::after{opacity:1}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px){
  .cat-tab{padding:14px 14px;font-size:13px;min-width:140px}
  .showcase-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .spec-arrow-prev{left:-30px;}
  .spec-arrow-next{right:-30px;}
  .spec-arrow{width:38px;height:38px;}
  .spec-arrow svg{width:16px;height:16px;}
}

@media (max-width:768px){
  .prod-page{padding:60px 0 80px}
  .cat-tabs{
    flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cat-tabs::-webkit-scrollbar{height:0;width:0;}
  .cat-tab{
    min-width:170px;flex:0 0 auto;
    padding:14px 18px;font-size:12px;
  }
  .cat-tab.active::after{display:none}

  .std-tabs{gap:4px}
  .std-tab{padding:12px 14px;font-size:12px;letter-spacing:.3px}

  .gangcai-spec-wrap{margin:0 40px 24px;}
  .spec-slider{min-height:300px;}
  .spec-thead-block{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .spec-thead-title{font-size:20px;padding-bottom:12px;margin-bottom:12px}
  .spec-thead-fig img{max-height:90px}
  .spec-arrow{width:34px;height:34px;}
  .spec-arrow svg{width:14px;height:14px;}
  .spec-arrow-prev{left:-18px;}
  .spec-arrow-next{right:-18px;}
  .spec-pager{margin-bottom:40px;}

  .prod-showcase{padding:70px 0 90px}
  .showcase-grid{grid-template-columns:1fr;gap:16px}
}

@media (max-width:540px){
  .cat-tab{min-width:150px;padding:12px 14px}
  .gangcai-spec-wrap{margin:0 30px 20px;}
  .spec-slider{min-height:220px;}
  .spec-arrow{width:30px;height:30px;}
  .spec-arrow svg{width:12px;height:12px;}
  .spec-arrow-prev{left:-15px;}
  .spec-arrow-next{right:-15px;}
}