/* —— 按钮 —— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .15s, background .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { color: var(--accent-ink); background: #6FF7D6; }
.btn-ghost { border-color: var(--line-strong); color: var(--text); font-weight: 500; }
.btn-ghost:hover { border-color: var(--text); color: var(--text); }
.btn-lg { min-height: 52px; padding: 0 32px; font-size: 16px; }
.btn-sm { min-height: 36px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 22px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.icon-btn:hover { background: var(--surface-2); }

/* —— 顶部导航 —— */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(11, 12, 15, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav { height: 72px; display: flex; align-items: center; gap: var(--s-5); }
.logo { font-family: var(--font-latin); font-weight: 700; font-size: 22px; letter-spacing: .1em; }
.nav-links { display: flex; gap: var(--s-6); font-size: 15px; margin-left: auto; }
.nav-actions { display: flex; gap: var(--s-2); }
.nav-toggle { display: none; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .nav-actions { margin-left: auto; order: 2; }
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s-2) var(--gutter) var(--s-4); }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
}

/* —— 首页 —— */
.hero { padding-block: var(--s-9) var(--s-8); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-5); }
.hero-visual { position: relative; width: 100%; max-width: 1040px; margin-top: var(--s-7); }
.glow { position: absolute; left: 10%; right: 10%; bottom: -24px; height: 60%; border-radius: 50%; background: var(--glow, var(--accent)); opacity: var(--glow-opacity, .16); filter: blur(70px); transition: background .3s, opacity .3s; pointer-events: none; }
.features { border-block: 1px solid var(--line); }
.features-grid { padding-block: var(--s-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-6); }
.feature { display: flex; flex-direction: column; gap: var(--s-2); }
.feature-bar { width: 32px; height: 2px; background: var(--accent); }
.feature-title { font-size: 18px; font-weight: 700; }
.feature p { font-size: 14px; color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }

/* —— 商品卡片 —— */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-5); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); transition: border-color .2s, transform .2s; }
.card:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-m); background: var(--surface-2); display: flex; align-items: center; justify-content: center; padding: 10%; }
.card-media .kb { width: 100%; }
.card-media .mouse-art { height: 100%; }
.tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); }
.card-name { font-family: var(--font-latin); font-size: 20px; font-weight: 700; }
.card-kind { font-size: 14px; color: var(--muted); }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.price { font-weight: 500; }
.card-cta { font-size: 14px; color: var(--accent); }

