@import url("visual-refinements.css?v=20260807-6");
/* Unified archive hero and footer polish */
.sub-hero,.sub-hero .container{text-align:center!important}
.sub-hero .section-tag,.sub-hero h1,.sub-hero p{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.footer-bottom{justify-content:flex-start!important;gap:10px!important;color:var(--gray-500)!important}
.footer-bottom p{margin:0!important;color:inherit!important}
.footer-bottom p:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-bottom p+p{margin-left:0!important}
.footer-bottom a,.footer-bottom a:visited,.footer-bottom a:hover,.footer-bottom a:active{color:inherit!important;text-decoration:none!important}
@media(max-width:700px){.footer-bottom{align-items:flex-start!important;text-align:left!important}.footer-bottom p:first-child{display:block}.footer-bottom p+p{margin-top:6px!important}}
/* 鍏ㄥ眬鏍峰紡 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reusable catalog detail templates */
.catalog-body .template-section{margin:0 0 42px}.catalog-body .feature-list{display:grid;gap:18px}.catalog-body .feature-item{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:24px;border-radius:14px;background:#f3f6fa}.catalog-body .feature-icon,.catalog-body .scenario-icon{font-size:30px}.catalog-body .feature-item h3,.catalog-body .scenario-card h3{margin:0 0 7px;color:#10213c}.catalog-body .feature-item p,.catalog-body .scenario-card p{margin:0;color:#66778e}.catalog-body .advantage-list{list-style:none;padding:0}.catalog-body .advantage-list li{padding:14px 2px;border-bottom:1px solid #e8edf3}.catalog-body .scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.catalog-body .scenario-card{padding:25px;border-radius:14px;background:#f3f6fa}.catalog-body .scenario-card .scenario-icon{margin-bottom:14px}@media(max-width:800px){.catalog-body .scenario-grid{grid-template-columns:1fr}}

/* Catalog detail layout: editorial content as the only main body, with case-style related cards. */
body:has(.catalog-layout){background:#f5f7fa!important}.catalog-layout{max-width:1180px!important;align-items:start!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:28px!important}.catalog-layout .catalog-main{min-width:0!important}.catalog-layout .catalog-cover{display:none!important}.catalog-layout .catalog-body{width:100%!important;max-width:none!important;margin:0!important;padding:44px 50px!important;border:1px solid #e3e8ef!important;border-radius:20px!important;background:#fff!important;box-shadow:0 14px 40px rgba(18,42,76,.06)!important;color:#334157!important}.catalog-layout .catalog-body img{display:block!important;max-width:100%!important;height:auto!important;margin:24px auto!important;border-radius:14px!important;object-fit:contain!important;overflow:hidden!important}.catalog-layout .catalog-body figure{overflow:hidden!important;border-radius:14px!important}.catalog-layout .catalog-side>div{padding:25px!important;border:1px solid #e3e8ef!important;border-radius:17px!important;background:#fff!important;box-shadow:0 10px 30px rgba(18,42,76,.05)!important}.catalog-layout .catalog-side h3{margin:0 0 18px;color:#17243a;font-size:18px}.catalog-related-list{list-style:none;margin:0;padding:0}.catalog-related-list li{margin:0!important}.catalog-related-list li+li{border-top:1px solid #edf0f4}.catalog-related-list a{display:block;padding:14px 0;color:#203654;text-decoration:none;line-height:1.6;font-weight:600}.catalog-related-list a:hover{color:#1768f2}.catalog-layout .catalog-side .catalog-related-cta{display:grid;justify-items:center;gap:18px;padding:30px 25px!important;border:0!important;background:#0d1c35!important;color:#fff;text-align:center;box-shadow:0 18px 38px rgba(13,28,53,.16)!important}.catalog-related-cta h3{margin:0!important;color:#fff!important}.catalog-related-cta p{margin:0;color:#b8c8dd;line-height:1.7}.catalog-related-cta .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:116px;border:0;border-radius:8px;background:#1a6cff;color:#fff}@media(max-width:800px){.catalog-layout{grid-template-columns:1fr!important;padding-left:20px!important;padding-right:20px!important}.catalog-layout .catalog-body{padding:28px 22px!important}}

/* Configurable product detail first viewport */
.product-hero-hidden{display:none}.product-detail-showcase{max-width:1200px;margin:0 auto;padding:130px 24px 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.product-detail-gallery{position:relative}.product-detail-gallery>span{position:absolute;z-index:2;top:18px;left:18px;padding:7px 11px;border-radius:20px;background:#fff;color:#1768f2;font-size:11px;font-weight:700}.product-detail-stage{height:460px;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:linear-gradient(145deg,#edf5ff,#dff8f7)}.product-detail-stage img{width:100%;height:100%;object-fit:contain}.product-detail-placeholder{display:grid;place-items:center;gap:16px;font-size:84px;color:#123456}.product-detail-placeholder small{font-size:13px;color:#6c7d92}.product-detail-tabs{display:flex;gap:10px;margin-top:14px}.product-detail-tabs button{flex:1;padding:11px;border:1px solid #e0e6ef;border-radius:8px;background:#fff;color:#6a798d}.product-detail-tabs .active{border-color:#1768f2;color:#1768f2}.product-detail-copy>small{color:#1768f2;font-size:12px;font-weight:800;letter-spacing:2.4px}.product-detail-copy h1{margin:16px 0 18px;color:#0b1830;font-size:38px}.product-detail-copy>p{color:#53647b;font-size:17px;line-height:1.8}.product-detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.product-detail-tags span{padding:7px 11px;border-radius:5px;background:#edf5ff;color:#2869c7;font-size:12px}.product-detail-points{display:grid;gap:10px}.product-detail-points>div{display:flex;align-items:center;gap:14px;padding:14px;border-radius:9px;background:#f7f9fc}.product-detail-points b{color:#9bbcf0}.product-detail-points span{color:#66758a;font-size:13px}.product-detail-points strong{margin-right:10px;color:#152943}.product-detail-copy dl{margin:24px 0;border-top:1px solid #e3e9f2}.product-detail-copy dl>div{display:grid;grid-template-columns:90px 1fr;padding:12px 0;border-bottom:1px solid #e3e9f2;font-size:13px}.product-detail-copy dt{font-weight:700}.product-detail-copy dd{margin:0;color:#69788c;line-height:1.6}.product-detail-actions{display:flex;gap:11px}.product-detail-actions a{padding:13px 23px;border-radius:8px;text-decoration:none;font-weight:700}.product-detail-actions .primary{background:#1768f2;color:#fff}.product-detail-actions .ghost{border:1px solid #cbd7e8;background:#fff;color:#27405f}@media(max-width:900px){.product-detail-showcase{grid-template-columns:1fr;padding-top:110px;gap:38px}.product-detail-stage{height:380px}}@media(max-width:560px){.product-detail-showcase{padding:100px 16px 48px}.product-detail-stage{height:280px}.product-detail-tabs{overflow:auto}.product-detail-tabs button{min-width:110px}.product-detail-copy h1{font-size:31px}.product-detail-actions{display:grid}}

:root {
  --primary: #1a6cff;
  --primary-dark: #0050d4;
  --primary-light: #e8f0ff;
  --accent: #00e5a0;
  --dark: #0b1426;
  --dark-2: #111d35;
  --gray-900: #1a2332;
  --gray-700: #3d4a5c;
  --gray-500: #6b7a8f;
  --gray-300: #b8c4d6;
  --gray-100: #f4f6fa;
  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 瀵艰埅鏍?*/
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s var(--ease);
}

.nav.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dark);
}

.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 18px;
}

.nav-logo-text {
  font-size: 20px;
  font-weight: 700;
}

.nav-logo-text span {
  color: var(--primary);
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  color: var(--gray-700);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}

.nav-links a:hover {
  color: var(--primary);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s var(--ease);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 鎸夐挳 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26, 108, 255, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary-light);
}

.btn-white {
  background: white;
  color: var(--primary);
}

.btn-white:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-ghost-white {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn-ghost-white:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-lg {
  padding: 16px 36px;
  font-size: 16px;
  border-radius: var(--radius-md);
}

.btn-block {
  width: 100%;
}

/* 璇︽儏椤?Hero */
.detail-hero {
  margin-top: 72px;
  padding: 80px 0;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  color: white;
  text-align: center;
}

.detail-tag {
  display: inline-block;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.detail-title {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}

.detail-desc {
  font-size: 18px;
  color: var(--gray-300);
  max-width: 640px;
  margin: 0 auto;
}

/* 璇︽儏椤靛唴瀹?*/
.detail-content {
  padding: 80px 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
}

.detail-main h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--gray-900);
}

.detail-main p {
  font-size: 16px;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* 鍔熻兘鍒楄〃 */
.feature-list {
  display: grid;
  gap: 24px;
  margin-bottom: 48px;
}

.feature-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 24px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  transition: all 0.3s var(--ease);
}

.feature-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-item h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gray-900);
}

