/*
Theme Name: WINZ B2B Theme
Theme URI: https://winzintl.com
Author: WINZ Team
Description: Custom Theme for WINZ International.
Version: 1.0
*/

:root{
  --navy:#5c8651;
  --blue:#45683C;
  --accent:#FFD200;
  --accent-dark:#E6BD00;
  --bg:#F7F9F7;
  --card:#ffffff;
  --text:#1a1f2b;
  --muted:#5b6472;
  --line:#e3e7ee;
  --radius:10px;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* 页面切换控制 */
.page{display:none; opacity:0; transition:opacity 0.3s ease;}
.page.active{display:block; opacity:1;}

/* Header */
header{position:sticky;top:0;z-index:50;background:#ffffff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo-area{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo-area img{height: 46px; width: auto; object-fit: contain;}
.company-name{color:var(--navy);font-weight:700;font-size:20px;letter-spacing:.5px}
.company-name .ltd-text{color:var(--navy);font-weight:700;font-size:20px;margin-left:4px}
.nav ul{display:flex;gap:26px;list-style:none;align-items:center}
.nav ul a{color:#1a1f2b;font-size:14.5px;font-weight:600;transition:color .2s;cursor:pointer}
.nav ul a:hover,.nav ul a.active{color:var(--navy)}
.nav-cta{background:var(--accent);color:#1a1f2b!important;padding:9px 18px;border-radius:6px;font-weight:700}
.nav-cta:hover{background:var(--accent-dark);color:#1a1f2b!important}
.burger{display:none;color:#1a1f2b;font-size:24px;background:none;border:0;cursor:pointer}

/* ======= Banner 轮播样式 ======= */
.banner-slider { height: 520px; position: relative; overflow: hidden; background: #111; }
.banner-slide { position: absolute; top:0; left:0; width: 100%; height: 100%; display: flex; align-items: center; color: #fff; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; }
.banner-slide.active { opacity: 1; z-index: 2; }
.banner-content { width: 100%; z-index: 3; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); }
.banner-content h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; font-weight: 700; }
.banner-content p { font-size: 18px; margin-bottom: 30px; max-width: 600px; opacity: 0.95; }

.btn{display:inline-block;padding:13px 28px;border-radius:6px;font-weight:600;font-size:15px;transition:.2s;cursor:pointer}
.btn-primary{background:var(--accent);color:#1a1f2b}
.btn-primary:hover{background:var(--accent-dark)}

/* ======= Trust 条（淡绿色区分背景） ======= */
.trust{background:#eaf2e8;border-bottom:1px solid #dce8d9;}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 20px}
.trust div{text-align:center}
.trust strong{display:block;font-size:24px;color:var(--navy);font-weight:700}
.trust span{font-size:13px;color:#555;font-weight:600;}

/* Sections */
section{padding:64px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 44px}
.sec-head.left{text-align:left;margin:0 0 30px}
.sec-head h2{font-size:clamp(22px,2.6vw,30px);color:var(--navy);margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:15.5px}
.kicker{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);font-weight:600;margin-bottom:8px;display:block}

/* 卡片网格 */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:.25s;display:block;cursor:pointer;}
.cat:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(11,37,69,.08);border-color:var(--navy)}
.cat .ico{width:46px;height:46px;border-radius:10px;background:rgba(92,134,81,.12);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.cat h3{font-size:18px;color:var(--navy);margin-bottom:8px}
.cat p{font-size:14px;color:var(--muted);margin-bottom:16px}
.cat .more{font-size:14px;font-weight:600;color:var(--navy)}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:block;cursor:pointer;}
.prod:hover{box-shadow:0 12px 26px rgba(11,37,69,.08);transform:translateY(-3px)}
.prod .thumb{height:150px;background:linear-gradient(135deg,#eaf2e8,#dce8d9);display:flex;align-items:center;justify-content:center;color:#7a8c77;font-size:13px;letter-spacing:1px}
.prod .body{padding:16px 16px 18px}
.prod h3{font-size:15px;color:var(--navy);margin-bottom:6px}
.prod p{font-size:13px;color:var(--muted);margin-bottom:12px}
.prod .link{font-size:13.5px;font-weight:600;color:var(--navy)}

/* Why (深绿色背景块) */
.why{background:var(--blue);color:#fff}
.why .sec-head h2{color:#fff}
.why .sec-head p{color:#dce8d9}
.why .kicker{color:var(--accent)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why-item{border-left:3px solid var(--accent);padding:4px 0 4px 18px}
.why-item h3{font-size:16px;margin-bottom:8px;color:#fff}
.why-item p{font-size:13.8px;color:#dce8d9}

/* Breadcrumb */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:26px;padding-top:34px}
.breadcrumb a{color:var(--navy);cursor:pointer;font-weight:500;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb span{margin:0 8px;color:#b8c0cc}

/* 详情页布局 */
.l4-layout{display:grid;grid-template-columns:2fr 1fr;gap:34px;align-items:start}
.spec-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.spec-table th{background:#f2f6f1;color:var(--navy);width:36%}

/* 详情页社媒分享 */
.share-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:13px;color:var(--muted)}
.share-bar a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:#eaf2e8;color:var(--navy);font-weight:bold;font-family:Arial;text-decoration:none;transition:.2s}
.share-bar a[title="Copy Link"]{width:auto;padding:0 10px;font-family:inherit}
.share-bar a:hover{background:var(--navy);color:#fff}

/* 询盘表单 */
.inquiry-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:88px}
.inquiry-card h3{color:var(--navy);font-size:17px;margin-bottom:6px}
.inquiry-card p{font-size:13px;color:var(--muted);margin-bottom:16px}
.inquiry-card input,.inquiry-card textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;margin-bottom:10px;font-family:inherit;font-size:14px;color:#333}
.inquiry-card textarea{resize:vertical;min-height:80px}
.inquiry-card button{width:100%;background:var(--accent);border:0;color:#1a1f2b;padding:12px;border-radius:6px;font-weight:700;font-size:14.5px;cursor:pointer}
.inquiry-card button:hover{background:var(--accent-dark)}
.contact-mini{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.9}

/* Footer (深绿色背景块) */
footer{background:#2c4227;color:#a9b8cd;padding:54px 0 0;font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px;padding-bottom:40px}
footer h4{color:#fff;font-size:15px;margin-bottom:16px}
footer ul{list-style:none}
footer ul li{margin-bottom:9px}
footer a{cursor:pointer}
footer a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-size:13px;color:#8da388}

/* 社交媒体图标 */
.social-links{display:flex;gap:12px;margin-top:10px}
.social-links a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;font-weight:bold;font-family:Arial,sans-serif;transition:all 0.3s;text-decoration:none}
.social-links a:hover{background:var(--accent);color:#1a1f2b;transform:translateY(-3px)}

/* 响应式 */
@media(max-width:960px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .l4-layout{grid-template-columns:1fr}
  .inquiry-card{position:static}
}
@media(max-width:680px){
  .nav ul{display:none}
  .burger{display:block}
  .cats,.products,.why-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .banner-slider{height:400px}
  section{padding:46px 0}
}