@charset "UTF-8";
/* ===== 积分商城 · 京东/淘宝风格（PC + 手机响应式） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --jd: #e1251b; --jd-dark: #c81623; --price: #f30213;
  --text: #222; --text2: #666; --text3: #999;
  --bg: #fff; --card: #fff; --border: #eee;
  --orange: #ff4400;
}
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
a { text-decoration: none; color: inherit; }
img { display: block; }

/* ===== 顶部导航 ===== */
.topbar { background: #fff; color: var(--text2); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
/* 手机商城悬停下拉：微信小程序码 */
.top-qr { position: relative; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.top-qr-drop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  padding: 12px;
  display: none;
  z-index: 300;
}
.top-qr:hover .top-qr-drop { display: block; }
.top-qr-drop img { width: 140px; height: 140px; display: block; }
.top-qr-drop p { font-size: 12px; color: #999; text-align: center; margin-top: 8px; white-space: nowrap; }
/* 二维码加载等待动画 */
.qr-loading {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
  border-radius: 6px;
}
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #eee;
  border-top-color: #ff0f23;
  border-radius: 50%;
  animation: qr-spin .8s linear infinite;
}
@keyframes qr-spin { to { transform: rotate(360deg) } }
/* 全站导航栏统一：白色、高度减半、文字图标同比例缩小（与详情页一致） */
.topbar-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 5px 16px; }
/* 主导航栏左端：你好，请登录 免费注册 */
.top-hello { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); white-space: nowrap; }
.top-hello a { color: var(--jd); }
.top-hello a:hover { text-decoration: underline; }
/* 主导航栏左端：首页（纯文字链接） */
.top-home { display: flex; align-items: center; font-size: 13px; color: var(--text2); white-space: nowrap; }
.top-home:hover { color: var(--jd); }
@media (max-width: 450px) {

body.detail { padding-bottom: 74px; }
  .detail-bar { display: flex; }
  .top-search-top { display: flex; }
  .img-dots { display: flex; }
    .top-hello { display: none; }
  .top-home { display: none; }
}
.topbar .logo { font-size: 17px; color: var(--jd); }
.topbar .logo b { color: var(--jd); }
.topbar .top-actions { gap: 14px; }
.top-actions a svg { width: 15px; height: 15px; }
.logo { font-size: 22px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.logo b { color: #ffe9e7; }
/* 搜索栏：导航栏下方居中 */
.search-row { max-width: 1280px; margin: 0 auto; padding: 10px 16px 4px; display: flex; justify-content: center; }
/* 第二导航栏（首页电脑版）：全宽浅色容器，LOGO 左端 + 搜索框居中 */
.search-row.sub-nav {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #ffeeee08;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-row.sub-nav .sub-nav-logo {
  position: absolute;
  /* 搜索框宽 500px 居中：搜索框左边缘 = 50% - 250px；LOGO 右边缘再左移 90px */
  left: auto;
  right: max(20px, calc(50% + 340px));
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.search-row.sub-nav .sub-nav-logo img {
  display: block;
  height: 56px;
  width: auto;
}
.top-actions { display: flex; gap: 18px; margin-left: auto; }
.top-actions a { color: var(--text2); font-size: 12px; display: flex; align-items: center; gap: 4px; position: relative; }
/* 导航栏用户区：未登录显示登录按钮，已登录显示头像+昵称横向排列 */
.top-user { display: flex; align-items: center; }
.top-user-info { display: flex; align-items: center; gap: 6px; }
.top-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #eee; }
.top-nickname { font-size: 12px; color: var(--text2); max-width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 顶部搜索框：固定宽度 300，位置靠首页按钮（新增 CSS 固定图标定位） */
.top-search { position: relative; width: 300px; flex: 0 0 300px; margin-left: auto; margin-right: 8px; display: flex; flex-wrap: wrap; align-items: center; }
/* 首页搜索栏：复用详情页搜索框样式，宽度撑满居中 */
.search-row .top-search { width: 100%; max-width: 620px; flex: 0 1 620px; margin: 0; }
.search-row.sub-nav .top-search { max-width: 500px; flex: 0 1 500px; margin: 0 auto; }
/* 展开时搜索框固定在原垂直位置：不随下拉撑高而向上跳动，向下延伸 */
.search-row.sub-nav .top-search.sug-open {
  align-self: flex-start;
  margin-top: 55px; /* (150 - 40) / 2，与未展开时垂直居中位置一致 */
}
/* 首页电脑版搜索框：高度+4px、圆角6px、按钮同比例放大 */
.search-row.sub-nav .top-search .form-input { height: 40px; border-radius: 6px; }
.search-row.sub-nav .top-search .search-go { height: 30px; border-radius: 6px; line-height: 30px; padding: 0 12px; font-size: 13px; }
.search-row.sub-nav .top-search .search-clear { right: 58px; }
.top-search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgba(255, 68, 0, 0.6); pointer-events: none; z-index: 1; }
.top-search .form-input { height: 32px; width: 100%; padding: 0 96px 0 34px; border: 2px solid #ff0f23; border-radius: 4px; outline: none; font-size: 13px; color: var(--text); background: #F7FBFD; }
.top-search .form-input:focus { border-color: #ff0f23; }
.top-search .search-clear { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: none; background: transparent; color: rgba(255, 68, 0, 0.6); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.top-search .search-go { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); height: 24px; padding: 0 10px; border: none; border-radius: 3px; background: #ff0f23; color: #fff; font-size: 12px; line-height: 24px; cursor: pointer; z-index: 1; }
/* 搜索下拉建议（京东正宗风格：在搜索框内部延伸，撑高整个搜索框） */
.sug-drop {
  flex: 0 0 100%;
  order: 99;
  background: #fff;
  border-top: 1px solid #f2f2f2;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}
/* 展开时整个搜索框变成一个整体大内容框：顶部保持圆角，底部直角 */
.top-search.sug-open {
  border: 2px solid #ff0f23;
  border-radius: 6px 6px 0 0;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  z-index: 300;
}
.top-search.sug-open .form-input {
  border: none;
  background: #fff;
}
/* 展开时按钮固定在输入框那一行（不被撑高的下拉带偏） */
.top-search.sug-open .search-go { top: 20px; }
.top-search.sug-open .search-clear { top: 20px; }
/* 展开时放大镜固定在输入框那一行（不被撑高的下拉带偏） */
.search-row.sub-nav .top-search.sug-open .search-icon { top: 12px; transform: none; }
@media (max-width: 450px) {
  /* 手机版：连体展开与电脑版一致，下拉在搜索框内部换行延伸撑高 */
  .top-search.sug-open .search-clear { top: 9px; transform: none; }
  .top-search.sug-open .search-icon { top: 8px; transform: none; }
  .top-search.sug-open .search-go { top: 4px; transform: none; }
  /* 手机版搜索框主体：与小程序完全一致（红边框圆角6px、浅蓝白底、40px 高） */
  .top-search {
    min-height: 40px;
    border: 2px solid #ff0f23;
    border-radius: 6px;
    background: #fff;
    flex-wrap: wrap;
  }
  .top-search .search-icon {
    left: 8px;
    top: 8px;
    width: 21px;
    height: 21px;
    color: #ff0f23;
    transform: none;
  }
  .top-search .form-input {
    height: 36px;
    padding: 0 93px 0 31px;
    border: none;
    border-radius: 6px;
    background: transparent;
  }
  .top-search .search-clear {
    right: 68px;
    top: 9px;
    color: #ff0f23;
    transform: none;
    display: none;
  }
  .top-search .search-go {
    right: 4px;
    top: 4px;
    height: 31.5px;
    padding: 0 14px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 6px;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  /* 覆盖电脑版 search-row 高特异性规则：手机端按钮高度/字号/垂直居中统一 */
  .search-row.sub-nav .top-search .search-go { height: 31.5px; font-size: 17px; line-height: 1; }
  /* 覆盖电脑版 search-row 高特异性规则：手机端叉图标位置统一（下移1px、左移4px、右移2px） */
  .search-row.sub-nav .top-search .search-clear { right: 68px; top: 9px; }
}
.sug-item {
  padding: 10px 14px;
  font-size: 13px;
  color: #222;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sug-item:hover { background: #fff1eb; color: #ff0f23; }
.sug-item:last-child { border-bottom: none; }
/* 无结果提示（复用小程序 sug-empty） */
.sug-item.sug-empty {
  color: #999;
  text-align: center;
  cursor: default;
  white-space: normal;
  border-radius: 0 0 6px 6px;
}
.sug-item.sug-empty:hover { background: #fff; color: #999; }
/* 购物车数量角标（独立样式，不与其他共用：圆形背景，数字水平垂直居中） */
.cart-badge {
  position: absolute;
  top: -8px; right: -12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ffd200;
  color: #c81623;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 底部 TabBar 购物车角标：红色圆形背景白色数字，定位在图标右上角（不与其他共用） */
.tabbar-item .cart-badge {
  top: 2px;
  right: auto;
  left: 50%;
  margin-left: 2px;
  background: var(--jd) !important;
  color: #fff !important;
  min-width: 15px;
  height: 15px;
  font-size: 10px;
}


/* ===== 分类导航 ===== */
.catbar { background: var(--card); border-bottom: 1px solid var(--border); }
.catbar-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; overflow-x: auto; padding: 0 8px; }
.cat-item { padding: 12px 18px; font-size: 14px; color: var(--text2); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.cat-item:hover { color: var(--jd); }
.cat-item.active { color: var(--jd); border-bottom-color: var(--jd); font-weight: 600; }

/* 商品区布局：PC 左侧分类栏 + 右侧商品（淘宝/京东样式） */
.shop-layout { display: flex; gap: 14px; align-items: flex-start; }
.side-cats { display: none !important; }
.goods-area { flex: 1; min-width: 0; }
/* ===== 三级分类：侧边栏（分类视图） ===== */
.side-cats { width: 200px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; }
.side-cat-title { font-size: 13px; color: var(--text-hint); padding: 6px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.side-cat-group { margin-bottom: 2px; }
.side-cat-item { display: block; padding: 9px 10px; font-size: 13px; color: var(--text2); cursor: pointer; border-radius: 6px; position: relative; }
.side-cat-item:hover { color: var(--jd); background: #fafafa; }
.side-cat-item.active { color: var(--jd); font-weight: 600; background: #fff5f0; }
.side-cat-l1 { font-weight: 600; }
.side-cat-l2 { padding-left: 26px; font-weight: 400; }
.side-cat-l3 { padding-left: 42px; font-size: 12px; color: #888; }
.side-cat-cnt { font-size: 11px; color: #bbb; margin-left: 2px; }
.side-cat-l2.collapsed { opacity: 0; pointer-events: none; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: hidden; transition: all .2s; display: none; }
.side-cat-l2.pointer-events-none { pointer-events: none; }
/* ===== 主体 ===== */
/* 手机版断点（≤450px）：主容器居中自适应 */
@media (max-width: 450px) {
  .main { max-width: 1280px; margin: 14px auto; padding: 0 12px; }
}
/* 电脑版断点（≥451px）：老板指定规则 */
@media (min-width: 451px) {
  .main { min-width: 451px; margin: 14px 100px; padding: 0 12px; }
}
/* 电脑版宽屏（≥1025px）：两端抵满 */
@media (min-width: 1025px) {
  .main { margin: 14px 0; }
}
/* 购物车列表：宽度跟随 .main */
body.cart .cart-list { max-width: none; }
/* 个人中心：主容器两端抵满屏幕 + 内容层级降为 1（不遮挡底部导航/弹窗） */
body.mine-page .main { max-width: none; position: relative; z-index: 1; }
/* 商品网格：列数随屏宽自动增减（大屏不挤中间） */
.goods-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.goods-card { background: var(--card); border-radius: 4px; overflow: hidden; border: 1px solid transparent; transition: box-shadow .2s, transform .2s, border-color .2s; cursor: pointer; position: relative; }
/* 触屏（手机/微信）禁用 hover 粘滞：仅 PC 鼠标悬停生效 */
@media (hover: hover) {
  .goods-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-2px); border-color: #e1251b; }
}
.goods-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 700; letter-spacing: 2px; text-align: center; padding: 10px; background: linear-gradient(135deg, #4a7bd0, #2f5cb8); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.goods-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.12), transparent 45%); }
.goods-tag { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; padding: 2px; border-radius: 2px; }
.goods-tag.sold { background: var(--jd); }
.goods-body { padding: 10px 12px 6px; }
.goods-name { font-size: 14px; line-height: 1.4; font-weight: 700; height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px; }
.goods-name:hover { color: var(--jd); }

.goods-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.goods-price { color: var(--price); font-size: 14px; font-weight: 700; }
.goods-price small { font-size: 13px; }
.goods-price .rent { color: var(--text2); font-size: 13px; font-weight: 400; }
/* 商品列表：店铺名称（商家后台侧边栏同色 #053488，字号为原收益字号 15px 的 2/3=10px，不加粗） */
.goods-shop-row { color: #053488; font-size: 10px; font-weight: 400; line-height: 1.4; margin-bottom: 4px; }
/* 商品列表：预计收益（绿色） */
.goods-price.income-text { color: #07c160; font-weight: 700; font-size: 15px; }
.goods-price.income-text b { color: #07c160; font-weight: 700; }
.goods-btn-row { display: flex; gap: 8px; margin-top: 4px; }
.btn { border: none; border-radius: 3px; font-size: 13px; padding: 7px 0; cursor: pointer; text-align: center; flex: 1; }
.btn-buy { background: var(--orange); color: #fff; }
.btn-rent { background: #fff; color: var(--orange); border: 1px solid var(--orange); }
.btn-gray { background: #f0f0f0; color: #bbb; cursor: not-allowed; flex: 1; border: none; }

/* ===== 分页 ===== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 24px 0 10px; flex-wrap: wrap; }
.page-btn { background: var(--card); border: 1px solid var(--border); color: var(--text2); min-width: 34px; height: 34px; padding: 0 12px; border-radius: 3px; cursor: pointer; font-size: 14px; }
.page-btn:hover { color: var(--jd); border-color: var(--jd); }
.page-btn.active { background: var(--jd); color: #fff; border-color: var(--jd); }
.page-btn.disabled { opacity: .4; cursor: not-allowed; }
.page-info { font-size: 13px; color: var(--text3); }

/* ===== 商品详情页 ===== */
.crumb { font-size: 13px; color: var(--text3); padding: 10px 0; }
/* 面包屑 + 搜索框同一行：左端面包屑，右端搜索框，垂直居中对齐 */
.crumb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 15px 0; }
.crumb-row .crumb { flex: 1; min-width: 0; padding: 0; }
.crumb-row .top-search { margin: 0; flex-shrink: 0; }
.crumb a:hover { color: var(--jd); }
.detail-box { background: var(--card); display: flex; gap: 20px; padding: 15px; border-radius: 4px; }
/* 左侧缩略图列（从上到下滚动） */
.detail-thumbs { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 520px; width: 62px; flex-shrink: 0; }
.thumb-item { width: 62px; aspect-ratio: 1/1; border-radius: 4px; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; }
.thumb-item.active { border-color: var(--jd); }
.detail-img { width: 380px; flex-shrink: 0; }
.detail-img .goods-img { aspect-ratio: 1 / 1; border-radius: 4px; font-size: 40px; }
/* 商品图滑动容器：PC 显示第一张（缩略图切换），手机端左右滑动轮播 */
.img-slider { display: flex; overflow: hidden; border-radius: 4px; }
.img-slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; font-weight: 700; letter-spacing: 2px; text-align: center; padding: 10px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow-wrap: anywhere; word-break: break-word; }
/* 浮动圆点指示器（手机版轮播） */
.detail-img { position: relative; }
.img-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.img-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); transition: background .2s; }
.img-dot.active { background: #fff; }
.detail-info { flex: 1; min-width: 0; }
.detail-name { font-size: 22px; font-weight: 700; line-height: 1.4; }
.detail-tags { margin: 10px 0; display: flex; gap: 8px; }
.detail-tags span { background: #fff0ec; color: var(--jd); font-size: 12px; padding: 3px 8px; border-radius: 2px; }
.detail-price-box { background: #fdf3f3; border-radius: 4px; padding: 16px; margin: 5px 0; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.detail-price { color: var(--price); font-size: 30px; font-weight: 700; }
.detail-price small { font-size: 16px; }
.detail-rent { color: var(--text2); font-size: 14px; }
.detail-rent b { color: var(--price); font-size: 18px; }
/* 预计收益：绿色加深加粗 */
.detail-rent.income-text { color: #07c160; font-weight: 700; }
.detail-rent.income-text b { color: #07c160; font-weight: 700; }
.detail-params { margin-top: 12px; padding-top: 1px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.param-row { display: flex; gap: 10px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid #f7f7f7; }
.param-label { color: var(--text3); width: 100px; flex-shrink: 0; }
.param-value { color: var(--text); flex: 1; }
.action-btn { border: none; border-radius: 3px; font-size: 16px; padding: 12px 34px; cursor: pointer; }
.action-btn.buy { background: var(--orange); color: #fff; }
.action-btn.rent { background: var(--jd); color: #fff; }
.action-btn.cart { background: #fff; color: var(--orange); border: 1px solid var(--orange); }
.action-btn:disabled { background: #f0f0f0; color: #bbb; cursor: not-allowed; }
/* 电脑版操作按钮：商品介绍右下角 */
.detail-intro-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 5px; padding-top: 14px; }
/* 数量选择器 */
.qty-picker { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.qty-btn { width: 30px; height: 34px; border: none; background: #f7f7f7; font-size: 16px; color: var(--text2); cursor: pointer; }
.qty-btn:active { background: #eee; }
.qty-num { width: 40px; text-align: center; font-size: 14px; color: var(--text); }
.qty-num-dtl { width: 40px; text-align: center; font-size: 14px; color: var(--text); }
.detail-intro-actions .action-btn { font-size: 15px; padding: 8px 18px; }
.detail-intro { background: var(--card); margin-top: 14px; padding: 20px 24px; border-radius: 4px; }
.detail-intro h3 { font-size: 16px; margin-bottom: 10px; padding-left: 8px; border-left: 3px solid var(--jd); }
.detail-intro p { font-size: 14px; color: var(--text2); line-height: 1.8; white-space: pre-wrap; }
/* 商品详情图：展示在介绍文字下方 */
.detail-gallery { background: var(--card); margin-top: 14px; padding: 20px 24px; border-radius: 4px; }
.detail-gallery img { display: block; width: 100%; border-radius: 4px; margin-bottom: 10px; }
.detail-gallery img:last-child { margin-bottom: 0; }
/* 商品大图（真实图片）缩略图背景铺满 */
.thumb-item { background-size: cover; background-position: center; }
/* 商品大图：强制正方形裁切（防 flex 布局下 aspect-ratio 失效被竖图撑开超出） */
.detail-img .img-slider { align-items: flex-start; }
.detail-img .img-slide { overflow: hidden; }
/* 商品详情图：防图片超出容器 */
.detail-gallery { overflow: hidden; }
.detail-gallery img { max-width: 100%; }

/* 购物车页专属样式已移至 css/cart.css（仅购物车页加载） */
.cart-empty { text-align: center; padding: 80px 0; color: var(--text3); }

/* ===== 弹窗 ===== */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: none; overflow-y: auto; }
.mask.open { display: flex; }
/* 同一 mask 内多个弹窗：只显示标记 open 的（编辑资料/地址管理共用遮罩） */
#editProfileModal .modal { display: none; }
#editProfileModal.open .modal.open { display: block; }
.modal { background: #fff; border-radius: 6px; width: 92%; max-width: 480px; max-height: 86vh; overflow-y: auto; margin: auto; }
.modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.modal-close { cursor: pointer; color: var(--text3); font-size: 18px; }
.modal-body { padding: 16px 18px; }
.modal-body .field { margin-bottom: 14px; }
.modal-body .field label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
.type-group { display: flex; gap: 10px; }
.type-group span { flex: 1; text-align: center; padding: 9px 0; border: 1px solid var(--border); border-radius: 3px; font-size: 14px; cursor: pointer; }
.type-group span.active { border-color: var(--jd); color: var(--jd); background: #fff4f3; }
.month-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 3px; font-size: 14px; outline: none; }
.price-line { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--text2); }
.price-line.total b { color: var(--price); font-size: 20px; }
/* 积分抵扣明细行 */
.price-line .points-deduct { color: #07c160; font-weight: 600; }
.price-line.points-tip { font-size: 12px; color: var(--text3); }
.modal-foot { padding: 0 18px 18px; display: flex; gap: 10px; }
.modal-foot .btn { flex: 1; padding: 11px 0; font-size: 15px; }
.btn-confirm { background: var(--orange); color: #fff; }
.btn-plain { background: #fff; color: var(--text2); border: 1px solid var(--border); }

/* ===== 个人中心（京东 PC 风格） ===== */
.mine-profile { background: var(--card); border-radius: 4px; padding: 24px 28px; display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.mine-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #e1251b, #ff4400); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.mine-profile-info { flex: 1; min-width: 0; }
.mine-name { font-size: 20px; font-weight: 700; color: var(--text); }


.mine-login-btn { background: var(--jd); color: #fff; border: none; border-radius: 14px; padding: 5px 20px; font-size: 13px; cursor: pointer; display: block; margin: 10px 0 0; }
.mine-login-btn:hover { opacity: .85; }

.mine-info-rows { display: flex; gap: 22px; margin-top: 10px; flex-wrap: wrap; }
.mine-info-row { font-size: 13px; color: var(--text3); }
.mine-info-row b { color: var(--text2); font-weight: 500; margin-left: 6px; }
.mine-stats { display: flex; gap: 0; border-left: 1px solid var(--border); padding-left: 24px; flex-shrink: 0; }
.mine-stat { text-align: center; padding: 0 22px; }
.mine-stat b { display: block; font-size: 24px; color: var(--jd); }
.mine-stat b#statPoints { color: #07c160; }
.mine-stat b#statDevices { color: #07c160; }
.mine-stat span { font-size: 13px; color: var(--text3); }
/* 个人中心卡片右端快捷入口：地址 / 设置（SVG 图标上、名称下） */
.mine-quick {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.mine-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: #f7f8fa;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text2);
}
.mine-quick-item svg { width: 22px; height: 22px; }
.mine-quick-item:hover { color: var(--jd); background: #fff4f3; }
/* 主体两栏 */
.mine-body { display: flex; gap: 14px; align-items: flex-start; }
/* 电脑版个人中心：左侧边栏TAB + 右侧内容（页面全宽），仅电脑版生效，不影响手机版 */
  body[class$="-page"] .main { max-width: none; }
  .mine-profile { padding: 16px; flex-wrap: wrap; gap: 12px; position: relative; }
  .mine-quick { margin-left: auto; width: auto; flex-shrink: 0; justify-content: flex-end; }
  .mine-quick-item { padding: 6px 8px; }
  /* 电脑版个人中心二级页（设置/地址/地址编辑）：背景浅灰、内容区宽页，仅电脑版，不影响手机版 */
  body.settings-page, body.addr-page, body.addr-edit-page { background: #f4f4f4; }
  body.settings-page .main { max-width: 1440px; }
  body.settings-page .set-card, body.addr-page .addr-list, body.addr-edit-page .form-card { max-width: none; }
  body.settings-page #settingsSaveBtn, body.addr-edit-page .save-btn { display: block; width: 240px; margin: 20px auto; }
  body.addr-page .addr-add-bar { text-align: center; }
.mine-side { width: 180px; flex-shrink: 0; background: var(--card); border-radius: 4px; padding: 10px 0; }
.mine-side-title { font-size: 14px; font-weight: 700; color: var(--text); padding: 10px 18px 6px; }
.mine-side-item { display: flex; align-items: center; padding: 12px 18px; font-size: 14px; color: var(--text2); border-left: 3px solid transparent; }
.mine-side-item:hover { color: var(--jd); background: #fff4f3; }
.mine-side-item.active { color: var(--jd); font-weight: 600; border-left-color: var(--jd); background: #fff4f3; }
.mine-content { flex: 1; min-width: 0; }
.mine-card { background: var(--card); border-radius: 4px; }
/* 我的订单：顶部横排 Tab（全部/待付款/待收货/已完成） */
.order-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.order-tab {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.order-tab.active {
  color: var(--jd);
  font-weight: 600;
  border-bottom-color: var(--jd);
}
/* Tab 容器统一宽度（订单/购物车/商品复用同宽度，防止购物车 tab 变窄） */
#orderCard, #cartCard { width: 100%; }

.order-item { padding: 14px 16px; border-bottom: 1px solid #f7f7f7; display: flex; gap: 12px; align-items: center; }
.order-item:last-child { border-bottom: none; }
.order-item .oi-img { width: 64px; height: 64px; flex-shrink: 0; font-size: 12px; }
.order-item .oi-info { flex: 1; min-width: 0; }
.order-item .oi-name { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.order-item .oi-meta { font-size: 12px; color: var(--text3); margin-top: 4px; }
.order-item .oi-price { color: var(--price); font-size: 15px; font-weight: 700; flex-shrink: 0; }
.order-item .oi-status { font-size: 12px; flex-shrink: 0; }
/* 待付款取消提示：手机版在列表卡片正上方（紧凑小字） */
.order-empty { text-align: center; padding: 40px 0; color: var(--text3); font-size: 14px; }
/* ===== 登录提示条 ===== */

/* ===== Toast ===== */
#toast { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; padding: 10px 22px; border-radius: 4px; font-size: 14px; z-index: 1200; display: none; }

/* 手机版分组展示：主商品名作标题 */
.mobile-group { margin-bottom: 16px; }
.mobile-group-title { font-size: 15px; font-weight: 700; color: var(--text); padding: 10px 4px; display: flex; align-items: center; gap: 8px; }
.mobile-group-title::before { content: ''; width: 4px; height: 16px; background: var(--jd); border-radius: 2px; }
@media (max-width: 450px) {
  /* 分组块占满整行（外层容器是 grid，避免分组块被当网格项错乱） */
  .mobile-group { grid-column: 1 / -1; }
  /* 分组内商品每行 2 个 */
  .mobile-group .goods-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
  .mobile-group-title { display: none; }

/* 个人中心地址列表：新增按钮（复用地址页样式） */
.addr-add-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 12px 0 6px;
}
/* 个人中心：新增按钮不用吸底（避免被底部导航栏遮挡导致点不动），保持普通流 */
body.mine-page .addr-add-bar { position: static; }
.addr-add-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff0f23, #e00c1e);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.addr-add-btn:hover { opacity: .9; }

/* ===== 底部 ===== */
.footer { text-align: center; color: var(--text3); font-size: 12px; padding: 24px 0 0; line-height: 1.8; margin-top: auto; }

/* ===== 详情页底部操作栏（淘宝样式，仅 ≤1024px 手机端显示） ===== */
.detail-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
  background: #fff; border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.detail-bar .bar-btn {
  flex: 1; border: none; border-radius: 4px; font-size: 15px; font-weight: 600;
  padding: 12px 0; cursor: pointer; text-align: center; margin: 0 4px;
}
.bar-btn.cart { background: #fff4e6; color: #ff8000; border: 1px solid #ffb76b; }
.bar-btn.service { background: #fff; color: var(--text2); border: 1px solid var(--border); }
.bar-btn.service svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.bar-btn.rent { background: #ff9500; color: #fff; }
.bar-btn.buy { background: var(--price); color: #fff; }
/* 租用+购买：胶囊组（间距0、两端圆角、中间无圆角） */
.bar-group { display: flex; align-items: center; overflow: hidden; border-radius: 17px; flex-shrink: 0; }
.bar-group .bar-btn { margin: 0; border-radius: 0; white-space: nowrap; }
.bar-group .bar-btn.rent { border-right: 1px solid rgba(255,255,255,0.3); }
.bar-btn.all { background: none; color: var(--text2); border: none; }
.bar-btn:disabled { background: #f0f0f0; color: #bbb; border: none; cursor: not-allowed; }
  .top-search-top { display: none; }
  .detail-bar { display: none; }
  body.detail { padding-bottom: 0; }
  .img-dots { display: none; }

@media (max-width: 450px) {
  /* 手机版：隐藏顶部导航栏，搜索框置顶 */
  .topbar { display: none; }
  /* 手机版：显示搜索按钮（与小程序一致） */
  .top-search .search-go { display: block; }
  .top-search .search-clear { right: 66px; }
  /* 手机版详情页：隐藏面包屑和搜索框 */
  .crumb-row { display: none; }
  /* 面包屑行搜索框手机端自适应 */
  .crumb-row .top-search { width: 180px; flex: 0 0 180px; }
  /* 手机版首页搜索框：圆角 6px（与小程序一致） */
  .search-row .top-search .form-input { border-radius: 6px; }
  /* 手机版：分类直接展示，隐藏顶部横向分类条 */
  .catbar { display: none; }
  .top-actions { display: none; }
  /* 手机版：多图重叠滑动显示，隐藏缩略图 */
  .detail-thumbs { display: none; }
  /* 手机版详情页图片：容器内外边距全 0，左右抵满屏幕，正方形显示 */
  body.detail .main { padding-left: 0; padding-right: 0; margin-top: 0; }
  /* 与屏幕顶端所有上边距归零（兜底） */
  body.detail { padding-top: 0 !important; }
  body.detail .main { margin-top: 0 !important; padding-top: 0 !important; }
  /* 手机版详情页：主容器显式宽度 100%，防止大图 aspect-ratio 最小内容宽度撑爆 body flex 布局导致详情图右溢出 */
  body.detail .main { width: 100%; }
  body.detail .detail-box { margin-top: 0 !important; padding-top: 0 !important; }
  body.detail .detail-img { margin-top: 0 !important; padding-top: 0 !important; }
  body.detail .detail-box { padding: 0; border-radius: 0; }
  body.detail .detail-img { margin: 0; padding: 0; width: 100%; }
  body.detail .img-slider { padding: 0; border-radius: 0; }
  body.detail .img-slide { padding: 0; }
  body.detail .detail-info { padding: 14px; }
  /* 商品参数区：手机端直接去除内边距，文字左对齐、自然换行 */
  body.detail .detail-info { padding: 5px 0; margin: 0 10px; }
  body.detail .detail-intro { padding: 5px 0; margin: 0 10px; }
  body.detail .detail-gallery { padding: 5px 0; margin: 0 10px; }
  body.detail .detail-params { column-gap: 8px; }
  body.detail .detail-params .param-row { padding: 6px 0; text-align: left; }
  /* 参数与参数值间距固定 10px（仅手机端）：标签宽度自适应，值强制距名称 10px */
  body.detail .detail-params .param-label { width: auto; flex-shrink: 0; }
  body.detail .detail-params .param-value { margin-left: 7px; }
  body.detail .detail-params .param-label { text-align: left; }
  body.detail .detail-params .param-value { text-align: left; word-break: break-all; overflow-wrap: anywhere; }
  .img-slider { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .img-slider::-webkit-scrollbar { display: none; }
  .img-slide { scroll-snap-align: start; }
  .detail-intro-actions { display: none; }
  /* 详情页：底部操作栏替代 TabBar，避免重叠 */
  body.detail .tabbar { display: none; }
  .search-row { padding: 8px 10px 2px; }
  .detail-bar { padding: 6px 8px; }
  .detail-bar .bar-btn { font-size: 13px; padding: 10px 0; margin: 0 3px; border-radius: 17px; }
  .detail-bar .bar-btn svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
  .detail-bar .bar-btn.service { flex: 0.55; min-width: 0; white-space: nowrap; font-size: 12px; }
  .detail-bar .bar-btn.service svg { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }
  .detail-bar .bar-btn img { width: 26px; height: 26px; display: block; margin: 0 auto; }
  /* 商城图标按钮：宽度自适应，不参与均分，避免挤压其他按钮 */
  .detail-bar .bar-btn.all { flex: 0 0 auto; width: auto; padding: 1px; }
  /* 底部按钮比例参照小程序：加购 0.8、租用+购买胶囊组 1.6，均分不溢出 */
  .detail-bar .bar-btn.cart { flex: 0.8; min-width: 0; white-space: nowrap; }
  .detail-bar .bar-group { flex: 1.6; min-width: 0; }
  .detail-bar .bar-group .bar-btn { flex: 1; min-width: 0; white-space: nowrap; }
  /* 手机版购买胶囊：紧贴底部操作栏右端 + 左右内边距与上下一致（2026-09-02） */
  .detail-bar .bar-group { flex: 0 0 auto; margin-left: auto; }
  .detail-bar .bar-group .bar-btn { flex: 0 0 auto; padding: 10px 10px; }
  .detail-bar .bar-group .bar-btn.rent { padding-left: 14px; }
  .detail-bar .bar-group .bar-btn.buy { padding-right: 14px; }
  /* 手机版数量选择器：紧凑小尺寸 */
  .detail-bar .qty-picker-mobile { border-radius: 15px; flex-shrink: 0; }
  .detail-bar .qty-btn { width: 26px; height: 34px; font-size: 14px; }
  .detail-bar .qty-num { width: 26px; font-size: 13px; }
  /* 个人中心手机端：单栏，侧边菜单横排 */
  /* 卡片内同排：头像(1) + 信息(2) + 快捷按钮(3) 一行，统计(4) 整行换行；按钮靠右端严禁换行 */
  .mine-avatar { order: 1; }
  .mine-profile-info { order: 2; flex: 1; min-width: 0; }
  .mine-quick { order: 3; margin-left: auto; width: auto; flex-shrink: 0; justify-content: flex-end; }
  .mine-stats { order: 4; border-left: none; padding-left: 0; width: 100%; justify-content: space-around; }
  .mine-stat { padding: 0 8px; }
  .mine-stat b { font-size: 20px; }
  .mine-body { flex-direction: column; }
  /* 手机端内容区撑满宽度（修复 flex column + align-items:flex-start 导致的宽度塌缩） */
  .mine-content { width: 100%; }
  .mine-side { width: 100%; display: flex; flex-wrap: nowrap; padding: 4px 4px; }
  .mine-side-title { display: none; }
  .mine-side-item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 10px 2px;
    font-size: 13px;
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .mine-side-item svg { flex-shrink: 0; margin-right: 4px; }
  .mine-side-item.active { border-left: none; border-bottom-color: var(--jd); }
  /* 手机版：弹窗左右抵满屏幕（编辑资料/收货地址等） */
  .modal { width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; margin: auto 0 0 0; max-height: 92vh; }
}

/* ===== 手机版首页：主商品名称横滑条（京东式，PC 隐藏） ===== */
.m-cat-bar { display: none; }
@media (max-width: 450px) {
  .m-cat-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #f2f3f5;
  }
  .m-cat-scroll {
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0;
  }
  .m-cat-scroll::-webkit-scrollbar { display: none; }
  .m-cat-item {
    display: inline-block;
    padding: 4px 3px; /* 横向字间距 6px（3+3） */
    font-size: 13px;
    color: var(--text2);
    white-space: nowrap;
    cursor: pointer;
  }
  .m-cat-item.active { color: var(--jd); font-weight: 700; }
  .m-cat-item { -webkit-tap-highlight-color: transparent; }
  /* 搜索框+分类容器固定不滚动（仅手机版；不影响逻辑） */
  .mfix {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
  }
}

/* ===== 手机版首页：一级分类展开面板（2026-09-03，mce- 全新独立类，仅≤450px 生效） ===== */
.mce-panel { display: none; }
.mce-crumb { display: none; }
@media (max-width: 450px) {
  .mce-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 90;
    display: none;
    overflow: hidden;
    padding-bottom: 10px; /* 主容器底部内边距 */
    box-sizing: border-box;
  }
  .mce-left {
    width: 92px;
    flex: 0 0 92px;
    background: #f7f8fa;
    box-sizing: border-box;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mce-l1s { flex: 1; min-height: 0; overflow-y: auto; }
  .mce-back {
    display: block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    margin: 20px auto 0; /* 最后一个一级分类下方 20px */
    font-size: 11px;
    font-weight: 700; /* 返回两字加粗 */
    color: #fff;
    background: #ff8c00;
    text-align: center;
    cursor: pointer;
    position: relative;
    z-index: 99; /* 层级高于面板内容 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .mce-l1 {
    display: block;
    padding: 14px 6px;
    font-size: 13px;
    line-height: 1.3;
    color: #444;
    text-align: center;
    word-break: break-all;
    cursor: pointer;
    border-left: 3px solid transparent;
  }
  .mce-l1.active { background: #fff; color: #ff8c00; font-weight: 700; border-left-color: #ff8c00; }
  .mce-right {
    flex: 1;
    min-width: 0;
    background: #fff;
    overflow-y: auto;
    padding: 12px 8px;
    box-sizing: border-box;
  }
  .mce-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; } /* 每个二级一组，组间换行，二级名始终在行首 */
  .mce-c2 {
    display: inline-block;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
  }
  .mce-c3 {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #555;
    background: #f5f6f8;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
  }
  .mce-empty { font-size: 12px; color: #999; padding: 10px; }
  .mce-crumb {
    display: block;
    padding: 10px 12px;
    font-size: 15px;
    color: #222;
    background: #fff;
    border-bottom: 1px solid #f2f3f5;
    white-space: nowrap;
    overflow-x: auto;
  }
  .mce-crumb:empty { display: none; }
  .mce-crumb::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: #ff8c00; /* 分类名称左侧竖条，同详情页店铺信息样式 */
    margin-right: 8px;
    vertical-align: -2px;
  }
  .mce-crumb-i { font-weight: 700; color: #222; cursor: pointer; }
  .mce-crumb-i:hover { color: #ff8c00; }
  .mce-crumb-sep { color: #c8c8c8; margin: 0 3px; font-weight: 400; }
}

/* ===== 手机版：全局去除按钮/链接点击阴影与高亮（新增，不影响功能） ===== */
@media (max-width: 450px) {
  * { -webkit-tap-highlight-color: transparent; }
  button:active, button:focus, a:active, a:focus,
  .btn:active, .btn:focus, input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* ===== 底部 TabBar（≤1024px 显示） ===== */
.tabbar { display: none; }
@media (max-width: 1024px) {
  body { padding-bottom: 0; }
  body:has(.tabbar) { padding-bottom: 54px; }
  .tabbar {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: #fff; border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 8px rgba(0,0,0,.05);
  }
  .tabbar-item { flex: 1; text-align: center; padding: 7px 0 5px; font-size: 11px; color: var(--text3); position: relative; }
  .tabbar-item svg { width: 22px; height: 22px; margin: 0 auto 2px; display: block; }
  .tabbar-item.active { color: var(--jd); font-weight: 600; }
  .tabbar-item img.tabbar-ico { display: none; width: 22px; height: 22px; margin: 0 auto 2px; object-fit: contain; }
  .tabbar-item.active svg { display: none; }
  .tabbar-item.active img.tabbar-ico { display: block; }
  
}


/* ===== 手机端响应式 ===== */
@media (max-width: 450px) {
  .goods-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .goods-img { font-size: 20px; }
  .topbar-inner { flex-wrap: wrap; gap: 10px; padding: 8px 10px; }
  .logo { font-size: 18px; }
  .top-actions { margin-left: auto; }
  .top-actions a span.txt { display: none; }
  .detail-box { flex-direction: column; padding: 14px; gap: 12px; }
  .detail-thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; width: 100%; padding-bottom: 4px; }
  .thumb-item { width: 60px; flex-shrink: 0; }
  .detail-img { width: 100%; }
  .detail-img .goods-img { font-size: 32px; }
  .detail-name { font-size: 17px; }
  .detail-price { font-size: 24px; }
  .action-btn { flex: 1; padding: 12px 0; text-align: center; }
  .pagination { gap: 5px; }
}
@media (max-width: 450px) {
  .goods-grid { grid-template-columns: repeat(2, 1fr); }
  .goods-img { font-size: 17px; }
  .goods-name { font-size: 13px; height: 36px; }
  .goods-price { font-size: 13px; }
  .detail-params .param-row { font-size: 13px; }
}

/* ===== 手机版首页/购物车/搜索页导航栏与搜索框（共用一套：去除导航栏，仅保留搜索框行） ===== */
.top-title { display: none; }
@media (max-width: 450px) {
  /* 手机版：页面灰底与小程序商城一致 */
  /* 手机版：页面灰底与小程序商城一致（首页原有颜色） */
  body.home, body.cart { background: #f4f4f4 !important; }
  /* 手机版：去除顶部导航栏（含标题文字） */
  body.home .topbar, body.cart .topbar { display: none !important; }
  /* 搜索框独立一行：页面顶部，与顶端间距1px，左右内边距8px */
  body.home .search-row, body.cart .search-row { display: flex !important; margin: 1px 0 0 !important; padding: 1px 8px; height: auto; justify-content: center; background: #fff; }
  /* 商品列表区域背景：三页共用 #fffafb */
  /* 商品列表区域背景：三页共用 #fffafb（首页原有颜色） */
  body.home .goods-area, body.cart .cart-list { background: #fffafb; }
  body.home .search-row .sub-nav-logo, body.cart .search-row .sub-nav-logo { display: none !important; }
  body.home .search-row .top-search, body.cart .search-row .top-search { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; margin: 0 !important; }
}
/* 手机版购物车：列表区域全铺屏幕（新增覆盖修复，原有规则保留不删） */
@media (max-width: 450px) {
  body.cart .main { margin: 0 !important; padding: 0 !important; max-width: none !important; flex: 1 1 auto; display: flex; flex-direction: column; }
  body.cart .cart-list { border-radius: 0; flex: 1 1 auto; }
  /* 手机版：选择框/数量换行到第二行（电脑版在商品与价格中间） */
  body.cart .cart-card-row1 { flex-wrap: wrap; }
  body.cart .cart-type { flex-basis: 100%; order: 3; width: 100%; }
  /* 手机版：购物车次导航栏整体隐藏（电脑版专属） */
  body.cart .search-row.sub-nav { display: none !important; }
}
/* 手机版首页/搜索页：背景主容器全铺并抵满版权容器（新增覆盖，原有规则保留不删） */
@media (max-width: 450px) {
  body.home .main { margin: 0 !important; padding: 0 !important; max-width: none !important; flex: 1 1 auto; display: flex; flex-direction: column; }
  body.home .shop-layout { flex: 1 1 auto; align-items: stretch; }
  body.home .goods-area { flex: 1 1 auto; }
}
/* 手机版地址页/设置页/地址编辑页专用（新增，原有规则保留不删）：抵满屏幕两端、内容外边距15px、背景同首页 */
@media (max-width: 450px) {
  body.addr-page, body.settings-page, body.addr-edit-page { background: #f4f4f4; }
  body.addr-page .main, body.settings-page .main, body.addr-edit-page .main { margin: 0 !important; padding: 10px 0 !important; max-width: none !important; flex: 1 1 auto; display: flex; flex-direction: column; }
  body.addr-page .page-head, body.settings-page .page-head, body.addr-edit-page .page-head,
  body.addr-page .addr-list, body.addr-page .addr-add-bar, body.settings-page .set-card, body.addr-edit-page .form-card { margin-left: 15px; margin-right: 15px; }
  /* 背景铺满抵满版权容器 */
  body.addr-page .addr-list, body.addr-page .addr-add-bar, body.settings-page .set-card, body.addr-edit-page .form-card { flex: 1 1 auto; }
  /* 设置页/地址编辑页返回按钮：加大、加深 */
  body.settings-page .page-head-back, body.addr-edit-page .page-head-back { font-size: 15px; color: #1a1a2e; }
  body.settings-page .page-head-back svg, body.addr-edit-page .page-head-back svg { width: 16px; height: 16px; }
  /* 地址编辑页：隐藏顶部标题文字 */
  body.addr-edit-page .page-head-title { display: none; }
  /* 地址列表页：隐藏顶部“收货地址”标题文字 */
  body.addr-page .page-head-title { display: none; }
  /* 地址列表页：新增收货地址按钮宽度 300px、水平居中 */
  body.addr-page .addr-add-btn { display: inline-block; width: 300px; }
  /* 地址编辑页：保存地址按钮宽度 300px、水平居中 */
  body.addr-edit-page .save-btn { display: block; width: 300px; margin: 20px auto; }
  /* 设置页保存按钮：卡片内底部、水平居中、左右内边距 20px */
  body.settings-page #settingsSaveBtn { display: block; width: 200px; margin: 20px auto; padding: 0 20px; font-size: 17px; }
  /* 设置页退出登录：专用容器，位于内容区与版权信息之间 */
  body.settings-page .settings-logout-bar { margin: 20px 15px 0; }
  body.settings-page .settings-logout-btn { width: 100%; padding: 12px 0; background: var(--card); border: none; border-radius: 4px; font-size: 15px; color: var(--jd); cursor: pointer; }
  body.settings-page .settings-logout-btn:active { opacity: .8; }
}
/* 手机版详情页确认订单弹窗：自动高度、不设上限（可超出屏幕顶部）、确认支付按钮常驻（新增覆盖，原有规则保留不删） */
@media (max-width: 450px) {
  body.detail .jd-modal { max-height: none !important; height: auto !important; overflow: visible; }
  body.detail .jd-modal .modal-foot { position: sticky; bottom: 0; background: #fff; z-index: 5; }
}
/* 购物车页搜索框行：PC 端隐藏（仅手机版显示） */
/* 购物车页次导航（电脑版）：LOGO|购物车 在左、搜索框在右，复用首页次导航背景 */
body.cart .search-row.sub-nav { justify-content: space-between; padding: 0 24px; }
body.cart .search-row.sub-nav .sub-nav-left { display: flex; align-items: center; gap: 24px; }
body.cart .search-row.sub-nav .sub-nav-logo { position: static; transform: none; }
body.cart .search-row.sub-nav .sub-nav-cart { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
body.cart .search-row.sub-nav .sub-nav-cart svg { width: 20px; height: 20px; color: var(--jd); }
body.cart .search-row.sub-nav .sub-nav-cart .cart-badge { background: var(--jd); color: #fff; font-size: 12px; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
body.cart .search-row.sub-nav .sub-nav-cart .sub-cart-num { color: var(--jd); font-size: 15px; font-weight: 700; }
/* 购物车页专属搜索框：复用首页搜索框样式（含 sug-open 防跳动），购物车独立控制 */
body.cart .search-row.sub-nav .top-search { max-width: 500px; flex: 0 1 500px; margin: 0 24px 0 auto; }
body.cart .search-row.sub-nav .top-search.sug-open { align-self: flex-start; margin-top: 55px; }
body.cart .search-row.sub-nav .top-search .form-input { height: 40px; border-radius: 6px; }
body.cart .search-row.sub-nav .top-search .search-go { height: 30px; border-radius: 6px; line-height: 30px; padding: 0 12px; font-size: 13px; }
body.cart .search-row.sub-nav .top-search .search-clear { right: 58px; }
body.cart .search-row.sub-nav .top-search.sug-open .search-icon { top: 12px; transform: none; }
/* 搜索框完全复用首页电脑版 CSS（含 sug-open 防跳动），不做覆盖 */

/* ===== 退出登录：电脑版右上角 + 手机版底部 ===== */





@media (max-width: 450px) {
  
}

/* 购物车页手机版导航栏样式已移至 css/cart.css */

/* ===== 支付弹窗内容（垂直居中布局） ===== */
.pay-box { text-align: center; }
.pay-box .pay-qr { display: block; margin: 0 auto; width: 220px; height: 220px; border: 1px solid var(--border); border-radius: 6px; }
.pay-box .pay-tip { font-size: 14px; font-weight: 600; margin-top: 12px; }
.pay-box .pay-meta { margin-top: 12px; }
.pay-box .pay-note { font-size: 12px; color: var(--text3); margin-top: 8px; }
@media (max-width: 450px) {
  .pay-box .pay-qr { width: 180px; height: 180px; }
}

/* ===== 我已支付按钮：微信绿，无悬停效果 ===== */
.btn-paid { background: #07c160; color: #fff; border: none; }
.btn-paid:hover, .btn-paid:active, .btn-paid:focus { background: #07c160; color: #fff; }

/* 手机版：侧边菜单的退出登录隐藏（底部已有退出按钮），电脑版保留 */
@media (max-width: 450px) {
  #logoutLink { display: none !important; }
}/* ===== 订单卡片操作排（未支付订单：类型/时长/立即支付） ===== */
.order-item { flex-wrap: wrap; }
.order-ops { flex-basis: 100%; border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 10px; }
.op-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.op-label { font-size: 12px; color: var(--text3); flex-shrink: 0; }
.op-btn { border: 1px solid var(--border); background: #fff; color: var(--text2); border-radius: 3px; padding: 4px 12px; font-size: 12px; cursor: pointer; line-height: 1.4; }
.op-btn.on { border-color: var(--jd); color: var(--jd); background: #fff4f3; }

.op-pay { background: var(--orange); color: #fff; border: none; border-radius: 3px; padding: 5px 16px; font-size: 13px; cursor: pointer; margin-left: auto; }
.op-pay:active { opacity: .85; }

/* ===== 商品为空页面（商品删除/下架后展示） ===== */
.goods-empty-page { background: var(--card); border-radius: 4px; padding: 40px 20px; }
.goods-empty-tip { text-align: center; padding: 10px 0 30px; border-bottom: 1px solid var(--border); }
.goods-empty-title { font-size: 18px; font-weight: 700; color: var(--text); }
.goods-empty-sub { font-size: 13px; color: var(--text3); margin-top: 8px; }
.goods-empty-list { max-width: 640px; margin: 0 auto; }
.goods-empty-list-title { font-size: 15px; font-weight: 700; color: var(--text); padding: 18px 4px 10px; }
.goods-empty-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 10px; transition: border-color .2s, box-shadow .2s; }
.goods-empty-item:hover { border-color: var(--jd); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.goods-empty-item-name { font-size: 14px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.goods-empty-item-count { font-size: 12px; color: var(--text3); flex-shrink: 0; }
@media (max-width: 450px) {
  .goods-empty-page { padding: 24px 12px; }
  .goods-empty-item { padding: 12px 12px; }
}

/* ===== 手机版商品为空页面顶部导航栏（复用首页红色导航栏样式） ===== */
@media (max-width: 450px) {
  body.empty-page .topbar { display: block !important; background: #ff0f23 !important; }
  body.empty-page .topbar-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center; gap: 6px; padding: 10px 10px !important; }
  body.empty-page .topbar .logo { display: none !important; }
  body.empty-page .top-search-top { display: flex !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; order: 2; }
  body.empty-page .top-search-top .form-input { border-radius: 6px; height: 36px; padding: 0 96px 0 34px; }
  body.empty-page .top-actions { display: flex !important; order: 1; margin-left: 0 !important; gap: 6px; flex: 0 0 42px; justify-content: center; align-items: center; }
  body.empty-page .top-actions a { color: #fff !important; display: flex !important; align-items: center; line-height: 1; }
  body.empty-page .top-actions a:not(.top-cart) { display: none !important; }
  body.empty-page .top-actions a span.txt { display: none !important; }
  body.empty-page .top-actions a svg { width: 18px !important; height: 18px !important; display: block; }
  body.empty-page .top-actions .cart-badge { background: #fff !important; color: #c81623 !important; top: -5px; right: auto; left: 50%; margin-left: 6px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 10px; }
  body.empty-page .top-user { display: flex !important; order: 3; flex: 0 0 42px; justify-content: center; align-items: center; }
  body.empty-page .top-user-info .top-nickname { color: #fff !important; display: none !important; }
}

/* 商品大图（独立样式，不与其他 goods-img 共用）：完整显示名称，减小内边距 */
.goods-img-full { padding: 4px 8px; letter-spacing: 1px; line-height: 1.15; word-break: break-all; }
.op-del { background: transparent; border: 1px solid var(--orange); color: var(--orange); }
.op-btn-group { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* 立即支付/删除按钮：共用同一套尺寸 CSS，高度一致，宽度紧凑 */
.op-btn-group .op-btn { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
.op-btn-group .op-pay { margin-left: 0; background: var(--orange); color: #fff; border: none; }
.op-btn-group .op-del { background: transparent; border: 1px solid var(--orange); color: var(--orange); }

/* ===== 详情页租用+购买胶囊组（覆盖手机版 bar-btn 默认间距/圆角） ===== */
.detail-bar .bar-group .bar-btn { margin: 0 !important; border-radius: 0 !important; }
.detail-bar .bar-group .bar-btn.rent { border-right: 1px solid rgba(255,255,255,0.3); }
.detail-bar .bar-group { border-radius: 17px; }
/* ===== 购物车页面专用样式（独立文件，仅购物车页加载，不与其他页面共享） ===== */

/* ---- 购物车列表 & 结算栏 ---- */
/* ===== 购物车 ===== */
/* 电脑版购物车：页面全宽（与手机版一致，新增覆盖，原有规则保留） */
.cart-list { background: var(--card); border-radius: 4px; }
.cart-head, .cart-item { display: flex; align-items: center; padding: 14px 16px; gap: 12px; }
.cart-head { border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text3); }
.cart-item { border-bottom: 1px solid #f7f7f7; }
.cart-item:last-child { border-bottom: none; }
/* 购物车商品卡两行容器（新增）：大容器包裹 勾选+商品+价格(第一行) / 规格数量(第二行) */
.cart-card { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.cart-card-row1 { display: flex; align-items: center; gap: 12px; }
.cart-card-row2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cart-check {
  width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #ff0f23; border-radius: 3px; background: #fff;
  position: relative; vertical-align: middle; margin: 0;
}
.cart-check:checked { background: #ff0f23; border-color: #ff0f23; }
.cart-check:checked::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cart-check:disabled { opacity: .5; cursor: not-allowed; }
/* 全选框：与商品勾选框同款红色（购物车页） */
#checkAll {
  width: 16px; height: 16px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #ff0f23; border-radius: 3px; background: #fff;
  position: relative; vertical-align: middle; margin: 0;
}
#checkAll:checked { background: #ff0f23; border-color: #ff0f23; }
#checkAll:checked::after {
  content: '';
  position: absolute; left: 3px; top: 0;
  width: 6px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cart-goods { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.cart-goods .mini-img { width: 80px; height: 80px; flex-shrink: 0; font-size: 15px; }
.cart-goods .g-name { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 320px; }
.cart-goods .g-sub { font-size: 12px; color: var(--text3); margin-top: 4px; }
.cart-price { width: 110px; text-align: right; color: var(--price); font-size: 16px; font-weight: 700; flex-shrink: 0; }
.cart-type { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; width: auto; }
/* 自定义租用/购买下拉：选项直接显示在按钮下方（不弹底部选择器） */
.cart-mode { position: relative; flex: 1 1 auto; min-width: 30px; max-width: 220px; }
.cart-mode-btn {
  width: 100%; height: 30px; padding: 0 8px; border: 1px solid #ff0f23; border-radius: 3px;
  font-size: 13px; background: #fff; color: var(--text2);
  display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.cart-mode-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.cart-mode.disabled .cart-mode-btn { opacity: .5; cursor: not-allowed; }
.cart-mode-menu {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08); display: none; overflow: hidden;
}
.cart-mode-menu.open { display: block; }
.cart-mode-option { padding: 7px 10px; font-size: 13px; cursor: pointer; text-align: center; }
.cart-mode-option:hover { background: #f5f5f5; }
.cart-mode-option.on { color: var(--jd); font-weight: 600; }
.cart-mode-option.disabled { color: #ccc; cursor: not-allowed; }
/* 购物车数量/月加减框尺寸统一（电脑版/手机版一致） */
.cart-type .qty-picker { height: 30px; }
.cart-type .qty-btn { width: 24px; height: 28px; font-size: 14px; }
.cart-type .qty-num { width: 24px; font-size: 13px; }
/* 电脑版第二排横排：数量/月份行去掉上边距，与下拉框垂直居中对齐 */
.cart-unit-row { margin-top: 0 !important; }
.cart-del { color: #ff0f23; font-size: 12px; cursor: pointer; flex-shrink: 0; height: 30px; line-height: 28px; padding: 0 12px; border: 1px solid #ff0f23; border-radius: 4px; }
.cart-del:hover { color: #ff0f23; border-color: #ff0f23; }
/* 个人中心购物车（mine.html）删除按钮：保持原有文字样式，不受购物车页新样式影响 */
#cartCard .cart-del { margin-left: auto; padding: 2px 4px; border: none; height: auto; line-height: normal; color: var(--text3); background: none; }
.cart-bar { position: sticky; bottom: 0; background: var(--card); border-radius: 4px; margin-top: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 20px; box-shadow: 0 -2px 10px rgba(0,0,0,.05); }
.cart-bar .total { font-size: 14px; color: var(--text2); }
.cart-bar .total b { color: var(--price); font-size: 22px; }
.cart-bar .checkout { background: var(--orange); color: #fff; border: none; border-radius: 3px; font-size: 15px; padding: 7px 21px; cursor: pointer; margin-left: auto; }
.cart-bar .checkout:disabled { background: #f0f0f0; color: #bbb; cursor: not-allowed; }

/* ---- 手机版购物车行布局（两行整齐排版） ---- */
@media (max-width: 450px) {
  /* 结算栏上移避开底部 TabBar，与 TabBar 顶部间距 1px */
  .cart-bar { bottom: 55px; }
  /* 商品行：第一行勾选+图+信息+价格，第二行方式选择+删除 */
  .cart-item { flex-wrap: wrap; align-items: center; padding: 12px 10px; gap: 8px 6px; }
  .cart-check { order: 0; }
  .cart-goods { order: 1; flex: 1 1 100%; min-width: 0; }
  .cart-goods .mini-img { width: 76px; height: 76px; flex-shrink: 0; }
  .cart-goods .g-name { max-width: none; font-size: 13px; }
  .cart-goods .g-sub { font-size: 11px; }
  .cart-price { order: 3; width: auto; font-size: 15px; margin-left: 4px; flex-shrink: 0; }
  .cart-type { order: 2; flex: 1; min-width: 0; width: auto; display: flex; align-items: center; gap: 8px; }
  .cart-del { order: 4; margin-left: auto; }
  /* 第二排内容水平居中；租用/购买下拉自适应宽度，选项显示在按钮正下方 */
  .cart-type { justify-content: center; flex-wrap: nowrap; }
  .cart-mode { flex: 1 1 auto; min-width: 30px; max-width: none; }
  .cart-mode-menu { top: 100%; left: 0; right: 0; }
  /* 手机版第二排：数量/月份行去掉上边距，与下拉框垂直居中对齐 */
  .cart-unit-row { margin-top: 0 !important; gap: 4px !important; flex-shrink: 1; }
  .cart-head { display: none; }
}

/* ---- 手机版购物车顶部导航栏（已合并至上方“手机版首页/购物车页顶部导航栏专用”共用规则，此旧块删除） ---- */


/* ===== 防溢出：内容不超出屏幕宽度，自然换行 ===== */
body.cart { overflow-x: hidden; }
body.cart .cart-item,
body.cart .cart-goods,
body.cart .cart-goods .g-name,
body.cart .cart-goods .g-sub,
body.cart .cart-price,
body.cart .cart-type,
body.cart .cart-del {
  max-width: 100%;
  box-sizing: border-box;
}
body.cart .cart-goods .g-name,
body.cart .cart-goods .g-sub {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ===== 商品失效（删除/下架）：整行变灰 + 标签（购物车页 & 个人中心共用） ===== */
.cart-item.invalid {
  background: #f5f5f5;
  opacity: 0.7;
}
.cart-item.invalid .cart-goods,
.cart-item.invalid .cart-price,
.cart-item.invalid .cart-type {
  filter: grayscale(1);
}
.cart-item.invalid .cart-check,
.cart-item.invalid select,
.cart-item.invalid input {
  opacity: 0.5;
  cursor: not-allowed;
}
.invalid-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 8px;
  font-size: 12px;
  color: #fff;
  background: #c8c8c8;
  border-radius: 3px;
  line-height: 1.6;
}

/* ===== 京东式确认订单弹窗（手机版底部上滑 60% 屏） ===== */
.mask.jd-mask { align-items: flex-end; }
.jd-modal { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 60vh; margin: auto 0 0 0; }
.jd-goods { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f2f3f5; }
.jd-thumb { width: 64px; height: 64px; border-radius: 8px; background: linear-gradient(135deg, #4a7bd0, #2f5cb8); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; flex-shrink: 0; overflow: hidden; }
.jd-goods-info { flex: 1; min-width: 0; }
.jd-goods-name { font-size: 14px; font-weight: 600; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-goods-spec { font-size: 11px; color: #999; margin: 4px 0; }
.jd-price { font-size: 16px; font-weight: 700; color: #f30213; }
.jd-addr { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid #f2f3f5; }
.jd-addr-info { flex: 1; min-width: 0; }
.jd-addr-line1 { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.jd-addr-line2 { font-size: 11px; color: #999; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-addr-arrow { font-size: 16px; color: #ccc; flex-shrink: 0; }
.jd-addr { cursor: pointer; }
/* 确认订单弹窗：规格输入行（月数/数量横排） */
.jd-spec-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jd-unit { font-size: 13px; color: #666; flex-shrink: 0; }
/* 确认订单弹窗：大容器套两个子容器（租用时长/数量），两端抵满自然分开 */
.qty-group { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.qty-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.qty-sub { display: flex; align-items: center; gap: 6px; }
/* 支付确认页：收货地址选择弹层 */
.addr-picker-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100; display: none; align-items: center; justify-content: center; }
.addr-picker { width: 420px; max-width: 92vw; max-height: 70vh; background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.addr-picker-head { padding: 14px 16px; font-size: 15px; font-weight: 700; color: #1a1a2e; border-bottom: 1px solid #f2f3f5; }
.addr-picker-list { overflow-y: auto; }
.addr-picker-item { padding: 12px 16px; border-bottom: 1px solid #f7f7f7; cursor: pointer; }
.addr-picker-item:hover { background: #fff7f5; }
.addr-picker-item.on { background: #fff0ed; }
.addr-picker-item.on .jd-addr-line1 { color: #e1251b; }
@media (max-width: 450px) {
  .addr-picker { width: 92vw; }
}
/* 新增收货地址模态框：表单左右内边距 15px（新增，不影响其他弹窗） */
#jdAddrAddModal .addr-picker-list { padding: 0 15px; }
/* 新增收货地址模态框：高度占屏幕 90%，表单区撑满滚动（新增，不影响其他弹窗） */
#jdAddrAddModal .addr-picker { height: 85vh; max-height: 85vh; padding: 1px 0 10px; }
#jdAddrAddModal .addr-picker-list { flex: 1; min-height: 0; max-height: none !important; }
.jd-pay { padding: 12px 0; }
.jd-pay-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px; border: 1px solid #e6f0f4; margin-bottom: 8px; font-size: 13px; color: #1a1a2e; }
.jd-pay-item.active { border-color: #07c160; background: #f0fbf4; }
.jd-pay-item.disabled { opacity: 0.45; }
.jd-check { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #ccc; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.jd-pay-item.active .jd-check { background: #07c160; border-color: #07c160; }

/* ===== 支付确认弹窗：手机版底部上滑（默认 jd 样式）+ 电脑版 800×500 左右分栏 ===== */
.jd-layout { display: flex; flex-direction: column; }
.jd-left { min-width: 0; }
.jd-right { min-width: 0; }
.jd-total { padding: 12px 0; border-top: 1px solid #f2f3f5; }
.jd-total .price-line { font-size: 13px; }
.jd-total .price-line.total b { font-size: 18px; }
/* 手机版（≤1024px）：保持底部上滑 60% 屏，纵向排列 */
@media (max-width: 1024px) {
  .jd-layout { flex-direction: column; }
  .jd-right { border-top: 1px solid #f2f3f5; }
  /* 手机版确认订单弹窗：高度 +100px，横排模块上下内边距 6px */
  .jd-modal { max-height: calc(60vh + 100px); }
  .jd-modal .modal-body { padding: 6px 18px; }
  .jd-goods { padding: 6px 0; }
  .jd-addr { padding: 6px 0; }
  .jd-pay { padding: 6px 0; }
  .jd-total { padding: 6px 18px; }
}
/* 电脑版（≥1025px）：800×500 居中模态框，左右分栏，按钮固定右侧底部 */
@media (min-width: 1025px) {
  .mask.jd-mask { align-items: center; }
  .jd-modal {
    width: 800px;
    max-width: 92vw;
    height: 500px;
    max-height: 88vh;
    border-radius: 12px;
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .jd-modal .modal-head { flex-shrink: 0; }
  .jd-layout { flex: 1; flex-direction: row; min-height: 0; }
  .jd-left { flex: 1; overflow-y: auto; padding: 16px 20px; border-right: 1px solid #f2f3f5; }
  .jd-right { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 16px 20px 76px; }
  /* 支付/取消按钮固定右侧底部：与 jd-left 分割线对齐，拉通到底一分为二 */
  .jd-modal .modal-foot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 320px;
    box-sizing: border-box;
    padding: 12px 20px;
    border-top: 1px solid #f2f3f5;
    border-left: 1px solid #f2f3f5;
    border-radius: 0 0 12px 0;
    background: #fff;
  }
  /* 电脑版商品缩略图稍大 */
  .jd-thumb { width: 80px; height: 80px; font-size: 13px; }
  .jd-goods-name { font-size: 15px; }
  .jd-price { font-size: 18px; }
}

/* ===== 新增地址表单弹窗 ===== */
.addr-picker-foot { padding: 12px 16px; border-top: 1px solid #f2f3f5; display: flex; gap: 10px; }
.addr-picker-foot .btn { flex: 1; padding: 10px 0; font-size: 14px; }
.addr-form-item { margin-bottom: 12px; }
.addr-form-item label { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
.addr-form-item .month-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #e5e5e5; border-radius: 6px; font-size: 14px; outline: none; }
.addr-form-item .month-input:focus { border-color: #ff0f23; }

/* ===== 电脑版复用手机版布局（购物车/个人中心，保持两端显示一致；仅 ≥451px 生效，不影响手机版） ===== */


/* ===== 详情页手机版（≤1024px）：隐藏主导航栏，只保留购买操作栏（2026-08-24 新增） ===== */
@media (max-width: 1024px) {
  body.detail .tabbar { display: none !important; }
}

/* ===== 详情页手机版：底部胶囊按钮导航栏强制显示（2026-08-24 新增） ===== */
@media (max-width: 1024px) {
  body.detail .detail-bar { display: flex !important; }
}

/* ===== 详情页手机版：商城首页图标高度与加购物车按钮一致、宽度自动（2026-08-24 新增） ===== */
@media (max-width: 1024px) {
  .detail-bar .bar-btn.all {
    align-self: stretch;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .detail-bar .bar-btn.all img {
    height: 100%;
    width: auto;
    display: block;
  }
}

/* ===== 详情页手机版：商城首页图标固定高度对齐加购物车按钮（2026-08-24 修复百分比失效） ===== */
@media (max-width: 1024px) {
  .detail-bar .bar-btn.all img { height: 37px; width: auto; }
}

/* ===== 详情页手机版：加购物车按钮固定高度，与商城图标精确对齐（2026-08-24 新增） ===== */
@media (max-width: 1024px) {
  .detail-bar .bar-btn.cart {
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===== 详情页手机版：商城首页图标缩小（2026-08-24 新增） ===== */
@media (max-width: 1024px) {
  .detail-bar .bar-btn.all img { height: 28px; width: auto; }
}

/* ===== 详情页手机版：联系客服按钮（新图标，与商城首页图标同高，2026-08-25 新增） ===== */
@media (max-width: 1024px) {
  .detail-bar .bar-btn.service {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0 6px;
    margin: 0;
  }
  .detail-bar .bar-btn.service img {
    height: 28px;
    width: auto;
    display: block;
  }
}

/* ===== 我的订单三状态独立样式（2026-08-25 新增：待付款/待收货/已完成互不影响，CSS 变量独立控制，无内联） ===== */
/* 待付款：独立 CSS 变量 + 独立操作区样式 */
.order-item-pay { cursor: pointer; --oi-color: #ff8000; }
.order-item-pay .oi-status-pay { font-size: 12px; flex-shrink: 0; color: var(--oi-color); }
.order-item-pay .order-ops { flex-basis: 100%; border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 10px; }
.order-item-pay .op-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.order-item-pay .op-row-hidden { display: none; }
.order-item-pay .op-label { font-size: 12px; color: var(--text3); flex-shrink: 0; }
.order-item-pay .op-btn { border: 1px solid var(--border); background: #fff; color: var(--text2); border-radius: 3px; padding: 4px 12px; font-size: 12px; cursor: pointer; line-height: 1.4; }
.order-item-pay .op-btn.on { border-color: var(--jd); color: var(--jd); background: #fff4f3; }
.order-item-pay .op-months { width: 35px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px; }
.order-item-pay .op-pay { background: var(--orange); color: #fff; border: none; border-radius: 3px; padding: 5px 16px; font-size: 13px; cursor: pointer; margin-left: auto; }
.order-item-pay .op-pay:active { opacity: .85; }
.order-item-pay .op-del { background: transparent; border: 1px solid var(--orange); color: var(--orange); }
.order-item-pay .op-btn-group { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.order-item-pay .op-btn-group .op-btn { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
.order-item-pay .op-btn-group .op-pay { margin-left: 0; background: var(--orange); color: #fff; border: none; }
.order-item-pay .op-btn-group .op-del { background: transparent; border: 1px solid var(--orange); color: var(--orange); }
/* 待收货：独立 */
.order-item-ship { cursor: pointer; --oi-color: #00b578; }
.order-item-ship .oi-status-ship { font-size: 12px; flex-shrink: 0; color: var(--oi-color); }
/* 已完成：独立 */
.order-item-done { cursor: pointer; --oi-color: #07c160; }
.order-item-done .oi-status-done { font-size: 12px; flex-shrink: 0; color: var(--oi-color); }
/* 已取消：独立 */
.order-item-cancel { cursor: pointer; --oi-color: #999; }
.order-item-cancel .oi-status-cancel { font-size: 12px; flex-shrink: 0; color: var(--oi-color); }

/* ===== 订单卡片：价格+状态上下排列、靠右（2026-08-25 新增） ===== */
.order-item .oi-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* ===== 通用确认弹窗（2026-08-25 新增，替代 confirm() 防微信浏览器拦截） ===== */
.confirm-modal { width: 300px; max-width: 90%; }
.confirm-body { text-align: center; padding: 24px 18px; font-size: 14px; color: var(--text); }

/* ===== 设置页退出登录按钮：电脑版/平板样式（2026-08-29 新增，手机版规则保留在 max-width:450px 内，互不覆盖） ===== */
@media (min-width: 451px) {
  body.settings-page .settings-logout-bar { margin: 20px 0 0; }
  body.settings-page .settings-logout-btn { display: block; width: 100%; padding: 12px 0; background: var(--card); border: none; border-radius: 4px; font-size: 15px; color: var(--jd); cursor: pointer; }
  body.settings-page .settings-logout-btn:hover { opacity: .85; }
}

/* ===== 商品详情页：搜索框左侧联系客服按钮（新增） ===== */
.crumb-service-btn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  margin-right: 4px; /* crumb-row gap 16px + 4px = 与搜索框间距 20px */
  border: 1px solid #ff0f23;
  border-radius: 4px;
  background: #fff;
  color: #ff0f23;
  font-size: 13px;
  line-height: 30px;
  cursor: pointer;
  white-space: nowrap;
}
.crumb-service-btn:hover { background: #ff0f23; color: #fff; }

/* 手机版详情页：显示主图轮播指示圆点（2026-08-29 新增，覆盖原 450px 隐藏规则） */
@media (max-width: 450px) {
  .img-dots { display: flex; }
}

/* ===== 京东式放大镜：鼠标悬停大图右侧显示放大图（仅电脑版 ≥1025px，新增） ===== */
.img-zoom-panel {
  display: none;
  position: absolute;
  left: calc(100% + 12px);
  top: 0;
  width: 380px;
  height: 380px;
  background-repeat: no-repeat;
  background-size: 950px 950px; /* 2.5 倍放大 */
  background-color: #fff;
  transition: none; /* 禁用任何过渡动画，保证鼠标移动与放大图完全同步 */
  border: 1px solid #eee;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  z-index: 20;
  border-radius: 4px;
}
@media (max-width: 1024px) {
  .img-zoom-panel { display: none !important; }
}

/* 支付确认框商品缩略图：有封面图时显示图片（2026-08-29 新增） */
.jd-thumb[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 底部弹窗：内容不超过屏幕时自动延伸高度（无滚动条），超过屏幕才滚动（2026-08-29 新增） */
@media (max-width: 1024px) {
  .mask .modal,
  .mask.jd-mask .jd-modal {
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* 底部弹窗按钮区：内容滚动时按钮始终固定在弹窗底部完整显示（2026-08-29 新增） */
@media (max-width: 1024px) {
  .mask .modal .modal-foot,
  .mask.jd-mask .jd-modal .modal-foot {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 5;
    padding-top: 10px;
  }
}

/* 详情页弹窗：数量按钮左侧库存（电脑版显示，手机隐藏） */
.dtl-stock { color: var(--text2); font-size: 13px; margin-right: 4px; }
@media (max-width: 1024px) {
  .dtl-stock { display: none; }
}

/* 商品列表价格字号 = 商品名称字号 + 5px（2026-08-31 老板要求） */
.goods-price { font-size: 19px; color: #ff0f23; }
@media (max-width: 450px) {
  .goods-price { font-size: 18px; }
}

/* ===== 详情页顶部：独立面包屑 + 商家信息条（2026-08-31 老板要求） ===== */
/* 面包屑单独左上角，距顶部导航栏 5px */
body.detail .crumb { padding: 5px 0 10px; }
/* 商家信息条：左商家卡 + 右客服/搜索，两端抵满 */
.shop-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.shop-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.shop-info-logo {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e5ecf3;
  flex-shrink: 0;
}
.shop-info-text { min-width: 0; }
.shop-info-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-info-addr {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-info-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* 手机版：隐藏面包屑与商家信息条（原 crumb-row 隐藏规则迁移） */
@media (max-width: 450px) {
  body.detail .crumb { display: none; }
  .shop-info-bar { display: none; }
}

/* ===== 手机版详情页店铺信息卡（大图卡片与商品介绍之间，2026-08-31） ===== */
.detail-shop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.detail-shop-logo {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e5ecf3;
  flex-shrink: 0;
}
.detail-shop-text { flex: 1; min-width: 0; }
.detail-shop-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-shop-addr {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 电脑版：隐藏中间店铺卡（顶部已有商家信息条，避免重复） */
@media (min-width: 1025px) {
  .detail-shop-card { display: none !important; }
}

/* 电脑版商品详情页商家信息条主容器：去掉边框阴影，保持白色（2026-08-31） */
.shop-info-bar {
  box-shadow: none;
}

/* 商城主容器：老板指定 margin（2026-08-31） */
.main {
  margin: 1px 0;
}

/* 商家店铺页手机版：复用手机版商城搜索框样式（与 body.home 一致，2026-08-31） */
@media (max-width: 450px) {
  body.store-page { background: #f4f4f4 !important; }
  body.store-page .topbar { display: none !important; }
  body.store-page .search-row { display: flex !important; margin: 1px 0 0 !important; padding: 1px 8px; height: auto; justify-content: center; background: #fff; }
  body.store-page .goods-area { background: #fffafb; }
  body.store-page .search-row .sub-nav-logo { display: none !important; }
  body.store-page .search-row .store-search { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; margin: 0 !important; }
  body.store-page .store-search .search-go { display: block; }
  body.store-page .store-search .search-clear { right: 66px; }
  body.store-page .search-row .store-search .form-input { border-radius: 6px; }
  body.store-page .search-row.sub-nav .store-search .search-go { height: 31.5px; font-size: 17px; line-height: 1; }
  body.store-page .search-row.sub-nav .store-search .search-clear { right: 68px; top: 9px; }
}

/* ===== 商家店铺页搜索框：与首页搜索框完全解耦（独立类，2026-08-31） ===== */
body.store-page .store-search { position: relative; width: 300px; flex: 0 0 300px; margin-left: auto; margin-right: 8px; display: flex; flex-wrap: wrap; align-items: center; }
body.store-page .search-row .store-search { width: 100%; max-width: 620px; flex: 0 1 620px; margin: 0; }
body.store-page .search-row.sub-nav .store-search { max-width: 500px; flex: 0 1 500px; margin: 0 auto; }
body.store-page .search-row.sub-nav .store-search.sug-open { align-self: flex-start; margin-top: 55px; }
body.store-page .search-row.sub-nav .store-search .form-input { height: 40px; border-radius: 6px; }
body.store-page .search-row.sub-nav .store-search .search-go { height: 30px; border-radius: 6px; line-height: 30px; padding: 0 12px; font-size: 13px; }
body.store-page .search-row.sub-nav .store-search .search-clear { right: 58px; }
body.store-page .store-search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgba(255,68,0,.6); pointer-events: none; z-index: 1; }
body.store-page .store-search .form-input { height: 32px; width: 100%; padding: 0 96px 0 34px; border: 2px solid #ff0f23; border-radius: 4px; outline: none; font-size: 13px; color: var(--text); background: #F7FBFD; }
body.store-page .store-search .form-input:focus { border-color: #ff0f23; }
body.store-page .store-search .search-clear { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: none; background: transparent; color: rgba(255,68,0,.6); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
body.store-page .store-search .search-go { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); height: 24px; padding: 0 10px; border: none; border-radius: 3px; background: #ff0f23; color: #fff; font-size: 12px; line-height: 24px; cursor: pointer; z-index: 1; }
/* 建议下拉：店铺页独立（子项类名保留，JS 依赖） */
body.store-page .store-search .sug-drop { flex: 0 0 100%; order: 99; background: #fff; border-top: 1px solid #f2f2f2; max-height: 300px; overflow-y: auto; display: none; }
body.store-page .store-search .sug-drop .sug-item { padding: 10px 14px; font-size: 13px; color: #222; cursor: pointer; border-bottom: 1px solid #f4f4f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.store-page .store-search .sug-drop .sug-item:hover { background: #fff1eb; color: #ff0f23; }
body.store-page .store-search .sug-drop .sug-item:last-child { border-bottom: none; }
body.store-page .store-search .sug-drop .sug-item.sug-empty { color: #999; text-align: center; cursor: default; white-space: normal; border-radius: 0 0 6px 6px; }


/* 手机版店铺信息卡：整卡可点击 + 右端大箭头（2026-08-31） */
.detail-shop-card { cursor: pointer; }
.detail-shop-arrow {
  width: 22px;
  height: 22px;
  color: #c0c0c0;
  flex-shrink: 0;
}

/* ===== 2026-09-01 参数间距：电脑版 gap 10px→5px，手机版 margin-left 7px→5px ===== */
@media (min-width: 1025px) {
  .detail-params .param-row { gap: 5px; }
}
/* ===== 2026-09-01 封面图与竖排缩略图间距：20px→3px（电脑版），信息区间距保持 20px ===== */
@media (min-width: 1025px) {
  .detail-box { gap: 3px; }
  .detail-box .detail-img { margin-right: 17px; }
}

/* ===== 2026-09-01 缩略图严禁滚动条：仅电脑版（手机版/小程序不受影响） ===== */
@media (min-width: 1025px) {
  .detail-thumbs { overflow: hidden !important; max-height: none !important; }
}

/* ===== 2026-09-01 商品介绍区琴键式横向菜单：参数信息 / 图文详情 / 店铺（当页平滑滚动定位） ===== */
.key-tabs {
  display: none;
  background: #fff;
  border-bottom: 2px solid #f2f2f2;
  margin-top: 14px;
}
.key-tab {
  flex: 1;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color .2s;
}
.key-tab:hover { color: var(--jd); }
.key-tab.active { color: var(--jd); }
.key-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--jd);
  border-radius: 2px 2px 0 0;
}
.key-panel {
  background: #fff;
  border-radius: 0 0 4px 4px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.key-panel .detail-params { margin-top: 0; }
/* 电脑版参数面板：样式复用 .detail-params，独立类名解耦（2026-09-01） */
.pc-params { margin-top: 12px; padding-top: 1px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.pc-params .param-row { display: flex; gap: 5px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid #f7f7f7; }
.pc-params .param-label { color: var(--text3); width: 100px; flex-shrink: 0; }
.pc-params .param-value { color: var(--text); flex: 1; }
.key-panel .detail-intro { margin-top: 0; }
/* 琴键面板标题：左上角，竖线样式与图文详情标题一致 */
.key-panel-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--jd);
}
/* 图文详情内容宽度与参数信息对齐：去掉独立卡片的内外边距，跟随面板宽度 */
@media (min-width: 1025px) {
  .key-panel .detail-intro { padding: 0; background: transparent; }
  .key-panel .detail-intro h3 { padding-left: 8px; }
  .key-panel .detail-gallery { padding: 0; background: transparent; }
}
.key-panel .detail-gallery { margin-top: 0; }
.key-shop-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.key-shop-logo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e5ecf3;
  flex-shrink: 0;
}
.key-shop-text { flex: 1; min-width: 0; }
.key-shop-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.key-shop-addr {
  font-size: 12px;
  color: var(--text3);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.key-shop-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.key-shop-btn {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--jd);
  color: var(--jd);
  background: #fff;
}
.key-shop-btn:last-child { background: var(--jd); color: #fff; }
/* 商品推荐卡片（仅电脑版琴键菜单） */
.rec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rec-item {
  display: flex; flex-direction: column;
  border: 1px solid #f0f0f0; border-radius: 6px; overflow: hidden;
  text-decoration: none; color: inherit; transition: box-shadow .2s;
}
.rec-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.rec-img { aspect-ratio: 1/1; background-size: cover; background-position: center; }
.rec-name { font-size: 13px; line-height: 1.4; padding: 8px 10px 2px; }
.rec-price { font-size: 14px; font-weight: 700; color: var(--price); padding: 2px 10px 10px; }
/* 售后保障列表（仅电脑版琴键菜单） */
.after-sale-box { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.after-sale-item { display: flex; gap: 10px; align-items: flex-start; }
.after-sale-item svg { color: var(--jd); flex-shrink: 0; margin-top: 2px; }
.after-sale-text { display: flex; flex-direction: column; gap: 4px; }
.after-sale-text b { font-size: 14px; color: var(--text); }
.after-sale-text span { font-size: 13px; color: var(--text3); line-height: 1.5; }
/* 售后保障动态内容（商家填写：文字+图片） */
.after-sale-desc { font-size: 14px; color: var(--text2); line-height: 1.8; white-space: pre-wrap; }
.after-sale-imgs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.after-sale-imgs img { display: block; width: 100%; max-width: 640px; border-radius: 6px; object-fit: contain; }
/* 手机版售后保障区块（图文详情下方） */
.after-sale-mobile { background: #fff; margin: 12px 0; padding: 14px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.after-sale-mobile-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding-left: 8px; border-left: 3px solid var(--jd); }
/* 琴键菜单仅电脑版（≥1025px）生效：吸顶固定，内容照样滚动；手机版保持原结构 */
@media (min-width: 1025px) {
  .key-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 200;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
  }
  .key-panel { scroll-margin-top: 52px; }
  .key-panel-title { scroll-margin-top: 52px; }
}

/* 手机版琴键菜单 + 琴键面板：复用电脑版（2026-09-02）：吸顶固定、排一行不换行 */
@media (max-width: 1024px) {
  .key-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 200;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    margin-top: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .key-tabs::-webkit-scrollbar { display: none; }
  .key-tab { flex: 1 0 auto; white-space: nowrap; padding: 10px 0; font-size: 13px; }
  .key-panel { padding: 12px 12px; }
  #secRecommend, #secShop, #secParams { padding-top: 10px; padding-bottom: 10px; }
  .key-panel-title { scroll-margin-top: 46px; }
  .pc-params { grid-template-columns: 1fr; }
  .rec-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .detail-similar { margin: 12px 10px; }
  .detail-similar .goods-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}


/* ===== 电脑版详情页（≥1025px）：封面图容器（缩略图+大图）与信息区 7:3，参数单列 ===== */
@media (min-width: 1025px) {
  .detail-cover { display: flex; gap: 20px; flex: 6; min-width: 0; }
  .detail-box > .detail-info { flex: 4; min-width: 0; }
  .detail-cover .detail-img { width: auto; flex: 1; min-width: 0; }
  .detail-cover .detail-thumbs { flex-shrink: 0; }
  .detail-box .detail-params { grid-template-columns: 1fr; }
}


/* ===== 电脑版详情页：右侧信息区整屏固定（京东式），下方详情区 60% 宽 ===== */
@media (min-width: 1025px) {
  .detail-main { display: flex; align-items: flex-start; gap: 15px; }
  .detail-left { flex: 6; min-width: 0; }
  .detail-right { flex: 4; min-width: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
  .detail-right .detail-info { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .detail-right .detail-info::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .detail-right .detail-name,
  .detail-right .detail-tags,
  .detail-right .detail-price-box { flex-shrink: 0; }
  .detail-right .detail-params { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; grid-template-columns: 1fr; }
  .detail-right .detail-params::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .detail-right .detail-buy-bar { flex-shrink: 0; background: #fff; padding-top: 12px; padding-bottom: 15px; margin-top: auto; z-index: 5; position: sticky; bottom: 0; }
}
@media (max-width: 1024px) {
  .detail-right { display: none; }
}


/* ===== 电脑版详情页：左侧主图区左右内边距与琴键容器(key-panel 14px 16px)对齐，从上到下宽度一致 ===== */
@media (min-width: 1025px) {
  .detail-left .detail-box { padding: 14px 0; }
}


/* ===== 电脑版详情页：琴键详情区块（商品推荐→售后保障）左右内边距去除 ===== */
@media (min-width: 1025px) {
  .detail-left .key-panel { padding-left: 0; padding-right: 0; }
}


/* ===== 电脑版详情页：右侧信息区各区块左右内边距去除 ===== */
@media (min-width: 1025px) {
  .detail-right .detail-info,
  .detail-right .detail-name,
  .detail-right .detail-tags,
  .detail-right .detail-price-box,
  .detail-right .detail-params,
  .detail-right .detail-buy-bar { padding-left: 0; padding-right: 0; }
}


/* ===== 电脑版详情页：底部同类目推荐区（6列两排，样式同首页，仅电脑版） ===== */
@media (min-width: 1025px) {
  .detail-similar { background: #fff; border-radius: 4px; padding: 14px 16px; margin-top: 14px; }
  .detail-similar .goods-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
}
@media (max-width: 1024px) {
  .detail-similar { display: none !important; }
}


/* ===== 商品参数字段名称：加粗 + 颜色加深（字号不变，商城电脑版/手机版共用） ===== */
.param-label,
.pc-params .param-label { font-weight: 600; color: var(--text2); }


/* ===== 立即购买按钮背景色：改为 #ff475d（2026-09-02） ===== */
.action-btn.buy { background: #ff475d; }


/* ===== 电脑版详情页：底部按钮容器上下内边距统一15px，去除多余内外边距（按钮自身不变） ===== */
@media (min-width: 1025px) {
  .detail-right .detail-buy-bar { padding: 10px 0; margin: 0; }
  .detail-right .detail-intro-actions { padding-top: 0; margin-top: 0; }
}


/* ===== 店铺信息卡：进店逛逛按钮去除蓝色背景，与联系客服一致（白底蓝字蓝边框，2026-09-02） ===== */
.key-shop-btn:last-child { background: #fff; color: var(--jd); }

/* ===== 分类视图：一级分类圆形按钮分页（每页2排x6、强制不换行、上图下文、名称截断），2026-09-02 ===== */
#catbar {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#catbar::-webkit-scrollbar { display: none; }
.cat-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 每行5个 */
  gap: 4px;
  padding: 10px 0 14px; /* 左右无内边距：两端抵满 */
  box-sizing: border-box;
}
.cat-page-item { text-align: center; padding: 6px 0; cursor: pointer; }
.cat-page-ico {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff; /* 按钮内部背景白色（图片图标底部） */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.cat-page-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-page-name {
  display: block;
  font-size: 12px;
  color: #666;
  line-height: 1.3;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-page-item.active .cat-page-name { color: #ff8c00; font-weight: 600; }
.cat-page-item:hover .cat-page-name { color: #ff8c00; } /* 悬停橙色 */
.cat-page-item.active .cat-page-ico { border-color: #ff8c00; } /* 激活边框橙色 */
.cat-page-item:hover .cat-page-ico { border-color: #ff8c00; } /* 悬停边框橙色 */
/* PC 端：顶部圆形分类条隐藏，分类导航用侧边树 */
@media (min-width: 1025px) {
  #catbar { display: none; }
}

/* 分类视图（tab=cat）：手机端显示顶部分类圆钮条（覆盖手机版隐藏规则） */
body.cat-view .catbar { display: block; }

.cat-page-char {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.cat-page-name {
  display: block;
  font-size: 12px;
  color: #666;
  line-height: 1.3;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-page-item.active .cat-page-name { color: #ff8c00; font-weight: 600; }
.cat-page-item:hover .cat-page-name { color: #ff8c00; } /* 悬停橙色 */

/* 分类视图（tab=cat）：隐藏纯文字下拉分类模块，仅保留圆形按钮组（2026-09-02） */
body.cat-view .m-cat-bar { display: none !important; }

/* 手机版分组标题分类名可点击（点二级/三级当页筛选该分类商品） */
.mobile-group-title .cat-title-link { color: var(--jd); cursor: pointer; }
.mobile-group-title .cat-title-link:hover { color: var(--jd-dark); }
.mobile-group-title .cat-title-sep { color: var(--text3); margin: 0 2px; }

/* ===== 首页三栏（PC>=1025px）：分类 / 轮播图 / 商品推荐（京东淘宝式，2026-09-02 新增） ===== */
.hd3 { display: flex; align-items: stretch; gap: 15px; margin: 10px 0 15px; }
@media (max-width: 1024px) { .hd3 { display: none; } }
.hd3-cats { flex: 0 0 20%; position: relative; background: #f2f2f2; border: 1px solid var(--border); border-radius: 12px; overflow: visible; min-height: 240px; }
.hd3-cats-body { height: 100%; overflow-y: auto; border-radius: 12px; }
.hd3-cat-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 11px 12px; border-bottom: 1px solid #e2e2e2; font-size: 14px; }
.hd3-cat-row:hover { background: #f7fafd; }
.hd3-cat-row .hd3-c2 { color: #333; font-weight: 400; }
.hd3-cat-row .hd3-sep { color: #333; }
.hd3-cats-panel { position: absolute; left: 100%; top: 0; bottom: 0; width: 738px; background: #fff; border: none; outline: 2px solid #e1251b; outline-offset: 0; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); z-index: 9999; display: none; overflow: hidden; }
.hd3-p-cols { display: block; padding: 10px 14px; }
.hd3-p-col { display: flex; align-items: flex-start; gap: 12px; padding: 8px 2px; border-bottom: 1px solid #f3f4f6; }
.hd3-p-c2 { flex: 0 0 auto; min-width: 96px; font-weight: 700; font-size: 14px; line-height: 24px; }
.hd3-p-c2 a { color: #222; text-decoration: none; }
.hd3-p-c2 a:hover { color: var(--jd); }
.hd3-p-c3 { flex: 1; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-bottom: 0; line-height: 24px; }
.hd3-p-c3 a { color: #666; font-size: 12px; text-decoration: none; white-space: nowrap; }
.hd3-p-c3 a:hover { color: var(--jd); }
.hd3-banner { flex: 1 1 60%; min-width: 0; aspect-ratio: 100 / 40; background: #f2f4f7; border-radius: 12px; overflow: hidden; position: relative; }
.hd3-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.hd3-slide.on { opacity: 1; z-index: 1; }
.hd3-slide a, .hd3-slide img { display: block; width: 100%; height: 100%; }
.hd3-slide img { object-fit: cover; }
.hd3-ph { display: block; width: 100%; height: 100%; }
.hd3-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 5; }
.hd3-dots i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.55); cursor: pointer; }
.hd3-dots i.on { background: #fff; }
.hd3-side { flex: 0 0 20%; display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.hd3-side-item { flex: 1 1 0; min-height: 0; position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background-color: #f2f4f7; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.hd3-side-link { position: absolute; inset: 0; z-index: 2; display: block; }
.hd3-side-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; line-height: 1.5; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd3-side-empty { background: #f7f8fa; }
.hd3-side-empty { background: #f7f8fa; }

/* 首页三栏：垂直滚动条变细（分类容器/分类展示框） */
.hd3-cats-body::-webkit-scrollbar,
.hd3-panel-scroll::-webkit-scrollbar { width: 6px; }
.hd3-cats-body::-webkit-scrollbar-track,
.hd3-panel-scroll::-webkit-scrollbar-track { background: transparent; }
.hd3-cats-body::-webkit-scrollbar-thumb,
.hd3-panel-scroll::-webkit-scrollbar-thumb { background: #d6d6d6; border-radius: 3px; }
.hd3-cats-body::-webkit-scrollbar-thumb:hover,
.hd3-panel-scroll::-webkit-scrollbar-thumb:hover { background: #bfbfbf; }

/* 展示框内部滚动容器：滚动条内置留白，不贴红框、不出框 */
.hd3-panel-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 0 8px 0 2px; }

/* 首页左侧分类行：二级分类名可点击跳转 */
.hd3-cat-row a.hd3-c2 { text-decoration: none; }
.hd3-cat-row a.hd3-c2:hover { color: #e1251b; }

/* 商品卡片店铺行：LOGO+名称（2026-09-03，位于价格下方：无左右下边距，仅上 10px 与价格间距，左对齐，店名可换行行距3px） */
.goods-shop { margin-top: 10px; display: flex; align-items: center; gap: 3px; text-align: left; }
.goods-shop-logo { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; object-fit: cover; }
.goods-shop-name { font-size: 12px; line-height: 15px; color: #999; min-width: 0; word-break: break-all; }

/* ===== 电脑版首页搜索框下方热词（2026-09-03，hkw- 前缀全站唯一；仅 ≥1025px 电脑版显示，不改动搜索框任何既有规则） ===== */
.hkw-box { display: none; }
@media (min-width: 1025px) {
  .hkw-box {
    position: absolute;
    left: 50%;
    top: calc(50% + 25px);
    transform: translateX(-50%);
    width: 500px;
    max-width: 90%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 5px;
    overflow: hidden;
    background: transparent;
    border: none;
  }
  .hkw-item {
    flex: 0 1 auto;
    min-width: 0;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.4;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hkw-item:hover { color: #ff0f23; }
}

/* ===== 电脑版首页：搜索框下拉展开时隐藏热词，避免遮挡建议列表（2026-09-03，不改搜索框任何样式，仅热词响应） ===== */
.search-row.sub-nav .top-search.sug-open ~ .hkw-box { display: none; }

/* ===== 电脑版首页搜索框右侧广告（2026-09-03，hda- 前缀全站唯一；仅 ≥1025px 显示，无广告零占位、透明背景、自动缩放） ===== */
.hda-box { display: none; }
@media (min-width: 1025px) {
  .hda-box.on {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% + 340px); /* 搜索框右缘(中心+250) + 90px */
    top: 50%;
    transform: translateY(-50%);
    max-width: 350px; /* 宽由120→350（2026-09-03），高度不变 */
    max-height: 120px;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    padding: 20px 0; /* 上下内边距 20px，左右不变 */
    margin: 0;
    overflow: hidden;
    z-index: 5;
  }
  .hda-box img,
  .hda-box video {
    max-width: 350px; /* 宽上限 350px */
    max-height: 80px; /* 容器上下内边距各 20px，可见高度上限 120-40=80，避免抵满/裁切 */
    border-radius: 6px; /* 上传的图片/视频 6px 圆角 */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
    border: none;
  }
  /* 广告跳转包裹层（商品/分类/链接），不影响容器与媒体约束 */
  .hda-box a.hda-link {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 350px; /* 与容器/媒体同宽上限 */
    max-height: 120px;
    text-decoration: none;
    background: transparent;
    border: none;
    outline: none;
  }
}