/* =========================================================
   野果 WILDFRUIT — 高级鲜果品牌站
   配色：暖奶油底 / 墨黑字 / 鲜明橘红签名色
   ========================================================= */

:root {
  --paper:  #FBF6EE;          /* 暖奶油底 */
  --paper-2:#F3ECDC;          /* 次级底 */
  --ink:    #1A1410;          /* 墨黑字 */
  --ink-soft: rgba(26,20,16,.62);
  --accent: #FF4D2E;          /* 签名橘红 */
  --accent-2:#C2185B;         /* 莓红 */
  --leaf:   #2F7A4E;          /* 藤绿 */
  --line:   rgba(26,20,16,.14);
  --line-light: rgba(255,255,255,.16);
  --radius: 22px;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-body: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-latin: "Syne", "Inter", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color:#fff; }

/* 颗粒质感叠层 */
.grain {
  position: fixed; inset:0; z-index: 90; pointer-events:none;
  opacity:.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 进度条 ---------- */
.page-progress {
  position: fixed; top:0; left:0; height:3px; width:100%;
  background: var(--accent); transform: scaleX(0); transform-origin:left;
  z-index: 100; transition: transform .1s linear;
}

/* ---------- 章节侧边栏 ---------- */
.chapter-rail {
  position: fixed; right:22px; top:50%; transform: translateY(-50%);
  z-index: 60; display:flex; flex-direction:column; gap:14px;
}
.chapter-rail a {
  display:flex; align-items:center; gap:0; text-decoration:none;
  color: var(--ink-soft); font-size: 11px; letter-spacing:.04em;
  justify-content:flex-end;
}
.chapter-rail a span {
  width:26px; height:26px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-latin);
  transition:.3s var(--ease); background:var(--paper);
}
.chapter-rail a b {
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-weight:600; margin-right:8px; transition:.35s var(--ease);
}
.chapter-rail a:hover b,
.chapter-rail a.active b { max-width:120px; opacity:1; }
.chapter-rail a:hover span,
.chapter-rail a.active span {
  background: var(--accent); color:#fff; border-color:var(--accent);
  transform: scale(1.08);
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px,4vw,56px);
  transition: background .4s var(--ease), backdrop-filter .4s, padding .4s;
}
.topbar.scrolled {
  background: rgba(251,246,238,.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding-top:12px; padding-bottom:12px;
}
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand-mark {
  width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:900; font-size:20px;
  transition:.4s var(--ease);
}
.brand:hover .brand-mark { background:var(--accent); transform: rotate(-8deg) scale(1.05); }
.brand b { font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.02em; display:flex; flex-direction:column; line-height:1; }
.brand b small { font-family:var(--font-latin); font-weight:700; font-size:9px; letter-spacing:.32em; color:var(--ink-soft); margin-top:3px; }

.topnav { display:flex; gap:30px; }
.topnav a {
  text-decoration:none; color:var(--ink); font-size:14px; font-weight:500; position:relative; padding:4px 0;
}
.topnav a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); transition:.3s var(--ease);
}
.topnav a:hover::after { width:100%; }

.top-actions { display:flex; align-items:center; gap:12px; }
.ghost-btn {
  background:none; border:1px solid var(--line); color:var(--ink);
  padding:9px 14px; border-radius:999px; font-size:13px; cursor:pointer; font-family:var(--font-body);
  transition:.3s var(--ease);
}
.ghost-btn:hover { border-color:var(--ink); }
.accent-btn {
  background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:999px; border:none; cursor:pointer; display:inline-block;
  transition:.3s var(--ease); box-shadow: 0 8px 22px -10px var(--accent);
}
.accent-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px var(--accent); }
.accent-btn.lg { padding:15px 30px; font-size:16px; }

