/* Reset & common */
:root { --primary:#7d6608; --secondary:#b7950b; --accent:#2c3e50; --bg:#fef9e7; --text:#2d2a10; --light:#f9e79f; --dark:#5d4e0a; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:var(--bg); color:var(--text); line-height:1.8; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.btn { display:inline-block; padding:10px 28px; border-radius:4px; font-size:14px; border:none; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-outline { border:2px solid var(--primary); color:var(--primary); }
.section { padding:60px 0; }
.section-title { font-size:26px; text-align:center; margin-bottom:8px; color:var(--primary); }
.section-sub { text-align:center; color:#888; margin-bottom:35px; font-size:14px; }

.topbar { background:var(--dark); color:#aaa; font-size:12px; padding:6px 0; }
.topbar .container { display:flex; justify-content:space-between; }
header { background:#fff; border-bottom:2px solid var(--primary); position:sticky; top:0; z-index:1000; }
.header-inner { display:flex; justify-content:space-between; align-items:center; height:70px; max-width:1200px; margin:0 auto; padding:0 20px; }
.logo { font-size:22px; font-weight:700; color:var(--primary); }
.logo span { color:var(--accent); }
.search-box { flex:1; max-width:400px; margin:0 30px; }
.search-box input { width:100%; padding:8px 15px; border:2px solid var(--primary); border-radius:20px; font-size:13px; }
.cart { font-size:14px; color:var(--primary); }
nav { background:var(--primary); }
nav ul { display:flex; max-width:1200px; margin:0 auto; padding:0 20px; }
nav a { color:#fff; padding:10px 20px; font-size:14px; display:block; }
nav a:hover, nav a.active { background:var(--accent); }
.hero { position:relative; height:320px; overflow:hidden; }
.hero-slide { position:absolute; width:100%; height:100%; opacity:0; transition:opacity .8s; }
.hero-slide.active { opacity:1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.4)); display:flex; flex-direction:column; justify-content:center; padding:0 8%; }
.hero-overlay h1 { color:#fff; font-size:32px; margin-bottom:8px; }
.hero-overlay p { color:rgba(255,255,255,.9); }
.dots { position:absolute; bottom:12px; left:8%; display:flex; gap:6px; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.dot.active { background:var(--accent); }
.main-layout { display:grid; grid-template-columns:200px 1fr; gap:25px; max-width:1200px; margin:30px auto; padding:0 20px; }
.sidebar-cat { background:#fff; padding:15px; border-radius:6px; height:fit-content; }
.sidebar-cat h4 { color:var(--primary); font-size:14px; margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:8px; }
.sidebar-cat li { padding:6px 0; font-size:13px; color:#666; cursor:pointer; }
.sidebar-cat li:hover { color:var(--accent); }
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.p-card { background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:transform .2s; }
.p-card:hover { transform:translateY(-3px); }
.p-card img { width:100%; height:160px; object-fit:cover; }
.p-body { padding:14px; }
.p-body h4 { color:var(--primary); font-size:15px; margin-bottom:4px; }
.p-body .price { color:var(--accent); font-size:16px; font-weight:700; }
.p-body .btn { background:var(--primary); color:#fff; padding:6px 16px; font-size:12px; margin-top:8px; }
.stats { max-width:1200px; margin:20px auto; padding:20px; background:#fff; border-radius:6px; display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.stats .num { font-size:26px; color:var(--secondary); font-weight:700; }
.cases-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; max-width:1200px; margin:0 auto; padding:0 20px; }
.case-card { background:#fff; border-radius:6px; overflow:hidden; }
.case-card img { width:100%; height:160px; object-fit:cover; }
.article-item { background:#fff; border-radius:6px; margin-bottom:8px; }
.article-title { padding:14px 16px; cursor:pointer; color:var(--primary); display:flex; justify-content:space-between; font-size:14px; }
.article-body { max-height:0; overflow:hidden; transition:max-height .3s; padding:0 16px; }
.article-item.open .article-body { max-height:5000px; padding:0 16px 16px; }
.article-body p { font-size:13px; color:#555; margin-bottom:6px; text-indent:2em; }
.article-body img { width:100%; max-height:200px; object-fit:cover; border-radius:4px; margin:6px 0; }


.prod-detail { display:grid; grid-template-columns:1.2fr 1fr; gap:30px; max-width:1200px; margin:0 auto; }
.gallery-main { width:100%; height:350px; object-fit:cover; border-radius:6px; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.gallery-thumbs img { width:100%; height:90px; object-fit:cover; border-radius:4px; cursor:pointer; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:1200px; margin:0 auto; }
.form input, .form textarea { width:100%; padding:10px; margin-bottom:8px; border:1px solid #ddd; border-radius:4px; font-size:14px; }
footer { background:var(--dark); color:#888; padding:35px 20px 15px; margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:25px; margin-bottom:20px; max-width:1200px; margin-left:auto; margin-right:auto; }
.menu-toggle { display:none; }
@media(max-width:768px){
  .main-layout { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .cases-grid, .prod-detail, .contact-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  nav ul { flex-wrap:wrap; }
  .search-box { display:none; }
}

/* Universal carousel fix */
.slide, .hero-slide, .banner-slide { position:absolute; width:100%; height:100%; opacity:0; transition:opacity .8s; }
.slide.active, .hero-slide.active, .banner-slide.active { opacity:1; }
.slide img, .hero-slide img, .banner-slide img { width:100%; height:100%; object-fit:cover; }
/* Product detail tabs */
.tabs { display:flex; gap:0; border-bottom:2px solid #eee; margin:25px 0; }
.tab-btn { padding:12px 25px; background:none; border:none; font-size:15px; cursor:pointer; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--accent); font-weight:600; }
.tab-panel { display:none; padding:20px 0; }
.tab-panel.active { display:block; }
.param-table { width:100%; border-collapse:collapse; margin:15px 0; }
.param-table td { padding:10px 15px; border:1px solid #e0e0e0; font-size:14px; }
.param-table td:first-child { background:var(--light); font-weight:600; width:30%; }
.feature-list li { padding:10px 0; border-bottom:1px dashed #eee; font-size:14px; }
.feature-list li strong { color:var(--primary); }
.app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.app-item { background:var(--light); padding:15px; border-radius:6px; }
.app-item h4 { color:var(--primary); font-size:14px; margin-bottom:5px; }
.app-item p { font-size:13px; color:#666; }
.install-list li { padding:8px 0; font-size:14px; }
.install-list li strong { color:var(--primary); }
/* Large product gallery */
.gallery-large { width:100%; height:450px; object-fit:cover; border-radius:8px; margin:15px 0; }
.gallery-thumbs-large { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:10px 0 25px; }
.gallery-thumbs-large img { width:100%; height:120px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.gallery-thumbs-large img:hover, .gallery-thumbs-large img.active { border-color:var(--accent); }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }
.badge { background:var(--light); color:var(--primary); padding:5px 14px; border-radius:20px; font-size:13px; }

/* Gallery thumbnail active state */
.gallery-thumbs-large img { cursor:pointer; transition:border-color .2s, opacity .2s; opacity:.7; }
.gallery-thumbs-large img:hover { opacity:1; }
.gallery-thumbs-large img.active { opacity:1; border-color:var(--accent) !important; }

/* Stats grid layout fix (color-safe) */
.stats { display:block !important; grid-template-columns:none !important; }
.stats .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.stats .stats-grid > div { text-align:center; }
.stats .stats-grid .num { font-size:34px; font-weight:700; }
.stats .stats-grid .label { font-size:14px; margin-top:5px; }
@media(max-width:768px){ .stats .stats-grid { grid-template-columns:repeat(2,1fr); } }

/* Carousel container fix */
.carousel { position:relative; width:100%; height:400px; overflow:hidden; }
.slide-overlay { position:absolute; bottom:20%; left:10%; color:#fff; z-index:5; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.slide-overlay h1 { font-size:36px; margin:0 0 8px; }
.slide-overlay p { font-size:16px; opacity:.9; }

/* Partner logo grid */
.p-logo { background:#fff; border:1px solid #eee; border-radius:6px; padding:15px; display:flex; align-items:center; justify-content:center; height:80px; transition:box-shadow .2s; }
.p-logo:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.p-logo img { max-width:100%; max-height:50px; object-fit:contain; }
@media(max-width:768px){ .partners-grid { grid-template-columns:repeat(3,1fr) !important; } }

.page-banner {
  background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)), url('../images/banner (7).png') center/cover no-repeat;
  padding:60px 20px; text-align:center; position:relative;
}
.page-banner h1 { color:#fff; font-size:30px; text-shadow:0 2px 4px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.5); margin:0; }

/* Fix: section container should be block, not flex */
.section .container { display:block !important; }
.p-logo img { opacity:1 !important; height:auto !important; width:auto !important; max-height:50px !important; max-width:100% !important; object-fit:contain !important; }
