/* ===== GUANFENG AUTO PARTS - Pure CSS ===== */
:root {
  --primary: #FF9500;
  --primary-hover: #e68700;
  --dark: #2B2B2B;
  --dark-deep: #1E1E1E;
  --dark-light: #3D3D3D;
  --light: #F5F5F5;
  --light-alt: #EEEEEE;
  --white: #FFFFFF;
  --gray: #A0A0A0;
  --gray-light: #C0C0C0;
  --border: rgba(255,255,255,0.08);
  --border-dark: rgba(0,0,0,0.08);
  --max-width: 1680px;
  --radius: 8px;
  --shadow: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.2);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
  color:#333; background:var(--light);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
.container { max-width:var(--max-width); margin:0 auto; padding:0 24px; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--radius);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all .3s ease; border:none;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-2px); box-shadow:0 4px 16px rgba(255,149,0,0.35); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.3); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-outline-dark { background:transparent; color:var(--dark); border:2px solid var(--dark); }
.btn-outline-dark:hover { background:var(--dark); color:#fff; }

/* ===== BREADCRUMB ===== */
.breadcrumb-nav { background: var(--dark); padding: 12px 0; border-bottom: 1px solid var(--border); }
.breadcrumb-nav ol { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumb-nav li { font-size: 13px; color: var(--gray); }
.breadcrumb-nav li a { color: var(--gray); transition: color 0.3s; text-decoration: none; }
.breadcrumb-nav li a:hover { color: var(--primary); }
.breadcrumb-nav li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,0.2); }
.breadcrumb-nav li:last-child { color: var(--primary); }

