/* ═══════════════════════════════════════════════════════════════
   光音社 · 积分商城 — Apple Store 中国官网风
   ───────────────────────────────────────────────────────────────
   设计精髓：
   · 大段留白 + 巨型衬线感标题
   · 商品卡片每张独立柔和色（橙/蓝/紫/粉/绿/黄）—— iPhone 17 / 17 Pro / Air 同款
   · Apple Blue #0066cc 作为唯一交互链接色
   · 黑色按钮 #1d1d1f，圆角 20-24px
   · 背景：#fff 主体 + #f5f5f7 分区灰
   · 字体：苹方 / 微软雅黑（与 Apple 官网同款，零下载）
   ═══════════════════════════════════════════════════════════════ */

.shop-page{
  --sp-bg:        #ffffff;
  --sp-bg-soft:   #f5f5f7;
  --sp-bg-soft2:  #fbfbfd;
  --sp-text:      #1d1d1f;
  --sp-text-2:    #424245;
  --sp-text-3:    #6e6e73;
  --sp-text-4:    #86868b;
  --sp-border:    #d2d2d7;
  --sp-border-2:  #e8e8ed;
  --sp-blue:      #0066cc;
  --sp-blue-h:    #0077ed;
  --sp-black:     #1d1d1f;
  --sp-black-h:   #424245;
  --sp-price:     #1d1d1f; /* Apple 风价格其实是黑色 */
  --sp-radius-lg: 22px;
  --sp-radius-md: 18px;
  --sp-radius-sm: 12px;
  --sp-ease:      cubic-bezier(.4,0,.2,1);

  background:var(--sp-bg);
  color:var(--sp-text);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','SF Pro SC','SF Pro Text','SF Pro Display','Helvetica Neue','Microsoft YaHei',sans-serif;
}

/* 表单元素默认不继承 body 字体，强制对齐 */
.shop-page input,
.shop-page textarea,
.shop-page button,
.shop-page select{
  font-family:inherit;
}

/* ═══ 顶部促销条（Apple 标志性的浅灰条幅） ═══ */
.shop-promo{
  background:var(--sp-bg-soft);
  text-align:center;
  padding:11px 24px;
  font-size:14px;
  color:var(--sp-text);
  position:relative;z-index:998;
  letter-spacing:.2px;
}
.sp-icon{
  display:inline-block;margin-right:8px;
  color:#bf4800;font-size:13px;
}
.sp-text strong{font-weight:600;color:var(--sp-text)}
.sp-link{
  color:var(--sp-blue);text-decoration:none;
  margin-left:6px;font-weight:400;
}
.sp-link:hover{text-decoration:underline}
@media(max-width:680px){
  .shop-promo{font-size:12px;padding:10px 16px}
  .sp-link{display:block;margin-top:2px;margin-left:0}
}

/* ═══ Navbar 在商城页变白 ═══ */
.shop-page .navbar{
  /* 关键：商城页顶部有促销条在前，navbar 改 sticky 进入正常流，
     促销条正常显示在上方，滚动时 navbar 仍吸顶，不再 fixed 盖住促销条 */
  position:sticky;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--sp-border-2);
}
.shop-page .navbar.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--sp-border-2);
  box-shadow:none;
}
.shop-page .nav-logo{color:var(--sp-text)}
.shop-page .logo-glyph{
  background:var(--sp-black);color:#fff;border-radius:9px;
  width:32px;height:32px;font-size:15px;
}
.shop-page .logo-name{
  background:none;-webkit-text-fill-color:initial;color:var(--sp-text);
  font-size:17px;font-weight:600;letter-spacing:.2px;
}
.shop-page .nav-links a{color:var(--sp-text-2);font-weight:400;font-size:14px}
.shop-page .nav-links a:hover{color:var(--sp-text);background:transparent}
.shop-page .nav-links a.active{
  color:var(--sp-text);background:transparent;font-weight:600;
}
.shop-page .nav-cta{
  background:var(--sp-blue);color:#fff;font-size:14px;font-weight:400;
  padding:6px 16px;border-radius:980px;
}
.shop-page .nav-cta:hover{
  background:var(--sp-blue-h);box-shadow:none;transform:none;
}
.shop-page .nav-burger span{background:var(--sp-text)}

