.hero{padding:36px 0 18px}
.hero h1{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:.3px}
.notice{margin-top:16px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--warn) 12%,var(--card));border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);font-size:14px}
.toolbar{margin:8px 0 12px}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{padding:6px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:14px;color:var(--muted);transition:all .2s}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sk{height:290px}
.product{display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
  opacity:0;translate:0 14px;animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards}
.product:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(20,26,43,.35)}
@keyframes rise{to{opacity:1;translate:0 0}}
.product .img{aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 22%,var(--card)),color-mix(in srgb,var(--primary2) 22%,var(--card)));
  display:grid;place-items:center;font-size:36px;overflow:hidden}
.product .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.product:hover .img img{transform:scale(1.05)}
.product .body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.product h3{font-size:16px}
.product .sub{font-size:13px;color:var(--muted);flex:1}
.product .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.price{font-size:20px;font-weight:800;color:var(--primary)}
.price small{font-size:13px;font-weight:600}
.empty{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--muted)}

/* 购买弹窗 */
.buy h2{font-size:19px;margin-bottom:4px}
.desc{font-size:14px;color:var(--muted);margin:10px 0 16px;max-height:160px;overflow:auto;padding:12px;border-radius:12px;background:var(--bg)}
.desc p+p{margin-top:6px}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;width:max-content}
.qty button{width:40px;height:40px;border:0;background:var(--card);cursor:pointer;font-size:18px}
.qty input{width:56px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;background:var(--card)}
.pays{display:flex;gap:10px;flex-wrap:wrap}
.pay{flex:1;min-width:120px;padding:11px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;text-align:center;font-weight:600;transition:all .2s;background:var(--card)}
.pay.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--card));color:var(--primary)}
.total{display:flex;justify-content:space-between;align-items:center;margin:18px 0 14px}

/* 订单页 */
.order-box{max-width:560px;margin:32px auto}
.kv{display:grid;grid-template-columns:90px 1fr;gap:8px 12px;font-size:14px;margin:16px 0}
.kv span{color:var(--muted)}
.cards-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cdk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--primary) 50%,transparent);background:color-mix(in srgb,var(--primary) 6%,var(--card))}
.qr{display:block;margin:12px auto;width:220px;height:220px;border-radius:12px;background:#fff;padding:8px}
.status-big{font-size:22px;font-weight:800;margin:6px 0}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--primary) 25%,transparent);border-top-color:var(--primary);animation:sp .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:10px}.product .body{padding:12px}.product h3{font-size:14.5px}.price{font-size:17px}.sk{height:220px}}