/* ============================================================
   ui-refresh.css · 手机端 UI 全面焕新（静谧银蓝）
   全局最后加载：统一按钮 / 卡片 / 控件 / 动效 / Tab 栏 / 安全区
   仅视觉层，不承载任何业务逻辑
   ============================================================ */

/* ========== 基础排版精修 ========== */
body { letter-spacing: .15px; }

/* 选中态文字 */
::selection { background: rgba(74, 92, 122, .18); }

/* 可点元素统一取消 iOS 点击灰框 */
a, button, .lx-sku, .lx-cat__item, .lx-cat-card { -webkit-tap-highlight-color: transparent; }

/* ========== 按钮统一：主按钮 ========== */
.lx-buy-btn,
.cp-btn--primary,
.lx-uc-guest__btn,
.lx-top__btn--primary {
  background: linear-gradient(135deg, var(--lx-primary) 0%, var(--lx-primary-2) 100%);
  color: #fff;
  border: 0;
  box-shadow: var(--lx-shadow-primary);
  transition: transform var(--lx-t-fast) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease),
              filter var(--lx-t-fast) var(--lx-ease);
}
.lx-buy-btn:hover,
.cp-btn--primary:hover,
.lx-uc-guest__btn:hover,
.lx-top__btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(74, 92, 122, .38);
  transform: translateY(-1px);
}
.lx-buy-btn:active,
.cp-btn--primary:active,
.lx-uc-guest__btn:active,
.lx-top__btn--primary:active { transform: scale(.97); filter: none; }

/* 次按钮（描边）统一 */
.lx-top__btn,
.cp-btn--fav,
.lx-uc-me__edit {
  transition: all var(--lx-t-fast) var(--lx-ease);
}
.lx-top__btn:active,
.cp-btn--fav:active,
.lx-uc-me__edit:active { transform: scale(.97); }

/* 圆角统一：各类按钮 */
.lx-buy-btn { border-radius: var(--lx-radius-pill); height: 38px; padding: 0 20px; }
.cp-btn { border-radius: var(--lx-radius-s); }

/* ========== 卡片统一 ========== */
.lx-item,
.cp-card,
.lx-detail__card,
.lx-detail__hero {
  border-radius: var(--lx-radius-l);
}
.lx-item {
  transition: transform var(--lx-t-base) var(--lx-ease),
              box-shadow var(--lx-t-base) var(--lx-ease),
              background var(--lx-t-base) var(--lx-ease);
}
.lx-item:hover { box-shadow: var(--lx-shadow); transform: translateY(-2px); }
.lx-item:active { transform: scale(.99); }

/* ========== 表单控件统一 ========== */
.lx-detail__field {
  border-radius: var(--lx-radius-s);
  transition: border-color var(--lx-t-fast), box-shadow var(--lx-t-fast), background var(--lx-t-fast);
}
.lx-detail__field:focus {
  border-color: var(--lx-primary-2);
  box-shadow: 0 0 0 3px rgba(74, 92, 122, .12);
}
/* SKU 胶囊选中/按压 */
.lx-sku { transition: all var(--lx-t-fast) var(--lx-ease); }
.lx-sku.is-primary {
  background: linear-gradient(135deg, var(--lx-primary), var(--lx-primary-2));
  box-shadow: 0 3px 10px rgba(74, 92, 122, .25);
}
.lx-sku:active { transform: scale(.95); }

/* 数量 stepper 按压统一 */
.lx-qty-lg .lx-qty__btn:active { transform: scale(.88); }
.lx-qty__btn:active { transform: scale(.9); }

/* ========== 状态徽章语义色 ========== */
.cp-dot.is-on { color: var(--lx-success); background: var(--lx-success-bg); }
.cp-dot.is-off { color: var(--lx-danger); background: var(--lx-danger-bg); }

/* ========== 购物车弹层：弹性滑入 ========== */
.lx-cart-pop { transition: transform var(--lx-t-slow) var(--lx-spring); }
.lx-mask { transition: opacity var(--lx-t-base) var(--lx-ease); }