/* ===== SECTION LABELS ===== */
.section-label {
  color:var(--primary); font-size:13px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; margin-bottom:12px;
}
.section-title {
  font-size:clamp(28px,4vw,24px); 
  font-weight:700;
  line-height:1.2; color:var(--dark);
  margin-bottom:24px;
}
.section-cont{display:flex;flex-direction:column;gap:24px;}
.section-item{display:flex;align-items:flex-start;gap:16px;}
.section-item-title h4{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:4px;}
.section-item-title p{font-size:14px;color:var(--gray);}
.section-item-iocn{width:48px;height:48px;border-radius:var(--radius);background:rgba(255,149,0,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.section-title.white { color:#fff; }
.section-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);}
.section-contact{background:var(--primary);padding:80px 0;}
.section-contact h2{font-size:clamp(28px,4vw,44px);font-weight:800;color:#fff;margin-bottom:16px;}
.section-contact p{color:rgba(255,255,255,0.85);font-size:18px;max-width:600px;margin:0 auto 32px;}
.section-contact a{background:#fff;color:var(--primary);}
/* ===== SCROLL REVEAL ===== */
.reveal {
  transform:translateY(40px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ===== HEADER ===== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:all .4s ease; padding:16px 0;
}
.header.scrolled { background:rgba(43,43,43,0.97); backdrop-filter:blur(12px); padding:10px 0; box-shadow:var(--shadow); }
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.header-logo img { height:48px; }
.header-nav { display:flex; align-items:center; gap:60px; }
.header-nav a {
  font-size:14px; font-weight:500; color:rgba(255,255,255,0.75);
  transition:color .3s; position:relative;
}
.header-nav a:hover, .header-nav a.active { color:var(--primary); }
.header-nav a.active::after {
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:2px; background:var(--primary); border-radius:1px;
}
.header-right { display:flex; align-items:center; gap:16px; }
.lang-switch { position:relative; }
.lang-switch-btn {
  display:flex; align-items:center; gap:4px;
  font-size:13px; color:rgba(255,255,255,0.7); cursor:pointer;
  padding:6px 10px; border-radius:6px; transition:all .3s;
}
.lang-switch-btn:hover { color:#fff; background:rgba(255,255,255,0.08); }
.lang-dropdown {
  position:absolute; top:100%; right:0; margin-top:8px;
  background:var(--dark-deep); border-radius:var(--radius);
  overflow:hidden; min-width:100px; opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:all .25s ease;
  box-shadow:var(--shadow-lg);
}
.lang-switch.open .lang-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.lang-dropdown a {
  display:block; padding:10px 16px; font-size:13px; color:rgba(255,255,255,0.7);
  transition:all .2s;
}
.lang-dropdown a:hover { background:rgba(255,149,0,0.1); color:var(--primary); }
.menu-toggle { display:none; background:none; border:none; color:#fff; cursor:pointer; }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  position:fixed; top:0; right:-320px; width:320px; height:100vh;
  background:var(--dark-deep); z-index:1001; padding:80px 32px;
  transition:right .4s ease; overflow-y:auto;
}
.mobile-menu.open { right:0; }
.mobile-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;
  opacity:0; visibility:hidden; transition:all .3s;
}
.mobile-overlay.open { opacity:1; visibility:visible; }
.mobile-menu a {
  display:block; padding:14px 0; font-size:18px; font-weight:500;
  color:rgba(255,255,255,0.8); border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color .3s;
}
.mobile-menu a:hover { color:var(--primary); }

/* ===== HERO ===== */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset: 0; z-index: 0;}
.hero-bg img { width:100%; height:100%; object-fit:cover; transition: opacity 0.35s ease; }
.hero-overlay { position:absolute; inset:0; z-index:1;background:linear-gradient(135deg, rgba(30,30,30,0.88) 0%, rgba(43,43,43,0.75) 10%, rgba(43,43,43,0.5) 30%);}
.hero-title { font-size:clamp(36px,6vw,72px); font-weight:800; color:#fff; line-height:1.1; margin-bottom:24px;}
.hero-title span { color:var(--primary); }
.hero-desc { font-size:18px; color:rgba(255,255,255,0.7); max-width:560px; margin-bottom:36px; line-height:1.7;}
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }

/* Hero slider dots */
.hero-dots { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.hero-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.3); cursor:pointer; transition:all .3s; }
.hero-dot.active { background:var(--primary); width:28px; border-radius:5px; }
.swiper-banner{height:100vh; overflow:hidden;}
.swiper-slide{height:100vh; overflow:hidden;}
/*.ani{position:absolute; top:0px; left:0px; z-index:2; width:100%; height:100%;}*/
.hero-content {padding:280px 0px 0px 150px;; z-index:2; position:relative;}
.hero-subtitle {
  color:var(--primary); font-size:14px; font-weight:600;
  letter-spacing:4px; text-transform:uppercase; margin-bottom:20px;
}
/* ===== STATS BAR ===== */
.stats-bar {
  background:var(--dark); border-top:1px solid var(--border);
}
.stats-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.stat-item { padding:40px 24px; text-align:center; }
.stat-item:not(:last-child) { border-right:1px solid var(--border); }
.stat-number { font-size:36px; font-weight:700; color:var(--primary); line-height:1; }
.stat-label { font-size:14px; color:var(--gray); margin-top:8px; }

/* ===== SECTION PADDING ===== */
.section { padding:80px 0; }
.section.dark { background:var(--dark); }
.section.light { background:var(--light); }
.section.white { background:#fff; }

/* ===== ABOUT PREVIEW ===== */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-img { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; }
.about-img img { width:100%; height:100%; object-fit:cover; }
.about-badge {
  position:absolute; bottom:-20px; left:-20px;
  background:var(--primary); color:#fff; padding:20px 28px; border-radius:var(--radius);
}
.about-badge .num { font-size:32px; font-weight:800; }
.about-badge .txt { font-size:13px; opacity:0.9; }
.about-text p { color:#666; margin-bottom:16px; line-height:1.8; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.about-stat-item { background:#fff; padding:20px; border-radius:var(--radius); text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.about-stat-item .num { font-size:24px; font-weight:700; color:var(--primary); }
.about-stat-item .txt { font-size:12px; color:var(--gray); margin-top:4px; }

/* ===== PRODUCT CARDS ===== */
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product-card {
  background:var(--dark-deep); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border);
  transition:all .4s ease;
}
.product-card:hover { transform:translateY(-6px); border-color:rgba(255,149,0,0.25); box-shadow:var(--shadow-lg); }
.product-card-img { height:240px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--dark); padding:20px; }
.product-card-img img { max-height:100%; max-width:100%; object-fit:contain; }
.product-card-body { padding:24px; }
.product-card-cat { font-size:11px; color:var(--primary); font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.product-card-title { font-size:18px; font-weight:700; color:#fff; margin:8px 0; }
.product-card-desc { font-size:13px; color:var(--gray); line-height:1.7; }
/* === Product Showcase V5: Carousel + Grid Hybrid === */
.product-showcase { background: var(--dark); padding: 80px 0; }
.product-carousel-wrap { position: relative; overflow: hidden; margin-bottom: 48px; }
.product-carousel { display: flex; gap: 24px; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.product-slide { flex: 0 0 calc(50% - 12px); display: grid; grid-template-columns: 1fr 1fr; background: var(--dark-deep); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.product-slide-img { min-height: 320px; display: flex; align-items: center; justify-content: center; background: #1a1a1a; padding: 24px; }
.product-slide-img img { max-height: 240px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); transition: transform 0.5s ease; }
.product-slide:hover .product-slide-img img { transform: scale(1.05); }
.product-slide-info { padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; }
.product-slide-tag { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.product-slide-title { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.2; }
.product-slide-desc { font-size: 15px; color: var(--gray); line-height: 1.7; margin-bottom: 20px; }
.product-slide-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.product-slide-spec { font-size: 12px; color: var(--gray-light); background: rgba(255,255,255,0.05); padding: 6px 14px; border-radius: 20px; }
.product-slide-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; font-size: 14px; transition: gap 0.3s; }
.product-slide-btn:hover { gap: 14px; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,149,0,0.15); border: 1px solid rgba(255,149,0,0.3); color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: all 0.35s ease; }
.carousel-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.carousel-prev { left: -14px; }
.carousel-next { right: -14px; }
.product-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-mini-card { background: var(--dark-deep); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.4s ease; cursor: pointer; }
.product-mini-card:hover { transform: translateY(-6px); border-color: rgba(255,149,0,0.3); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.product-mini-img { height: 180px; display: flex; align-items: center; justify-content: center; background: #1a1a1a; padding: 20px; }
.product-mini-img img { max-height: 130px; max-width: 100%; object-fit: contain; transition: transform 0.4s ease; }
.product-mini-card:hover .product-mini-img img { transform: scale(1.08); }
.product-mini-body { padding: 20px; }
.product-mini-cat { font-size: 11px; color: var(--primary); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.product-mini-title { font-size: 16px; font-weight: 700; color: #fff; margin: 8px 0 6px; }
.product-mini-desc { font-size: 13px; color: var(--gray); line-height: 1.6; }
.cert-equip-section { padding: 80px 0; background: #fff; }
.cert-equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.cert-module h3, .equip-module h3 { font-size: 24px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.cert-module p, .equip-module p { font-size: 14px; color: var(--gray); margin-bottom: 24px; }
.cert-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-height:320px; overflow:hidden;}
.cert-gallery img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.4s ease; }
.cert-gallery img:hover { transform: scale(1.03); }
.cert-module .lab-list{margin-top:20px;}
.cert-module .lab-list ul{display:flex;flex-wrap:wrap;gap:10px;}
.cert-module .lab-list ul li{font-size:12px;color:var(--primary);background:rgba(255,149,0,0.1);padding:6px 14px;border-radius:20px;font-weight:500;}

.equip-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.equip-gallery img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius); transition: transform 0.4s ease; }
.equip-gallery img:hover { transform: scale(1.05); }
.equip-module .btn-list{margin-top:20px;}
.equip-module .raw-html-embed{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.equip-module .btn-list .btn-item{background:var(--light);padding:14px 18px;border-radius:var(--radius);text-align:center;}
.equip-module .btn-list .btn-item .run{font-size:22px;font-weight:700;color:var(--primary);}
.equip-module .btn-list .btn-item .name{font-size:12px;color:var(--gray);}

.breadcrumb-nav { background: var(--dark); padding: 12px 0; border-bottom: 1px solid var(--border); }
.breadcrumb-nav ol { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.breadcrumb-nav li { font-size: 13px; color: var(--gray); }
.breadcrumb-nav li a { color: var(--gray); transition: color 0.3s; }
.breadcrumb-nav li a:hover { color: var(--primary); }
.breadcrumb-nav li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,0.2); }
.breadcrumb-nav li:last-child { color: var(--primary); }
/* ===== NEWS CARDS ===== */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-card {
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:all .4s ease;
}
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.news-card-img { height:200px; overflow:hidden; }
.news-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.news-card:hover .news-card-img img { transform:scale(1.05); }
.news-card-body { padding:24px; }
.news-card-meta { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.news-card-date { font-size:12px; color:var(--gray); }
.news-card-tag { font-size:11px; color:var(--primary); background:rgba(255,149,0,0.1); padding:3px 10px; border-radius:4px; font-weight:500; }
.news-card-title { font-size:16px; font-weight:700; color:var(--dark); line-height:1.5; margin-bottom:8px; transition:color .3s; }
.news-card:hover .news-card-title { color:var(--primary); }
.news-card-excerpt { font-size:14px; color:var(--gray); line-height:1.6; }
.news-data{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.news-title{font-size:clamp(28px,5vw,48px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:20px;text-shadow:0 2px 20px rgba(0,0,0,0.3);}
.news-brief{color:rgba(255,255,255,0.8);font-size:17px;line-height:1.7;max-width:700px;}
/* ===== SERVICES ===== */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card {
  background:var(--light); border-radius:var(--radius); padding:40px 32px;
  transition:all .4s ease;
}
.service-card:hover { background:var(--dark); }
.service-icon {
  width:60px; height:60px; border-radius:var(--radius);
  background:rgba(255,149,0,0.1); display:flex; align-items:center; justify-content:center;
  margin-bottom:24px; transition:all .3s;
}
.service-card:hover .service-icon { background:var(--primary); }
.service-icon svg { width:28px; height:28px; color:var(--primary); transition:color .3s; }
.service-card:hover .service-icon svg { color:#fff; }
.service-card-title { font-size:20px; font-weight:700; color:var(--dark); margin-bottom:12px; transition:color .3s; }
.service-card:hover .service-card-title { color:#fff; }
.service-card-desc { font-size:14px; color:var(--gray); line-height:1.7; transition:color .3s; }
.service-card:hover .service-card-desc { color:rgba(255,255,255,0.5); }

/* ===== PROCESS STEPS ===== */
.process-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.process-step {
  background:var(--dark-deep); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 24px; text-align:center; position:relative; transition:all .3s;
}
.process-step:hover { border-color:rgba(255,149,0,0.3); }
.process-step-num {
  font-size:36px; font-weight:800; color:rgba(255,149,0,0.15);
  position:absolute; top:12px; right:16px;
}
.process-step-title { font-size:16px; font-weight:700; color:#fff; margin:16px 0 8px; }
.process-step-desc { font-size:13px; color:var(--gray); line-height:1.5; }

/* ===== CONTACT ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; }
.contact-info-icon {
  width:48px; height:48px; border-radius:var(--radius); background:rgba(255,149,0,0.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-icon svg { width:22px; height:22px; color:var(--primary); }
.contact-info-title { font-size:16px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.contact-info-text { font-size:14px; color:var(--gray); line-height:1.6; }
.contact-form input, .contact-form textarea {
  width:100%; padding:14px 18px; border:1px solid #ddd; border-radius:var(--radius);
  font-size:14px; font-family:inherit; transition:all .3s; margin-bottom:16px;
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,149,0,0.1); }
.contact-form textarea { min-height:140px; resize:vertical; }
.contact-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.contact-list .contact-add{background:#fff;padding:32px;border-radius:var(--radius);text-align:center;box-shadow:0 2px 12px rgba(0,0,0,0.06);transition:all .3s;}
.contact-list .contact-tel{}
.contact-icon{width:56px;height:56px;border-radius:var(--radius);background:rgba(255,149,0,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.contact-title{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:8px;}
.contact-txt{font-size:13px;color:var(--gray);line-height:1.6;}
.contact-feek{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.contact-feek-title{font-size:28px;font-weight:700;color:var(--dark);margin-bottom:8px;}
.contact-feek-txt{color:var(--gray);margin-bottom:24px;}
.contact-feek-item{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.contact-sele-title{width:100%;padding:14px 18px;border:1px solid #ddd;border-radius:var(--radius);font-size:14px;font-family:inherit;margin-bottom:16px;color:#666;}


/* ===== FOOTER ===== */
.footer { background:var(--dark-deep); padding:60px 0 0; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; }
.footer-brand img { height:44px; margin-bottom:20px; }
.footer-brand p { font-size:14px; color:var(--gray); line-height:1.7; }
.footer-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:20px; letter-spacing:1px; text-transform:uppercase; }
.footer-links a { display:block; font-size:14px; color:var(--gray); padding:6px 0; transition:color .3s; }
.footer-links a:hover { color:var(--primary); }
.footer-bottom { border-top:1px solid var(--border); margin-top:48px; padding:24px 0; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:13px; color:var(--gray); }
.footer-social{margin-top:30px; display:flex;gap:10px;}
.footer-social svg{width:30px; height:30px;}

/* Hero arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 149, 0, 0.15);
  border: 1px solid rgba(255, 149, 0, 0.3);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.35s ease;
}
.hero-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }
.marquee { background:var(--primary); padding:16px 0; overflow:hidden; white-space:nowrap; }
.marquee-inner { display:inline-block; width:100%;}
.marquee-inner span { font-size:16px; font-weight:700; color:#fff; letter-spacing:2px; margin:0 32px; opacity:0.85; }
.marquee-inner-grid{display: grid;gap: 1px;grid-template-columns: repeat(6, 1fr);background: var(--line); border: 1px solid var(--line);}
.marquee-inner-grid .item{background: #fff;aspect-ratio: 2.4 / 1;display: flex;align-items: center; justify-content: center; padding: 14px;}


@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ===== TIMELINE ===== */
.timeline { position:relative; }
.timeline::before {
  content:''; position:absolute; left:20px; top:0; bottom:0; width:2px; background:rgba(255,149,0,0.2);
}
.timeline-item { position:relative; padding-left:60px; padding-bottom:40px; }
.timeline-dot {
  position:absolute; left:12px; top:4px; width:18px; height:18px;
  background:var(--primary); border-radius:50%; border:3px solid var(--dark);
  box-shadow:0 0 0 3px rgba(255,149,0,0.2);
}
.timeline-year { font-size:20px; font-weight:800; color:var(--primary); margin-bottom:4px; }
.timeline-title { font-size:16px; font-weight:700; color:#fff; margin-bottom:6px; }
.timeline-desc { font-size:14px; color:var(--gray); line-height:1.6; }

/* ===== CERT CARDS ===== */
.cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cert-card { background:var(--dark-deep); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all .3s; }
.cert-card:hover { border-color:rgba(255,149,0,0.3); }
.cert-card img { width:100%; height:260px; object-fit:cover; }
.cert-card-body { padding:20px; }
.cert-card-title { font-size:16px; font-weight:700; color:#fff; }

/* ===== GALLERY ===== */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-item { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item.wide { grid-column:span 2; }
.gallery-item.tall { grid-row:span 2; }

/* ===== EQUIPMENT ===== */
.equip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.equip-card { background:var(--dark-deep); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:all .3s; }
.equip-card:hover { border-color:rgba(255,149,0,0.3); }
.equip-card-title { font-size:16px; font-weight:700; color:#fff; margin-bottom:4px; }
.equip-card-desc { font-size:13px; color:var(--gray); font-family:monospace; }

/* ===== PAGE HERO ===== */
.page-hero {
  position:relative; min-height:50vh; display:flex; align-items:center;
  overflow:hidden; background:var(--dark);
}
.page-hero-bg { position:absolute; inset:0; opacity:0.25; }
.page-hero-bg img { width:100%; height:100%; object-fit:cover; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,30,30,0.9) 0%, rgba(30,30,30,0.4) 100%); }
.page-hero-content { position:relative; z-index:2; padding:150px 0 150px 100px; width:100%;}
.page-hero-sub { color:var(--primary); font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; }
.page-hero-title { font-size:clamp(32px,5vw,26px); font-weight:800; color:#fff; line-height:1.5; text-transform: uppercase;}

/* ===== CATEGORY TABS ===== */
.tabs { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.tab-btn {
  padding:10px 24px; border-radius:var(--radius); font-size:14px; font-weight:500;
  cursor:pointer; border:none; background:#fff; color:var(--dark);
  transition:all .3s; box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.tab-btn.active { background:var(--primary); color:#fff; }
.tab-btn:hover:not(.active) { background:var(--light-alt); }

/* ===== PRODUCT DETAIL ===== */
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.product-detail-img { background:#fff; border-radius:var(--radius); padding:40px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.product-detail-img img { max-height:360px; max-width:100%; object-fit:contain; }
.product-detail-title { font-size:32px; font-weight:700; color:var(--dark); margin-bottom:12px; }
.product-detail-cat { display:inline-block; padding:4px 14px; background:rgba(255,149,0,0.1); color:var(--primary); font-size:12px; font-weight:600; border-radius:4px; margin-bottom:20px; }
.product-detail-desc { color:#666; line-height:1.8; margin-bottom:24px; }
.specs-table { width:100%; border-collapse:collapse; }
.specs-table th, .specs-table td { padding:14px 20px; text-align:left; font-size:14px; }
.specs-table th { background:var(--dark); color:#fff; font-weight:600; }
.specs-table tr { border-bottom:1px solid #eee; transition:background .2s; }
.specs-table tr:hover { background:var(--light); }

/* ===== RESPONSIVE ===== */

/* ===== PRODUCT PAGE: Category Introduction ===== */
.category-intro { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:48px; }
.category-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid #eee; transition:all .3s; }
.category-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(255,149,0,0.2); }
.category-card-img { height:220px; overflow:hidden; background:var(--dark); display:flex; align-items:center; justify-content:center; padding:20px; }
.category-card-img img { width:100%; height:100%; object-fit:contain; }
.category-card-body { padding:28px; }
.category-card-body .cat-label { font-size:11px; color:var(--primary); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.category-card-body h3 { font-size:20px; font-weight:700; color:var(--dark); margin:8px 0 12px; }
.category-card-body p { font-size:14px; color:#666; line-height:1.8; margin-bottom:16px; }
.category-features { display:flex; flex-direction:column; gap:8px; }
.category-feature { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dark); }
.category-feature svg { flex-shrink:0; }

/* ===== PRODUCT PAGE: Category Showcase ===== */
.cat-showcase { margin-bottom:80px; }
.cat-showcase-header { display:flex; gap:40px; align-items:center; margin-bottom:40px; padding:40px; background:linear-gradient(135deg, rgba(255,149,0,0.05) 0%, rgba(43,43,43,0.03) 100%); border-radius:var(--radius); border:1px solid rgba(255,149,0,0.1); }
.cat-showcase-img { width:240px; height:180px; flex-shrink:0; border-radius:var(--radius); overflow:hidden; background:var(--dark); display:flex; align-items:center; justify-content:center; }
.cat-showcase-img img { width:100%; height:100%; object-fit:contain; padding:16px; }
.cat-showcase-info { flex:1; }
.cat-showcase-info h3 { font-size:24px; font-weight:800; color:#ffffff; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.cat-showcase-info h3 .cat-badge { font-size:11px; background:var(--primary); color:#fff; padding:4px 12px; border-radius:20px; font-weight:700; letter-spacing:0.5px; }
.cat-showcase-info p { color:#666; font-size:15px; line-height:1.8; margin-bottom:16px; }
.cat-showcase-stats { display:flex; gap:32px; }
.cat-showcase-stats .cat-stat { text-align:center; }
.cat-showcase-stats .cat-stat .num { font-size:28px; font-weight:800; color:var(--primary); }
.cat-showcase-stats .cat-stat .lbl { font-size:12px; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; }

/* ===== PRODUCT PAGE: Product Grid Card ===== */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(350px, 1fr)); gap:24px; }
.product-grid-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid #eee; transition:all .3s; display:flex; flex-direction:column; }
.product-grid-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(255,149,0,0.2); }
.product-grid-img {height:200px; background:var(--dark); display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; position:relative; }
.product-grid-img a{height:200px; background:var(--dark); display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden;position:relative;}
.product-grid-img img { max-width:100%; max-height:100%; object-fit:contain; transition:transform .4s ease; }
.product-grid-card:hover .product-grid-img img { transform:scale(1.08); }
.product-grid-badge { position:absolute; top:12px; left:12px; background:var(--primary); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:0.5px; }
.product-grid-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.product-grid-name { font-size:17px; font-weight:700; color:var(--dark); margin-bottom:8px; line-height:1.3; }
.product-grid-car { font-size:13px; color:var(--gray); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.product-grid-specs { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.product-grid-spec { font-size:11px; padding:4px 10px; background:var(--light); color:var(--dark); border-radius:4px; font-weight:500; }
.product-grid-oem { margin-bottom:16px; }
.product-grid-oem-label { font-size:11px; color:var(--gray); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; font-weight:600; }
.product-grid-oem-list { display:flex; flex-wrap:wrap; gap:6px; }
.oem-tag { font-family:monospace; font-size:12px; padding:4px 10px; background:rgba(255,149,0,0.08); color:var(--primary); border:1px solid rgba(255,149,0,0.2); border-radius:4px; font-weight:600; }
.product-grid-actions { margin-top:auto; display:flex; gap:8px; }
.product-grid-actions .btn { flex:1; padding:10px 16px; font-size:13px; text-align:center; }
.proifno{border-radius:var(--radius);overflow:hidden;background:var(--dark);box-shadow:var(--shadow-lg);padding:40px;}
.proifno img{width:100%;max-height:400px;object-fit:contain;display:block;}
.infsort{font-size:12px;color:var(--primary);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.infoName{font-size:32px;font-weight:800;color:var(--dark);margin:8px 0 16px;line-height:1.2;}
.infoDesc{color:#666;line-height:1.8;margin-bottom:24px;}
.infoParam{background:var(--light);border-radius:var(--radius);padding:24px;margin-bottom:24px;}
.infoParamName{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:16px;}
.infoParamTable{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.infoItem{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #ddd;}
.infoItemInfoName{font-size:13px;color:#888;}
.infoItemInfoText{font-size:13px;font-weight:600;font-family:monospace;}


/* ===== PRODUCT PAGE: Product List Table ===== */
.product-list-section { margin-bottom:80px; }
.product-list-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:16px; }
.product-list-header h3 { font-size:24px; font-weight:700; color:var(--dark); }
.product-list-header .product-count { font-size:13px; color:var(--gray); }
.product-list-table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid #eee; }
.product-list-table th { background:var(--dark); color:#fff; font-weight:600; font-size:13px; padding:14px 16px; text-align:left; letter-spacing:0.5px; }
.product-list-table td { padding:12px 16px; font-size:14px; border-bottom:1px solid #f0f0f0; color:var(--dark); }
.product-list-table tr:hover { background:var(--light); }
.product-list-table .td-img { width:60px; }
.product-list-table .td-img img { width:50px; height:50px; object-fit:contain; }
.product-list-table .td-oem { font-family:monospace; font-size:13px; color:var(--primary); font-weight:600; }
.product-list-table .td-material { font-size:13px; color:#666; }
.product-list-table .td-car { font-size:13px; color:#555; }
.product-list-table .td-action { width:100px; text-align:right; }
.btn-inquiry-sm { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; background:var(--primary); color:#fff; border-radius:6px; font-size:12px; font-weight:600; text-decoration:none; transition:all .2s; border:none; cursor:pointer; }
.btn-inquiry-sm:hover { background:#e68700; transform:translateY(-1px); }
.pro_bott{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
/* ===== PRODUCT PAGE: Product Detail Modal ===== */
.product-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:2000; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
.product-modal-overlay.active { display:flex; }
.product-modal { background:#fff; border-radius:var(--radius); max-width:900px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 25px 80px rgba(0,0,0,0.3); }
.product-modal-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:var(--dark); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; z-index:10; transition:all .2s; }
.product-modal-close:hover { background:var(--primary); }
.product-modal-body { display:grid; grid-template-columns:1fr 1fr; }
.product-modal-img { background:var(--dark); padding:40px; display:flex; align-items:center; justify-content:center; min-height:400px; }
.product-modal-img img { max-width:100%; max-height:320px; object-fit:contain; }
.product-modal-info { padding:40px; }
.product-modal-label { font-size:12px; color:var(--primary); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.product-modal-title { font-size:28px; font-weight:800; color:var(--dark); margin:8px 0 16px; line-height:1.2; }
.product-modal-desc { font-size:14px; color:#666; line-height:1.8; margin-bottom:24px; }
.product-modal-specs h4 { font-size:14px; font-weight:700; color:var(--dark); margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--primary); display:inline-block; }
.specs-list { display:flex; flex-direction:column; gap:10px; }
.specs-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #eee; font-size:14px; }
.specs-row .spec-label { color:#888; }
.specs-row .spec-value { font-weight:600; color:var(--dark); }
.product-modal-applications { margin-top:20px; }
.application-tags { display:flex; flex-wrap:wrap; gap:8px; }
.application-tag { font-size:12px; padding:6px 14px; background:var(--light); color:var(--dark); border-radius:20px; border:1px solid #eee; }
.product-modal-cta { margin-top:28px; display:flex; gap:12px; }

/* ===== Category Nav Sticky ===== */
.category-nav {display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; padding:16px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #eee; position:sticky; top:70px; z-index:100; }
.cat-nav-btn { padding:10px 24px; border-radius:30px; border:2px solid transparent; background:none; font-size:14px; font-weight:600; color:var(--gray); cursor:pointer; transition:all .2s; text-decoration:none; }
.cat-nav-btn:hover { color:var(--dark); background:var(--light); }
.cat-nav-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===== NEWS DETAIL PAGE v2 ===== */
.news-detail-hero { position:relative; height:500px; overflow:hidden; }
.news-detail-hero img { width:100%; height:100%; object-fit:cover; }
.news-detail-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(30,30,30,0.95) 0%, rgba(30,30,30,0.4) 50%, rgba(30,30,30,0.2) 100%); }
.news-detail-hero-content { position:absolute; bottom:0; left:0; right:0; padding:60px 0; }
.news-detail-hero-content .container { max-width:1100px; }
.news-detail-layout { display:grid; grid-template-columns:1fr 320px; gap:60px; }
.news-sidebar { position:sticky; top:100px; align-self:start; }
.news-sidebar-card { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); border:1px solid #eee; margin-bottom:20px; }
.news-sidebar-card h4 { font-size:13px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.news-meta-list { display:flex; flex-direction:column; gap:14px; }
.news-meta-item { display:flex; align-items:center; gap:12px; }
.news-meta-item svg { flex-shrink:0; }
.news-meta-item .meta-label { font-size:12px; color:var(--gray); }
.news-meta-item .meta-value { font-size:14px; font-weight:600; color:var(--dark); }
.news-share-vertical { display:flex; flex-direction:column; gap:10px; }
.news-share-vertical a { display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:8px; color:#fff; font-size:13px; font-weight:600; text-decoration:none; transition:all .2s; }
.news-share-vertical a:hover { transform:translateX(4px); opacity:0.9; }
.news-related-small { display:flex; flex-direction:column; gap:16px; }
.news-related-item { display:flex; gap:12px; text-decoration:none; }
.news-related-item img { width:70px; height:56px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.news-related-item .nr-title { font-size:13px; font-weight:600; color:var(--dark); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-related-item .nr-date { font-size:11px; color:var(--gray); margin-top:4px; }
.news-related-item:hover .nr-title { color:var(--primary); }

/* ===== NEWS DETAIL PAGE ===== */
.news-card-img a { display:block; overflow:hidden; border-radius:12px 12px 0 0; }
.news-card-img a:hover img { transform:scale(1.05); }
.news-card-img img { transition:transform .4s ease; }
.news-card-title a:hover { color:var(--primary) !important; }
#newsContent h3 { font-size:20px; font-weight:700; color:var(--dark); margin:28px 0 12px; }
#newsContent h3:first-child { margin-top:0; }
#newsContent p { font-size:16px; line-height:1.9; color:#444; margin-bottom:16px; }
#newsContent ul { margin-bottom:16px; padding-left:20px; }
#newsContent ul li { font-size:16px; line-height:1.9; color:#444; margin-bottom:8px; }
#newsContent strong { color:var(--dark); font-weight:600; }
#newsGallery img { transition:transform .3s ease; }

/* ===== PRODUCT DETAIL PAGE ===== */
.header.info_top_bg{background:var(--dark);}
.product-detail-hero{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.footer-form{margin-top:16px;}
.footer-form .name{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:6px;background:rgba(255,255,255,0.05);color:#fff;font-size:13px;margin-bottom:8px;}
.footer-form .email{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:6px;background:rgba(255,255,255,0.05);color:#fff;font-size:13px;margin-bottom:8px;}
.footer-form .content{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:6px;background:rgba(255,255,255,0.05);color:#fff;font-size:13px;margin-bottom:8px;resize:vertical;}
.footer-form .btn-primary{width:100%;padding:10px;font-size:13px;}
.scsb{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.sbsj{display:grid;gap:24px;background:var(--dark-deep);border-radius:var(--radius);padding:32px;border:1px solid var(--border);grid-template-columns:repeat(4, 1fr); }
.sysb{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.s-fuwu{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}

.scroll-wrap {width:100%;overflow:hidden;}
.scroll-inner {display:flex;white-space:nowrap;}
.scroll-item {padding:15px 60px;font-size:28px;color:#fff; text-transform:uppercase; font-weight:bold;}
@keyframes scrollLoop {0% { transform: translateX(0); }100% { transform: translateX(-100%); }}
@keyframes scrollLoopAr {100% { transform: translateX(100%); }0% { transform: translateX(0%); }}
.scroll-inner.animate-run {animation: scrollLoop 30s linear infinite;}
.scroll-inner.animate-runar {animation: scrollLoopAr 30s linear infinite;}
.product-select{position:relative;}
.product-select .jianyou{position:absolute;top:15px; right:4px;width:12px; height:12px;display:block;}
.product-select .ar_lang{left:4px; right:auto;}
.product-select .jianyou svg{width:100%; height:100%;display:block;}
.product-select input{width:200px; padding:11px 14px; border:1.5px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; color:var(--dark); background:#fff; }
.product-select input:focus { border-color:var(--primary); outline:none; }
.product-select .CarModels{position:relative;}
.product-select .CarModels .select-models-list{position:absolute;left:0px; top:45px; background:#fff; width:100%; border:1px solid #EEEEEE; border-top:0px; border-radius:8px; overflow:hidden;display:none; max-height:300px; overflow-y:auto;}
.product-select .CarModels .select-models-list span{display:block; line-height:200%;width:100%; padding-left:11px; cursor:pointer;}
.product-select .CarModels .select-models-list span:hover{background:var(--primary); color:#fff;}
.product-select .CarModels:nth-child(2){display:none;}
/* ===== CATALOG PAGE (filterable product center) ===== */
.catfilter-bar { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #eee; padding:20px 24px; margin-bottom:24px; position:sticky; top:68px; z-index:90; }
.catfilter-row {  }
.catfilter-row form{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.catfilter-type { display:flex; gap:6px; flex-wrap:wrap; }
.catfilter-type .tab-btn { position:static; }
.product-select{display:flex; gap:16px;flex-wrap:wrap; }
.ar_lang_b span{padding-left:0px; padding-right:11px;}
/*.catfilter-select { max-width:200px; padding:11px 14px; border:1.5px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; color:var(--dark); background:#fff; cursor:pointer; }
.catfilter-select:focus { border-color:var(--primary); outline:none; }*/
.catfilter-search { flex:1; min-width:220px; position:relative; }
.catfilter-search input { width:100%; padding:11px 50px 11px 14px; border:1.5px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; }
.catfilter-search input:focus { border-color:var(--primary); outline:none; }
.catfilter-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#999; }
.seatchBtn{position:absolute;top:0px; right:0px; width:50px; height:100%;background:var(--primary); color:#ffffff; border:0px; border-start-end-radius:8px; border-end-end-radius:8px; cursor:pointer;}
.seatchBtn svg{color:#fff;}
.lang_ar .seatchBtn{left:0px; right:auto;}
.lang_ar input{padding:11px 14px 11px 50px;}
.catalog-stats { display:flex; gap:48px; justify-content:center; margin-bottom:32px; }
.catstat { text-align:center; }
.catstat .num { font-size:32px; font-weight:800; color:var(--primary); font-family:'Oswald',sans-serif; }
.catstat .lbl { font-size:12px; color:#999; text-transform:uppercase; letter-spacing:1px; }

.catalog-table-wrap { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #eee; overflow:hidden; }
.catalog-table { width:100%; border-collapse:collapse; }
.catalog-table thead th { background:var(--dark); color:#fff; font-size:12px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; padding:14px 16px; text-align:left; white-space:nowrap; }
.catalog-table tbody td { padding:14px 16px; border-bottom:1px solid #f0f0f0; font-size:14px; color:var(--dark); vertical-align:middle; }
.catalog-row:hover { background:var(--light); }
.c-img { width:64px; }
.c-img img { width:56px; height:56px; object-fit:contain; background:var(--dark); border-radius:8px; padding:6px; }
.gf-code { font-family:monospace; font-weight:700; color:var(--dark); font-size:14px; display:block; }
.type-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; margin-top:4px; letter-spacing:0.5px; }
.type-outer { background:rgba(255,149,0,0.12); color:var(--primary); }
.type-inner { background:rgba(43,43,43,0.1); color:var(--dark); }
.type-shaft { background:rgba(201,169,97,0.15); color:var(--gold,#C9A961); }
.c-param { font-family:monospace; font-size:13px; color:#555; }
.c-brands { max-width:280px; }
.brand-chip { display:inline-block; font-size:11px; padding:3px 9px; background:var(--light); border:1px solid #e5e5e5; border-radius:12px; margin:2px 2px; color:var(--dark); font-weight:500; }
.brand-chip.more { background:rgba(255,149,0,0.1); color:var(--primary); border-color:rgba(255,149,0,0.25); font-weight:700; }
.c-fit { font-weight:700; color:var(--primary); text-align:center; }
.c-act { text-align:right; width:110px; }

.fitment-row td { background:#fafaf8; padding:0 !important; }
.fitment-panel { padding:24px; border-top:2px solid var(--primary); }
.fit-head { margin-bottom:14px; }
.fit-gf { font-family:monospace; font-weight:800; font-size:16px; color:var(--dark); }
.fit-count { font-size:13px; color:var(--primary); font-weight:600; margin-left:10px; }
.fit-table-wrap { max-height:360px; overflow-y:auto; border:1px solid #eee; border-radius:8px; }
.fit-table { width:100%; border-collapse:collapse; font-size:13px; }
.fit-table thead th { background:var(--dark-deep); color:#fff; padding:10px 14px; text-align:left; font-weight:600; position:sticky; top:0; font-size:12px; letter-spacing:0.5px; }
.fit-table tbody td { padding:8px 14px; border-bottom:1px solid #f0f0f0; color:#444; }
.fit-table tbody tr:hover { background:#fff8f0; }
.mono { font-family:monospace; font-size:12px; }
.fit-loading { padding:24px; text-align:center; color:var(--gray); }

.catalog-pagination { display:flex; gap:6px; justify-content:center; margin-top:28px; flex-wrap:wrap;align-items: center; }
.catalog-pagination a,.catalog-pagination span{display:block; padding:5px 15px; border:1px solid #ddd; background:#fff; border-radius:8px; font-size:14px; font-weight:600; color:var(--dark); cursor:pointer; transition:all .2s; text-align:center;}
.catalog-pagination span.disabled{opacity:0.4; cursor:not-allowed;}
.catalog-pagination span.current{background:var(--primary); border-color:var(--primary); color:#fff;}
.catalog-pagination a:hover{border-color:var(--primary); color:var(--primary);}




@media(max-width:900px){
  .catalog-table .c-brands, .catalog-table thead th:nth-child(5) { display:none; }
}
@media(max-width:700px){
  .catalog-table .c-param, .catalog-table thead th:nth-child(3),
  .catalog-table .c-img, .catalog-table thead th:first-child { display:none; }
  .catalog-stats { gap:24px; }
  .catfilter-bar { position:static; }
  .catfilter-search { min-width:100%; }
}


@media(max-width:1024px) {
    .product-slide {flex: 0 0 100%;grid-template-columns: 1fr;}
    .product-slide-img {min-height: 260px;}
    .product-mini-grid {grid-template-columns: repeat(2, 1fr);}
    .carousel-prev { left: 8px;}
    .carousel-next { right: 8px;}
    .cert-equip-grid { grid-template-columns: 1fr;}
    .header-nav { display: none; }
    .menu-toggle { display: block; }
    .about-grid, .contact-grid, .product-detail-grid {  grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: repeat(2,1fr);}
    .news-grid { grid-template-columns: 1fr 1fr; }
    .services-grid { grid-template-columns: 1fr 1fr;}
    .footer-grid { grid-template-columns: 1fr 1fr;}
    .stats-inner { grid-template-columns: repeat(2,1fr);}
    .process-grid { grid-template-columns: repeat(3,1fr);}
    .gallery-grid { grid-template-columns: repeat(2,1fr);}
    .gallery-item.wide { grid-column: span 1;}
 }
/* ===== Responsive Product Page ===== */
@media(max-width:768px){
  .hero-arrow { width: 40px; height: 40px; }
  .hero-arrow-prev { left: 12px; }
  .hero-arrow-next { right: 12px; }
  .hero-content{padding:100px 60px 0 60px;}
  .products-grid, .news-grid, .services-grid, .cert-grid, .equip-grid, .process-grid, .gallery-grid { grid-template-columns:repeat(1, 1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .stat-item { padding:24px 12px; }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(1),.stat-item:nth-child(2) { border-bottom:1px solid var(--border); }
  .hero-title { font-size:36px; }
  .hero-desc { font-size:16px; }
  .about-badge { left:10px; bottom:-10px; padding:14px 20px; }
  .section { padding:60px 0; }
  .product-detail-hero { grid-template-columns:1fr; gap:40px; }
  .cat-showcase-header { flex-direction:column; text-align:center; }
  .cat-showcase-img { width:100%; height:160px; }
  .cat-showcase-stats { justify-content:center; }
  .product-grid { grid-template-columns:1fr; }
  .news-detail-layout { grid-template-columns:1fr !important; }
  .news-sidebar { order:-1; position:static !important; }
  .category-intro { grid-template-columns:1fr; }
  .product-modal-body { grid-template-columns:1fr; }
  .product-modal-img { min-height:250px; padding:24px; }
  .product-modal-info { padding:24px; }
  .product-list-table { font-size:13px; }
  .product-list-table .td-img, .product-list-table .td-material { display:none; }
  .product-list-header { flex-direction:column; align-items:flex-start; }
  .category-nav { top:70px; gap:6px; padding:12px; }
  .cat-nav-btn { padding:8px 16px; font-size:13px; }
  .page-hero-title{font-size:22px;}
  .page-hero-sub{padding-top:80px;}
  .scsb{grid-template-columns:1fr;}
  .sbsj{grid-template-columns:repeat(2,1fr);}
  .sysb{grid-template-columns:1fr;}
  .huanjin{grid-template-columns:repeat(2, 1fr);}
  .s-fuwu{grid-template-columns:1fr;}
  .pro_bott{grid-template-columns:1fr;}
}
@media (max-width: 640px) {
  .product-mini-grid { grid-template-columns: 1fr; }
  .product-slide-info { padding: 28px 24px; }
  .product-slide-title { font-size: 22px; }
}
@media(max-width:480px){
  .product-modal-overlay { padding:8px; }
  .product-modal { max-height:95vh; }
}

@media(max-width:480px){
  .container { padding:0 16px; }
  .hero-title { font-size:32px; }
}