/* 云南酸木瓜 - 子站样式 */
*{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}

/* 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:22px;font-weight:700;letter-spacing:1px}
.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}

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

/* hero */
.hero{background:linear-gradient(135deg,#3d2b1f 0%,#5a3e2e 100%);color:#e8c9a0;padding:60px 0;text-align:center}
.hero h1{font-size:36px;color:#d4a84b;margin-bottom:12px}
.hero p{font-size:18px;max-width:700px;margin:0 auto;opacity:.9}
.hero .region-tag{display:inline-block;background:#d4a84b;color:#3d2b1f;padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600;margin-top:16px}

/* section */
.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}

/* content image */
.content-image{margin:20px 0;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.content-image img{width:100%;height:auto}

/* highlight box */
.highlight-box{background:#fff8e8;border:1px solid #e8c9a0;border-radius:8px;padding:24px;margin:24px 0}
.highlight-box h3{color:#8b5e3c;margin-top:0}

/* card grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin:24px 0}
.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-image{height:200px;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-body{padding:20px}
.card-body h3{font-size:18px;margin-bottom:8px}
.card-body p{font-size:14px;color:#666;line-height:1.6}
.card-body .card-tag{display:inline-block;background:#f5f0eb;color:#8b5e3c;padding:2px 10px;border-radius:12px;font-size:12px;margin-top:8px}

/* two column layout */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:24px 0}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}

/* 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}

/* recipe steps */
.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}

/* comparison 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}
.contact-section .btn-primary{display:inline-block;background:#d4a84b;color:#3d2b1f;padding:12px 32px;border-radius:6px;font-weight:600;margin-top:16px;transition:background .2s}
.contact-section .btn-primary:hover{background:#c49640}

/* 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}

/* SEO 优化 */
.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}

@media(max-width:768px){
  .header{flex-wrap:wrap;height:auto;padding:12px 16px;gap:12px}
  .header nav{gap:16px;flex-wrap:wrap}
  .header nav a{font-size:14px}
  .hero h1{font-size:28px}
  .hero p{font-size:16px}
  .section h2{font-size:22px}
  .contact-section .phone{font-size:22px}
  .card-grid{grid-template-columns:1fr}
}