/* ---------- 通用区块 ---------- */
.section { padding: clamp(80px,11vw,150px) clamp(20px,5vw,80px); scroll-margin-top: 70px; }
.section-head { max-width: 760px; margin-bottom: clamp(40px,6vw,72px); }
.kicker {
  display:inline-block; font-family:var(--font-latin); font-weight:700; font-size:12px;
  letter-spacing:.28em; color:var(--accent); margin-bottom:18px; text-transform:uppercase;
}
.kicker.light { color:#FFB59E; }
.display {
  font-family:var(--font-display); font-weight:900; line-height:1.02;
  font-size: clamp(40px,7vw,86px); letter-spacing:-.01em;
}
.display em { font-style:normal; color:var(--accent); position:relative; }
.display.light { color:var(--paper); }
.lead { margin-top:20px; font-size:clamp(15px,1.6vw,18px); color:var(--ink-soft); max-width:520px; }

.text-link { color:var(--ink); text-decoration:none; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:2px; transition:.3s; }
.text-link:hover { color:var(--accent); border-color:var(--accent); }

/* 滚动渐显 */
.reveal { opacity:0; transform: translateY(26px); transition:.8s var(--ease); }
.reveal.visible { opacity:1; transform:none; }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:92vh; min-height:92svh; padding: 100px clamp(20px,5vw,80px) 18px; display:flex; flex-direction:column; overflow:hidden; }
.hero-grid {
  display:grid; grid-template-columns: clamp(380px,42vw,680px) 1fr; gap: clamp(28px,3vw,52px);
  align-items:stretch; flex:1; min-height:0;
}
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding: clamp(6px,3vh,38px) 0; }
.hero-foot { margin-top:34px; }
.hero-meta { margin-top:30px; padding-top:22px; border-top:1px solid rgba(32,27,23,.22); display:flex; gap: clamp(18px,3vw,42px); flex-wrap:wrap; }
.hero-meta span { font-family:var(--font-latin); font-size:12px; letter-spacing:.05em; color:var(--ink-soft); }
.hero-meta b { font-family:var(--font-display); font-weight:700; font-size:23px; color:var(--ink); margin-right:7px; display:inline-block; line-height:1; }
.eyebrow { font-family:var(--font-latin); font-weight:700; letter-spacing:.22em; font-size:12px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px; }
.hero-title {
  font-family:var(--font-display); font-weight:900; font-size: clamp(48px,7.5vw,108px);
  line-height:.98; letter-spacing:-.02em;
}
.hero-title em { font-style:normal; color:var(--accent); }
.hero-sub { margin-top:24px; max-width:100%; font-size:clamp(16px,1.35vw,19px); line-height:1.65; color:var(--ink-soft); }
.hero-cta { margin-top:34px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

.hero-stage { position:relative; margin-right: calc(-1 * clamp(20px,5vw,80px)); height:100%; min-height:0; border-left:1px solid rgba(32,27,23,.38); }
.hero-frame {
  position:relative; border-radius: var(--radius) 0 0 var(--radius); overflow:hidden;
  height:100%; background: var(--paper-2); box-shadow: 0 40px 80px -40px rgba(26,20,16,.5);
}
.hero-image { width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition: transform 6.5s var(--ease), opacity .6s ease; }
.hero.playing .hero-image { transform:scale(1.1); }
.hero-controls {
  position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:14px;
  background: rgba(251,246,238,.82); backdrop-filter: blur(8px); padding:9px 14px; border-radius:999px;
}
.round-btn {
  width:34px; height:34px; border-radius:50%; border:none; background:var(--ink); color:var(--paper);
  cursor:pointer; font-size:12px; display:grid; place-items:center; transition:.3s var(--ease);
}
.round-btn:hover { background:var(--accent); }
.hero-count { font-family:var(--font-latin); font-weight:700; font-size:13px; letter-spacing:.08em; }
.hero-count b { color:var(--accent); }
.hero-sticker {
  position:absolute; top:16px; right:16px; width:104px; height:104px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.15;
  transform: rotate(-14deg); box-shadow: 0 14px 30px -12px var(--accent); z-index:3;
  animation: wobble 6s var(--ease) infinite;
}
@keyframes wobble { 0%,100%{transform:rotate(-14deg);} 50%{transform:rotate(-6deg);} }

/* 跑马灯 */
.marquee {
  margin-top: clamp(24px,3.4vw,44px); margin-bottom: clamp(8px,1.4vw,18px);
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px clamp(20px,5vw,80px);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track { display:inline-flex; align-items:center; gap:22px; white-space:nowrap; animation: scroll-x 26s linear infinite; }
.marquee-track span { font-family:var(--font-display); font-weight:700; font-size:clamp(20px,3vw,34px); }
.marquee-track i { color:var(--accent); font-style:normal; font-size:22px; }
@keyframes scroll-x { from{transform:translateX(0);} to{transform:translateX(-50%);} }

.scroll-cue {
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); text-decoration:none; font-size:18px;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* ---------- 当季鲜果 ---------- */
.product-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,30px); }
.product-card {
  position:relative; background:var(--paper-2); border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:.5s var(--ease); border:1px solid var(--line);
}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -28px rgba(26,20,16,.45); }
.product-media { aspect-ratio: 1/1; overflow:hidden; background:#e9e0cf; }
.product-media img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.product-card:hover .product-media img { transform: scale(1.08) rotate(-1.5deg); }
.product-badge {
  position:absolute; top:14px; left:14px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:600; padding:5px 11px; border-radius:999px; letter-spacing:.04em;
}
.product-body { padding: 22px 22px 24px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-body h3 { font-family:var(--font-display); font-weight:700; font-size:23px; }
.product-origin { font-size:13px; color:var(--ink-soft); }
.product-note { font-size:13.5px; color:var(--ink-soft); margin-top:4px; flex:1; }
.product-foot { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.product-price { font-family:var(--font-latin); font-weight:800; font-size:22px; }
.product-price small { font-size:12px; font-weight:500; color:var(--ink-soft); margin-left:3px; }
.add-btn {
  border:1px solid var(--ink); background:none; color:var(--ink); border-radius:999px;
  padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:.3s var(--ease);
}
.add-btn:hover { background:var(--ink); color:var(--paper); }

/* ---------- 品牌本味 ---------- */
.story { background: var(--ink); color:var(--paper); }
.story-inner { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items:center; }
.story-quote blockquote {
  font-family:var(--font-display); font-weight:700; font-size: clamp(34px,5vw,62px);
  line-height:1.1; margin-top:18px;
}
.story-quote blockquote em { font-style:normal; color:var(--accent); }
.story-body p { font-size:clamp(15px,1.5vw,18px); color: rgba(251,246,238,.8); margin-bottom:18px; max-width:460px; }

/* 当季色卡 */
.swatch-board { margin-top:26px; border-top:1px solid var(--line-light); padding-top:22px; }
.swatch-label { font-family:var(--font-latin); font-weight:700; letter-spacing:.2em; font-size:11px; color:#FFB59E; text-transform:uppercase; }
.swatch-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; }
.swatch {
  width:64px; text-align:center; cursor:default;
}
.swatch .chip {
  width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,.2);
  transition:.35s var(--ease);
}
.swatch:hover .chip { transform: scale(1.12) rotate(6deg); }
.swatch span { display:block; font-size:10.5px; color: rgba(251,246,238,.7); margin-top:8px; }

/* ---------- 鲜果长廊 ---------- */
.gallery { display:grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.45fr); background: var(--paper-2); border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); }
.gallery-main { position:relative; aspect-ratio: 16/11; background:#e9e0cf; }
.gallery-image { width:100%; height:100%; object-fit:cover; transition: opacity .35s ease, transform .7s var(--ease); }
.zoom-hint {
  position:absolute; right:16px; bottom:16px; background:rgba(251,246,238,.85); backdrop-filter:blur(8px);
  border:none; padding:9px 15px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:.3s var(--ease);
}
.zoom-hint:hover { background:var(--accent); color:#fff; }
.gallery-info { padding: clamp(30px,4vw,54px) clamp(24px,3vw,40px); background: var(--ink); color:var(--paper); display:flex; flex-direction:column; justify-content:center; }
.gallery-index { font-family:var(--font-latin); font-weight:700; letter-spacing:.14em; color:#FFB59E; font-size:13px; }
.gallery-info h3 { font-family:var(--font-display); font-weight:700; font-size: clamp(26px,3vw,38px); margin:12px 0 10px; }
.gallery-info p { color: rgba(251,246,238,.75); font-size:14.5px; }
.thumbnail-strip { display:flex; gap:10px; margin-top:22px; overflow-x:auto; padding-bottom:6px; }
.thumbnail {
  flex:0 0 86px; aspect-ratio:1/1; border-radius:12px; overflow:hidden; opacity:.5;
  border:2px solid transparent; cursor:pointer; transition:.3s var(--ease); padding:0; background:none;
}
.thumbnail img { width:100%; height:100%; object-fit:cover; }
.thumbnail.active, .thumbnail:hover { opacity:1; border-color:var(--accent); }

/* ---------- 严选标准 ---------- */
.standard { background: var(--ink); color:var(--paper); }
.detail-grid { display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--line-light); }
.detail-item {
  min-height: 300px; padding: 36px 28px; border-right:1px solid var(--line-light);
  display:flex; flex-direction:column; justify-content:space-between; transition:.4s var(--ease);
}
.detail-item:last-child { border-right:none; }
.detail-item:hover { background: rgba(255,255,255,.04); }
.detail-num { font-family:var(--font-latin); font-weight:800; font-size:15px; color:#FFB59E; letter-spacing:.1em; }
.detail-item h3 { font-family:var(--font-display); font-weight:700; font-size:25px; margin-top:auto; }
.detail-item p { font-size:13.5px; color: rgba(251,246,238,.7); margin-top:12px; }

/* ---------- 页脚 ---------- */
.footer { background: var(--paper); padding: clamp(70px,9vw,120px) clamp(20px,5vw,80px) 40px; }
.footer-cta { max-width:760px; }
.subscribe { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.subscribe input {
  flex:1; min-width:220px; padding:15px 20px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper-2); font-size:15px; font-family:var(--font-body); color:var(--ink); outline:none; transition:.3s;
}
.subscribe input:focus { border-color:var(--accent); }
.footer-note { margin-top:16px; font-size:13px; color:var(--ink-soft); }
.footer-meta {
  margin-top: clamp(50px,7vw,90px); padding-top:26px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-soft);
}
.footer-meta nav { display:flex; gap:20px; }
.footer-meta a { color:var(--ink); text-decoration:none; }
.footer-meta a:hover { color:var(--accent); }
.brand-sm { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); }

/* ---------- 暗箱 Lightbox ---------- */
dialog {
  width:min(94vw, 1300px); border:none; border-radius:18px; padding:0; background:#171310; color:#fff;
  overflow:hidden;
}
dialog::backdrop { background: rgba(10,8,7,.9); backdrop-filter: blur(7px); }
#lightboxImage { display:block; width:100%; max-height:82vh; object-fit:contain; background:#0d0b09; }
#lightboxCaption { padding:16px 22px; font-size:14px; color: rgba(255,255,255,.8); }
.lb-close {
  position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%; border:none;
  background: rgba(255,255,255,.15); color:#fff; font-size:24px; cursor:pointer; z-index:5; transition:.3s;
}
.lb-close:hover { background:var(--accent); }
.lb-nav { position:absolute; bottom:16px; right:18px; display:flex; gap:10px; }
.lb-nav button {
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.35); color:#fff; font-size:18px; cursor:pointer; transition:.3s;
}
.lb-nav button:hover { background:var(--accent); border-color:var(--accent); }