/* 导航栏头像按钮（登录后显示，点开账户中心） */
.nav-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--sp-border);cursor:pointer;padding:0;
  margin-right:12px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#e8f1fa,#cfe2f3);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:500;color:var(--sp-text);
  transition:.2s var(--sp-ease);
}
.nav-avatar[hidden]{display:none}
/* 首屏防闪：has-session 由 head 内联脚本同步设置，已登录则首帧就藏 CTA、露头像 */
html.has-session .nav-cta{display:none!important}
html.has-session .nav-avatar{display:flex}
/* boot 头像内容：缓存的照片/首字母在首帧前直接渲染，避免「占位♪→真实头像」的二次闪 */
html.av-img .nav-avatar{background-image:var(--gy-av-img);background-size:cover;background-position:center}
html.av-img .nav-avatar>span{visibility:hidden}
html.av-ini .nav-avatar>span{font-size:0}
html.av-ini .nav-avatar>span::after{content:var(--gy-av-ini);font-size:16px;line-height:1}
.nav-avatar:hover{box-shadow:0 0 0 3px rgba(0,102,204,.15)}
.nav-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nav-avatar span{line-height:1}

/* ═══════════════════════════════════════════════════════════════
   HERO — Apple 标志性巨型标题 + 快捷分类
   ═══════════════════════════════════════════════════════════════ */
.shop-hero{
  background:#fff;
  padding:72px 24px 52px;
  max-width:1440px;margin:0 auto;
}

.shop-h1{
  font-size:clamp(56px,9vw,96px);
  font-weight:700;
  line-height:1;
  letter-spacing:-3px;
  color:var(--sp-text);
  margin-bottom:18px;
}
.shop-h1-sub{
  font-size:clamp(19px,2.4vw,24px);
  color:var(--sp-text-2);
  font-weight:400;letter-spacing:-.2px;
  margin-bottom:48px;
  max-width:640px;
}

