/* ===========================================================
   傻瓜比价官网 - 基础样式 / 设计 token / 字体
   设计稿：Figma "官网" (98:1420)
   =========================================================== */

/* --- 字体：只内嵌页面真正用到的那 100 来个字，每个字重 10~20KB --- */
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/puhuiti-55.woff2) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/puhuiti-65.woff2) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/puhuiti-75.woff2) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/puhuiti-85.woff2) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/puhuiti-95.woff2) format('woff2')}
@font-face{font-family:HarmonySC;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/harmony-medium.woff2) format('woff2')}
@font-face{font-family:HarmonySC;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/harmony-bold.woff2) format('woff2')}

:root{
  color-scheme:light;  /* 手机浏览器的强制深色模式会自动变色，配色只做了一套，声明只支持浅色来关掉它 */
  /* 字体栈：子集字体拿不到时逐级回退，页面不会崩 */
  --f-main:PuHuiTi,"Alibaba PuHuiTi 2.0","Alibaba PuHuiTi","PingFang SC","Microsoft YaHei",
           "Hiragino Sans GB",sans-serif;
  --f-card:HarmonySC,"HarmonyOS Sans SC",PuHuiTi,"PingFang SC","Microsoft YaHei",sans-serif;

  /* 文字 */
  --c-ink:#2A2A2A;
  --c-ink-2:#1D1D1F;
  --c-sub:#7C7875;
  --c-sub-2:#929194;
  --c-brown:#975105;

  /* 品牌 */
  --c-yellow:#FFDA47;      /* 大标题字面 */
  --c-hl:#FFD93D;          /* 涂鸦高亮 */
  --c-hl-2:#FAE238;        /* 手机介绍页涂鸦 */
  --g-btn:linear-gradient(172deg,#FFF15A 15.44%,#FFDF28 62.92%);

  /* 面 */
  --c-header:rgba(252,248,244,.88);
  --c-badge:#FDEDC5;
  --c-badge-m:#FEEDC5;

  /* 功能图标底色 */
  --t-compare:#FEEDEC;  --t-coupon:#FFF7EC;  --t-gift:#FDEEEA;  --t-wallet:#FEF2DB;
  --t-compare-m:#FFE8E7;--t-coupon-m:#FFF7EC;--t-gift-m:#FDE9E4;--t-wallet-m:#FEFAEC;
  --b-compare:#F23D4F;  --b-coupon:#FC7032;  --b-gift:#FF3369;  --b-wallet:#FF8E12;

  /* 电脑端等比缩放后空出来的地方，用舞台边缘的实际颜色延展出去，接缝看不出来。
     舞台顶边贴住视口顶边（见 desktop.css 的 .pc），所以上边不会留白：
       edge-top 只剩 .pc 渐变的起点在用（21:9 超宽屏上舞台左右两侧会露出来）。
                这是半透明顶栏叠在背景图上之后的颜色，不是背景图本身的颜色。
       edge-bot 是舞台下方那片留白最终渐隐到的颜色（.pc-stage::after），
                同时也是 .pc 渐变的终点。露边时背景图侧边上浅下深，
                所以 .pc 那条渐变不能改成纯色。 */
  --c-edge-top:#FCF6ED;
  --c-edge-bot:#FFDB99;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#FDF2DE}
body{
  font-family:var(--f-main);
  color:var(--c-ink);
  background:#FDF2DE;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
}
h1,h2,p,ul,li,b{margin:0;padding:0;font-weight:inherit}
ul{list-style:none}
img{display:block;border:0}
em{font-style:normal}
button{
  font:inherit;color:inherit;border:0;background:none;padding:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}

/* --- 两套版式互斥显示，靠屏宽切换 --- */
.pc{display:none}
.mb{display:block}
@media (min-width:769px){
  .pc{display:flex}
  .mb{display:none}
}
/* 竖屏平板（iPad 竖着拿是 810~834px）虽然比 768 宽，但电脑版在这种又窄又高的
   视口里只能缩到 6 成大，上下留一大片空白，很难看 —— 这种情况拉回手机版。 */
@media (max-width:1024px) and (orientation:portrait){
  .pc{display:none}
  .mb{display:block}
}

/* ===========================================================
   微信 / App 内置浏览器 下载引导遮罩
   =========================================================== */
.wx{
  position:fixed;inset:0;z-index:900;
  /* 底下是大片亮黄，遮不够黑的话引导文字会被背景抢掉 */
  background:rgba(0,0,0,.88);
  padding:14px 16px 26px;
  display:flex;flex-direction:column;align-items:flex-end;
  animation:wx-in .22s ease-out;
}
@keyframes wx-in{from{opacity:0}to{opacity:1}}
.wx__arrow{
  width:112px;height:138px;flex:none;
  margin-right:0;color:var(--c-hl);
  animation:wx-arrow 1.5s ease-in-out infinite;
}
@keyframes wx-arrow{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-7px)}}
.wx__box{
  align-self:stretch;margin-top:26px;
  color:#fff;font-weight:500;line-height:1.9;
}
.wx__step{font-size:19px;display:flex;align-items:baseline;gap:10px}
.wx__step b{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--c-hl);color:#2A2A2A;
  font-size:14px;font-weight:700;line-height:24px;text-align:center;
  align-self:center;
}
.wx__step em{color:var(--c-hl);font-weight:700}
.wx__dots{
  display:inline-block;padding:1px 10px 5px;border-radius:7px;
  background:rgba(255,255,255,.92);color:#2A2A2A;
  font-weight:700;letter-spacing:2px;line-height:1;
}
.wx__tip{margin-top:14px;padding-left:34px;font-size:14px;opacity:.65}
.wx__close{
  align-self:center;margin-top:auto;
  min-width:150px;padding:13px 30px;border-radius:999px;
  background:var(--g-btn);color:#2A2A2A;
  font-size:17px;font-weight:600;
}

/* ===========================================================
   轻提示
   =========================================================== */
.toast{
  position:fixed;z-index:950;left:50%;bottom:16%;
  transform:translateX(-50%);
  max-width:78vw;padding:12px 22px;border-radius:999px;
  background:rgba(0,0,0,.82);color:#fff;
  font-size:15px;font-weight:500;line-height:1.5;
  text-align:center;white-space:nowrap;
  animation:toast-in .2s ease-out;
}
.toast.is-out{animation:toast-out .25s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toast-out{to{opacity:0;transform:translate(-50%,-6px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}