/* ---------- 汇报 HUD ---------- */
.presentation-hud {
  position:fixed; left:30px; right:30px; bottom:22px; z-index:70; display:none;
  justify-content:space-between; align-items:center; color:#fff; font-size:12px;
  text-shadow:0 1px 6px #000; font-family:var(--font-latin); letter-spacing:.06em;
}
.presenting .presentation-hud { display:flex; }
.presenting .topbar, .presenting .chapter-rail { opacity:0; pointer-events:none; }
.presenting section { scroll-margin-top:0; }
kbd { border:1px solid rgba(255,255,255,.5); border-radius:5px; padding:1px 6px; font-size:11px; }

/* ---------- 轻提示 ---------- */
.toast {
  position:fixed; left:50%; bottom:36px; transform: translate(-50%, 20px);
  background:var(--ink); color:var(--paper); padding:13px 22px; border-radius:999px;
  font-size:14px; font-weight:500; z-index:120; opacity:0; pointer-events:none;
  transition:.4s var(--ease); box-shadow: 0 16px 40px -16px rgba(0,0,0,.6);
}
.toast.show { opacity:1; transform: translate(-50%,0); }

/* ---------- 购物篮子 ---------- */
.cart-btn {
  position:relative; background:none; border:1px solid var(--line); color:var(--ink);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:.3s var(--ease);
}
.cart-btn:hover { border-color:var(--ink); }
.cart-count {
  position:absolute; top:-5px; right:-5px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:999px;
  display:grid; place-items:center; padding:0 5px; transform:scale(0); transition:.3s var(--ease);
}
.cart-count.show { transform:scale(1); }
.cart-btn.bump { animation: bump .42s var(--ease); }
@keyframes bump { 0%,100%{transform:scale(1);} 40%{transform:scale(1.18);} }

