/* 「我的」页专用样式。
   只服务 .page-account，避免影响首页 / 目录页 / 详情页。 */

/* 1) 语言下拉被封面裁掉（线上实测的 bug）
   .account-cover 从 st-refinement-v2.css 继承了 overflow:hidden —— 那是给老版
   深蓝封面裁右下角装饰圆用的；现在封面的背景换成实拍图、:after 已经是
   display:none，这条裁剪没有任何用处，却会把右上角语言菜单的最后一项切掉：
   菜单上沿 55px + 高 241px = 底 296px，而封面底边只有 268px —— 「Tiếng Việt」
   正好被切掉一半，看不到也点不到。这里按页面放开裁剪（选择器权重 0,2,0
   高于对方的 0,1,0，不受样式表加载顺序影响）。 */
.page-account .account-cover{overflow:visible}

/* 2) 热销货架（替代原本重复的「我的询价单」入口）
   .account-shelf-slot 为空时整块不占位，视觉节奏与其它卡片一致。 */
.account-shelf-slot[hidden]{display:none}
.account-shelf{
  margin:0 0 10px;
  padding:15px 0 13px;
  border:1px solid #e9edf3;
  border-radius:13px;
  background:linear-gradient(168deg,#fff 0%,#f9fbfe 62%,#f4f7fc 100%);
  box-shadow:inset 0 1px 0 #fff,0 2px 10px #14234908;
}
.shelf-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:0 16px 11px;
}
.shelf-head .eyebrow{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:700}
.shelf-head h3{margin:5px 0 0;color:#081f80;font-size:16px;font-weight:800;letter-spacing:-.45px;line-height:1.25}
.shelf-more{
  display:flex;align-items:center;gap:6px;flex:none;
  min-height:36px;padding:0;border:0;background:none;
  color:#081f80;font-size:11px;font-weight:650;white-space:nowrap;
}
.shelf-more svg{width:15px;height:15px;flex:none;transition:transform .3s var(--curve)}
.shelf-more:hover svg{transform:translateX(3px)}

/* 横向货架：贴边可滚、隐藏滚动条、带吸附 */
.shelf-rail{
  margin-left:8px;
  display:flex;gap:10px;
  min-height:208px;
  padding:0 16px 2px;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.shelf-rail::-webkit-scrollbar{height:0;display:none}
.shelf-rail:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:11px}

.shelf-card{
  flex:0 0 132px;width:132px;height:206px;overflow:hidden;
  scroll-snap-align:start;
  display:block;padding:0 0 10px;
  border:1px solid #eef1f7;border-radius:11px;
  background:#fff;color:#162446;text-align:left;
  box-shadow:0 1px 3px #1423490a;
  transition:transform .3s var(--curve),box-shadow .3s var(--curve),border-color .3s var(--curve);
}
.shelf-card:hover{transform:translateY(-2px);border-color:#dae3f1;box-shadow:0 10px 20px -9px #0b265433}
.shelf-card:active{transform:translateY(0) scale(.985)}
.shelf-photo{
  position:relative;display:grid;place-items:center;height:104px;
  margin:8px 8px 0;border-radius:8px;overflow:hidden;
  background:radial-gradient(120% 118% at 50% 10%,#fff 30%,#f1f5fa 100%);
}
.shelf-photo img{width:86px;height:86px;object-fit:contain}
.shelf-rank{
  position:absolute;left:6px;top:6px;
  padding:1px 6px;border-radius:20px;
  background:#ffffffd6;color:var(--muted);
  font-size:9px;font-weight:750;letter-spacing:.6px;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px #14234912;
}
.shelf-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:32px;margin:9px 9px 0;
  font-size:11.5px;font-weight:650;line-height:1.4;
}
.shelf-price{display:block;margin:6px 9px 0}
.shelf-price b{
  display:block;color:#081f80;font-size:12.5px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.shelf-price small{
  display:block;margin-top:2px;color:var(--muted);font-size:9.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 骨架占位：与真卡片同尺寸（都锁 206px），数据到位时不跳版。
   只给 1 个真实卡片形状 —— 比空白方块更像「正在加载」，
   数量也故意少于真卡片（真数据 6 张），免得以为已经加载完了。 */
.shelf-skeleton{
  flex:0 0 132px;width:132px;height:206px;
  display:block;padding:8px 8px 10px;
  border:1px solid #eef1f7;border-radius:11px;background:#fff;
}
.shelf-skeleton i{
  display:block;height:104px;border-radius:8px;
  background:linear-gradient(100deg,#e9eef7 26%,#f6f9fd 50%,#e9eef7 74%) 0 0/220% 100%;
  animation:shelf-shimmer 1.3s linear infinite;
}
.shelf-skeleton b{
  display:block;height:9px;margin:11px 1px 0;border-radius:5px;background:#eef2f8;
  animation:shelf-pulse 1.5s ease-in-out infinite;
}
.shelf-skeleton b.short{width:54%;margin-top:7px}
@keyframes shelf-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes shelf-pulse{0%,100%{opacity:.72}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.shelf-skeleton i,.shelf-skeleton b{animation:none}}

@media(max-width:720px){
  .account-shelf{padding:13px 0 11px;margin-bottom:8px}
  .shelf-head{padding:0 13px 10px}
  .shelf-head h3{font-size:15px}
  .shelf-rail{padding:0 13px 2px}
}

/* 矮屏（手机横屏）：只在菜单真的顶出可视区时才收口并允许滚动。
   例如屏高 380 时上限 308px > 菜单实际 231px —— 不触发，不会平白多出滚动条。 */
@media(max-height:520px){
  .account-locale .language-menu{max-height:calc(100dvh - 72px);overflow:auto}
}

/* 3) 退出登录：从页面最底部移到封面区的账户信息里
   🔴 2026-09-22 用户反馈两件事：
      ①「账户已登录」这行提示本身是废话 —— 标题里已经写着「XXX，您好。」，
        再说一遍「已登录」只是噪音，所以连元素一起删掉；
      ②「退出登录」原来在整个页面最底部（要滚到底才够得到），移到原来那行提示
        的位置：就在用户名下方，进页面第一眼就能看到。
   样式取「描边玻璃」：封面是实拍图 + 左侧白渐变，半透明白底能保证在图上
   清晰可读；刻意不做成实心主色块 —— 那是「登录 / 注册」主按钮的视觉重量，
   退出登录属于低频且需要一点犹豫的操作，不该比登录更抢眼。 */
.page-account .account-cover .account-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin:18px 0 0;
  padding:9px 18px;
  border:1px solid #081f8024;
  border-radius:10px;
  background:#ffffffd9;
  color:#25385f;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  box-shadow:0 1px 2px #0b26540a;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.page-account .account-cover .account-logout:hover{
  background:#fff;
  border-color:#081f8042;
  color:#081f80;
  box-shadow:0 4px 14px -7px #0b265447;
}
.page-account .account-cover .account-logout:focus-visible{
  outline:2px solid var(--orange,#f47700);
  outline-offset:2px;
}

/* Brand-orange actions use the shared dark foreground for readable text. */
.page-account .account-cover .button[data-account-login]{
  min-height:var(--st-control-height,44px);
  color:var(--st-color-action-ink,#081f80);
}
.page-account .account-cover .button[data-account-login] i{
  color:inherit;
}
.page-account .account-cover .button[data-account-login]:focus-visible{
  outline:2px solid var(--st-color-action-ink,#081f80);
  outline-offset:3px;
}