/* Consolidated stylesheet extracted from inline <style> blocks */
/* Base shared styles */
:root{
      --brand-accent: #1E6BFF; /* TODO: replace with your brand color */
      --bg: #ffffff;
      --surface: #ffffff;
      --ink: #0b0f14;
      --muted: #6b7280;
      --line: rgba(17,24,39,.10);

      --header-bg: #0b0f14;
      --footer-bg: #0b0f14;
      --header-line: rgba(255,255,255,.12);
      --footer-line: rgba(255,255,255,.12);

      --radius-lg: 1rem;

      /* Typography scale (B2B restrained) */
      --fs-body: 16px;
      --lh-body: 1.6;
      --h1: clamp(1.65rem, 2.0vw, 2.15rem);
      --h2: clamp(1.35rem, 1.45vw, 1.65rem);
      --h3: 1.05rem;
      --lh-h: 1.18;
    }

    html { scroll-behavior: smooth; }
    body{
      background: var(--bg);
      color: var(--ink);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      text-rendering: optimizeLegibility;
    }
    .logo {
      height: 34px;
      width: auto;
      object-fit: contain;
    }
    /* Header (black) */
    .navbar-glass{
      background: rgba(11,15,20,.96);
      border-bottom: 1px solid var(--header-line);
      backdrop-filter: none;
    }

    .brand-dot{
      width: .6rem; height: .6rem; border-radius: 50%;
      background: var(--brand-accent);
      display: inline-block; margin-right: .55rem;
      box-shadow: 0 0 0 3px rgba(30,107,255,.18);
    }

    .navbar .nav-link{ color: rgba(255,255,255,.82); }
    .navbar .nav-link:hover{ color: #fff; }
    .navbar .nav-link.active{ color: #fff; }

    /* Buttons */
    .btn-accent{
      --bs-btn-bg: var(--brand-accent);
      --bs-btn-border-color: var(--brand-accent);
      --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
    }
    .btn-outline-accent{
      --bs-btn-color: var(--ink);
      --bs-btn-border-color: rgba(17,24,39,.25);
      --bs-btn-hover-bg: rgba(17,24,39,.06);
      --bs-btn-hover-border-color: rgba(17,24,39,.30);
    }

    /* Sections */
    .section{
      padding: 30px 0;
      /* border-top: 1px solid rgba(17,24,39,.06); */
    }
    @media (min-width: 992px){
      .section{ padding: 30px 0; }
    }

    .kicker{
      color: rgba(17,24,39,.65);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .82rem;
    }

    /* Headings: make ALL h1 smaller globally */
    h1{
      font-size: var(--h1);
      line-height: var(--lh-h);
      letter-spacing: -0.02em;
      font-weight: 700;
      margin-bottom: .6rem;
    }
    h2{
      font-size: var(--h2);
      line-height: var(--lh-h);
      letter-spacing: -0.015em;
      font-weight: 700;
    }
    h3{
      font-size: var(--h3);
      line-height: 1.25;
      font-weight: 700;
    }
    .display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
      font-size: inherit !important;
      line-height: inherit !important;
    }
    .section-title{ margin-bottom: .4rem; }
    .lead{
      font-size: 1.05rem;
      line-height: 1.7;
      color: rgba(17,24,39,.78);
    }

    /* Cards (light) */
    .card-dark{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    .icon-badge{
      width: 44px; height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(17,24,39,.04);
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.85);
    }

    /* Hero */
    .hero-wrap{ padding-top: 84px; padding-bottom: 28px; }
    .hero-panel{
      border-radius: calc(var(--radius-lg) + .25rem);
      border: 1px solid var(--line);
      overflow: hidden;
      background:
        radial-gradient(1200px 500px at 10% 10%, rgba(30,107,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 100%);
      box-shadow: 0 18px 50px rgba(0,0,0,.08);
    }
    .hero-media{
      border-left: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(17,24,39,.06), rgba(255,255,255,0) 55%),
        radial-gradient(700px 260px at 70% 20%, rgba(30,107,255,.14), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
    }
    .hero-copy{ max-width: 58ch; }

    /* Images: consistent placeholder system */
    img{ max-width: 100%; height: auto; }
    .img-ph{
      width: 100%;
      display: block;
      /*border-radius: 18px;
      border: 1px solid rgba(17,24,39,.10);*/
      background: rgba(17,24,39,.02);
    }
    .img-cover{ width: 100%; height: 100%; object-fit: cover; }
    .ph-news img{
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Category tiles */
    .cat-tile{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: 1rem;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .cat-tile:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
    }
    .cat-tile img{ height: 180px; object-fit: cover; }
    @media (min-width: 992px){ .cat-tile img{ height: 200px; } }
    .cat-name{
      padding: 14px 16px;
      font-weight: 600;
      color: var(--ink);
    }

    /* Stats */
    .stat{
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(17,24,39,.02);
      padding: 16px;
      height: 100%;
    }
    .stat .num{ font-size: 1.25rem; font-weight: 700; color: var(--ink); }
    .stat .lbl{ color: rgba(17,24,39,.70); font-size: .92rem; }

    /* Footer (black) */
    footer{
      background: var(--footer-bg);
      color: rgba(255,255,255,.86);
    }
    footer .text-muted-lite{ color: rgba(255,255,255,.70); }
    footer a{ color: rgba(255,255,255,.86); text-decoration: none; }
    footer a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    footer .border-top, footer hr{ border-color: var(--footer-line) !important; }

    /* Focus */
    :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--brand-accent) 55%, #fff);
      outline-offset: 2px;
      border-radius: 10px;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; animation: none !important; }
    }
    
    .carousel-item {
      height: 60vh;
      position: relative;
    }

    @media (max-width: 768px){
      .carousel-item {
        height: 40vh;
        position: relative;
      }
    }
    
    .carousel-item img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    .carousel-caption {
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translateY(-50%);
      color: white;
      /* font-weight: bold; */
      /* font-size: 2rem; */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Optional: styling for the carousel control buttons */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      background-color: black;
    }

    /* Custom 5-column layout on large screens */
@media (min-width: 992px){
  .col-lg-2-4{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* New Products card */
.np-tile{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}

.np-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* image */
.np-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-name{
  padding: 10px 14px 12px;
  color: var(--ink);

  font-size: 0.98rem;
  line-height: 1.28;

  /* 多行省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  overflow: hidden;

  /* 保证卡片标题区高度一致，不裁字 */
  min-height: calc(1.28em * 3 + 2px);

  /* 让长单词更容易断行 */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Back to top */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030; /* above most components */

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.90);

  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.back-to-top:hover{
  transform: translateY(0);
  border-color: rgba(17,24,39,.20);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

.back-to-top:active{
  transform: translateY(1px);
}

/* Visible state */
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dark footer/header harmony (optional) */
.back-to-top span{
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}


/* ===============================
   MEGA MENU – STABLE VERSION
   =============================== */

/* 防止被 navbar 裁剪 */
header,
.navbar,
.navbar .container,
.navbar .navbar-collapse{
  overflow: visible;
}

/* 基础样式 */
.mega-menu{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);

  width: 640px;
  max-width: calc(100vw - 24px);

  padding: 20px;
}

/* 标题 */
.mega-title{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,24,39,.55);
  margin-bottom: .6rem;
}

/* 子项 */
.mega-menu .dropdown-item{
  border-radius: 10px;
  padding: .55rem .75rem;
  color: var(--ink);
}
.mega-menu .dropdown-item:hover{
  background: rgba(17,24,39,.06);
}

/* ===============================
   DESKTOP HOVER BEHAVIOR
   =============================== */

@media (min-width: 992px){

  /* 默认隐藏 */
  .nav-item.dropdown .mega-menu{
    display: none;
    position: absolute;
  }

  /* hover 整个 dropdown 容器 */
  .nav-item.dropdown:hover > .mega-menu{
    display: block;
  }

  /* 居中定位（不会溢出） */
  .navbar .nav-item.dropdown > .mega-menu{
    left: 70%;
    transform: translateX(-50%);
    margin-top: 0;
  }
}

/* ===============================
   MOBILE – Bootstrap 控制
   =============================== */

@media (max-width: 991.98px){

  .nav-item.dropdown .mega-menu{
    width: 100%;
    max-width: 100%;
    position: static;
    box-shadow: none;
    border-radius: 10px;
    padding: 12px;
  }
}

/* Footer social */
.footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;

  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);

  transition: all .18s ease;
}