/* 收藏成功心跳 */
.cp-btn--fav.is-fav {
  color: var(--lx-gold);
  border-color: var(--lx-gold-soft);
  background: #fbf7ef;
  animation: lx-heart-pop .4s var(--lx-spring);
}
@keyframes lx-heart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ========== 骨架屏 shimmer 工具类 ========== */
.lx-skeleton {
  background: linear-gradient(90deg, #eceff4 25%, #f7f9fc 37%, #eceff4 63%);
  background-size: 400% 100%;
  animation: lx-shimmer 1.4s ease infinite;
  border-radius: var(--lx-radius-s);
}
@keyframes lx-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ============================================================
   仅手机端
   ============================================================ */
@container lxframe (max-width: 768px) {

  /* ----- Tab 栏：浅色磨砂白底，与页面一体 ----- */
  .lx-tabbar {
    left: 0; right: 0; bottom: 0;
    transform: none;
    width: 100%; max-width: none;
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 6px 10px env(safe-area-inset-bottom);
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 0;
    border-top: 1px solid var(--lx-border);
    box-shadow: 0 -4px 24px rgba(36, 52, 78, .10);
  }
  .lx-tabbar__item {
    position: relative;
    color: var(--lx-gray-500);
    gap: 2px;
    border-radius: var(--lx-radius-s);
    transition: color var(--lx-t-fast) var(--lx-ease), transform var(--lx-t-fast) var(--lx-ease);
  }
  .lx-tabbar__item:active { transform: scale(.92); }
  .lx-tabbar__item.is-active {
    color: var(--lx-primary);
  }
  .lx-tabbar__item.is-active::before {
    content: '';
    position: absolute;
    top: 3px; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 3px;
    border-radius: var(--lx-radius-pill);
    background: linear-gradient(90deg, var(--lx-primary), var(--lx-primary-2));
    animation: lx-tab-bar-grow .3s var(--lx-spring);
  }
  @keyframes lx-tab-bar-grow {
    from { width: 0; opacity: 0; }
    to { width: 34px; opacity: 1; }
  }
  /* SVG 图标尺寸 */
  .lx-tabbar__ico { font-size: 0; line-height: 1; }
  .lx-tabbar__ico svg { width: 23px; height: 23px; display: block; }
  .lx-tabbar__item.is-active .lx-tabbar__ico svg {
    animation: lx-tab-ico .3s var(--lx-spring);
  }
  @keyframes lx-tab-ico {
    0% { transform: scale(.8) translateY(3px); }
    100% { transform: scale(1) translateY(0); }
  }
  .lx-tabbar__txt { font-size: 11px; font-weight: 500; }
  .lx-tabbar__item.is-active .lx-tabbar__txt { font-weight: 700; }

  /* 内容区底部留白适配新 Tab 栏高度 */
  body.lx-home-page .lx-cat-cards,
  body.lx-cat-page .lx-order,
  body.lx-rec-page .lx-order { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .lx-uc-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .lx-uc-page { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

  /* ----- 商品列表卡片入场（错位淡入上移） ----- */
  @media (prefers-reduced-motion: no-preference) {
    .lx-menu__list .lx-item {
      animation: lx-rise .38s var(--lx-ease) both;
    }
    .lx-menu__list .lx-item:nth-child(1) { animation-delay: .02s; }
    .lx-menu__list .lx-item:nth-child(2) { animation-delay: .06s; }
    .lx-menu__list .lx-item:nth-child(3) { animation-delay: .10s; }
    .lx-menu__list .lx-item:nth-child(4) { animation-delay: .14s; }
    .lx-menu__list .lx-item:nth-child(5) { animation-delay: .18s; }
    .lx-menu__list .lx-item:nth-child(6) { animation-delay: .22s; }
    .lx-menu__list .lx-item:nth-child(7) { animation-delay: .26s; }
    .lx-menu__list .lx-item:nth-child(n+8) { animation-delay: .30s; }
  }
  @keyframes lx-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}

/* ========== 遗留死样式清理 ========== */
.lx-cartbar { display: none !important; }

/* ========== 降级：用户偏好减少动画时全部关闭 ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}