/* ========== CSS Reset & Variables ========== */ :root { --primary: #FF6700; --primary-dark: #e55d00; --bg: #FFFFFF; --bg-gray: #F5F5F5; --bg-dark: #1a1a2e; --text: #333333; --text-light: #666666; --text-lighter: #999999; --border: #e8e8e8; --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-hover: 0 8px 30px rgba(0,0,0,0.12); --radius: 8px; --max-width: 1200px; --header-h: 64px; --banner-h: 420px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--primary);text-decoration:none} img{max-width:100%;height:auto;display:block} .container{max-width:var(--max-width);margin:0 auto;padding:0 20px} .badge{display:inline-block;padding:2px 10px;border-radius:3px;font-size:11px;font-weight:600} .badge-orange{background:var(--primary);color:#fff} .badge-green{background:#00b894;color:#fff} .announcement{background:linear-gradient(135deg,var(--primary),#ff4500);color:#fff;text-align:center;padding:10px 16px;font-size:14px;font-weight:500} .header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} .header-inner{display:flex;align-items:center;height:var(--header-h);gap:20px} .logo{font-size:20px;font-weight:700;color:var(--text);flex-shrink:0} .logo span{color:var(--primary)} .logo-sub{font-size:11px;color:var(--text-light);font-weight:400;display:block;margin-top:-2px} .search-box{flex:1;max-width:360px;position:relative} .search-box input{width:100%;height:40px;padding:0 16px 0 40px;border:1px solid var(--border);border-radius:20px;font-size:14px;outline:none;transition:border-color .2s;background:var(--bg-gray)} .search-box input:focus{border-color:var(--primary);background:#fff} .search-box .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-lighter);font-size:16px} .header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0} .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .2s;white-space:nowrap} .btn-email{background:transparent;color:var(--text);border:1px solid var(--border)} .btn-email:hover{border-color:var(--primary);color:var(--primary)} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark)} .btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary)} .btn-outline:hover{background:var(--primary);color:#fff} .btn-sm{padding:6px 14px;font-size:12px} .banner{position:relative;height:var(--banner-h);background:linear-gradient(135deg,#1a1a2e 0%,#2d1f1a 100%);overflow:hidden;display:flex;align-items:center} .banner-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(255,103,0,0.12),transparent 60%)} .banner-content{position:relative;z-index:2;max-width:var(--max-width);margin:0 auto;padding:0 20px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:40px} .banner-text{flex:1} .banner-text h1{font-size:40px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:12px} .banner-text h1 span{color:var(--primary)} .banner-text p{font-size:18px;color:rgba(255,255,255,0.7);margin-bottom:24px} .banner-text .btn{font-size:16px;padding:12px 32px} .banner-image{flex:0 0 320px} .cat-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;padding-bottom:0} .cat-tab{padding:12px 22px;font-size:14px;font-weight:500;color:var(--text-light);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap} .cat-tab:hover{color:var(--text)} .cat-tab.active{color:var(--primary);border-bottom-color:var(--primary)} .section-title{font-size:22px;font-weight:700;padding:30px 0 4px} .section-title span{color:var(--primary)} .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px 0 40px} .product-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:all .3s;display:flex;flex-direction:column} .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)} .product-card .img-wrap{position:relative;overflow:hidden;padding-top:100%;background:var(--bg-gray)} .product-card .img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:20px;transition:transform .4s} .product-card:hover .img-wrap img{transform:scale(1.08)} .product-card .info{padding:16px;flex:1;display:flex;flex-direction:column} .product-card .info h3{font-size:15px;font-weight:600;margin-bottom:4px} .product-card .info .moq{font-size:12px;color:var(--text-lighter);margin-bottom:8px} .product-card .info .price{font-size:20px;font-weight:700;color:var(--primary);margin-bottom:12px} .product-card .info .price small{font-size:13px;font-weight:400;color:var(--text-light)} .product-card .info .actions{display:flex;gap:8px;margin-top:auto} .product-card .info .actions .btn{flex:1;justify-content:center;padding:7px 10px;font-size:12px} .features{padding:60px 0;background:var(--bg-gray)} .features h2{text-align:center;font-size:26px;margin-bottom:40px} .features h2 span{color:var(--primary)} .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .feature-card{background:#fff;border-radius:var(--radius);padding:36px 28px;text-align:center;border:1px solid var(--border);transition:all .3s} .feature-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .feature-card .icon{font-size:40px;margin-bottom:16px} .feature-card h3{font-size:18px;margin-bottom:8px} .feature-card p{font-size:14px;color:var(--text-light);line-height:1.7} .contact-card{margin-top:30px;background:var(--bg-dark);border-radius:var(--radius);padding:36px;text-align:center;color:#fff} .contact-card h3{font-size:20px;margin-bottom:8px} .contact-card p{color:rgba(255,255,255,0.6);margin-bottom:16px;font-size:14px} .contact-card .email-link{font-size:18px;color:var(--primary);font-weight:600} .footer{background:var(--bg-dark);color:rgba(255,255,255,0.6);padding:40px 0 24px;font-size:13px} .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px} .footer h4{color:#fff;margin-bottom:12px;font-size:15px} .footer p{margin-bottom:6px} .footer a{color:rgba(255,255,255,0.6)} .footer a:hover{color:var(--primary)} .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:30px;padding-top:20px;text-align:center;font-size:12px} .detail-page{padding:30px 0 60px} .breadcrumb{font-size:13px;color:var(--text-lighter);margin-bottom:24px} .breadcrumb a{color:var(--text-lighter)} .breadcrumb a:hover{color:var(--primary)} .detail-layout{display:flex;gap:40px;margin-bottom:50px} .detail-gallery{flex:0 0 45%} .detail-gallery .main-img{background:var(--bg-gray);border-radius:var(--radius);overflow:hidden} .detail-gallery .main-img img{width:100%;display:block} .detail-gallery .thumbnails{display:flex;gap:10px;margin-top:12px} .detail-gallery .thumbnails .thumb{width:64px;height:64px;border-radius:4px;background:var(--bg-gray);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s} .detail-gallery .thumbnails .thumb.active{border-color:var(--primary)} .detail-gallery .thumbnails .thumb img{width:100%;height:100%;object-fit:cover} .detail-info{flex:1} .detail-info h1{font-size:24px;font-weight:700;margin-bottom:8px} .detail-info .badge{margin-bottom:16px} .detail-info .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .detail-info .tags span{padding:4px 12px;background:var(--bg-gray);border-radius:4px;font-size:12px;color:var(--text-light)} .price-table{width:100%;border-collapse:collapse;margin-bottom:20px} .price-table th,.price-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px} .price-table th{background:var(--bg-gray);font-weight:600;color:var(--text-light)} .price-table td.price{font-weight:700;color:var(--primary)} .price-table td .btn{font-size:12px;padding:5px 12px} .qty-row{display:flex;align-items:center;gap:12px;margin-bottom:20px} .qty-row input{width:80px;height:38px;text-align:center;border:1px solid var(--border);border-radius:4px;font-size:14px} .qty-row .hint{font-size:12px;color:var(--text-lighter)} .cta-row{display:flex;gap:12px;margin-bottom:24px} .cta-row .btn{flex:1;justify-content:center;padding:12px;font-size:15px} .spec-list{margin-bottom:24px} .spec-list .item{display:flex;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px} .spec-list .item .label{color:var(--text-light);width:120px;flex-shrink:0} .spec-list .item .value{color:var(--text)} .warranty-note{background:var(--bg-gray);border-radius:var(--radius);padding:16px;font-size:13px;color:var(--text-light);line-height:1.6;margin-bottom:20px} .detail-imgs{margin-bottom:50px} .detail-imgs h2{font-size:22px;margin-bottom:24px;text-align:center} .detail-imgs h2 span{color:var(--primary)} .detail-imgs .img-block{margin-bottom:30px} .detail-imgs .img-block img{width:100%;border-radius:var(--radius)} .detail-imgs .img-block .caption{text-align:center;padding:12px;font-size:14px;color:var(--text-light)} .similar-section{border-top:1px solid var(--border);padding-top:40px} .similar-section h2{font-size:20px;margin-bottom:20px;text-align:center} @media(max-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr)}.banner-text h1{font-size:32px}.banner-image{flex-basis:240px}} @media(max-width:768px){.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}.banner{height:auto;min-height:320px}.banner-content{flex-direction:column;text-align:center;padding:40px 20px}.banner-text h1{font-size:26px}.banner-image{flex-basis:auto;max-width:200px}.feature-grid{grid-template-columns:1fr}.detail-layout{flex-direction:column}.detail-gallery{flex:1}.search-box{max-width:200px}.announcement{font-size:12px}.header-actions .btn span{display:none}} @media(max-width:480px){.product-grid{grid-template-columns:repeat(2,1fr);gap:10px}.cat-tab{padding:10px 14px;font-size:13px}.product-card .info{padding:12px}.product-card .info h3{font-size:13px}.product-card .info .price{font-size:17px}} 

/* Carousel Banner */
.banner-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #e8e8e8;
}
.carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-slide {
  min-width: 100%;
  position: relative;
  height: 420px;
  overflow: hidden;
  background: #ffffff;
}
.carousel-slide a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  background: #ffffff;
}
.carousel-slide .slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.carousel-slide .slide-overlay h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 22px;
  border-radius: 6px;
  z-index: 10;
  transition: background 0.3s, opacity 0.3s;
  opacity: 0.7;
}
.carousel-btn:hover { background: rgba(255,255,255,0.3); opacity: 1; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  border: none;
  padding: 0;
}
.carousel-dot:hover { transform: scale(1.3); }
.carousel-dot.active { background: #fff; transform: scale(1.2); }
@media (max-width: 768px) {
  .carousel-slide { height: 260px; }
  .carousel-btn { padding: 10px 12px; font-size: 16px; }
  .carousel-slide .slide-overlay h3 { font-size: 16px; padding: 12px; }
}