/* —— 键盘与鼠标示意图（由 keyboard.js 生成键位） —— */
.kb { position: relative; background: var(--case); border: 1px solid #2A2D35; border-radius: clamp(8px, 2vw, 20px); padding: 2.2%; display: flex; flex-direction: column; gap: 1.2%; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transition: background .3s; }
.kb-row { display: flex; gap: .7%; aspect-ratio: 18 / 1; }
.kb[data-kb="98"] .kb-row { aspect-ratio: 22 / 1; }
.kb-key { flex-basis: 0; flex-shrink: 1; border-radius: clamp(2px, .5vw, 6px); background: var(--key); border-top: 1px solid var(--edge); box-shadow: inset 0 -3px 0 var(--key-glow, rgba(56, 242, 194, .4)); transition: background .3s, box-shadow .3s; }
.kb-key.hot { background: var(--hot, var(--accent)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.kb-gap { flex-basis: 0; flex-shrink: 1; }
.mouse-art { display: flex; justify-content: center; }
.mouse-art svg { height: 100%; max-height: 420px; width: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }

/* —— 选购向导 —— */
.finder { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: center; }
.finder-copy, .finder-form { flex: 1 1 380px; min-width: 0; }
.finder-q { background: var(--surface-2); border: 1px solid #2A2D35; border-radius: var(--radius-m); padding: var(--s-4) var(--s-5); }
.finder-q legend { float: left; width: 100%; margin-bottom: var(--s-3); font-size: 15px; }

/* —— 选项：色块、药丸、单选芯片 —— */
.picker-row { display: flex; flex-wrap: wrap; gap: 10px; clear: both; }
.picker legend { font-size: 14px; color: var(--muted); margin-bottom: var(--s-3); }
.picker-current { color: var(--text); }
.swatch { width: 44px; height: 44px; border-radius: 22px; background: var(--swatch); border: 2px solid var(--line-strong); box-shadow: inset 0 0 0 3px var(--bg); cursor: pointer; }
.swatch[aria-pressed="true"] { border-color: var(--accent); }
.pill { min-height: 44px; padding: 0 18px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid #2A2D35; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pill[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.pill.light { border-radius: var(--radius-pill); }
.pill.light[aria-pressed="true"] { background: var(--surface-2); border-color: var(--text); }
.dot { width: 10px; height: 10px; border-radius: 5px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; font-size: 14px; color: var(--muted); }
.chip input:checked + span { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* —— 列表页筛选 —— */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.filters legend { font-size: 13px; color: var(--faint); margin-bottom: var(--s-2); }
.empty { color: var(--muted); text-align: center; padding: var(--s-8) 0; }

/* —— 占位图 —— */
.ph { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--faint); font-size: 14px; padding: var(--s-5); }
.ph-wide { aspect-ratio: 16 / 10; }

/* —— 产品页 —— */
.subnav { position: sticky; top: 72px; z-index: 15; background: rgba(11, 12, 15, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav-row { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.subnav-name { font-family: var(--font-latin); font-weight: 700; white-space: nowrap; }
.subnav-links { display: flex; align-items: center; gap: var(--s-5); font-size: 14px; overflow-x: auto; }
.subnav-links a:not(.btn) { color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .subnav-links a:not(.btn) { display: none; } }
.product-hero { padding-block: var(--s-8) var(--s-9); display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.product-visual { flex: 3 1 560px; min-width: 0; position: relative; display: flex; flex-direction: column; gap: var(--s-4); }
.product-visual .mouse-art { height: 420px; }
.product-buy { flex: 2 1 340px; min-width: 0; }
.price-lg { font-size: 28px; font-weight: 700; }
.form-msg { font-size: 14px; color: var(--accent); min-height: 1.4em; }
.form-msg.error { color: #FF8A6B; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(24px, 3vw, 40px); }
.panel-accent { border-color: var(--accent); }
.panel-title { font-size: 18px; font-weight: 700; }
.travel { display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: stretch; }
.travel-track { position: relative; width: 120px; height: 280px; flex: 0 0 auto; --pos: 40%; }
.travel-line, .travel-fill { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; }
.travel-line { bottom: 0; background: #2A2D35; }
.travel-fill { height: var(--pos); background: var(--accent); }
.travel-mark { position: absolute; left: 50%; top: var(--pos); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 9px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.travel-mark::before { content: ''; position: absolute; left: -42px; right: -42px; top: 8px; border-top: 2px dashed var(--accent); }
.travel-top, .travel-bottom { position: absolute; left: 0; font-size: 12px; color: var(--faint); }
.travel-top { top: -4px; } .travel-bottom { bottom: -4px; }
.travel-body { flex: 1 1 200px; display: flex; flex-direction: column; justify-content: center; }
.big-num { font-family: var(--font-latin); font-size: 56px; font-weight: 700; line-height: 1; }
.big-num small { font-size: 22px; color: var(--muted); }
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 44px; }
.range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }
.specs > div { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.specs dt { flex: 0 0 160px; color: var(--muted); }
.specs dd { flex: 1 1 240px; }

/* —— 购物车抽屉 —— */
.cart { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(420px, 100vw); max-width: 100vw; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--text); display: none; flex-direction: column; }
.cart[open] { display: flex; }
.cart::backdrop { background: rgba(0, 0, 0, .6); }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.cart-title { font-size: 18px; }
.cart-mode { margin: var(--s-4) var(--s-5) 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius-m); font-size: 13px; color: var(--muted); }
.cart-lines { list-style: none; margin: 0; padding: var(--s-2) var(--s-5); overflow-y: auto; flex: 1; }
.cart-line { display: flex; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 700; }
.cart-line-opts { font-size: 13px; color: var(--muted); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); margin-top: var(--s-2); }
.qty button { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; border-radius: 18px; }
.qty span { min-width: 24px; text-align: center; font-size: 14px; }
.cart-remove { border: 0; background: transparent; color: var(--faint); font-size: 13px; cursor: pointer; padding: 8px 0; text-decoration: underline; }
.cart-empty { padding: var(--s-7) var(--s-5); color: var(--muted); text-align: center; }
.cart-foot { padding: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-3); }
.cart-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; }

/* —— 页脚 —— */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--s-9); }
main > .band:last-child { margin-bottom: calc(-1 * var(--s-9)); }
.footer-grid { padding-block: var(--s-8) var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-7); justify-content: space-between; }
.footer-brand { flex: 1 1 320px; max-width: 460px; }
.footer-cols { display: flex; gap: var(--s-8); flex-wrap: wrap; font-size: 14px; }
.footer-cols .stack-s { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-cols .stack-s > * + * { margin-top: 0; }
.subscribe label { font-size: 14px; color: var(--muted); }
.subscribe-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.subscribe-row input { flex: 1 1 200px; min-height: 44px; background: var(--surface); border: 1px solid #2A2D35; border-radius: var(--radius-pill); padding: 0 20px; font-size: 15px; }
.footer-legal { padding-bottom: var(--s-6); font-size: 13px; color: var(--faint); }
.footer-legal a { color: var(--faint); }

/* —— 选购推荐 —— */
.tag-pick { left: auto; right: 12px; background: var(--text); color: var(--bg); }
.card.is-pick { border-color: var(--accent); }
.finder-note { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-m); padding: var(--s-4) var(--s-5); }
.finder-note p { flex: 1 1 320px; min-width: 0; }

/* —— 对比表 —— */
.compare-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); }
.compare { width: 100%; min-width: 560px; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--font-latin); font-size: 18px; background: var(--surface); }
.compare thead td { background: var(--surface); }
.compare-sub { font-family: var(--font-cn); font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.compare tbody th { width: 160px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.compare-hint { display: none; font-size: 13px; color: var(--faint); }
@media (max-width: 640px) { .compare-hint { display: block; } }

/* —— 真实产品图（美术交付后） —— */
.prod-img { display: block; width: 100%; height: auto; }
.card-media .prod-img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.hero-visual .prod-img, .product-visual .prod-img { position: relative; }
.scene-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-l); }

/* ===== 第二轮升级 ===== */

/* —— 公告栏 —— */
.announce { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; }
.announce-row { min-height: 36px; display: flex; align-items: center; justify-content: center; text-align: center; }
.announce a { color: var(--muted); }
.announce a:hover { color: var(--accent); }

/* —— 产品下拉菜单 —— */
.nav-mega { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; cursor: pointer; font-size: 15px; color: var(--text); }
.nav-mega:hover, .nav-mega[aria-expanded="true"] { color: var(--accent); }
.nav-mega svg { transition: transform .2s; }
.nav-mega[aria-expanded="true"] svg { transform: rotate(180deg); }
.only-mobile { display: none; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: rgba(11, 12, 15, .97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(0, 0, 0, .5); }
.mega-grid { padding-block: var(--s-6) var(--s-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-6); }
.menu-col { display: flex; flex-direction: column; gap: var(--s-2); }
.menu-title { font-size: 13px; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--s-2); }
.menu-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); margin-inline: calc(-1 * var(--s-2)); border-radius: var(--radius-m); }
.menu-item:hover { background: var(--surface); color: var(--text); }
.menu-item img, .menu-thumb { width: 96px; height: 72px; flex: 0 0 auto; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-s); }
.menu-name { display: block; font-weight: 700; font-size: 15px; }
.menu-price { display: block; font-size: 13px; color: var(--muted); }
.menu-brands a { font-size: 15px; padding: 6px 0; }
@media (max-width: 820px) {
  .nav-mega, .mega { display: none !important; }
  .only-mobile { display: block; }
}