.footer-social a:hover{
  color: #fff;
  border-color: var(--brand-accent);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}

.footer-social i{
  font-size: 16px;
}


/* Hot products tabs */
.hot-tabs{
  gap: 2rem;
}

.hot-tabs .nav-link{
  border: none;
  color: rgba(17,24,39,.65);
  font-weight: 500;
  padding: .4rem 0;
  position: relative;
}

.hot-tabs .nav-link.active{
  color: var(--ink);
}

.hot-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background: var(--brand-accent);
}

.hot-tabs .nav-link:hover{
  color: var(--ink);
}
/* ===============================
   Product Card (4 col desktop / 2 col mobile)
   =============================== */

.product-card{
  /* border: 1px solid rgba(17,24,39,.10); */
  border-radius: 1rem;
  background: #fff;
  /* box-shadow: 0 10px 30px rgba(0,0,0,.05); */
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5px;
}

.product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* Image */
.product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
.product-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* Title — 单行省略 */
.product-title{
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-title a{
  color: inherit;       /* 继承父元素颜色 */
  text-decoration: none; /* 去掉下划线 */
}
.product-title a:hover{
  color: var(--bs-accent); /* hover 可以变色 */
}
/* Summary */
.product-summary{
  font-size: 0.9rem;
  color: rgba(17,24,39,.70);
  margin: 0;
  flex-grow: 1;
}

/* Details link */
.product-link{
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-accent);
}

.product-link:hover{
  text-decoration: underline;
}


/* ===============================
   About Company Section
   =============================== */