.cart-backdrop {
  position:fixed; inset:0; background:rgba(26,20,16,.42); backdrop-filter:blur(3px);
  z-index:95; opacity:0; pointer-events:none; transition:.4s var(--ease);
}
.cart-backdrop.show { opacity:1; pointer-events:auto; }
.cart-drawer {
  position:fixed; top:0; right:0; height:100%; width:min(92vw,400px);
  background:var(--paper); z-index:96; transform:translateX(100%);
  transition:transform .5s var(--ease); display:flex; flex-direction:column;
  box-shadow:-30px 0 60px -30px rgba(26,20,16,.5);
}
.cart-drawer.open { transform:none; }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:26px 26px 18px; border-bottom:1px solid var(--line); }
.cart-head h3 { font-family:var(--font-display); font-weight:700; font-size:22px; }
.cart-close { background:none; border:none; font-size:28px; cursor:pointer; color:var(--ink); line-height:1; }
.cart-items { flex:1; overflow-y:auto; padding:8px 26px; }
.cart-empty { padding:54px 26px; color:var(--ink-soft); font-size:14px; text-align:center; line-height:1.9; }
.cart-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item img { width:64px; height:64px; border-radius:14px; object-fit:cover; background:#e9e0cf; flex:0 0 auto; }
.cart-item .ci-body { flex:1; min-width:0; }
.cart-item .ci-name { font-family:var(--font-display); font-weight:700; font-size:16px; }
.cart-item .ci-meta { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.cart-item .ci-price { font-family:var(--font-latin); font-weight:800; font-size:15px; margin-top:4px; }
.ci-actions { display:flex; align-items:center; gap:12px; margin-top:9px; }
.qty { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.qty button { width:28px; height:28px; border:none; background:none; cursor:pointer; font-size:16px; color:var(--ink); transition:.2s; }
.qty button:hover { background:var(--paper-2); }
.qty span { min-width:26px; text-align:center; font-size:13px; font-weight:600; }
.ci-remove { background:none; border:none; color:var(--ink-soft); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
.cart-foot { padding:20px 26px 26px; border-top:1px solid var(--line); }
.cart-sub { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.cart-sub span { color:var(--ink-soft); font-size:14px; }
.cart-sub b { font-family:var(--font-latin); font-weight:800; font-size:24px; }
.accent-btn.block { display:block; width:100%; text-align:center; }

/* 结算弹窗 */
#checkout { width:min(94vw,480px); padding:34px; color:var(--ink); background:var(--paper); }
#checkout h3 { font-family:var(--font-display); font-weight:700; font-size:24px; margin-bottom:18px; }
#checkout .lb-close { background:var(--paper-2); color:var(--ink); }
#checkoutSummary { background:var(--paper-2); border-radius:16px; padding:16px 18px; margin-bottom:18px; font-size:14px; }
#checkoutSummary .cs-row { display:flex; justify-content:space-between; padding:5px 0; color:var(--ink-soft); }
#checkoutSummary .cs-row b { color:var(--ink); font-family:var(--font-latin); }
#checkoutSummary .cs-total { border-top:1px solid var(--line); margin-top:8px; padding-top:10px; font-weight:700; color:var(--ink); }
#checkout input {
  width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper-2); margin-bottom:12px; font-size:14px; font-family:var(--font-body);
  color:var(--ink); outline:none; transition:.3s;
}
#checkout input:focus { border-color:var(--accent); }

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 1000px) {
  .topnav { display:none; }
  .hero-grid { grid-template-columns: 1fr; gap:40px; }
  .hero-grid::after { display:none; }
  .hero-stage { margin-right:0; max-width:520px; height:auto; border-left:none; }
  .hero-frame { height:auto; aspect-ratio:4/5; border-radius: var(--radius); }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .story-inner { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-info { padding:34px 26px; }
  .detail-grid { grid-template-columns: repeat(2,1fr); }
  .detail-item { min-height:240px; border-bottom:1px solid var(--line-light); }
  .detail-item:nth-child(2n){ border-right:none; }
}
@media (max-width: 560px) {
  .chapter-rail { right:12px; gap:10px; }
  .chapter-rail a b { display:none; }
  .product-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-item { border-right:none; }
  .top-actions .ghost-btn { display:none; }
  .hero-sticker { width:84px; height:84px; font-size:14px; top:12px; right:12px; }
  .hero-meta { gap:14px 20px; margin-top:22px; }
  .accent-btn.lg { padding:13px 24px; font-size:15px; }
}