/* —— 搜索 —— */
.search { margin: 0; width: 100vw; max-width: 100vw; max-height: 80vh; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--text); }
.search::backdrop { background: rgba(0, 0, 0, .6); }
.search-box { padding-block: var(--s-5) var(--s-6); }
.search-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: var(--s-2); }
.search-row { display: flex; align-items: center; gap: var(--s-3); border-bottom: 1px solid var(--line-strong); padding-bottom: var(--s-3); }
.search-row input { flex: 1; min-width: 0; background: transparent; border: 0; font-size: 22px; padding: 8px 0; }
.search-row input:focus { outline: none; }
.search-row:focus-within { border-color: var(--accent); }
.search-results { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-2); }
.search-hit { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3); border-radius: var(--radius-m); }
.search-hit:hover, .search-hit:focus-visible { background: var(--surface); color: var(--text); }
.search-hit img { width: 96px; height: 72px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-s); }
.search-name { display: block; font-weight: 700; }
.search-meta { display: block; font-size: 13px; color: var(--muted); }
.search-empty { padding: var(--s-5) 0; }

/* —— 首页轮播 —— */
.carousel { position: relative; padding-block: var(--s-8) var(--s-5); overflow: hidden; }
.carousel-track { display: grid; }
.slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease, visibility 0s; }
.slide-copy .display { font-size: clamp(40px, 5.6vw, 80px); text-wrap: balance; }
.slide-visual { position: relative; }
.slide-visual .prod-img { position: relative; }
.btn-row-start { justify-content: flex-start; }
.carousel-controls { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); }
.dots { display: flex; gap: 6px; padding-inline: var(--s-2); }
.dot { width: 28px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; }
.dot::before { content: ''; position: absolute; left: 2px; right: 2px; top: 20px; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background .2s; }
.dot[aria-pressed="true"]::before { background: var(--accent); }
.ctl { border: 1px solid var(--line); }
[data-pause] .i-play { display: none; }
[data-pause].is-paused .i-play { display: block; }
[data-pause].is-paused .i-pause { display: none; }
@media (max-width: 820px) {
  .slide { grid-template-columns: 1fr; gap: var(--s-5); text-align: center; }
  .slide-visual { order: -1; }
  .btn-row-start { justify-content: center; }
  .carousel-controls { justify-content: center; }
  .carousel { padding-top: var(--s-6); }
}

