/* 云南酸木瓜 - 子站样式 v2 - B端供应商风格 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'PingFang SC','Microsoft YaHei',sans-serif;background:#f5f0eb;color:#3d2b1f;line-height:1.8}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ==== 紧迫条 ==== */
.urgent-bar{background:#c0392b;color:#fff;padding:8px 16px;text-align:center;font-size:14px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.urgent-text{font-weight:600}
.urgent-phone{background:#fff;color:#c0392b;padding:4px 16px;border-radius:4px;font-weight:700;font-size:14px}
.urgent-phone:hover{background:#ffe0d0}

/* ==== header ==== */
.header{background:#3d2b1f;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100}
.header .logo{color:#e8c9a0;font-size:18px;font-weight:700;letter-spacing:1px;white-space:nowrap}
.header nav{display:flex;gap:32px}
.header nav a{color:#e8c9a0;font-size:15px;transition:color .2s}
.header nav a:hover{color:#fff}
.header nav a.active{color:#d4a84b;font-weight:600}
.header .contact-btn{background:#d4a84b;color:#3d2b1f;padding:8px 20px;border-radius:4px;font-size:14px;font-weight:600;white-space:nowrap}

/* ==== hero ==== */
.hero{background:linear-gradient(135deg,#3d2b1f 0%,#5a3e2e 100%);color:#e8c9a0;padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:34px;color:#d4a84b;margin-bottom:8px;line-height:1.3}
.hero-sub{font-size:16px;margin-bottom:16px;opacity:.9}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.badge{background:#5a3e2e;color:#e8c9a0;padding:4px 14px;border-radius:16px;font-size:13px;font-weight:500}
.hero-cta{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.hero-trust{font-size:13px;color:#a08060;display:flex;flex-direction:column;gap:4px}
.hero-trust span{background:#4a3020;padding:6px 12px;border-radius:4px}

/* hero images */
.hero-images{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-img-main,.hero-img-sub{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.hero-img-main img,.hero-img-sub img{width:100%;height:220px;object-fit:cover;display:block}
.hero-img-sub img{height:160px}
.img-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;font-size:12px}

/* ==== CTA 按钮 ==== */
.cta-primary{display:inline-block;background:#d4a84b;color:#3d2b1f;padding:14px 28px;border-radius:6px;font-weight:700;font-size:16px;transition:background .2s}
.cta-primary:hover{background:#c49640}
.cta-secondary{display:inline-block;background:transparent;color:#d4a84b;border:2px solid #d4a84b;padding:12px 28px;border-radius:6px;font-weight:600;font-size:15px;transition:all .2s}
.cta-secondary:hover{background:#d4a84b;color:#3d2b1f}

/* ==== B2B 数据条 ==== */
.b2b-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;background:#fff;border-radius:12px;padding:24px;margin:-24px 0 32px;box-shadow:0 4px 12px rgba(0,0,0,0.06);position:relative;z-index:2}
.b2b-item{text-align:center}
.b2b-num{display:block;font-size:28px;font-weight:800;color:#8b5e3c;line-height:1.2}
.b2b-num .small{font-size:16px;font-weight:400}
.b2b-label{display:block;font-size:13px;color:#888;margin-top:4px}

/* ==== container & section ==== */
.container{max-width:1100px;margin:0 auto;padding:20px}
.main-content{padding:0 0 40px}

.section{margin-bottom:48px}
.section h2{font-size:26px;border-left:5px solid #d4a84b;padding-left:16px;margin-bottom:24px;color:#3d2b1f}
.section h3{font-size:20px;margin:20px 0 12px;color:#5a3e2e}
.section p{margin-bottom:12px;font-size:16px;color:#555}
.section ul{margin:12px 0;padding-left:24px}
.section li{margin-bottom:8px;font-size:15px;color:#555}

/* ==== card grid ==== */
.card-grid{display:grid;gap:20px;margin:20px 0}
.cols-4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card-body{padding:16px 20px}
.card-body h3{font-size:17px;margin-bottom:6px}
.card-body p{font-size:14px;color:#666;line-height:1.6}
.card-img-full{width:100%;height:200px;object-fit:cover;display:block}
.card-ref{font-size:12px;color:#aaa;margin-top:6px;font-style:italic}

/* product card */
.card-product{position:relative;border:1px solid #eee}
.card-badge{position:absolute;top:12px;left:12px;background:#c0392b;color:#fff;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;z-index:2}
.card-detail{font-size:13px;color:#555;margin-bottom:4px}
.card-usage{font-size:13px;color:#8b5e3c;font-weight:500}
.card-moq{font-size:12px;color:#999;margin-top:6px;padding-top:6px;border-top:1px dashed #eee}

/* partner card */
.card-partner{border:1px solid #e8d5c0}

/* ==== eat method ==== */
.eat-method{border-left:4px solid #d4a84b;padding:16px 20px;margin:16px 0;background:#fff;border-radius:0 8px 8px 0}
.eat-method h3{color:#8b5e3c;margin-bottom:6px}
.eat-method p{font-size:15px}

/* ==== step list ==== */
.step-list{counter-reset:step;list-style:none;padding:0}
.step-list li{counter-increment:step;padding:16px 20px 16px 60px;margin:12px 0;background:#fff;border-radius:8px;position:relative;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.step-list li::before{content:counter(step);position:absolute;left:16px;top:16px;width:32px;height:32px;background:#d4a84b;color:#3d2b1f;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.step-list li strong{display:block;margin-bottom:4px;color:#3d2b1f}

/* ==== compare table ==== */
.compare-table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff;border-radius:8px;overflow:hidden}
.compare-table th,.compare-table td{padding:12px 16px;text-align:left;border-bottom:1px solid #e8d5c0}
.compare-table th{background:#3d2b1f;color:#e8c9a0;font-weight:600}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:hover td{background:#fdf8f0}

/* ==== contact section ==== */
.contact-section{background:#3d2b1f;color:#e8c9a0;border-radius:8px;padding:40px;text-align:center;margin:40px 0}
.contact-section h2{color:#d4a84b;border-left:none;font-size:24px;margin-bottom:16px}
.contact-section .phone{font-size:28px;color:#d4a84b;font-weight:700;margin:12px 0}
.contact-section .wechat{margin:12px 0}
.contact-section .wechat img{border:2px solid #d4a84b;border-radius:8px;margin:0 auto}

/* ==== footer ==== */
.footer{background:#2c1f14;color:#a08060;text-align:center;padding:32px 24px;font-size:14px}
.footer p{margin:6px 0}
.footer a{color:#a08060}
.footer a:hover{color:#d4a84b}

/* ==== breadcrumb ==== */
.breadcrumb{font-size:14px;color:#999;padding:12px 0;margin-bottom:16px}
.breadcrumb a{color:#8b5e3c}
.breadcrumb a:hover{color:#d4a84b}
.breadcrumb span{color:#ccc;margin:0 8px}

/* ==== responsive ==== */
@media(max-width:768px){
  .header{flex-wrap:wrap;height:auto;padding:12px 16px;gap:12px}
  .header .logo{font-size:15px}
  .header nav{gap:12px}
  .header nav a{font-size:13px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:26px}
  .hero-images{grid-template-columns:1fr}
  .hero-img-main img,.hero-img-sub img{height:180px}
  .b2b-strip{grid-template-columns:repeat(3,1fr);padding:16px;gap:12px}
  .b2b-num{font-size:22px}
  .cta-primary,.cta-secondary{width:100%;text-align:center}
  .urgent-bar{font-size:12px;padding:6px 12px}
  .cols-4,.cols-3{grid-template-columns:1fr}
  .section h2{font-size:22px}
  .contact-section .phone{font-size:22px}
  .hero-cta{flex-direction:column}
}


/* ==== 悬浮联系方式(独立fixed) ==== */
.float-wechat-btn,.float-phone-btn{position:fixed;z-index:99999;width:56px;height:56px;border-radius:50%;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,0.3);transition:all .3s;border:none;outline:none}
.float-wechat-btn{background:#d4a84b;color:#3d2b1f;bottom:100px;right:20px}
.float-wechat-btn:hover{transform:scale(1.1)}
.float-phone-btn{background:#3d2b1f;color:#d4a84b;bottom:30px;right:20px;font-size:22px}
.float-phone-btn:hover{transform:scale(1.1)}
.float-panel{display:none;position:fixed;z-index:99998;bottom:170px;right:20px;background:#fff;border-radius:12px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,0.25);width:220px;text-align:center;animation:fadeIn .3s}
.float-panel-inner{position:relative}
.float-panel img{width:160px;height:auto;margin:8px auto;border:1px solid #eee;border-radius:8px;display:block}
.float-panel-phone{font-size:20px;font-weight:700;color:#3d2b1f;margin:8px 0 4px}
.float-panel-phone a{color:#8b5e3c;text-decoration:none}
.float-panel-label{font-size:12px;color:#999}
.float-panel-close{position:absolute;top:-10px;right:-10px;width:24px;height:24px;background:#f5f0eb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#888;cursor:pointer;z-index:1}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){.float-wechat-btn,.float-phone-btn{width:46px;height:46px;font-size:22px}.float-wechat-btn{bottom:90px;right:12px}.float-phone-btn{bottom:24px;right:12px}.float-panel{bottom:150px;right:12px;width:200px}.float-panel img{width:140px}}