.about-media{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

.about-media img,
.about-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content spacing */
.about-content{
  max-width: 560px;
}

/* Certification logos */
.cert-logos img{
  opacity: .85;
  transition: opacity .2s ease;
}

.cert-logos img:hover{
  opacity: 1;
}

.cert-logo{
  height: 34px;
  width: auto;
  opacity: .8;
  transition: opacity .2s ease;
}

/* Scoped overrides for index.html */

    body.index{
      --brand-accent: #1E6BFF; /* TODO: replace with your brand color */
      --bg: #ffffff;
      --surface: #ffffff;
      --ink: #0b0f14;
      --muted: #6b7280;
      --line: rgba(17,24,39,.10);

      --header-bg: #0b0f14;
      --footer-bg: #0b0f14;
      --header-line: rgba(255,255,255,.12);
      --footer-line: rgba(255,255,255,.12);

      --radius-lg: 1rem;

      /* Typography scale (B2B restrained) */
      --fs-body: 16px;
      --lh-body: 1.6;
      --h1: clamp(1.65rem, 2.0vw, 2.15rem);
      --h2: clamp(1.35rem, 1.45vw, 1.65rem);
      --h3: 1.05rem;
      --lh-h: 1.18;
    }

    html{ scroll-behavior: smooth; }
    bodybody.index{
      background: var(--bg);
      color: var(--ink);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      text-rendering: optimizeLegibility;
    }

    /* Header (black) */
    body.index .navbar-glass{
      background: rgba(11,15,20,.96);
      border-bottom: 1px solid var(--header-line);
      backdrop-filter: none;
    }

    body.index .brand-dot{
      width: .6rem; height: .6rem; border-radius: 50%;
      background: var(--brand-accent);
      display: inline-block; margin-right: .55rem;
      box-shadow: 0 0 0 3px rgba(30,107,255,.18);
    }

    body.index .navbar .nav-link{ color: rgba(255,255,255,.82); }
    body.index .navbar .nav-link:hover{ color: #fff; }
    body.index .navbar .nav-link.active{ color: #fff; }

    /* Buttons */
    body.index .btn-accent{
      --bs-btn-bg: var(--brand-accent);
      --bs-btn-border-color: var(--brand-accent);
      --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
    }
    body.index .btn-outline-accent{
      --bs-btn-color: var(--ink);
      --bs-btn-border-color: rgba(17,24,39,.25);
      --bs-btn-hover-bg: rgba(17,24,39,.06);
      --bs-btn-hover-border-color: rgba(17,24,39,.30);
    }

    /* Sections */
    body.index .section{
      padding: 30px 0;
      /* border-top: 1px solid rgba(17,24,39,.06); */
    }
    @media  (min-width: 992px){
      body.index .section{ padding: 30px 0; }
    }

    body.index .kicker{
      color: rgba(17,24,39,.65);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .82rem;
    }

    /* Headings: make ALL h1 smaller globally */
    body.index h1{
      font-size: var(--h1);
      line-height: var(--lh-h);
      letter-spacing: -0.02em;
      font-weight: 700;
      margin-bottom: .6rem;
    }
    body.index h2{
      font-size: var(--h2);
      line-height: var(--lh-h);
      letter-spacing: -0.015em;
      font-weight: 700;
    }
    body.index h3{
      font-size: var(--h3);
      line-height: 1.25;
      font-weight: 700;
    }
    body.index .display-1, body.index .display-2, body.index .display-3, body.index .display-4, body.index .display-5, body.index .display-6{
      font-size: inherit !important;
      line-height: inherit !important;
    }
    body.index .section-title{ margin-bottom: .4rem; }
    body.index .lead{
      font-size: 1.05rem;
      line-height: 1.7;
      color: rgba(17,24,39,.78);
    }

    /* Cards (light) */
    body.index .card-dark{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    body.index .icon-badge{
      width: 44px; height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(17,24,39,.04);
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.85);
    }

    /* Hero */
    body.index .hero-wrap{ padding-top: 84px; padding-bottom: 28px; }
    body.index .hero-panel{
      border-radius: calc(var(--radius-lg) + .25rem);
      border: 1px solid var(--line);
      overflow: hidden;
      background:
        radial-gradient(1200px 500px at 10% 10%, rgba(30,107,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 100%);
      box-shadow: 0 18px 50px rgba(0,0,0,.08);
    }
    body.index .hero-media{
      border-left: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(17,24,39,.06), rgba(255,255,255,0) 55%),
        radial-gradient(700px 260px at 70% 20%, rgba(30,107,255,.14), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
    }
    body.index .hero-copy{ max-width: 58ch; }

    /* Images: consistent placeholder system */
    body.index img{ max-width: 100%; height: auto; }
    body.index .img-ph{
      width: 100%;
      display: block;
      /*border-radius: 18px;
      border: 1px solid rgba(17,24,39,.10);*/
      background: rgba(17,24,39,.02);
    }
    body.index .img-cover{ width: 100%; height: 100%; object-fit: cover; }
    body.index .ph-news img{
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Category tiles */
    body.index .cat-tile{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: 1rem;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    body.index .cat-tile:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
    }
    body.index .cat-tile img{ height: 180px; object-fit: cover; }
    @media  (min-width: 992px){ body.index .cat-tile img{ height: 200px; } }
    body.index .cat-name{
      padding: 14px 16px;
      font-weight: 600;
      color: var(--ink);
    }

    /* Stats */
    body.index .stat{
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(17,24,39,.02);
      padding: 16px;
      height: 100%;
    }
    body.index .stat .num{ font-size: 1.25rem; font-weight: 700; color: var(--ink); }
    body.index .stat .lbl{ color: rgba(17,24,39,.70); font-size: .92rem; }

    /* Footer (black) */
    body.index footer{
      background: var(--footer-bg);
      color: rgba(255,255,255,.86);
    }
    body.index footer .text-muted-lite{ color: rgba(255,255,255,.70); }
    body.index footer a{ color: rgba(255,255,255,.86); text-decoration: none; }
    body.index footer a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    body.index footer .border-top, body.index footer hr{ border-color: var(--footer-line) !important; }

    /* Focus */
    body.index :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--brand-accent) 55%, #fff);
      outline-offset: 2px;
      border-radius: 10px;
    }

    @media  (prefers-reduced-motion: reduce) {
      html{ scroll-behavior: auto; }
      body.index *, body.index *::before, body.index *::after{ transition: none !important; animation: none !important; }
    }
        body.index .carousel-item{
      height: 60vh;
      position: relative;
    }





    
    body.index .carousel-item img{
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    body.index .carousel-caption{
      position: absolute;
      top: 40%;
      transform: translateY(-50%);
      color: white;
      /* font-weight: bold; */
      /* font-size: 2rem; */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      max-width: 600px;
    }

        /* 左 */
    .caption-left {
      left: 10%;
      text-align: left;
    }

    /* 中 */
    .caption-center {
      left: 30%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    /* 右 */
    .caption-right {
      right: 10%;
      left: auto;
      text-align: left;
    }

    /* Optional: styling for the carousel control buttons */
    body.index .carousel-control-prev-icon, body.index .carousel-control-next-icon{
      background-color: black;
    }

    /* Custom 5-column layout on large screens */
@media  (min-width: 992px){
  body.index .col-lg-2-4{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* New Products card */
body.index .np-tile{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}

body.index .np-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* image */
body.index .np-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.index .np-name{
  padding: 10px 14px 12px;
  color: var(--ink);

  font-size: 0.98rem;
  line-height: 1.28;

  /* 多行省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  overflow: hidden;

  /* 保证卡片标题区高度一致，不裁字 */
  min-height: calc(1.28em * 3 + 2px);

  /* 让长单词更容易断行 */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Back to top */
body.index .back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030; /* above most components */

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.90);

  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

body.index .back-to-top:hover{
  transform: translateY(0);
  border-color: rgba(17,24,39,.20);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

body.index .back-to-top:active{
  transform: translateY(1px);
}

/* Visible state */
body.index .back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dark footer/header harmony (optional) */
body.index .back-to-top span{
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

/* Reduce motion */
@media  (prefers-reduced-motion: reduce){
  body.index .back-to-top{ transition: none; }
}


/* ===============================
   MEGA MENU – STABLE VERSION
   =============================== */

/* 防止被 navbar 裁剪 */
body.index header, body.index .navbar, body.index .navbar .container, body.index .navbar .navbar-collapse{
  overflow: visible;
}

/* 基础样式 */
body.index .mega-menu{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);

  width: 640px;
  max-width: calc(100vw - 24px);

  padding: 20px;
}

/* 标题 */
body.index .mega-title{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,24,39,.55);
  margin-bottom: .6rem;
}

/* 子项 */
body.index .mega-menu .dropdown-item{
  border-radius: 10px;
  padding: .55rem .75rem;
  color: var(--ink);
}
body.index .mega-menu .dropdown-item:hover{
  background: rgba(17,24,39,.06);
}

/* ===============================
   DESKTOP HOVER BEHAVIOR
   =============================== */

@media  (min-width: 992px){

  /* 默认隐藏 */
  body.index .nav-item.dropdown .mega-menu{
    display: none;
    position: absolute;
  }

  /* hover 整个 dropdown 容器 */
  body.index .nav-item.dropdown:hover > .mega-menu{
    display: block;
  }

  /* 居中定位（不会溢出） */
  body.index .navbar .nav-item.dropdown > .mega-menu{
    left: 70%;
    transform: translateX(-50%);
    margin-top: 0;
  }
}

/* ===============================
   MOBILE – Bootstrap 控制
   =============================== */

@media  (max-width: 991.98px){

  body.index .nav-item.dropdown .mega-menu{
    width: 100%;
    max-width: 100%;
    position: static;
    box-shadow: none;
    border-radius: 10px;
    padding: 12px;
  }
}

/* Footer social */
body.index .footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;

  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);

  transition: all .18s ease;
}

body.index .footer-social a:hover{
  color: #fff;
  border-color: var(--brand-accent);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}

body.index .footer-social i{
  font-size: 16px;
}


/* Hot products tabs */
body.index .hot-tabs{
  gap: 2rem;
}

body.index .hot-tabs .nav-link{
  border: none;
  color: rgba(17,24,39,.65);
  font-weight: 500;
  padding: .4rem 0;
  position: relative;
}

body.index .hot-tabs .nav-link.active{
  color: var(--ink);
}

body.index .hot-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background: var(--brand-accent);
}

body.index .hot-tabs .nav-link:hover{
  color: var(--ink);
}
/* ===============================
   Product Card (4 col desktop / 2 col mobile)
   =============================== */

body.index .product-card{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5px;
}

body.index .product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* Image */
body.index .product-media img{
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

/* Body */
body.index .product-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* Title — 单行省略 */
body.index .product-title{
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Summary */
body.index .product-summary{
  font-size: 0.9rem;
  color: rgba(17,24,39,.70);
  margin: 0;
  flex-grow: 1;
}

/* Details link */
body.index .product-link{
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-accent);
}

body.index .product-link:hover{
  text-decoration: underline;
}


/* ===============================
   About Company Section
   =============================== */

body.index .about-media{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

body.index .about-media img, body.index .about-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content spacing */
body.index .about-content{
  max-width: 560px;
}

/* Certification logos */
body.index .cert-logos img{
  opacity: .85;
  transition: opacity .2s ease;
}

body.index .cert-logos img:hover{
  opacity: 1;
}

body.index .cert-logo{
  height: 34px;
  width: auto;
  opacity: .8;
  transition: opacity .2s ease;
}

  

/* Extra scoped block 2 for index.html */

    body.index .hero-banner{
      background-size: cover; /* Makes sure the image covers the entire banner */
      background-position: center center; /* Centers the image */
      background-repeat: no-repeat; /* Prevents repeating the image */
      height: 60vh; /* Set the height to a percentage of the viewport height */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Adjust the height for smaller screens */
    @media  (max-width: 768px) {
      body.index .hero-banner{
        height: 50vh;
      }
    }

    /* Optional: Adjust text position */
    body.index .hero-banner .container{
      text-align: center;
      padding: 20px;
    }
  

/* Scoped overrides for blog-detail.html */

    body.blog-detail{
      --brand-accent: #1E6BFF; /* TODO: replace with your brand color */
      --bg: #ffffff;
      --surface: #ffffff;
      --ink: #0b0f14;
      --muted: #6b7280;
      --line: rgba(17,24,39,.10);

      --header-bg: #0b0f14;
      --footer-bg: #0b0f14;
      --header-line: rgba(255,255,255,.12);
      --footer-line: rgba(255,255,255,.12);

      --radius-lg: 1rem;

      /* Typography scale (B2B restrained) */
      --fs-body: 16px;
      --lh-body: 1.6;
      --h1: clamp(1.65rem, 2.0vw, 2.15rem);
      --h2: clamp(1.35rem, 1.45vw, 1.65rem);
      --h3: 1.05rem;
      --lh-h: 1.18;
    }

    html{ scroll-behavior: smooth; }
    bodybody.blog-detail{
      background: var(--bg);
      color: var(--ink);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      text-rendering: optimizeLegibility;
    }

    /* Header (black) */
    body.blog-detail .navbar-glass{
      background: rgba(11,15,20,.96);
      border-bottom: 1px solid var(--header-line);
      backdrop-filter: none;
    }

    body.blog-detail .brand-dot{
      width: .6rem; height: .6rem; border-radius: 50%;
      background: var(--brand-accent);
      display: inline-block; margin-right: .55rem;
      box-shadow: 0 0 0 3px rgba(30,107,255,.18);
    }

    body.blog-detail .navbar .nav-link{ color: rgba(255,255,255,.82); }
    body.blog-detail .navbar .nav-link:hover{ color: #fff; }
    body.blog-detail .navbar .nav-link.active{ color: #fff; }

    /* Buttons */
    body.blog-detail .btn-accent{
      --bs-btn-bg: var(--brand-accent);
      --bs-btn-border-color: var(--brand-accent);
      --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
    }
    body.blog-detail .btn-outline-accent{
      --bs-btn-color: var(--ink);
      --bs-btn-border-color: rgba(17,24,39,.25);
      --bs-btn-hover-bg: rgba(17,24,39,.06);
      --bs-btn-hover-border-color: rgba(17,24,39,.30);
    }

    /* Sections */
    body.blog-detail .section{
      padding: 30px 0;
    }
    @media  (min-width: 992px){
      body.blog-detail .section{ padding: 30px 0; }
    }

    body.blog-detail .kicker{
      color: rgba(17,24,39,.65);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .82rem;
    }

    /* Headings: make ALL h1 smaller globally */
    body.blog-detail h1{
      font-size: var(--h1);
      line-height: var(--lh-h);
      letter-spacing: -0.02em;
      font-weight: 700;
      margin-bottom: .6rem;
    }
    body.blog-detail h2{
      font-size: var(--h2);
      line-height: var(--lh-h);
      letter-spacing: -0.015em;
      font-weight: 700;
    }
    body.blog-detail h3{
      font-size: var(--h3);
      line-height: 1.25;
      font-weight: 700;
    }
    body.blog-detail .display-1, body.blog-detail .display-2, body.blog-detail .display-3, body.blog-detail .display-4, body.blog-detail .display-5, body.blog-detail .display-6{
      font-size: inherit !important;
      line-height: inherit !important;
    }
    body.blog-detail .section-title{ margin-bottom: .4rem; }
    body.blog-detail .lead{
      font-size: 1.05rem;
      line-height: 1.7;
      color: rgba(17,24,39,.78);
    }

    /* Cards (light) */
    body.blog-detail .card-dark{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    body.blog-detail .icon-badge{
      width: 44px; height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(17,24,39,.04);
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.85);
    }

    /* Hero */
    body.blog-detail .hero-wrap{ padding-top: 84px; padding-bottom: 28px; }
    body.blog-detail .hero-panel{
      border-radius: calc(var(--radius-lg) + .25rem);
      border: 1px solid var(--line);
      overflow: hidden;
      background:
        radial-gradient(1200px 500px at 10% 10%, rgba(30,107,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 100%);
      box-shadow: 0 18px 50px rgba(0,0,0,.08);
    }
    body.blog-detail .hero-media{
      border-left: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(17,24,39,.06), rgba(255,255,255,0) 55%),
        radial-gradient(700px 260px at 70% 20%, rgba(30,107,255,.14), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
    }
    body.blog-detail .hero-copy{ max-width: 58ch; }

    /* Images: consistent placeholder system */
    body.blog-detail img{ max-width: 100%; height: auto; }
    body.blog-detail .img-ph{
      width: 100%;
      display: block;
      /*border-radius: 18px;
      border: 1px solid rgba(17,24,39,.10);*/
      background: rgba(17,24,39,.02);
    }
    body.blog-detail .img-cover{ width: 100%; height: 100%; object-fit: cover; }
    body.blog-detail .ph-news img{
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Category tiles */
    body.blog-detail .cat-tile{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: 1rem;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    body.blog-detail .cat-tile:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
    }
    body.blog-detail .cat-tile img{ height: 180px; object-fit: cover; }
    @media  (min-width: 992px){ body.blog-detail .cat-tile img{ height: 200px; } }
    body.blog-detail .cat-name{
      padding: 14px 16px;
      font-weight: 600;
      color: var(--ink);
    }

    /* Stats */
    body.blog-detail .stat{
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(17,24,39,.02);
      padding: 16px;
      height: 100%;
    }
    body.blog-detail .stat .num{ font-size: 1.25rem; font-weight: 700; color: var(--ink); }
    body.blog-detail .stat .lbl{ color: rgba(17,24,39,.70); font-size: .92rem; }

    /* Footer (black) */
    body.blog-detail footer{
      background: var(--footer-bg);
      color: rgba(255,255,255,.86);
    }
    body.blog-detail footer .text-muted-lite{ color: rgba(255,255,255,.70); }
    body.blog-detail footer a{ color: rgba(255,255,255,.86); text-decoration: none; }
    body.blog-detail footer a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    body.blog-detail footer .border-top, body.blog-detail footer hr{ border-color: var(--footer-line) !important; }

    /* Focus */
    body.blog-detail :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--brand-accent) 55%, #fff);
      outline-offset: 2px;
      border-radius: 10px;
    }

    @media  (prefers-reduced-motion: reduce) {
      html{ scroll-behavior: auto; }
      body.blog-detail *, body.blog-detail *::before, body.blog-detail *::after{ transition: none !important; animation: none !important; }
    }
        body.blog-detail .carousel-item{
      height: 60vh;
      position: relative;
    }

    body.blog-detail .carousel-item img{
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    body.blog-detail .carousel-caption{
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translateY(-50%);
      color: white;
      font-weight: bold;
      font-size: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Optional: styling for the carousel control buttons */
    body.blog-detail .carousel-control-prev-icon, body.blog-detail .carousel-control-next-icon{
      background-color: black;
    }

    /* Custom 5-column layout on large screens */
@media  (min-width: 992px){
  body.blog-detail .col-lg-2-4{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* New Products card */
body.blog-detail .np-tile{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}

body.blog-detail .np-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* image */
body.blog-detail .np-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.blog-detail .np-name{
  padding: 10px 14px 12px;
  color: var(--ink);

  font-size: 0.98rem;
  line-height: 1.28;

  /* 多行省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  overflow: hidden;

  /* 保证卡片标题区高度一致，不裁字 */
  min-height: calc(1.28em * 3 + 2px);

  /* 让长单词更容易断行 */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Back to top */
body.blog-detail .back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030; /* above most components */

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.90);

  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

body.blog-detail .back-to-top:hover{
  transform: translateY(0);
  border-color: rgba(17,24,39,.20);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

body.blog-detail .back-to-top:active{
  transform: translateY(1px);
}

/* Visible state */
body.blog-detail .back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dark footer/header harmony (optional) */
body.blog-detail .back-to-top span{
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

/* Reduce motion */
@media  (prefers-reduced-motion: reduce){
  body.blog-detail .back-to-top{ transition: none; }
}


/* ===============================
   MEGA MENU – STABLE VERSION
   =============================== */

/* 防止被 navbar 裁剪 */
body.blog-detail header, body.blog-detail .navbar, body.blog-detail .navbar .container, body.blog-detail .navbar .navbar-collapse{
  overflow: visible;
}

/* 基础样式 */
body.blog-detail .mega-menu{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);

  width: 640px;
  max-width: calc(100vw - 24px);

  padding: 20px;
}

/* 标题 */
body.blog-detail .mega-title{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,24,39,.55);
  margin-bottom: .6rem;
}

/* 子项 */
body.blog-detail .mega-menu .dropdown-item{
  border-radius: 10px;
  padding: .55rem .75rem;
  color: var(--ink);
}
body.blog-detail .mega-menu .dropdown-item:hover{
  background: rgba(17,24,39,.06);
}

/* ===============================
   DESKTOP HOVER BEHAVIOR
   =============================== */

@media  (min-width: 992px){

  /* 默认隐藏 */
  body.blog-detail .nav-item.dropdown .mega-menu{
    display: none;
    position: absolute;
  }

  /* hover 整个 dropdown 容器 */
  body.blog-detail .nav-item.dropdown:hover > .mega-menu{
    display: block;
  }

  /* 居中定位（不会溢出） */
  body.blog-detail .navbar .nav-item.dropdown > .mega-menu{
    left: 70%;
    transform: translateX(-50%);
    margin-top: 0;
  }
}

/* ===============================
   MOBILE – Bootstrap 控制
   =============================== */

@media  (max-width: 991.98px){

  body.blog-detail .nav-item.dropdown .mega-menu{
    width: 100%;
    max-width: 100%;
    position: static;
    box-shadow: none;
    border-radius: 10px;
    padding: 12px;
  }
}

/* Footer social */
body.blog-detail .footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;

  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);

  transition: all .18s ease;
}

body.blog-detail .footer-social a:hover{
  color: #fff;
  border-color: var(--brand-accent);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}

body.blog-detail .footer-social i{
  font-size: 16px;
}


/* Hot products tabs */
body.blog-detail .hot-tabs{
  gap: 2rem;
}

body.blog-detail .hot-tabs .nav-link{
  border: none;
  color: rgba(17,24,39,.65);
  font-weight: 500;
  padding: .4rem 0;
  position: relative;
}

body.blog-detail .hot-tabs .nav-link.active{
  color: var(--ink);
}

body.blog-detail .hot-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background: var(--brand-accent);
}

body.blog-detail .hot-tabs .nav-link:hover{
  color: var(--ink);
}
/* ===============================
   Product Card (4 col desktop / 2 col mobile)
   =============================== */

body.blog-detail .product-card{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5px;
}

body.blog-detail .product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* Image */
body.blog-detail .product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
body.blog-detail .product-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* Title — 单行省略 */
body.blog-detail .product-title{
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Summary */
body.blog-detail .product-summary{
  font-size: 0.9rem;
  color: rgba(17,24,39,.70);
  margin: 0;
  flex-grow: 1;
}

/* Details link */
body.blog-detail .product-link{
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-accent);
}

body.blog-detail .product-link:hover{
  text-decoration: underline;
}


/* ===============================
   About Company Section
   =============================== */

body.blog-detail .about-media{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

body.blog-detail .about-media img, body.blog-detail .about-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content spacing */
body.blog-detail .about-content{
  max-width: 560px;
}

/* Certification logos */
body.blog-detail .cert-logos img{
  opacity: .85;
  transition: opacity .2s ease;
}

body.blog-detail .cert-logos img:hover{
  opacity: 1;
}

body.blog-detail .cert-logo{
  height: 34px;
  width: auto;
  opacity: .8;
  transition: opacity .2s ease;
}

  

/* Scoped overrides for products.html */

    body.products{
      --brand-accent: #1E6BFF; /* TODO: replace with your brand color */
      --bg: #ffffff;
      --surface: #ffffff;
      --ink: #0b0f14;
      --muted: #6b7280;
      --line: rgba(17,24,39,.10);

      --header-bg: #0b0f14;
      --footer-bg: #0b0f14;
      --header-line: rgba(255,255,255,.12);
      --footer-line: rgba(255,255,255,.12);

      --radius-lg: 1rem;

      /* Typography scale (B2B restrained) */
      --fs-body: 16px;
      --lh-body: 1.6;
      --h1: clamp(1.65rem, 2.0vw, 2.15rem);
      --h2: clamp(1.35rem, 1.45vw, 1.65rem);
      --h3: 1.05rem;
      --lh-h: 1.18;
    }

    html{ scroll-behavior: smooth; }
    bodybody.products{
      background: var(--bg);
      color: var(--ink);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      text-rendering: optimizeLegibility;
    }

    /* Header (black) */
    body.products .navbar-glass{
      background: rgba(11,15,20,.96);
      border-bottom: 1px solid var(--header-line);
      backdrop-filter: none;
    }

    body.products .brand-dot{
      width: .6rem; height: .6rem; border-radius: 50%;
      background: var(--brand-accent);
      display: inline-block; margin-right: .55rem;
      box-shadow: 0 0 0 3px rgba(30,107,255,.18);
    }

    body.products .navbar .nav-link{ color: rgba(255,255,255,.82); }
    body.products .navbar .nav-link:hover{ color: #fff; }
    body.products .navbar .nav-link.active{ color: #fff; }

    /* Buttons */
    body.products .btn-accent{
      --bs-btn-bg: var(--brand-accent);
      --bs-btn-border-color: var(--brand-accent);
      --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
    }
    body.products .btn-outline-accent{
      --bs-btn-color: var(--ink);
      --bs-btn-border-color: rgba(17,24,39,.25);
      --bs-btn-hover-bg: rgba(17,24,39,.06);
      --bs-btn-hover-border-color: rgba(17,24,39,.30);
    }

    /* Sections */
    body.products .section{
      padding: 30px 0;
      border-top: 1px solid rgba(17,24,39,.06);
    }
    @media  (min-width: 992px){
      body.products .section{ padding: 30px 0; }
    }

    body.products .kicker{
      color: rgba(17,24,39,.65);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .82rem;
    }

    /* Headings: make ALL h1 smaller globally */
    body.products h1{
      font-size: var(--h1);
      line-height: var(--lh-h);
      letter-spacing: -0.02em;
      font-weight: 700;
      margin-bottom: .6rem;
    }
    body.products h2{
      font-size: var(--h2);
      line-height: var(--lh-h);
      letter-spacing: -0.015em;
      font-weight: 700;
    }
    body.products h3{
      font-size: var(--h3);
      line-height: 1.25;
      font-weight: 700;
    }
    body.products .display-1, body.products .display-2, body.products .display-3, body.products .display-4, body.products .display-5, body.products .display-6{
      font-size: inherit !important;
      line-height: inherit !important;
    }
    body.products .section-title{ margin-bottom: .4rem; }
    body.products .lead{
      font-size: 1.05rem;
      line-height: 1.7;
      color: rgba(17,24,39,.78);
    }

    /* Cards (light) */
    body.products .card-dark{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    body.products .icon-badge{
      width: 44px; height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(17,24,39,.04);
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.85);
    }

    /* Hero */
    body.products .hero-wrap{ padding-top: 84px; padding-bottom: 28px; }
    body.products .hero-panel{
      border-radius: calc(var(--radius-lg) + .25rem);
      border: 1px solid var(--line);
      overflow: hidden;
      background:
        radial-gradient(1200px 500px at 10% 10%, rgba(30,107,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 100%);
      box-shadow: 0 18px 50px rgba(0,0,0,.08);
    }
    body.products .hero-media{
      border-left: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(17,24,39,.06), rgba(255,255,255,0) 55%),
        radial-gradient(700px 260px at 70% 20%, rgba(30,107,255,.14), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
    }
    body.products .hero-copy{ max-width: 58ch; }

    /* Images: consistent placeholder system */
    body.products img{ max-width: 100%; height: auto; }
    body.products .img-ph{
      width: 100%;
      display: block;
      /*border-radius: 18px;
      border: 1px solid rgba(17,24,39,.10);*/
      background: rgba(17,24,39,.02);
    }
    body.products .img-cover{ width: 100%; height: 100%; object-fit: cover; }
    body.products .ph-news img{
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Category tiles */
    body.products .cat-tile{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: 1rem;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    body.products .cat-tile:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
    }
    body.products .cat-tile img{ height: 180px; object-fit: cover; }
    @media  (min-width: 992px){ body.products .cat-tile img{ height: 200px; } }
    body.products .cat-name{
      padding: 14px 16px;
      font-weight: 600;
      color: var(--ink);
    }

    /* Stats */
    body.products .stat{
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(17,24,39,.02);
      padding: 16px;
      height: 100%;
    }
    body.products .stat .num{ font-size: 1.25rem; font-weight: 700; color: var(--ink); }
    body.products .stat .lbl{ color: rgba(17,24,39,.70); font-size: .92rem; }

    /* Footer (black) */
    body.products footer{
      background: var(--footer-bg);
      color: rgba(255,255,255,.86);
    }
    body.products footer .text-muted-lite{ color: rgba(255,255,255,.70); }
    body.products footer a{ color: rgba(255,255,255,.86); text-decoration: none; }
    body.products footer a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    body.products footer .border-top, body.products footer hr{ border-color: var(--footer-line) !important; }

    /* Focus */
    body.products :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--brand-accent) 55%, #fff);
      outline-offset: 2px;
      border-radius: 10px;
    }

    @media  (prefers-reduced-motion: reduce) {
      html{ scroll-behavior: auto; }
      body.products *, body.products *::before, body.products *::after{ transition: none !important; animation: none !important; }
    }
        body.products .carousel-item{
      height: 60vh;
      position: relative;
    }

    body.products .carousel-item img{
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    body.products .carousel-caption{
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translateY(-50%);
      color: white;
      font-weight: bold;
      font-size: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Optional: styling for the carousel control buttons */
    body.products .carousel-control-prev-icon, body.products .carousel-control-next-icon{
      background-color: black;
    }

    /* Custom 5-column layout on large screens */
@media  (min-width: 992px){
  body.products .col-lg-2-4{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* New Products card */
body.products .np-tile{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}

body.products .np-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* image */
body.products .np-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.products .np-name{
  padding: 10px 14px 12px;
  color: var(--ink);

  font-size: 0.98rem;
  line-height: 1.28;

  /* 多行省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  overflow: hidden;

  /* 保证卡片标题区高度一致，不裁字 */
  min-height: calc(1.28em * 3 + 2px);

  /* 让长单词更容易断行 */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Back to top */
body.products .back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030; /* above most components */

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.90);

  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

body.products .back-to-top:hover{
  transform: translateY(0);
  border-color: rgba(17,24,39,.20);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

body.products .back-to-top:active{
  transform: translateY(1px);
}

/* Visible state */
body.products .back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dark footer/header harmony (optional) */
body.products .back-to-top span{
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

/* Reduce motion */
@media  (prefers-reduced-motion: reduce){
  body.products .back-to-top{ transition: none; }
}


/* ===============================
   MEGA MENU – STABLE VERSION
   =============================== */

/* 防止被 navbar 裁剪 */
body.products header, body.products .navbar, body.products .navbar .container, body.products .navbar .navbar-collapse{
  overflow: visible;
}

/* 基础样式 */
body.products .mega-menu{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);

  width: 640px;
  max-width: calc(100vw - 24px);

  padding: 20px;
}

/* 标题 */
body.products .mega-title{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,24,39,.55);
  margin-bottom: .6rem;
}

/* 子项 */
body.products .mega-menu .dropdown-item{
  border-radius: 10px;
  padding: .55rem .75rem;
  color: var(--ink);
}
body.products .mega-menu .dropdown-item:hover{
  background: rgba(17,24,39,.06);
}

/* ===============================
   DESKTOP HOVER BEHAVIOR
   =============================== */

@media  (min-width: 992px){

  /* 默认隐藏 */
  body.products .nav-item.dropdown .mega-menu{
    display: none;
    position: absolute;
  }

  /* hover 整个 dropdown 容器 */
  body.products .nav-item.dropdown:hover > .mega-menu{
    display: block;
  }

  /* 居中定位（不会溢出） */
  body.products .navbar .nav-item.dropdown > .mega-menu{
    left: 70%;
    transform: translateX(-50%);
    margin-top: 0;
  }
}

/* ===============================
   MOBILE – Bootstrap 控制
   =============================== */

@media  (max-width: 991.98px){

  body.products .nav-item.dropdown .mega-menu{
    width: 100%;
    max-width: 100%;
    position: static;
    box-shadow: none;
    border-radius: 10px;
    padding: 12px;
  }
}

/* Footer social */
body.products .footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;

  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);

  transition: all .18s ease;
}

body.products .footer-social a:hover{
  color: #fff;
  border-color: var(--brand-accent);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}

body.products .footer-social i{
  font-size: 16px;
}


/* Hot products tabs */
body.products .hot-tabs{
  gap: 2rem;
}

body.products .hot-tabs .nav-link{
  border: none;
  color: rgba(17,24,39,.65);
  font-weight: 500;
  padding: .4rem 0;
  position: relative;
}

body.products .hot-tabs .nav-link.active{
  color: var(--ink);
}

body.products .hot-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background: var(--brand-accent);
}

body.products .hot-tabs .nav-link:hover{
  color: var(--ink);
}
/* ===============================
   Product Card (4 col desktop / 2 col mobile)
   =============================== */

body.products .product-card{
  /* border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem; */
  background: #fff;
  /* box-shadow: 0 10px 30px rgba(0,0,0,.05); */
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5px;
}

body.products .product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* Image */
body.products .product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
body.products .product-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* Title — 单行省略 */
body.products .product-title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  /* 使文本显示两行，并且超过两行时显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Summary */
body.products .product-summary{
  font-size: 0.9rem;
  color: rgba(17,24,39,.70);
  margin: 0;
  flex-grow: 1;
   display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示三行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Details link */
body.products .product-link{
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-accent);
}

body.products .product-link:hover{
  text-decoration: underline;
}

/* 去掉超链接的颜色和下划线 */
body.products .product-body a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 使用继承的颜色 */
}

.product-list a{
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 使用继承的颜色 */
}

/* ===============================
   About Company Section
   =============================== */

body.products .about-media{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

body.products .about-media img, body.products .about-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content spacing */
body.products .about-content{
  max-width: 560px;
}

/* Certification logos */
body.products .cert-logos img{
  opacity: .85;
  transition: opacity .2s ease;
}

body.products .cert-logos img:hover{
  opacity: 1;
}

body.products .cert-logo{
  height: 34px;
  width: auto;
  opacity: .8;
  transition: opacity .2s ease;
}

/* List view: remove card look, add subtle dividers */
body.products .product-list .card.card-dark{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0 !important;          /* 用分割线代替卡片间距 */
}

body.products .product-list .card.card-dark .card-body{
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid rgba(17,24,39,.06);  /* 浅灰线 */
}

body.products .product-list .card.card-dark:last-child .card-body{
  border-bottom: 0;                     /* 最后一个不要线 */
}

/* Sidebar: remove card border + clean list style */
body.products .sidebar-panel{
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Accordion "cardless" */
body.products .sidebar-acc .sidebar-item{
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(17,24,39,.06);
  border-radius: 0;
}

body.products .sidebar-acc .sidebar-item:last-child{
  border-bottom: 0;
}

/* Accordion button */
body.products .sidebar-btn{
  background: transparent !important;
  color: var(--ink);
  padding: .75rem 0;
  box-shadow: none !important;
  border: 0;
}

body.products .sidebar-btn:not(.collapsed){
  color: var(--ink);
}

/* Remove default accordion body padding style */
body.products .sidebar-body{
  padding: .5rem 0 .9rem;
}

/* Links */
body.products .sidebar-links .sidebar-link{
  display: block;
  padding: .45rem 0;
  color: rgba(17,24,39,.78);
  text-decoration: none;
  border-radius: 10px;
}

body.products .sidebar-links .sidebar-link:hover{
  color: var(--ink);
}

/* Active item highlight */
body.products .sidebar-links .sidebar-link.active{
  color: var(--ink);
  font-weight: 600;
  position: relative;
  padding-left: .75rem;
}

body.products .sidebar-links .sidebar-link.active::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  background: var(--brand-accent);
  border-radius: 999px;
}
  

/* Scoped overrides for product-detail.html */

    body.product-detail{
      --brand-accent: #1E6BFF; /* TODO: replace with your brand color */
      --bg: #ffffff;
      --surface: #ffffff;
      --ink: #0b0f14;
      --muted: #6b7280;
      --line: rgba(17,24,39,.10);

      --header-bg: #0b0f14;
      --footer-bg: #0b0f14;
      --header-line: rgba(255,255,255,.12);
      --footer-line: rgba(255,255,255,.12);

      --radius-lg: 1rem;

      /* Typography scale (B2B restrained) */
      --fs-body: 16px;
      --lh-body: 1.6;
      --h1: clamp(1.65rem, 2.0vw, 2.15rem);
      --h2: clamp(1.35rem, 1.45vw, 1.65rem);
      --h3: 1.05rem;
      --lh-h: 1.18;
    }

    html{ scroll-behavior: smooth; }
    bodybody.product-detail{
      background: var(--bg);
      color: var(--ink);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      text-rendering: optimizeLegibility;
    }

    /* Header (black) */
    body.product-detail .navbar-glass{
      background: rgba(11,15,20,.96);
      border-bottom: 1px solid var(--header-line);
      backdrop-filter: none;
    }

    body.product-detail .brand-dot{
      width: .6rem; height: .6rem; border-radius: 50%;
      background: var(--brand-accent);
      display: inline-block; margin-right: .55rem;
      box-shadow: 0 0 0 3px rgba(30,107,255,.18);
    }

    body.product-detail .navbar .nav-link{ color: rgba(255,255,255,.82); }
    body.product-detail .navbar .nav-link:hover{ color: #fff; }
    body.product-detail .navbar .nav-link.active{ color: #fff; }

    /* Buttons */
    body.product-detail .btn-accent{
      --bs-btn-bg: var(--brand-accent);
      --bs-btn-border-color: var(--brand-accent);
      --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-accent) 86%, #000);
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
    }
    body.product-detail .btn-outline-accent{
      --bs-btn-color: var(--ink);
      --bs-btn-border-color: rgba(17,24,39,.25);
      --bs-btn-hover-bg: rgba(17,24,39,.06);
      --bs-btn-hover-border-color: rgba(17,24,39,.30);
    }

    /* Sections */
    body.product-detail .section{
      padding: 30px 0;
      /* border-top: 1px solid rgba(17,24,39,.06); */
    }
    @media  (min-width: 992px){
      body.product-detail .section{ padding: 30px 0; }
    }

    body.product-detail .kicker{
      color: rgba(17,24,39,.65);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .82rem;
    }

    /* Headings: make ALL h1 smaller globally */
    body.product-detail h1{
      font-size: var(--h1);
      line-height: var(--lh-h);
      letter-spacing: -0.02em;
      font-weight: 700;
      margin-bottom: .6rem;
    }
    body.product-detail h2{
      font-size: var(--h2);
      line-height: var(--lh-h);
      letter-spacing: -0.015em;
      font-weight: 700;
    }
    body.product-detail h3{
      font-size: var(--h3);
      line-height: 1.25;
      font-weight: 700;
    }
    body.product-detail .display-1, body.product-detail .display-2, body.product-detail .display-3, body.product-detail .display-4, body.product-detail .display-5, body.product-detail .display-6{
      font-size: inherit !important;
      line-height: inherit !important;
    }
    body.product-detail .section-title{ margin-bottom: .4rem; }
    body.product-detail .lead{
      font-size: 1.05rem;
      line-height: 1.7;
      color: rgba(17,24,39,.78);
    }

    /* Cards (light) */
    body.product-detail .card-dark{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    body.product-detail .icon-badge{
      width: 44px; height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(17,24,39,.04);
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.85);
    }

    /* Hero */
    body.product-detail .hero-wrap{ padding-top: 84px; padding-bottom: 28px; }
    body.product-detail .hero-panel{
      border-radius: calc(var(--radius-lg) + .25rem);
      border: 1px solid var(--line);
      overflow: hidden;
      background:
        radial-gradient(1200px 500px at 10% 10%, rgba(30,107,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 100%);
      box-shadow: 0 18px 50px rgba(0,0,0,.08);
    }
    body.product-detail .hero-media{
      border-left: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(17,24,39,.06), rgba(255,255,255,0) 55%),
        radial-gradient(700px 260px at 70% 20%, rgba(30,107,255,.14), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
    }
    body.product-detail .hero-copy{ max-width: 58ch; }

    /* Images: consistent placeholder system */
    body.product-detail img{ max-width: 100%; height: auto; }
    body.product-detail .img-ph{
      width: 100%;
      display: block;
      /*border-radius: 18px;
      border: 1px solid rgba(17,24,39,.10);*/
      background: rgba(17,24,39,.02);
    }
    body.product-detail .img-cover{ width: 100%; height: 100%; object-fit: cover; }
    body.product-detail .ph-news img{
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Category tiles */
    body.product-detail .cat-tile{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: 1rem;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    body.product-detail .cat-tile:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
    }
    body.product-detail .cat-tile img{ height: 180px; object-fit: cover; }
    @media  (min-width: 992px){ body.product-detail .cat-tile img{ height: 200px; } }
    body.product-detail .cat-name{
      padding: 14px 16px;
      font-weight: 600;
      color: var(--ink);
    }

    /* Stats */
    body.product-detail .stat{
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(17,24,39,.02);
      padding: 16px;
      height: 100%;
    }
    body.product-detail .stat .num{ font-size: 1.25rem; font-weight: 700; color: var(--ink); }
    body.product-detail .stat .lbl{ color: rgba(17,24,39,.70); font-size: .92rem; }

    /* Footer (black) */
    body.product-detail footer{
      background: var(--footer-bg);
      color: rgba(255,255,255,.86);
    }
    body.product-detail footer .text-muted-lite{ color: rgba(255,255,255,.70); }
    body.product-detail footer a{ color: rgba(255,255,255,.86); text-decoration: none; }
    body.product-detail footer a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    body.product-detail footer .border-top, body.product-detail footer hr{ border-color: var(--footer-line) !important; }

    /* Focus */
    body.product-detail :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--brand-accent) 55%, #fff);
      outline-offset: 2px;
      border-radius: 10px;
    }

    @media  (prefers-reduced-motion: reduce) {
      html{ scroll-behavior: auto; }
      body.product-detail *, body.product-detail *::before, body.product-detail *::after{ transition: none !important; animation: none !important; }
    }
        body.product-detail .carousel-item{
      height: 60vh;
      position: relative;
    }

    body.product-detail .carousel-item img{
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    body.product-detail .carousel-caption{
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translateY(-50%);
      color: white;
      font-weight: bold;
      font-size: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Optional: styling for the carousel control buttons */
    body.product-detail .carousel-control-prev-icon, body.product-detail .carousel-control-next-icon{
      background-color: black;
    }

    /* Custom 5-column layout on large screens */
@media  (min-width: 992px){
  body.product-detail .col-lg-2-4{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* New Products card */
body.product-detail .np-tile{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}

body.product-detail .np-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* image */
body.product-detail .np-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.product-detail .np-name{
  padding: 10px 14px 12px;
  color: var(--ink);

  font-size: 0.98rem;
  line-height: 1.28;

  /* 多行省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;

  overflow: hidden;

  /* 保证卡片标题区高度一致，不裁字 */
  min-height: calc(1.28em * 3 + 2px);

  /* 让长单词更容易断行 */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Back to top */
body.product-detail .back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030; /* above most components */

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.90);

  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

body.product-detail .back-to-top:hover{
  transform: translateY(0);
  border-color: rgba(17,24,39,.20);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

body.product-detail .back-to-top:active{
  transform: translateY(1px);
}

/* Visible state */
body.product-detail .back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dark footer/header harmony (optional) */
body.product-detail .back-to-top span{
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

/* Reduce motion */
@media  (prefers-reduced-motion: reduce){
  body.product-detail .back-to-top{ transition: none; }
}


/* ===============================
   MEGA MENU – STABLE VERSION
   =============================== */

/* 防止被 navbar 裁剪 */
body.product-detail header, body.product-detail .navbar, body.product-detail .navbar .container, body.product-detail .navbar .navbar-collapse{
  overflow: visible;
}

/* 基础样式 */
body.product-detail .mega-menu{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);

  width: 640px;
  max-width: calc(100vw - 24px);

  padding: 20px;
}

/* 标题 */
body.product-detail .mega-title{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,24,39,.55);
  margin-bottom: .6rem;
}

/* 子项 */
body.product-detail .mega-menu .dropdown-item{
  border-radius: 10px;
  padding: .55rem .75rem;
  color: var(--ink);
}
body.product-detail .mega-menu .dropdown-item:hover{
  background: rgba(17,24,39,.06);
}

/* ===============================
   DESKTOP HOVER BEHAVIOR
   =============================== */

@media  (min-width: 992px){

  /* 默认隐藏 */
  body.product-detail .nav-item.dropdown .mega-menu{
    display: none;
    position: absolute;
  }

  /* hover 整个 dropdown 容器 */
  body.product-detail .nav-item.dropdown:hover > .mega-menu{
    display: block;
  }

  /* 居中定位（不会溢出） */
  body.product-detail .navbar .nav-item.dropdown > .mega-menu{
    left: 70%;
    transform: translateX(-50%);
    margin-top: 0;
  }
}

/* ===============================
   MOBILE – Bootstrap 控制
   =============================== */

@media  (max-width: 991.98px){

  body.product-detail .nav-item.dropdown .mega-menu{
    width: 100%;
    max-width: 100%;
    position: static;
    box-shadow: none;
    border-radius: 10px;
    padding: 12px;
  }
}

/* Footer social */
body.product-detail .footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;

  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);

  transition: all .18s ease;
}

body.product-detail .footer-social a:hover{
  color: #fff;
  border-color: var(--brand-accent);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}

body.product-detail .footer-social i{
  font-size: 16px;
}


/* Hot products tabs */
body.product-detail .hot-tabs{
  gap: 2rem;
}

body.product-detail .hot-tabs .nav-link{
  border: none;
  color: rgba(17,24,39,.65);
  font-weight: 500;
  padding: .4rem 0;
  position: relative;
}

body.product-detail .hot-tabs .nav-link.active{
  color: var(--ink);
}

body.product-detail .hot-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background: var(--brand-accent);
}

body.product-detail .hot-tabs .nav-link:hover{
  color: var(--ink);
}
/* ===============================
   Product Card (4 col desktop / 2 col mobile)
   =============================== */

body.product-detail .product-card{
  /* border: 1px solid rgba(17,24,39,.10); */
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5px;
}

body.product-detail .product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.08);
}

/* Image */
body.product-detail .product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
body.product-detail .product-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* Title — 单行省略 */
body.product-detail .product-title{
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Summary */
body.product-detail .product-summary{
  font-size: 0.9rem;
  color: rgba(17,24,39,.70);
  margin: 0;
  flex-grow: 1;
        display: -webkit-box;
      -webkit-line-clamp: 3; /* 限制显示三行 */
      -webkit-box-orient: vertical;
      overflow: hidden;
}

/* Details link */
body.product-detail .product-link{
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-accent);
}

body.product-detail .product-link:hover{
  text-decoration: underline;
}


 body.product-detail  .product-body a {
      text-decoration: none; /* 去掉下划线 */
      color: inherit; /* 使用继承的颜色 */
    }

/* ===============================
   About Company Section
   =============================== */

body.product-detail .about-media{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

body.product-detail .about-media img, body.product-detail .about-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content spacing */
body.product-detail .about-content{
  max-width: 560px;
}

/* Certification logos */
body.product-detail .cert-logos img{
  opacity: .85;
  transition: opacity .2s ease;
}

body.product-detail .cert-logos img:hover{
  opacity: 1;
}

body.product-detail .cert-logo{
  height: 34px;
  width: auto;
  opacity: .8;
  transition: opacity .2s ease;
}

/* Image viewer */
/* -------- Product image viewer -------- */
body.product-detail .product-viewer .modal-content{
  border-radius: 14px;
  overflow: hidden;
}
body.product-detail .product-viewer #viewerImage{
  max-height: 85vh;
  object-fit: contain;
  width: 100%;
}

/* Navigation arrows */
body.product-detail .viewer-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 52px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.35);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  user-select: none;
}
body.product-detail .viewer-nav:hover{
  background: rgba(0,0,0,.60);
}
body.product-detail .viewer-prev{ left: 10px; }
body.product-detail .viewer-next{ right: 10px; }

/* Small screens: slightly smaller arrows */
@media  (max-width: 576px){
  body.product-detail .viewer-nav{ width: 44px; height: 56px; font-size: 34px; }
}
/* Counter */
body.product-detail .viewer-counter{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
}

body.product-detail .product-viewer .modal-content{
  background:#ffffff;
}

body.product-detail .product-viewer .modal-body{
  background:#f7f8fa;
}
body.product-detail .product-viewer .btn-close{
  z-index:10;
}
  

.page-404{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.error-code{
  font-size:120px;
  font-weight:700;
  line-height:1;
  color:var(--brand-accent);
}

.error-title{
  font-size:28px;
  font-weight:600;
  margin-bottom:10px;
}

.error-desc{
  color:#666;
  max-width:520px;
  margin:auto;
}

  .hero-panel{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  .section-space{
    padding: 72px 0;
  }
  .service-card{
    height: 100%;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 1rem;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }
  .service-card h3{
    font-size: 1.1rem;
    margin-bottom: .75rem;
  }
  .service-card p,
  .service-card li{
    color: #555;
    line-height: 1.8;
  }
  .process-step{
    padding: 1.25rem;
    border-radius: 1rem;
    background: #f8f9fa;
    height: 100%;
  }
  .process-step .step-num{
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    margin-bottom: 1rem;
    background: var(--brand-accent, #ff6a00);
    color: #fff;
  }
  .cta-box{
    border-radius: 1.25rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(0,0,0,.92), rgba(0,0,0,.72));
    color: #fff;
  }
  .cta-box p{
    color: rgba(255,255,255,.82);
  }

  #noResults {
  padding: 1rem;
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
  border-radius: 0.375rem;
}

.recommended-product img{
  transition: transform .3s ease;
}

.recommended-product:hover img{
  transform: scale(1.05);
}

.recommended-product:hover .fw-semibold{
  color: var(--brand-accent);
}

.recommended-product .product-title1{
  display: -webkit-box;
  -webkit-line-clamp: 3;       /* 最多2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 3); /* 兼容 */
}

.sidebar-item > h4 > a.accordion-button::after{
  display:none;
}

/* .sidebar-btn{
  font-weight:600;
} */

.floating-actions{
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-action{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform .16s ease, box-shadow .16s ease;
}

.floating-action:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  color: #fff;
}

.floating-action i{
  font-size: 18px;
  line-height: 1;
}

.floating-whatsapp{ background: #25d366; }
.floating-phone{ background: #0d6efd; }
.floating-email{ background: #6f42c1; }
.floating-shop{ background: #fd7e14; }

.floating-action-text{
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(11,15,20,.92);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.floating-action:hover .floating-action-text{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-2px);
}

@media (max-width: 767.98px){
  .floating-actions{
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
  }

  .floating-action{
    flex: 1 1 0;
    width: auto;
    height: 48px;
    border-radius: 999px;
    gap: 8px;
    padding: 0 12px;
  }

  .floating-action-text{
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    padding: 0;
    font-size: 14px;
  }

  .back-to-top{
    bottom: 72px;
  }
}



.product-swiper {
  position: relative;
}

.cat-circle {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
}

.cat-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

/* hover放大 */
.cat-circle:hover img {
  transform: scale(1.05);
}

/* 中间文字 */
.cat-circle span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px;

  background: rgba(0,0,0,0.35);
}

/* 箭头优化 */
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px;
}

.products-nav .nav-dropdown-toggle{
  color: rgba(255,255,255,.82);
  border: 0;
  background: transparent;
  line-height: 1;
}

.products-nav .nav-dropdown-toggle:hover{
  color: #fff;
}

.products-nav .nav-dropdown-toggle:focus{
  box-shadow: none;
}

.nav-item.dropdown .mega-menu{
  min-width: 720px;
  max-width: 960px;
}

.mega-parent-link{
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-bottom: .25rem;
}

.mega-parent-link:hover{
  color: var(--brand-accent);
}

.mega-title{
  margin-bottom: .5rem;
  font-size: .92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.mega-menu .dropdown-item{
  white-space: normal;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.sidebar-header{
  margin: 0;
}

.sidebar-parent-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.6rem 0rem;
  background: #fff;
}

.sidebar-parent-link{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
  font-size: 0.95rem;  
}

.sidebar-parent-link:hover{
  /* color: var(--brand-accent); */
}

.sidebar-toggle-btn{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(17,24,39,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.sidebar-toggle-btn:hover{
  background: rgba(17,24,39,.06);
  color: var(--ink);
}

.sidebar-toggle-btn i{
  transition: transform .16s ease;
}

.sidebar-toggle-btn[aria-expanded="true"] i{
  transform: rotate(180deg);
}

/* 子分类区域 */
.sidebar-body{
  padding: .75rem 1rem .25rem 1rem;
}

.sidebar-links li + li{
  margin-top: .4rem;
}

.sidebar-link{
  display: block;
  color: rgba(17,24,39,.78);
  text-decoration: none;
  line-height: 1.4;
  padding: .2rem 0;
}

.sidebar-link:hover{
  color: var(--brand-accent);
}

@media (max-width: 991.98px){
  .products-nav .nav-dropdown-toggle{
    display: none;
  }
}