/* shop.css · 商店（2026-09-27）
   网站宽版：开场左字右钱包；两件商品左右并排（左图右字）；下面「怎么赚鱼」一行五格。颜色全部走 site.css 的变量。 */
.sh{max-width:var(--wrap);margin:0 auto;padding:0 2.5rem 7rem}
.sh button{font-family:var(--sans);cursor:pointer}

.sh-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:5rem;align-items:center;padding-top:clamp(3.5rem,7vw,6rem)}
.sh-eyebrow{margin:0 0 1.4rem;font-size:var(--fs-1);font-weight:700;letter-spacing:.12em;color:var(--gold)}
.sh-hero h1{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.1;margin:0;letter-spacing:0}
.sh-lede{margin:1.6rem 0 0;max-width:30em;font-size:var(--fs-3);line-height:1.7;color:var(--text-secondary)}
.sh-wallet{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:2.6rem 3.4rem;border-radius:28px;background:var(--panel);border:1px solid var(--border)}
.sh-wallet span{font-size:var(--fs-1);color:var(--text-muted)}
.sh-wallet b{font-size:clamp(4.4rem,8vw,6.2rem);font-weight:800;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.sh-more{margin-top:1rem;font-size:var(--fs-1);font-weight:700;color:var(--text-primary);text-decoration:none}
.sh-more:hover{color:var(--gold)}

.sh-items{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;padding-top:clamp(4rem,8vw,6.5rem)}
.sh-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2rem;align-items:center;padding:2rem;border-radius:24px;background:var(--panel);border:1px solid var(--border)}
.sh-pic{aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--deep);display:flex;align-items:center;justify-content:center}
.sh-pic img{width:100%;height:100%;object-fit:cover}
.sh-can{flex-direction:column;gap:.3rem}
.sh-can span{font-size:5.5rem;line-height:1}
.sh-can em{font-style:normal;font-size:var(--fs-4);font-weight:800;color:var(--gold)}
.sh-body{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.sh-tag{margin:0;font-size:var(--fs-0);font-weight:700;color:var(--text-muted);letter-spacing:.04em}
.sh-tag.gold{color:var(--gold)}
.sh-body h2{margin:0;font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:0;line-height:1.2}
.sh-desc{margin:0;font-size:var(--fs-1);line-height:1.7;color:var(--text-secondary)}
.sh-price{display:flex;align-items:baseline;gap:.4rem;margin-top:.4rem}
.sh-price b{font-size:2.6rem;font-weight:800;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums}
.sh-price span{font-size:var(--fs-1);color:var(--text-secondary)}
.sh-price small{margin-left:auto;font-size:var(--fs-0);color:var(--text-muted)}
.sh-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.sh-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:3px;transition:width .6s var(--ease)}
.sh-btn{margin-top:.4rem;border:1px solid var(--border);border-radius:999px;padding:.9rem 1.4rem;background:transparent;color:var(--text-secondary);font-size:var(--fs-1);font-weight:700}
.sh-btn:disabled{cursor:default}
.sh-btn.ready{background:var(--gold);border-color:var(--gold);color:var(--paper)}
.sh-btn[data-go]{border-color:var(--gold);color:var(--gold)}

.sh-credit{margin-top:1.8rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.2rem 2.4rem;border-radius:24px;border:1px dashed var(--gold);background:var(--gold-soft)}
.sh-credit[hidden]{display:none}
.sh-credit h2{margin:.5rem 0;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:0}
.sh-credit .sh-desc b{color:var(--text-primary)}
.sh-credit .sh-btn{flex-shrink:0;margin:0;padding:1rem 1.8rem}
.sh-sec{padding-top:clamp(5rem,9vw,8rem)}
.sh-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;padding-bottom:1.4rem;margin-bottom:2.4rem;border-bottom:1px solid var(--border)}
.sh-head h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.15;margin:0;letter-spacing:0}
.sh-head p{margin:0;font-size:var(--fs-2);color:var(--text-secondary)}
.sh-earn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.sh-earn li{display:flex;flex-direction:column;gap:.4rem;padding:1.6rem 1.4rem;border-radius:18px;background:var(--panel);border:1px solid var(--border)}
.sh-earn b{font-size:2.4rem;font-weight:800;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.sh-earn span{font-size:var(--fs-2);color:var(--text-primary);line-height:1.5}
.sh-earn small{font-size:var(--fs-0);color:var(--text-muted)}
.sh-fine{margin:1.4rem 0 0;font-size:var(--fs-0);color:var(--text-muted)}

@media(max-width:1024px){
  .sh-hero{grid-template-columns:1fr;gap:2.5rem}
  .sh-wallet{justify-self:start}
  .sh-items{grid-template-columns:1fr}
  .sh-earn{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .sh{padding:0 1.15rem 5rem}
  .sh-wallet{justify-self:stretch;padding:2rem 1.5rem}
  /* 手机：图和标题并排，价格、进度条、按钮占满整行，字不再挤成窄条 */
  .sh-item{grid-template-columns:92px minmax(0,1fr);gap:.7rem 1.1rem;align-items:start;padding:1.3rem}
  .sh-body{display:contents}
  .sh-pic{grid-row:1/4}
  .sh-tag,.sh-item h2,.sh-desc{grid-column:2}
  .sh-price,.sh-bar,.sh-btn{grid-column:1/-1}
  .sh-tag,.sh-desc,.sh-lede{word-break:keep-all;overflow-wrap:anywhere}
  .sh-fine{text-wrap:wrap}
  .sh-can span{font-size:3.4rem}
  .sh-head{flex-direction:column;gap:.4rem}
  .sh-credit{flex-direction:column;align-items:flex-start;padding:1.6rem}
  .sh-earn{grid-template-columns:1fr 1fr}
}

/* 09-28 老板：换行别落单——商店卡片里的短文字每行匀开 */
.sh p,.sh li,.sh span{text-wrap:balance}

/* 09-28 兑换直接走账本：收地址的小框 */
.sh-addr{position:fixed;inset:0;z-index:9000;background:rgba(10,10,10,.62);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.sh-addr[hidden]{display:none}
.sh-addr-box{width:min(420px,100%);display:flex;flex-direction:column;gap:.9rem;padding:1.8rem;border-radius:22px;background:var(--panel);border:1px solid var(--border)}
.sh-addr-box h3{margin:0 0 .3rem;font-family:var(--serif);font-size:1.5rem;color:var(--text-primary)}
.sh-addr-box label{display:flex;flex-direction:column;gap:.35rem;font-size:var(--fs-1);color:var(--text-secondary)}
.sh-addr-box input,.sh-addr-box textarea{font:inherit;font-size:var(--fs-2);padding:.7rem .9rem;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text-primary);resize:vertical}
.sh-addr-msg{margin:0;min-height:1.2em;font-size:var(--fs-1);color:#d9776b}
.sh-addr-ops{display:flex;justify-content:flex-end;gap:.6rem}
.sh-addr-ops button{border-radius:999px;padding:.75rem 1.4rem;font:inherit;font-size:var(--fs-1);font-weight:700;border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer}
.sh-addr-ops .ready{background:var(--gold);border-color:var(--gold);color:var(--paper)}
.sh-note{margin:.6rem 0 0;font-size:var(--fs-1);color:var(--gold)}