.feature-item p {
  font-size: 14px;
  color: var(--gray-500);
  margin: 0;
}

/* 浼樺娍鍒楄〃 */
.advantage-list {
  list-style: none;
  margin-bottom: 48px;
}

.advantage-list li {
  padding: 12px 0;
  font-size: 15px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.advantage-list li:last-child {
  border-bottom: none;
}

/* 鍦烘櫙缃戞牸 */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.scenario-card {
  padding: 28px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  transition: all 0.3s var(--ease);
}

.scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.scenario-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.scenario-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gray-900);
}

.scenario-card p {
  font-size: 14px;
  color: var(--gray-500);
  margin: 0;
}

/* 渚ц竟鏍?*/
.detail-sidebar {
  position: sticky;
  top: 96px;
  height: fit-content;
}

.sidebar-card {
  padding: 28px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.sidebar-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--gray-900);
}

.related-list {
  list-style: none;
}

.related-list li {
  margin-bottom: 10px;
}

.related-list a {
  color: var(--gray-700);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.related-list a:hover {
  color: var(--primary);
}

.sidebar-cta {
  padding: 28px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-md);
  color: white;
  text-align: center;
}

.sidebar-cta h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.sidebar-cta p {
  font-size: 14px;
  margin-bottom: 20px;
  opacity: 0.9;
}

/* 椤佃剼 */
.footer {
  background: var(--dark);
  color: var(--gray-300);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-brand-logo {
  display: flex;
  align-items: center;
  min-height: 50px;
  margin-bottom: 16px;
}

.footer-brand-logo img {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-brand .nav-logo-icon {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.footer-brand span {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.footer-desc {
  font-size: 14px;
  line-height: 1.7;
}

.footer-col h4 {
  color: white;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: var(--gray-300);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: white;
}

.footer-col p {
  font-size: 14px;
  margin-bottom: 8px;
}

.footer-bottom {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gray-500);
}

/* 鍝嶅簲寮?*/
@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-sidebar {
    position: static;
  }

  .scenario-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .detail-title {
    font-size: 32px;
  }

  .detail-desc {
    font-size: 16px;
  }

  .feature-item {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}