/* ===========================================================
   傻瓜比价官网 - 基础样式 / 设计 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?v=20260910) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/puhuiti-65.woff2?v=20260910) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/puhuiti-75.woff2?v=20260910) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/puhuiti-85.woff2?v=20260910) format('woff2')}
@font-face{font-family:PuHuiTi;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/puhuiti-95.woff2?v=20260910) format('woff2')}
@font-face{font-family:HarmonySC;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/harmony-medium.woff2?v=20260910) format('woff2')}
@font-face{font-family:HarmonySC;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/harmony-bold.woff2?v=20260910) format('woff2')}

:root{
  color-scheme:only light;  /* 手机浏览器的强制深色模式会自动变色，配色只做了一套，用 only 关掉它（只写 light 不管用，Chrome 照样变暗） */
  /* 字体栈：子集字体拿不到时逐级回退，页面不会崩 */
  --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}
}
body.is-mobile-video-playing .pc{display:none}
body.is-mobile-video-playing .mb{display:block}
/* 竖屏平板（iPad 竖着拿是 810~834px）虽然比 768 宽，但电脑版在这种又窄又高的
   视口里只能缩到 6 成大，上下留一大片空白，很难看 —— 这种情况拉回手机版。 */
@media (max-width:1024px) and (orientation:portrait){
  .pc{display:none}
  .mb{display:block}
}

/* ===========================================================
   微信 / App 内置浏览器 下载引导横幅
   设计稿 4921:94：微信标题栏正下方一条 70px 毛玻璃白条，
   页面照常可见，虚线小箭头指向视口外右上角的微信 ··· 工具栏。
   固定 px 不随页面 rem 缩放 —— 它贴的是微信那条原生工具栏，
   工具栏在任何机型上都不缩放，横幅跟着页面缩反而对不齐 */
.wx{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:70px;
  /* 右侧留白 = 箭头区宽度，防止小屏上副行文字钻到箭头底下 */
  padding:12px 100px 0 16px;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  animation:wx-in .22s ease-out;
}
@keyframes wx-in{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
/* 横幅常驻，用户在横幅已显示时又点了下载 —— 弹一下提醒「看这里」 */
.wx.is-nudge{animation:wx-nudge .45s ease}
@keyframes wx-nudge{30%{transform:translateY(5px)}65%{transform:translateY(-2px)}}
.wx__title{font-size:16px;line-height:18px;font-weight:600;color:#000}
.wx__sub{
  margin-top:12px;
  display:flex;align-items:center;white-space:nowrap;
  font-size:12px;line-height:12px;color:#9D9D9D;
}
/* 微信菜单按钮的三个点：3px 圆点、中距 5.5px，字符「···」在 12px 下太挤，画出来的才和设计稿一致 */
.wx__dots{position:relative;flex:none;width:14px;height:3px;margin:0 4px}
.wx__dots::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;
  background:#000;box-shadow:5.5px 0 0 #000,11px 0 0 #000;
}
/* 新图标比 12px 文本行高 7px：上下负 margin 让文字基线保持不动，图标按 Figma 各溢出 3.5px。 */
.wx__browser{flex:none;width:19px;height:19px;margin:-3.5px 0 -3.5px 3px}
.wx__arrow{
  position:absolute;right:30px;top:18px;width:62px;height:31px;
  animation:wx-arrow 1.5s ease-in-out infinite;
}
@keyframes wx-arrow{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-4px)}}

/* ===========================================================
   轻提示
   =========================================================== */
.toast{
  position:fixed;z-index:950;left:50%;bottom:16%;
  transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 32px);
  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:normal;overflow-wrap:break-word;word-break:break-word;
  animation:toast-in .2s ease-out;
}
.toast__text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  max-height:3em;overflow:hidden;
}
.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}
}