/* =============================================================
 * 全站公共样式（index / iphone / mac / ipad 共用）
 * 改配色动这里 :root 的变量即可
 * ============================================================= */
:root{--blue:#0a84ff;--ink:#111418;--sub:#5b6470;--bg:#f5f5f7;--card:#fff;--line:#e6e8eb;--green:#1aa260;--red:#e8483b;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ---------- 柔光极光动态背景（纯 CSS，0 字节，不挡点击） ----------
 * 固定在 body 最底层、z-index:-1、pointer-events:none，
 * 所有导航/卡片在它之上，点击不受影响；尊重「减少动效」设置。
 * 渐变最后一层是 --bg 实底色，保证整屏被铺满、不露白边。 */
body::before{
  content:"";
  position:fixed;
  inset:0;                          /* 与视口同大；靠 background-size:200% 漂移，不超界、无滚动条 */
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(42% 46% at 22% 28%, rgba(110,156,255,.20), transparent 70%),
    radial-gradient(40% 44% at 80% 22%, rgba(196,168,255,.18), transparent 70%),
    radial-gradient(46% 50% at 68% 82%, rgba(110,228,206,.16), transparent 70%),
    radial-gradient(42% 46% at 28% 76%, rgba(255,206,170,.15), transparent 70%),
    var(--bg);
  background-size:200% 200%,200% 200%,200% 200%,200% 200%,100% 100%;
  animation:auraDrift 30s ease-in-out infinite alternate;
}
@keyframes auraDrift{
  0%  {background-position:0%   0%, 100% 0%,  50% 100%, 0%  100%, 0 0}
  50% {background-position:60%  40%, 40%  60%, 90% 30%,  30% 70%,  0 0}
  100%{background-position:100% 100%,0%  100%,100% 0%,  55% 0%,  0 0}
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.brand{font-weight:700;font-size:17px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:2px}
.brand::before{
  /* Apple 彩虹 logo：用 mask 切出苹果形状，背景叠「七彩分段 + 斜向扫光」；
     七彩顺序改为光谱：红→橙→黄→绿→蓝→紫（顶→底）；
     扫光 115deg 亮带从右上(160% -60%)滚到左下(-60% 160%)，3.2s 循环；
     viewBox 24x24、渲染 26x26 正方形，比例正确 */
  content:"";
  display:inline-block;width:26px;height:26px;flex-shrink:0;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.3 3.51 7.97 9.05 7.65c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.78-2.53 3.74zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/></svg>") center/26px 26px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.3 3.51 7.97 9.05 7.65c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.78-2.53 3.74zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/></svg>") center/26px 26px no-repeat;
  background:
    linear-gradient(115deg, transparent 44%, rgba(255,255,255,.92) 50%, transparent 56%),
    linear-gradient(to bottom, #FF2D95 0 16.66%, #FF7A00 16.66% 33.33%, #FFE600 33.33% 50%, #39FF14 50% 66.66%, #00E5FF 66.66% 83.33%, #B026FF 83.33% 100%);
  background-size:280% 280%, 100% 100%;
  background-repeat:no-repeat,no-repeat;
  animation:brandShine 3.2s linear infinite;
}
@keyframes brandShine{
  0%{background-position:160% -60%, 0 0}
  70%,100%{background-position:-60% 160%, 0 0}
}
@media (prefers-reduced-motion: reduce){.brand::before{animation:none}}
.langsel{display:flex;gap:4px;flex-wrap:wrap}
.langsel button{border:1px solid var(--line);background:#fff;color:var(--sub);padding:5px 10px;border-radius:20px;font-size:13px;cursor:pointer;transition:.15s}
.langsel button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.header-btns{display:flex;gap:8px;align-items:center}
.catnav{position:relative;display:flex;gap:8px;padding:38px 0 12px;margin-top:6px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:center}
.catnav button{padding:8px 20px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.catnav button:hover{background:var(--bg)}
.catnav button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.catnav .whatsapp-btn{background:#25D366;color:#fff;border-color:#25D366}
.catnav .whatsapp-btn:hover{background:#128C7E;border-color:#128C7E}
.catnav .whatsapp-btn.active{background:#128C7E;border-color:#128C7E}

/* ---------- 导航跳动 Apple 图标：弹性跳跃动画，依次跳各按钮头顶，循环 ---------- */
/* 绝对定位在 catnav 内、按钮正上方，pointer-events:none 不挡点击；
   横向 left + 起跳/落地挤压拉伸 由 JS 按真实按钮中心生成 keyframes；
   系统「减少动效」则隐藏。 */
.stickman{
  position:absolute;
  top:8px;            /* 落在 catnav 内、按钮正上方，踩在按钮上 */
  bottom:auto;
  left:0;
  width:22px;
  height:30px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z' fill='%23111'/></svg>") no-repeat center / contain;
  pointer-events:none;
  z-index:5;
  animation:stickman-cycle 10s ease-in-out infinite;
  will-change:left,transform;
}
@media (prefers-reduced-motion: reduce){
  .stickman{animation:none;display:none}
}

/* ---------- 顶部文案区 ---------- */
.hero{text-align:center;padding:34px 18px 22px;background:transparent}
.hero .badge{display:inline-block;background:#fff3e0;color:#c4622d;border:1px solid #f0c89a;font-size:16px;font-weight:700;padding:9px 22px;border-radius:24px;margin-bottom:16px}
/* ---------- 首页库存指示器：真实剩余台数（仅首页 hero，详情页不显示） ---------- */
.hero .stock{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;
  border:1px solid #ffd7d2;
  box-shadow:0 3px 12px rgba(217,48,37,.10);
  border-radius:24px;
  padding:7px 18px 7px 14px;
  margin-bottom:10px;
  font-size:15px;font-weight:600;color:#5f2120;
  animation:stockPop .55s cubic-bezier(.2,.9,.25,1.25) both;
}
.hero .stock .stock-dot{
  position:relative;flex:0 0 auto;
  width:9px;height:9px;border-radius:50%;background:#d93025;
  animation:stockBeat 1.6s ease-in-out infinite;
}
.hero .stock .stock-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(217,48,37,.5);
  animation:stockRing 1.6s ease-out infinite;
}
.hero .stock .stock-num{
  color:#d93025;font-size:23px;font-weight:800;letter-spacing:-.4px;
  margin:0 3px;font-variant-numeric:tabular-nums;
}
@keyframes stockPop{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes stockBeat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
@keyframes stockRing{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media(max-width:760px){
  .hero .stock{font-size:14px;padding:6px 14px 6px 12px;gap:7px}
  .hero .stock .stock-num{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .hero .stock,.hero .stock .stock-dot,.hero .stock .stock-dot::after{animation:none}
}
.hero h1{font-size:30px;font-weight:800;letter-spacing:-.5px}
.hero p{color:var(--sub);max-width:640px;margin:12px auto 0;font-size:15px}
.hero .trust{margin-top:16px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--sub)}
.hero .trust span{display:flex;align-items:center;gap:6px}

/* ---------- 图片占位框（换成 <img> 后虚线与提示自动消失） ---------- */
.phbox{position:relative;width:100%;border:2px dashed #c8ccd2;border-radius:16px;background:#eef0f3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.phbox>span{color:#98a0ab;font-size:13.5px;font-weight:600;text-align:center;padding:16px;line-height:1.8}
.phbox.filled{border:none;background:#eceef1}
.phbox.filled>span{display:none}
.phbox img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 主页：1 主图 + 3 类别大图 ---------- */
.heroimg{margin:20px 0 6px}
.heroimg .phbox{aspect-ratio:16/7;border-radius:18px}
.heroimg .phbox>span{font-size:15px}
.catimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 10px}
.catimg{display:block;transition:.18s}
.catimg:hover{transform:translateY(-3px)}
.catimg .phbox{aspect-ratio:4/5;border-radius:16px}
.catimg .cap{margin-top:11px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.catimg .cap b{font-size:17px;font-weight:800}
.catimg .cap em{font-style:normal;color:var(--sub);font-size:13px;font-weight:600}
.catimg .cap i{font-style:normal;color:var(--blue);font-size:18px;font-weight:700}
.sect-t{text-align:center;margin:38px 0 4px;font-size:22px;font-weight:800}

/* ---------- 商品列表 ---------- */
.cat{margin:34px 0 8px;display:flex;align-items:baseline;gap:10px}
.cat h2{font-size:22px;font-weight:800}
.cat .line{flex:1;height:1px;background:var(--line)}
.catdesc{color:var(--sub);font-size:14px;margin:-2px 0 4px;max-width:720px}
.backlink{display:inline-block;margin:22px 0 0;color:var(--sub);font-size:14px;font-weight:600}
.backlink:hover{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;transition:.18s;cursor:pointer}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card .thumb{height:200px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent;border:none;margin-bottom:12px;box-shadow:none}
.card .thumb img{width:100%;height:100%;object-fit:contain}
.card .thumb .ph{font-size:34px;font-weight:800;color:#bbb}
.card .gen{font-size:12px;color:var(--sub);font-weight:600}
.card h3{font-size:16px;font-weight:700;margin:2px 0}
.card .sum{font-size:13px;color:var(--sub);min-height:38px;margin:4px 0 10px}
.price{margin-top:auto}
.price .from{font-size:12px;color:var(--sub)}
.price .our{font-size:21px;font-weight:800;color:var(--ink)}
.price .official{font-size:13px;color:#e8483b;text-decoration:line-through;margin-left:8px}
.empty{text-align:center;color:var(--sub);padding:60px 0;font-size:15px}

/* ---------- 自动跳转 WhatsApp 提示条 ---------- */
.autowa{position:fixed;left:50%;bottom:78px;z-index:101;transform:translateX(-50%) translateY(10px);
  display:flex;align-items:center;gap:10px;max-width:94vw;padding:10px 12px 10px 16px;
  background:rgba(17,20,24,.96);color:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0;transition:opacity .25s,transform .25s;backdrop-filter:blur(8px)}
.autowa.on{opacity:1;transform:translateX(-50%) translateY(0)}
.autowa-txt{font-size:13.5px;font-weight:600;white-space:nowrap}
.autowa-go{border:none;background:#25D366;color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:20px;cursor:pointer}
.autowa-go:hover{background:#128C7E}
.autowa-no{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer}
.autowa-no:hover{background:rgba(255,255,255,.14)}
@media(max-width:600px){
  .autowa{bottom:66px;gap:8px;padding:9px 10px 9px 13px;border-radius:12px}
  .autowa-txt{font-size:12.5px}
}

/* ---------- 底部 ---------- */
.foot{text-align:center;color:var(--sub);font-size:12.5px;padding:40px 18px 90px;line-height:1.9}
.foot b{color:var(--ink)}
.fab-wa{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:100;display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:13px 22px;border-radius:50px;font-weight:700;font-size:15px;box-shadow:0 8px 24px rgba(37,211,102,.45);text-decoration:none;transition:background .18s}
.fab-wa:hover{background:#128C7E}
.fab-wa svg{width:22px;height:22px;flex:none}
.fab-wa::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50px;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:fabRing 2.2s infinite}
@keyframes fabRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:600px){.fab-wa{padding:12px 16px;font-size:14px;bottom:12px}}

/* ---------- 导航栏下方轮播 ---------- */
.slider{position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line);-webkit-user-select:none;user-select:none}
.slider .track{display:flex;width:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.slide{position:relative;flex:0 0 100%;width:100%;height:320px;display:flex;align-items:center;justify-content:center;gap:30px;padding:0 28px;text-decoration:none;color:#fff;overflow:hidden}
.slide.center{justify-content:center;text-align:center;padding:0 24px}
.slide .txt{flex:0 1 460px;max-width:460px;min-width:0}
.slide .txt h2{font-size:30px;font-weight:800;letter-spacing:-.4px;line-height:1.25;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.slide .txt .sub{margin-top:8px;font-size:15px;opacity:.9;line-height:1.5}
.slide .txt .pr{margin-top:10px;font-size:14px;font-weight:700;opacity:.95}
.slide .txt .cta{margin-top:16px;display:inline-block;background:#fff;color:#111418;font-weight:700;font-size:14px;padding:10px 22px;border-radius:24px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.slide .pic{flex:0 1 380px;max-width:380px;display:flex;justify-content:center;align-items:center;min-width:0}
.slide .pic img{max-height:250px;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.slide.light{color:#111418}
.slide.light .txt h2,.slide.light .txt .sub,.slide.light .txt .pr{text-shadow:none}
.slide.light .pic img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.18))}
.slide.light .txt .cta{background:#111418;color:#fff}

/* ---------- CTA 轮播：浅灰底 + 蓝色字 + 文字区块斜向高光扫过 ---------- */
/* 光泽只作用在这一张 slide 的「文字部分」(.txt 内的 h2 + sub + WhatsApp 按钮)，不铺整张背景图；
   高光为「浅蓝反光带」而非纯白，避免整段字被刷白 */
.slide.shine-cta{color:#0a5fd0;overflow:hidden}
.slide.shine-cta .txt{position:relative;z-index:2}
.slide.shine-cta .txt h2,
.slide.shine-cta .txt .sub{
  /* 文字底色保持品牌蓝，仅一道浅蓝高光带斜扫而过 */
  background:linear-gradient(115deg,#0a5fd0 0%,#0a5fd0 40%,#8fc2ff 50%,#0a5fd0 60%,#0a5fd0 100%);
  background-size:240% 100%;
  background-position:120% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:slideShineTxt 3.2s linear infinite;
}
/* 副标题同样参与整块扫光 */
.slide.shine-cta .txt .sub{opacity:1}
/* WhatsApp 按钮：蓝色底白字，叠加一道斜向白色高光带扫过，与文字同步 */
.slide.shine-cta .txt .cta{
  position:relative;
  overflow:hidden;
  background:#0a5fd0;color:#fff;box-shadow:0 6px 18px rgba(10,95,208,.28);
}
.slide.shine-cta .txt .cta::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:240% 100%;
  background-position:120% 50%;
  animation:slideShineTxt 3.2s linear infinite;
  pointer-events:none;
}
@keyframes slideShineTxt{
  0%{background-position:120% 50%}
  100%{background-position:-120% 50%}
}
@media(prefers-reduced-motion:reduce){
  .slide.shine-cta .txt h2,
  .slide.shine-cta .txt .sub{animation:none;background:none;-webkit-background-clip:initial;background-clip:initial;color:#0a5fd0;-webkit-text-fill-color:#0a5fd0}
  .slide.shine-cta .txt .cta::after{display:none}
}
.snav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:.15s}
.snav:hover{background:rgba(255,255,255,.42)}
.snav.prev{left:12px}
.snav.next{right:12px}
.dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;gap:7px;justify-content:center}
.dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.dots button.on{background:#fff;width:22px;border-radius:4px}

@media(max-width:760px){
  .slide{height:230px;padding:0 16px;gap:14px}
  .slide .txt{flex:0 1 56%;max-width:56%}
  .slide .pic{flex:0 1 44%;max-width:44%}
  .slide .txt h2{font-size:21px}
  .slide .txt .sub{font-size:13px}
  .slide .txt .pr{font-size:12.5px}
  .slide .txt .cta{margin-top:12px;padding:9px 18px;font-size:13px}
  .slide .pic img{max-height:150px}
  .snav{width:32px;height:32px;font-size:18px}
  .snav.prev{left:6px}.snav.next{right:6px}
  .heroimg .phbox{aspect-ratio:4/3}
  .catimgs{grid-template-columns:1fr;gap:14px}
  .catimg .phbox{aspect-ratio:16/9}
  .hero{padding:26px 18px 18px}
  .hero h1{font-size:24px}
}