/* —— 入口方块（按类型、按品牌） —— */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s-5); }
.tile { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; transition: border-color .2s; }
.tile:hover { border-color: var(--line-strong); color: var(--text); }
.tile-media { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--surface-2); padding: 6% 12%; }
.tile-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.tile:hover .tile-media img { transform: scale(1.04); }
.tile-body { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.tile-name { font-family: var(--font-latin), var(--font-cn); font-size: 20px; font-weight: 700; }
.tile-meta { font-size: 14px; color: var(--muted); }

/* —— 卡片：品牌标签、悬停换场景图 —— */
.card-brand { font-family: var(--font-latin); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.card-media { overflow: hidden; }
.card-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.card:hover .card-alt, .card:focus-visible .card-alt { opacity: 1; }
@media (hover: none) { .card-alt { display: none; } }

/* —— 产品页：面包屑、图集、卖点、保障 —— */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: var(--s-5); font-size: 13px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--text); }
.product-hero { padding-top: var(--s-6); }
.gallery { position: relative; display: flex; flex-direction: column; gap: var(--s-4); }
.gallery-main { position: relative; aspect-ratio: 5 / 3; display: flex; align-items: center; justify-content: center; }
.gallery-main .prod-img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main .prod-img.is-scene { object-fit: cover; border-radius: var(--radius-l); }
.gallery-thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.gallery-thumb { width: 84px; height: 60px; padding: 4px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb[data-scene] img { object-fit: cover; border-radius: 6px; }
.gallery-thumb[aria-pressed="true"] { border-color: var(--accent); }
.highlights { border-block: 1px solid var(--line); }
.highlights-grid { padding-block: var(--s-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--s-5); }
.hl { display: flex; flex-direction: column; gap: 4px; }
.hl-num { font-family: var(--font-latin); font-size: clamp(26px, 3vw, 36px); font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-label { font-size: 14px; color: var(--muted); }
.assure { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-3); font-size: 13px; color: var(--muted); }
.assure li { display: flex; gap: var(--s-3); align-items: flex-start; }
.assure svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.assure a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1100px) {
  .product-buy { position: sticky; top: 148px; align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active { transition: none; transform: none; }
}

/* —— 第二轮微调 —— */
.mega { background: var(--bg); backdrop-filter: none; }
.slide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.slide-visual .prod-img { transform: scale(1.06); transform-origin: center; }
.h1-product { text-wrap: balance; }
@media (max-width: 820px) { .slide { grid-template-columns: 1fr; } .slide-visual .prod-img { transform: none; } }
.slide { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); }
.slide-copy .display { font-size: clamp(40px, 4.4vw, 64px); }
@media (max-width: 820px) { .slide { grid-template-columns: 1fr; } }

/* —— 版本号：页面最底部，低调显示，方便核对线上版本 —— */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.build-tag { font-family: var(--font-latin); font-size: 11px; letter-spacing: .04em; color: var(--faint); opacity: .7; font-variant-numeric: tabular-nums; }

/* —— 0.8.0：分类菜单、排序、对比选择 —— */
.menu-link { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 6px 0; font-size: 15px; color: var(--text); }
.menu-link:hover, a.menu-title:hover { color: var(--accent); }
.menu-count { font-size: 13px; color: var(--faint); }
a.menu-title { display: flex; justify-content: space-between; color: var(--text); font-weight: 700; letter-spacing: 0; font-size: 15px; }
.menu-sub { font-size: 13px; color: var(--muted); margin-top: var(--s-3); }
.menu-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.menu-chips a { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; color: var(--muted); }
.menu-chips a:hover { border-color: var(--accent); color: var(--text); }
.head-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.sort { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 14px; color: var(--muted); }
.sort select, .compare-pick select { min-height: 40px; padding: 0 var(--s-3); background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-m); font: inherit; font-size: 14px; max-width: 100%; }
.compare-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.compare-pick { display: flex; flex-direction: column; gap: var(--s-1); font-size: 13px; color: var(--muted); min-width: 0; }
.compare-tabs { display: flex; gap: var(--s-4); }
.compare-tabs a { color: var(--muted); }
.compare-tabs a:hover { color: var(--accent); }
.compare [hidden] { display: none; }
#keyboards, #mice { scroll-margin-top: 96px; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s-5); }
.detail { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.detail-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-l); background: var(--surface-2); }
.detail figcaption { font-size: 14px; color: var(--muted); }
.box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-6); }
.box-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.box-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.box-qty { color: var(--muted); font-variant-numeric: tabular-nums; }
.h4 { font-size: 16px; font-weight: 700; margin: 0; }
.compare thead td:first-child { width: 120px; }