/* ================================================================
 * MIDHILL 全站统一布局样式 v1.0 (2026-08-09)
 * 顶部导航(header) + 底部(footer) 公共样式。所有页面引入本文件。
 * 各页面正文专用样式保留在各自 <style> 内，不在此文件。
 * ================================================================ */

/* ---------- 基础变量 & Reset ---------- */
:root{
  --moss-deep:#303F2D;
  --moss-mid:#4A6547;
  --sage-soft:#9AAD93;
  --frost:#E7F3E6;
  --paper:#F5F1EA;
  --warm-grey:#8B8478;
  --ink:#2A2622;
  --gold:#B89968;
  --line:rgba(48,63,45,0.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Playfair Display','PingFang SC','Microsoft YaHei',serif;font-weight:500;letter-spacing:-0.02em;line-height:1.2}
a{color:inherit;text-decoration:none;transition:opacity 0.2s,color 0.2s}
a:hover{opacity:0.75}
img{max-width:100%;display:block}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}

/* ---------- Top Bar ---------- */
.topbar{background:var(--moss-deep);color:var(--frost);text-align:center;font-size:13px;padding:10px 16px;letter-spacing:0.08em}
.topbar b{font-weight:500;color:var(--gold);margin:0 4px}

/* ---------- Header / 顶部导航 ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(245,241,234,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:'Playfair Display',serif;font-size:26px;font-weight:600;letter-spacing:0.16em;color:var(--moss-deep);display:flex;align-items:center;gap:10px}
.logo::before{content:'';width:8px;height:8px;background:var(--gold);border-radius:50%;display:inline-block}
nav ul{display:flex;list-style:none;gap:36px}
nav ul a{font-size:14px;font-weight:500;letter-spacing:0.04em;color:var(--ink);position:relative}
nav ul a::after{content:'';position:absolute;bottom:-6px;left:0;right:0;height:1px;background:var(--moss-deep);transform:scaleX(0);transition:transform 0.3s}
nav ul a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;gap:18px;align-items:center}
.nav-actions a,.nav-actions button{background:none;border:none;cursor:pointer;font-size:14px;color:var(--ink);font-family:inherit;padding:0}
.btn-cart{background:var(--moss-deep)!important;color:var(--frost)!important;padding:10px 22px!important;border-radius:30px;font-size:13px!important}
.btn-primary{background:var(--moss-deep);color:var(--frost);padding:18px 32px;border-radius:32px;font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border:none;cursor:pointer;font-family:inherit;display:inline-block;text-align:center}

/* ---------- Footer / 底部 ---------- */
footer{background:#1F2A1D;color:rgba(231,243,230,0.7);padding:80px 0 32px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;margin-bottom:56px}
.foot-brand h3{font-family:'Playfair Display',serif;font-size:28px;color:var(--frost);margin-bottom:16px;letter-spacing:0.16em}
.foot-col h4{color:var(--frost);font-size:13px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:20px;font-family:'Inter',sans-serif}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:10px;font-size:14px}
.foot-col a{color:rgba(231,243,230,0.65)}
.foot-bottom{border-top:1px solid rgba(231,243,230,0.1);padding-top:32px;display:flex;justify-content:space-between;font-size:12px}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:640px){
  nav ul{display:none}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:12px;text-align:center}
}