/* Single component stylesheet. Explicit reset prevents dialog/page inheritance. */
:root{--mobile-nav-height:74px;
  /* 🔴 底部导航的**真实**占位高度（2026-09-29 第二轮新增）。
     为什么不能直接用 --mobile-nav-height：它在三个文件里被写成三个值
     （本文件 74 / st-density-v5.css 64 / st-reference-v6.css 移动端 62），
     而导航**实测**是 height:60px + bottom:10px = 占视口底 70px —— 三个值全不对。
     凡是「要给底部导航让位」的地方都应该用这个变量，它与导航自身样式放在同一处。 */
  --st-bottom-nav-space:calc(60px + 10px + env(safe-area-inset-bottom, 0px));
}

/* ── 给页面内容预留底部导航的占位（2026-09-29 第二轮）────────────────────
   ❌ 修前：滚到页面最底时，footer 底边正好贴在视口底（844），而固定导航的顶边
      在 774 ⇒ **最后 70px 内容永久被压在导航下面**。实测 zh/lo/th/vi 全都如此；
      lo/th/vi 因为文案更长、被遮的是正文而不是版权行，所以最先被发现。
   ✅ 修后：常规页面底部统一留出导航高度 + 呼吸。
   ⚠️ 只作用于**没有弹层打开**的常规页面：弹层（.commerce-page / dialog）自带
      padding-bottom，若在这里再叠一层会让弹层底部多出一段空白。
      弹层是 <dialog> 打开态，用 body:has(.commerce-dialog[open]) 精确排除。
   ⚠️ 预留在 body 上只解决「页面能多滚一段」；还要保证**最后一块内容本身**
      不被导航压住 —— 因此同时给 footer 补一段 padding-bottom（见下一条）。 */
@media(max-width:720px){
  body:not(:has(.commerce-dialog[open])){padding-bottom:var(--st-bottom-nav-space)}
  body:not(:has(.commerce-dialog[open])) .footer{padding-bottom:calc(var(--st-bottom-nav-space) + 10px)}
}
nav.st-bottom-navigation{all:initial;display:none;box-sizing:border-box;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;font-style:normal;letter-spacing:normal;text-transform:none;direction:ltr;z-index:5}
nav.st-bottom-navigation>button{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:50px;padding:3px 3px 5px;border-radius:14px;color:var(--muted);font-family:inherit;font-size:10px;font-weight:520;line-height:14px;text-align:center;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .28s cubic-bezier(.22,.8,.25,1),background-color .28s cubic-bezier(.22,.8,.25,1),box-shadow .28s cubic-bezier(.22,.8,.25,1),transform .28s cubic-bezier(.22,.8,.25,1)}
nav.st-bottom-navigation>button>svg{position:relative;z-index:1;display:block;flex:none;width:22px;height:22px;margin:0;padding:0;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;transition:transform .34s cubic-bezier(.22,.8,.25,1)}
nav.st-bottom-navigation>button>span{position:relative;z-index:1;display:block;margin:0;padding:0;font:inherit;line-height:14px;letter-spacing:.01em;color:inherit}
nav.st-bottom-navigation>button>.st-nav-badge{position:absolute;z-index:2;top:0;left:calc(50% + 6px);display:grid;place-items:center;box-sizing:border-box;min-width:19px;height:19px;padding:0 3px;border:2px solid #fff;border-radius:999px;background:#c92a38;color:#fff;font:700 10px/15px Arial,sans-serif;letter-spacing:0;box-shadow:0 1px 3px #bd243b33}
nav.st-bottom-navigation>button.active{color:#082783;font-weight:720;background:linear-gradient(180deg,#ffffff8c,#e8f0fb70);box-shadow:inset 0 1px 0 #ffffffd6,0 3px 10px #0b265414}
nav.st-bottom-navigation>button.active>svg{transform:translateY(-1px)}
nav.st-bottom-navigation>button.active:after{content:'';position:absolute;bottom:2px;left:calc(50% - 7px);width:14px;height:2px;border-radius:3px;background:linear-gradient(90deg,#ff8b18,#f36b00);box-shadow:0 1px 4px #f4770045}
nav.st-bottom-navigation>button:focus-visible{outline:2px solid #0a318d;outline-offset:1px}
nav.st-bottom-navigation>button:hover{color:#2c416f;background:#ffffff52}
nav.st-bottom-navigation>button:active{transform:scale(.96);background:#e8f0f98f;box-shadow:inset 0 1px 3px #10265414}
@media(max-width:720px){
 nav.st-bottom-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:none;height:60px;padding:5px;border:1px solid transparent;border-radius:21px;background:linear-gradient(180deg,#ffffffa8,#edf3fb8f) padding-box,linear-gradient(135deg,#ffffffd9,#cbd8eb9c 68%,#f3cda86e) border-box;gap:2px;box-shadow:inset 0 1px 0 #ffffffeb,0 13px 34px #0b265424,0 3px 10px #12295417;-webkit-backdrop-filter:blur(26px) saturate(1.55);backdrop-filter:blur(26px) saturate(1.55);isolation:isolate}
}
@media(prefers-reduced-motion:reduce){nav.st-bottom-navigation>button,nav.st-bottom-navigation>button>svg{transition:none}}