/* 快捷分类导航条（仿 Apple iPhone 页顶部缩略图条） */
.quick-nav{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid var(--sp-border-2);
  padding-top:36px;
}
.qn-item{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:var(--sp-text);
  padding:12px 8px;
  transition:.2s var(--sp-ease);
  text-align:center;
}
.qn-item:hover{transform:translateY(-2px)}
.qn-thumb{
  width:80px;height:80px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;
  margin-bottom:14px;
  font-weight:300;
  color:var(--sp-text);
}
/* 6 种 Apple 风格商品色（柔和） */
.qn-c0{background:linear-gradient(160deg,#f5f5f7,#e8e8ed)}
.qn-c1{background:linear-gradient(160deg,#fff4e6,#ffd9b3)} /* 橙 - iPhone 17 Pro */
.qn-c2{background:linear-gradient(160deg,#e8f1fa,#cfe2f3)} /* 蓝 - iPhone Air */
.qn-c3{background:linear-gradient(160deg,#f0e6f7,#d9c2e8)} /* 紫 - iPhone 17 */
.qn-c4{background:linear-gradient(160deg,#fce4ec,#f8c8d8)} /* 粉 - iPhone 17e */
.qn-c5{background:linear-gradient(160deg,#e0f0ee,#bfe0d9)} /* 绿 */
.qn-item strong{
  font-size:14px;font-weight:400;line-height:1.3;
  color:var(--sp-text);margin-bottom:2px;
}
.qn-item em{
  font-style:normal;font-size:11px;color:var(--sp-text-3);
  font-weight:400;letter-spacing:.2px;
}

@media(max-width:980px){
  .quick-nav{grid-template-columns:repeat(3,1fr);gap:24px 0}
}
@media(max-width:560px){
  .shop-hero{padding-top:48px}
  .quick-nav{grid-template-columns:repeat(2,1fr)}
  .qn-thumb{width:64px;height:64px;font-size:28px;border-radius:14px}
}

/* ═══════════════════════════════════════════════════════════════
   商品橱窗
   ═══════════════════════════════════════════════════════════════ */
.shop-showcase{
  background:var(--sp-bg-soft);
  padding:80px 0 100px;
}
.sw-wrap{
  max-width:1440px;margin:0 auto;padding:0 24px;
}

.sw-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:36px;flex-wrap:wrap;gap:12px;
}
.sw-head h2{
  font-size:clamp(32px,5vw,56px);
  font-weight:700;line-height:1.1;letter-spacing:-1.5px;
  color:var(--sp-text);
}
.sw-link{
  color:var(--sp-blue);text-decoration:none;
  font-size:17px;font-weight:400;
  transition:.15s var(--sp-ease);
}
.sw-link:hover{color:var(--sp-blue-h);text-decoration:underline}

/* 分类 Tab */
.shop-tabs{
  display:flex;gap:4px;align-items:center;flex-wrap:wrap;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--sp-border-2);
  border-radius:14px;padding:6px;
  margin-bottom:32px;
  position:sticky;top:96px;z-index:50;
}
.tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:9px;
  background:transparent;border:0;
  color:var(--sp-text-2);font-size:14px;font-weight:400;
  cursor:pointer;font-family:inherit;
  transition:.15s var(--sp-ease);
}
.tab em{
  font-style:normal;
  padding:1px 7px;border-radius:7px;
  background:var(--sp-bg-soft);
  font-size:11px;color:var(--sp-text-3);font-weight:500;
  min-width:22px;text-align:center;
}
.tab:hover{color:var(--sp-text)}
.tab.active{
  background:var(--sp-text);color:#fff;font-weight:500;
}
.tab.active em{background:rgba(255,255,255,.2);color:#fff}

.tab-search{
  margin-left:auto;
  display:flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:9px;
  background:#fff;
  border:1px solid var(--sp-border);
  min-width:200px;color:var(--sp-text-3);
  transition:.15s var(--sp-ease);
}
.tab-search:focus-within{border-color:var(--sp-text-3);box-shadow:0 0 0 3px rgba(0,102,204,.08)}
.tab-search svg{flex-shrink:0;opacity:.55}
.tab-search input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--sp-text);font-size:13px;font-family:inherit;
}
.tab-search input::placeholder{color:var(--sp-text-4)}

.tab-sort select{
  padding:7px 12px;border-radius:9px;
  background:#fff;border:1px solid var(--sp-border);
  color:var(--sp-text);font-size:13px;font-family:inherit;
  cursor:pointer;outline:none;
  transition:.15s var(--sp-ease);
}
.tab-sort select:hover{border-color:var(--sp-text-3)}

@media(max-width:760px){
  .shop-tabs{padding:5px;gap:3px}
  .tab{padding:7px 12px;font-size:13px}
  .tab em{display:none}
  .tab-search{margin-left:0;width:100%;min-width:0;order:99}
  .tab-sort{order:99}
}

/* ═══════════════════════════════════════════════════════════════
   商品卡片网格 — 仿 Apple "全系产品细细看"
   每卡有自己的柔和色背景（通过 data-tone 切换 6 种色调）
   ═══════════════════════════════════════════════════════════════ */
.goods-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}

.goods-loading{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:80px 0;color:var(--sp-text-3);font-size:14px;
}
.ld-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--sp-border-2);
  border-top-color:var(--sp-black);
  animation:ldSpin 1s linear infinite;
}
@keyframes ldSpin{to{transform:rotate(360deg)}}

.goods-empty{
  text-align:center;padding:80px 24px;
  border:1px dashed var(--sp-border);border-radius:18px;
  background:#fff;
}
.goods-empty .ge-ico{font-size:42px;color:var(--sp-text-4);margin-bottom:14px}
.goods-empty h3{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--sp-text)}
.goods-empty p{color:var(--sp-text-3);font-size:14px}

/* 单个商品卡片 */
.good{
  background:#fff;
  border-radius:var(--sp-radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:.3s var(--sp-ease);
  position:relative;
  text-align:center;
}
.good:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

/* 大图区域 — 每卡自己的色调，占满 */
.good-img{
  position:relative;
  aspect-ratio:1/1.05;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.good-img img{
  width:100%;height:100%;object-fit:cover;
  transition:.5s var(--sp-ease);
}
.good:hover .good-img img{transform:scale(1.04)}
.good-img.placeholder{
  font-size:120px;
  color:rgba(0,0,0,.18);font-weight:200;
  letter-spacing:-3px;
}

/* 6 种 Apple 商品色调（卡片背景） */
.good[data-tone="0"] .good-img{background:linear-gradient(170deg,#fff4e6 0%,#ffcc99 70%,#ffaa66 100%)}  /* 橙 */
.good[data-tone="1"] .good-img{background:linear-gradient(170deg,#e8f4fc 0%,#b8d8ec 70%,#8fb8d6 100%)}  /* 蓝 */
.good[data-tone="2"] .good-img{background:linear-gradient(170deg,#f4ebfa 0%,#d6b8e0 70%,#b894c8 100%)}  /* 紫 */
.good[data-tone="3"] .good-img{background:linear-gradient(170deg,#fce4ec 0%,#f5b8c8 70%,#ee94ad 100%)}  /* 粉 */
.good[data-tone="4"] .good-img{background:linear-gradient(170deg,#e8f5f0 0%,#a8d8c4 70%,#7cbca0 100%)}  /* 绿 */
.good[data-tone="5"] .good-img{background:linear-gradient(170deg,#fff8e1 0%,#ffe082 70%,#ffca28 100%)}  /* 黄 */

/* 顶部小标签 */
.good-cat{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:4px 11px;border-radius:50px;
  font-size:11px;font-weight:500;letter-spacing:.3px;
  background:rgba(255,255,255,.92);color:var(--sp-text);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.good-stock{
  position:absolute;top:14px;right:14px;z-index:2;
  padding:4px 10px;border-radius:50px;font-size:11px;font-weight:500;
  background:rgba(255,255,255,.92);color:var(--sp-text-3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.good-stock.stock-low{background:#fff;color:#bf4800}
.good-stock.stock-zero{background:rgba(0,0,0,.55);color:#fff}

/* "新款"红字角标 */
.good-new{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  font-size:12px;color:#bf4800;font-weight:500;
  padding:4px 0;letter-spacing:.3px;
  background:transparent;
}

.good-body{
  padding:24px 20px 16px;
  display:flex;flex-direction:column;gap:6px;flex:1;
  align-items:center;
}
.good-name{
  font-size:21px;font-weight:600;color:var(--sp-text);
  line-height:1.2;letter-spacing:-.4px;
  margin-bottom:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.good-desc{
  font-size:13px;color:var(--sp-text-3);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  max-width:280px;
}

.good-foot{
  padding:14px 20px 24px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:transparent;border-top:0;
}
.good-price{display:flex;align-items:baseline;gap:4px}
.good-price em{
  font-style:normal;
  font-size:19px;font-weight:600;line-height:1;
  color:var(--sp-text);letter-spacing:-.3px;
}
.good-price span{font-size:14px;color:var(--sp-text-2);font-weight:400}

.good-btn{
  padding:9px 24px;border-radius:980px;
  background:var(--sp-blue);color:#fff;
  border:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:400;
  transition:.15s var(--sp-ease);
  letter-spacing:.2px;
}
.good-btn:hover{background:var(--sp-blue-h)}
.good-btn:disabled{
  background:var(--sp-bg-soft);color:var(--sp-text-4);
  cursor:not-allowed;
}

/* 产品名下方"新款"小红字（仅特定商品） */
.good-tag-new{
  font-size:12px;color:#bf4800;font-weight:500;
  margin-top:-2px;letter-spacing:.3px;
}

/* ═══════════════════════════════════════════════════════════════
   兑换流程
   ═══════════════════════════════════════════════════════════════ */
.shop-flow{
  background:#fff;
  padding:100px 0;
  border-top:1px solid var(--sp-border-2);
}
.flow-head{text-align:center;margin-bottom:60px;max-width:720px;margin-left:auto;margin-right:auto;padding:0 24px}
.flow-head h2{
  font-size:clamp(32px,5vw,56px);
  font-weight:700;line-height:1.1;letter-spacing:-1.5px;
  color:var(--sp-text);margin-bottom:14px;
}
.flow-head p{color:var(--sp-text-2);font-size:19px;font-weight:400;letter-spacing:-.2px}

.flow-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:1440px;margin:0 auto;padding:0 24px;
}
.flow-step{
  background:var(--sp-bg-soft);border:0;
  border-radius:22px;padding:36px 28px;
  position:relative;overflow:hidden;
  transition:.25s var(--sp-ease);
}
.flow-step:hover{transform:translateY(-3px);background:#fbfbfd;box-shadow:0 12px 30px rgba(0,0,0,.06)}

.fs-num{
  font-size:14px;font-weight:600;line-height:1;
  color:var(--sp-blue);
  margin-bottom:14px;letter-spacing:.5px;
}
.flow-step h3{font-size:22px;font-weight:600;margin-bottom:10px;color:var(--sp-text);letter-spacing:-.3px}
.flow-step p{font-size:14px;color:var(--sp-text-2);line-height:1.6}

@media(max-width:880px){.flow-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.flow-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */
.shop-faq{padding:100px 0;background:var(--sp-bg-soft)}
.faq-head{text-align:center;margin-bottom:56px;max-width:720px;margin-left:auto;margin-right:auto;padding:0 24px}
.faq-head h2{font-size:clamp(32px,5vw,56px);font-weight:700;color:var(--sp-text);letter-spacing:-1.5px;margin-bottom:14px}
.faq-head p{color:var(--sp-text-2);font-size:19px;font-weight:400}

.faq-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1440px;margin:0 auto;padding:0 24px;
}
.faq-card{
  background:#fff;border:0;
  border-radius:22px;padding:32px 28px;
  transition:.25s var(--sp-ease);
}
.faq-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.06)}
.fq-ic{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sp-bg-soft);
  color:var(--sp-text);font-size:20px;font-weight:600;
  margin-bottom:18px;
}
.faq-card h3{font-size:19px;font-weight:600;margin-bottom:10px;color:var(--sp-text);letter-spacing:-.3px}
.faq-card p{font-size:14px;color:var(--sp-text-2);line-height:1.7}

@media(max-width:880px){.faq-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.faq-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   Footer 在商城页变白
   ═══════════════════════════════════════════════════════════════ */
.shop-page .footer{
  background:var(--sp-bg-soft);
  border-top:1px solid var(--sp-border-2);
  color:var(--sp-text-3);
}
.shop-page .footer-brand .logo-glyph{background:var(--sp-black);color:#fff}
.shop-page .footer-brand .logo-name{
  background:none;-webkit-text-fill-color:initial;color:var(--sp-text);
}
.shop-page .footer-brand p{color:var(--sp-text-3)}
.shop-page .footer h4{color:var(--sp-text)}
.shop-page .footer a{color:var(--sp-text-3)}
.shop-page .footer a:hover{color:var(--sp-text)}
.shop-page .footer p{color:var(--sp-text-3)}
.shop-page .footer p strong{color:var(--sp-text)}
.shop-page .footer-line{background:var(--sp-border-2)}
.shop-page .footer-bottom{color:var(--sp-text-4)}

.shop-page .to-top{
  background:var(--sp-black);color:#fff;border-color:var(--sp-black);
}
.shop-page .to-top:hover{background:var(--sp-black-h)}

/* ═══════════════════════════════════════════════════════════════
   兑换确认弹窗
   ═══════════════════════════════════════════════════════════════ */
.shop-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.shop-modal[hidden]{display:none}
.sm-mask{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:smFadeIn .2s var(--sp-ease);
}
@keyframes smFadeIn{from{opacity:0}to{opacity:1}}
.sm-card{
  position:relative;
  width:100%;max-width:520px;max-height:88vh;
  background:#fff;border:0;
  border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  animation:smPop .25s var(--sp-ease);
}
@keyframes smPop{from{transform:scale(.96) translateY(10px);opacity:0}to{transform:none;opacity:1}}

.sm-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:var(--sp-bg-soft);border:0;
  color:var(--sp-text-2);font-size:20px;line-height:1;cursor:pointer;
  transition:.15s var(--sp-ease);
}
.sm-close:hover{background:var(--sp-border);color:var(--sp-text)}

.sm-head{padding:26px 28px 18px;border-bottom:1px solid var(--sp-border-2)}
.sm-tag{
  display:inline-block;padding:3px 10px;border-radius:50px;
  background:var(--sp-bg-soft);color:var(--sp-text-2);
  font-size:11px;font-weight:500;letter-spacing:1px;
  margin-bottom:8px;
}
.sm-head h3{font-size:21px;font-weight:600;color:var(--sp-text);letter-spacing:-.3px}

.sm-body{padding:24px 28px;overflow-y:auto;flex:1}

.sm-good{
  display:flex;gap:14px;
  background:var(--sp-bg-soft);
  border-radius:14px;
  padding:14px;margin-bottom:20px;
}
.smg-img{
  width:88px;height:88px;flex-shrink:0;border-radius:12px;
  background:linear-gradient(160deg,#fff4e6,#ffd9b3);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;color:rgba(0,0,0,.25);font-weight:200;
}
.smg-info{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.smg-info strong{font-size:16px;font-weight:600;color:var(--sp-text);letter-spacing:-.2px}
.smg-info span{font-size:13px;color:var(--sp-text-3);line-height:1.55}
.smg-price{margin-top:auto;display:flex;align-items:baseline;gap:3px}
.smg-price em{
  font-style:normal;font-size:20px;font-weight:600;
  color:var(--sp-text);letter-spacing:-.3px;
}
.smg-price span{font-size:13px;color:var(--sp-text-2);font-weight:400}

.sm-form{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
.sm-field{display:flex;flex-direction:column;gap:8px}
.sm-field label{font-size:12px;color:var(--sp-text-3);font-weight:500;letter-spacing:.3px}
.sm-field input,
.sm-field textarea{
  padding:11px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--sp-border);
  color:var(--sp-text);font-size:14px;font-family:inherit;
  outline:none;resize:vertical;
  transition:.15s var(--sp-ease);
}
.sm-field input:focus,
.sm-field textarea:focus{
  border-color:var(--sp-blue);
  box-shadow:0 0 0 3px rgba(0,102,204,.12);
}
.sm-field input::placeholder,
.sm-field textarea::placeholder{color:var(--sp-text-4)}

.sm-qty{display:flex;align-items:center;gap:0;width:fit-content;border:1px solid var(--sp-border);border-radius:10px;overflow:hidden}
.sq-btn{
  width:36px;height:36px;border:0;background:#fff;
  color:var(--sp-text);font-size:16px;cursor:pointer;font-family:inherit;
  transition:.15s var(--sp-ease);
}
.sq-btn:hover{background:var(--sp-bg-soft)}
.sm-qty input{
  width:54px;text-align:center;border:0;border-radius:0;
  background:transparent;font-size:14px;font-weight:600;color:var(--sp-text);
  -moz-appearance:textfield;
}
.sm-qty input::-webkit-outer-spin-button,
.sm-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.sm-summary{
  background:var(--sp-bg-soft);
  border-radius:12px;padding:16px 18px;
  display:flex;flex-direction:column;gap:8px;
}
.ss-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--sp-text-3)}
.ss-line strong{color:var(--sp-text);font-weight:500}
.ss-final{padding-top:10px;border-top:1px dashed var(--sp-border);font-size:14px}
.ss-final strong{font-size:19px;font-weight:600;color:var(--sp-text);letter-spacing:-.3px}

.sm-foot{
  display:flex;gap:8px;
  padding:18px 28px;border-top:1px solid var(--sp-border-2);
  background:#fff;
}
.sm-btn{
  flex:1;padding:12px;border-radius:980px;
  font-size:14px;font-weight:400;cursor:pointer;
  border:1px solid var(--sp-border);background:#fff;
  color:var(--sp-text);font-family:inherit;
  transition:.15s var(--sp-ease);
}
.sm-btn-ghost:hover{background:var(--sp-bg-soft)}
.sm-btn-primary{
  background:var(--sp-blue);border-color:var(--sp-blue);color:#fff;
}
.sm-btn-primary:hover{
  background:var(--sp-blue-h);border-color:var(--sp-blue-h);
}
.sm-btn-primary:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:560px){
  .sm-card{max-height:94vh;border-radius:18px}
  .sm-head,.sm-body,.sm-foot{padding-left:20px;padding-right:20px}
  .smg-img{width:72px;height:72px}
}

/* ═══ 登录弹窗 / 我的订单弹窗（S4 新增） ═══ */
.sm-card-sm{max-width:420px}
.lm-err{
  margin:0;padding:9px 12px;border-radius:10px;font-size:13px;
  background:#fff1f0;color:#bf2600;border:1px solid #ffd6d0;
}
.lm-tip{margin:0;font-size:12px;line-height:1.6;color:var(--sp-text-4)}

.om-loading{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:40px 0;color:var(--sp-text-3);font-size:14px;
}
.om-empty{text-align:center;padding:40px 16px;color:var(--sp-text-3)}
.om-empty .ge-ico{font-size:42px;color:var(--sp-text-4);margin-bottom:10px}
.om-empty h3{font-size:17px;font-weight:600;color:var(--sp-text);margin:0 0 6px}
.om-empty p{font-size:13px;margin:0}

.om-list{display:flex;flex-direction:column;gap:12px}
.om-item{
  border:1px solid var(--sp-border-2);border-radius:14px;padding:14px 16px;
  background:var(--sp-bg-soft2);
}
.om-main{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.om-name{font-size:15px;font-weight:600;color:var(--sp-text)}
.om-price{font-size:14px;font-weight:600;color:var(--sp-text);white-space:nowrap}
.om-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:8px;font-size:12px;color:var(--sp-text-3);
}
.om-time{color:var(--sp-text-4)}
.om-track,.om-note{color:var(--sp-text-3)}
.om-status{
  display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.6;
}
.os-pending{background:#fff4e5;color:#b35900}
.os-confirmed{background:#e6f0ff;color:#0047b3}
.os-shipped{background:#e3f0ff;color:#0066cc}
.os-done{background:#e6f7ec;color:#1a7a3f}
.os-cancelled{background:#f0f0f2;color:#86868b}

/* ═══════════════════════════════════════════════════════════════
   账户中心弹窗（个人信息 + 头像 + 积分明细 + 订单入口）
   ═══════════════════════════════════════════════════════════════ */
.ac-head{
  display:flex;align-items:center;gap:18px;
  padding:4px 2px 22px;border-bottom:1px solid var(--sp-border-2);
}
.ac-avatar{
  position:relative;width:84px;height:84px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(160deg,#e8f1fa,#cfe2f3);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:300;color:var(--sp-text);
}
.ac-avatar #acAvatarFallback{
  /* 占位首字母：撑满圆形并裁圆，铅笔按钮在容器层不被裁 */
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ac-avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
}
.ac-avatar-edit{
  position:absolute;right:0;bottom:0;z-index:2;
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  background:var(--sp-blue);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:.2s var(--sp-ease);
}
.ac-avatar-edit:hover{background:var(--sp-blue-h)}
.ac-id{display:flex;flex-direction:column;gap:4px;min-width:0}
.ac-name{font-size:20px;font-weight:600;color:var(--sp-text);letter-spacing:-.3px}
.ac-role{
  display:inline-block;align-self:flex-start;
  padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;
  background:var(--sp-bg-soft);color:var(--sp-text-2);
}
.ac-avatar-msg{font-size:12px;color:var(--sp-text-3);min-height:16px}

/* 积分概览：总分大数字 + 三项明细 */
.ac-points{
  margin:22px 0;padding:20px;border-radius:16px;
  background:linear-gradient(160deg,#f5f8fc,#eef3f9);
  border:1px solid var(--sp-border-2);text-align:center;
}
.ac-points-big{
  font-size:42px;font-weight:700;line-height:1;color:var(--sp-text);
  letter-spacing:-1px;font-variant-numeric:tabular-nums;
}
.ac-points-label{font-size:13px;color:var(--sp-text-3);margin-top:6px}
.ac-points-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;
}
.ac-pcell{
  padding:10px 6px;border-radius:12px;background:#fff;
  border:1px solid var(--sp-border-2);
}
.ac-pcell strong{display:block;font-size:18px;font-weight:600;color:var(--sp-text);font-variant-numeric:tabular-nums}
.ac-pcell span{display:block;font-size:11px;color:var(--sp-text-3);margin-top:3px}

/* 账户中心操作行 */
.ac-actions{display:flex;flex-direction:column;gap:10px}
.ac-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:14px;cursor:pointer;
  border:1px solid var(--sp-border-2);background:var(--sp-bg-soft2);
  transition:.2s var(--sp-ease);text-align:left;width:100%;font:inherit;color:inherit;
}
.ac-row:hover{border-color:var(--sp-blue);background:#fff}
.ac-row-left{display:flex;align-items:center;gap:12px}
.ac-row-ic{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  background:var(--sp-bg-soft);color:var(--sp-text-2);
}
.ac-row-tt{font-size:15px;font-weight:500;color:var(--sp-text)}
.ac-row-sub{font-size:12px;color:var(--sp-text-3);margin-top:2px}
.ac-row-arrow{color:var(--sp-text-4);font-size:18px}
.ac-row.danger:hover{border-color:#bf2600}
.ac-row.danger .ac-row-tt{color:#bf2600}
.ac-avatar-file{display:none}