/* ==========================================================================
 * earchshop.com —— JD-Mode（京东风格皮肤）
 * 说明：本文件在 app.css 之后加载，只做“布局模式 + 外观”改造，
 *       不改动 app.css，避免影响其它页面的既有样式。
 * 结构：
 *   1. 设计令牌覆盖（品牌主色 → 京东红）
 *   2. 顶部细条 .jd-topbar
 *   3. 搜索头   .jd-head
 *   4. 主导航   .jd-nav + 分类大菜单 .jd-mega
 *   5. 右侧悬浮工具条 .jd-float
 *   6. 首屏三栏 .jd-hero（分类树 / 轮播 / 侧栏卡）
 *   7. 服务保障条 .jd-promise
 *   8. 楼层 .jd-floor + 京东式商品卡 .jd-card + 榜单 .jd-rank + 秒杀 .jd-flash
 *   9. 页脚增强
 *  10. 响应式 + 暗色主题
 * ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 京东线上样式表实测色值：主红 #ff0f23，深红 #d20011，次红 #e1251b（选中/激活），浅红底 #ffebf1 */
  --jd-red: #ff0f23;
  --jd-red-d: #d20011;
  --jd-red-alt: #e1251b;
  --jd-red-l: #ffebf1;
  --jd-ink: #1a1a1a;
  --jd-ink-2: #333;
  --jd-gray: #999;
  --jd-gray-2: #666;
  --jd-line: #eee;
  --jd-line-2: #f4f4f4;
  /* 京东 body 是白底，模块用 #f7f8fc 浅灰卡 */
  --jd-bg: #ffffff;
  --jd-radius: 8px;

  /* 京东首页是流式版心：body.new_version .w { padding:0 54px; min-width:1180px; max-width:1708px }
     故 1680px 视口下内容净宽 ≈ 1572px */
  --maxw: 1708px;
  --gx: 54px;

  /* 顶部细条（对应京东 #shortcut）配色 */
  --jd-sc-bg: #e3e4e5;
  --jd-sc-fg: #999;
  --jd-sc-line: #ddd;

  /* 覆盖站点主色，使全站按钮/高亮统一为京东红 */
  --c-brand: #ff0f23;
  --c-brand-2: #ff5a4e;
  --c-brand-soft: #ffebf1;
  --sh-brand: 0 8px 24px rgba(255, 15, 35, .22);

  /* 京东常用中性色与阴影 */
  --jd-ink-3: #505259;
  --jd-gray-3: #828794;
  --jd-bg-soft: #f7f8fc;
  --jd-line-soft: rgba(0, 0, 0, .059);
  --sh-card: 0 4px 10px rgba(0, 0, 0, .1);
  --sh-elevator: -2px 0 30px 2px rgba(97, 105, 119, .18);
}

body.page-front {
  background: var(--jd-bg);
}

/* 全局价格红（京东惯例） */
.p-card-price .price-now,
.jd-card-price .now {
  color: var(--jd-red);
}

/* ---------- 2. 顶部细条（对齐京东 #shortcut：30px 灰条 / 12px #999） ---------- */
.jd-topbar {
  background: var(--jd-sc-bg);
  border-bottom: 1px solid var(--jd-sc-line);
  font-size: 12px;
  color: var(--jd-sc-fg);
  height: 30px;
}

.jd-topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  gap: 10px;
}

.jd-topbar-l,
.jd-topbar-r {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jd-top-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--jd-sc-fg);
  white-space: nowrap;
  line-height: 30px;
  transition: color .15s;
}

.jd-top-link:hover {
  color: var(--jd-red);
}

.jd-top-link.is-hot {
  color: var(--jd-red);
}

.jd-top-sep {
  width: 1px;
  height: 12px;
  background: #ddd;
}

.jd-top-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jd-top-loc .ico {
  color: var(--jd-red);
}

/* 顶栏购物车（京东把购物车放在顶部细条右侧） */
.jd-top-cart {
  color: var(--jd-red);
}

.jd-top-cart-num {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 8px;
  background: var(--jd-red);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
}

/* 头部/导航切换器与下拉在商务风皮肤下的收敛 */
.jd-topbar .switcher {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--jd-gray-2);
  height: auto;
  min-height: 0;
  gap: 4px;
}

.jd-topbar .switcher:hover {
  color: var(--jd-red);
}

/* ---------- 3. 搜索头 ---------- */
.jd-head {
  background: #fff;
  border-bottom: 1px solid var(--jd-line);
  position: relative;
  z-index: 40;
}

/* 京东 #header .w 高 134px：logo(240×70, top:32) 与搜索框(44 高, top:45)
   两者的中心都落在 67px，即整体垂直居中于 134px */
.jd-head-in {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 134px;
  /* 左右沿用 .container 的 --gx，保证与导航栏、首屏左对齐 */
  padding-top: 0;
  padding-bottom: 0;
}

.jd-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
}

.jd-logo .logo-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--jd-red), #ff6a5e);
  color: #fff;
  box-shadow: 0 6px 16px rgba(225, 37, 27, .25);
}

.jd-logo .logo-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--jd-red);
  line-height: 1;
}

.jd-logo .logo-text small {
  font-size: 13px;
  font-weight: 600;
  color: var(--jd-gray);
  margin-left: 2px;
}

/* 京东 .search-m .form：旧版固定 784px，新版 width: calc(100% - 560px) */
.jd-search {
  flex: 1 1 auto;
  min-width: 420px;
  max-width: 1012px;
  position: relative;
}

/* 京东 .search-m .form：44px 高、2px #ff0f23 边框、8px 圆角 */
.jd-search-box {
  display: flex;
  align-items: center;
  height: 44px;
  padding-right: 2px;
  border: 2px solid var(--jd-red);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.jd-search-cat {
  border: 0;
  background: #fff;
  color: var(--jd-ink-2);
  font-size: 13px;
  padding: 0 8px 0 12px;
  max-width: 150px;
  outline: none;
  border-right: 1px solid var(--jd-line);
  cursor: pointer;
}

.jd-search-box input[type="search"] {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  padding: 0 12px;
  font-size: 14px;
  color: var(--jd-ink);
  min-width: 0;
  background: transparent;
}

.jd-search-cam {
  border: 0;
  background: transparent;
  color: var(--jd-gray);
  padding: 0 8px;
  cursor: pointer;
}

.jd-search-cam:hover {
  color: var(--jd-red);
}

/* 京东 .search-m .button：80×36、6px 圆角、16px/600、红底白字，内嵌于 form 右上 */
.jd-search-btn {
  border: 0;
  background: var(--jd-red);
  color: #fff;
  width: 80px;
  height: 36px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .2s ease;
}

.jd-search-btn:hover {
  background: var(--jd-red-d);
}

/* 京东输入框 14px / 左内边距 19px；分类下拉为灰色文字、无分隔线 */
.jd-search-cat {
  font-size: 14px;
  height: 36px;
  border-right: 0;
  color: var(--jd-gray-2);
}

.jd-search-box input[type="search"] {
  font-size: 14px;
  padding: 0 19px;
}

/* 京东 #hotwords：14px、#505259、间距 12px */
.jd-search-hot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--jd-gray);
  overflow: hidden;
  white-space: nowrap;
}

.jd-search-hot a {
  color: #505259;
}

.jd-search-hot a:hover {
  color: var(--jd-red);
}

.jd-search-hot .hot-tag {
  color: var(--jd-red);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* 右侧：AI 入口（对应京东搜索框右侧的「京言AI」） */
.jd-head-aside {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.jd-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid #ffd7d4;
  border-radius: 18px;
  background: #fff;
  color: var(--jd-red);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .18s, box-shadow .18s;
}

.jd-ai-btn:hover {
  border-color: var(--jd-red);
  box-shadow: 0 2px 10px rgba(225, 37, 27, .12);
}

.jd-ai-btn .ico {
  color: var(--jd-red);
}

/* 搜索框右侧红色活动卡（对应京东「人人有奖抽红包」位） */
.jd-promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 46px;
  padding: 0 16px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff5a4e, var(--jd-red));
  color: #fff;
  line-height: 1.15;
  box-shadow: 0 4px 12px rgba(225, 37, 27, .25);
}

.jd-promo-card b {
  font-size: 14px;
  font-weight: 800;
}

.jd-promo-card span {
  font-size: 11px;
  opacity: .9;
}

/* 京东「我的购物车」：与搜索框同高，白底浅灰边 + 红字，直角 */
.jd-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: 0;
  background: #fff;
  color: var(--jd-red);
  font-size: 13px;
  font-weight: 400;
  position: relative;
  transition: border-color .18s, box-shadow .18s;
}

.jd-cart-btn:hover {
  border-color: var(--jd-red);
  box-shadow: 0 2px 10px rgba(225, 37, 27, .12);
}

.jd-cart-btn .badge-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--jd-red);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.jd-head-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--jd-gray);
}

.jd-head-links a {
  color: var(--jd-gray-2);
}

.jd-head-links a:hover {
  color: var(--jd-red);
}

/* ---------- 4. 主导航 ---------- */
.jd-nav {
  background: #fff;
  border-bottom: 2px solid var(--jd-red);
  position: sticky;
  top: 0;
  z-index: 35;
}

/* 京东 #navitems：整条高 48px（a 也是 48px/48px） */
.jd-nav-in {
  display: flex;
  align-items: center;
  gap: 0;
  height: 48px;
}

/* 京东新版导航为纯文字链接（不再使用红底「全部商品分类」块） */
.jd-nav-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: 48px;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .2s ease;
}

.jd-nav-all:hover {
  color: var(--jd-red);
}

.is-stuck .jd-nav-all:hover {
  background: var(--jd-red-d);
}

/* 京东 #navitems > div 为 overflow:auto（可横向滚动），滚动条隐藏 */
.jd-nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.jd-nav-links::-webkit-scrollbar {
  display: none;
}

/* 京东 #navitems a：48px 行高、16px、weight 600、#1a1a1a，hover 转 #ff0f23 */
.jd-nav-links a {
  padding: 0 15px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  transition: color .2s ease;
}

.jd-nav-links a:hover {
  color: var(--jd-red);
}

.jd-nav-links a.is-hot {
  color: var(--jd-red);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 分类大菜单（下拉面板） */
.jd-mega-wrap {
  position: relative;
}

/* 导航「全部分类」下拉：京东式大面板（组名左定宽 + 子项横向流式） */
.jd-mega {
  position: absolute;
  /* 导航条已改为 48px 高 */
  top: 48px;
  left: 0;
  width: 920px;
  max-width: calc(100vw - 40px);
  max-height: 470px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--jd-red);
  border-top: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  display: none;
  /* 覆盖 app.css 的 .mega（grid + 260px 第二列），否则面板内部会被切成两栏 */
  grid-template-columns: none;
  padding: 0;
  z-index: 60;
}

.jd-mega.is-open {
  display: block;
}

.jd-mega-item {
  position: relative;
}

.jd-mega-item > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 30px;
  font-size: 13px;
  color: var(--jd-ink-2);
  white-space: nowrap;
  overflow: hidden;
}

/* 图标不压缩；名称单行省略 —— 长分类名换行会溢出 34px 行高，与相邻项文字重叠 */
.jd-mega-item > a > span:first-child {
  flex: 0 0 auto;
}

.jd-mega-item > a > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jd-mega-item > a:hover {
  background: var(--jd-red-l);
  color: var(--jd-red);
}

.jd-mega-item > a .caret {
  margin-left: auto;
  color: var(--jd-gray);
}

.jd-mega-item.is-on > a {
  background: var(--jd-red-l);
  color: var(--jd-red);
}

/* 二级飞出面板 */
.jd-mega-fly {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 700px;
  min-height: 100%;
  background: #fff;
  border: 1px solid var(--jd-line);
  box-shadow: 6px 8px 24px rgba(0, 0, 0, .1);
  padding: 16px 20px;
}

.jd-mega-item.is-on .jd-mega-fly {
  display: block;
}

.jd-mega-fly h5 {
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--jd-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.jd-mega-fly h5 a {
  font-size: 12px;
  color: var(--jd-red);
  font-weight: 500;
}

.jd-mega-fly .fly-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
}

.jd-mega-fly .fly-links a {
  font-size: 13px;
  color: var(--jd-ink-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.jd-mega-fly .fly-links a:hover {
  color: var(--jd-red);
}

.jd-mega-fly .fly-links em {
  color: var(--jd-gray);
  font-size: 11px;
  font-style: normal;
}

/* ---------- 京东式分类大面板内容（.cp-*） ---------- */
/* 面板顶部频道标签（京东 .cate_channel_lk：padding 7px 12px / 背景 #f7f8fc /
   圆角 4px / weight 600 / hover 背景 #ffebf1 + 红字）。
   必须做成胶囊标签，否则多个标签会挤成一条无间隔的文字流并溢出面板。 */
.cp-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--jd-line-2);
}

.cp-tabs a {
  padding: 7px 12px;
  border-radius: 4px;
  background: #f7f8fc;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  color: #1a1a1a;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.cp-tabs a:hover,
.cp-tabs a.is-on {
  background: #ffebf1;
  color: var(--jd-red);
}

.cp-body {
  display: block;
  padding: 6px 16px;
}

/* 带右侧品牌/广告列的面板（对应京东 .cate_part：左内容 + 右 224px 列） */
.cp-body--split {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.cp-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* 京东 .cate_part_col2 */
.cp-ads {
  flex: 0 0 224px;
  width: 224px;
}

/* 京东 .cate_brand_lk：108×44、#e7e7e7、5px 圆角，2 列排布 */
.cp-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cp-brand {
  box-sizing: border-box;
  width: 108px;
  height: 44px;
  padding: 0 6px;
  border-radius: 5px;
  background: #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  color: #505259;
  text-align: center;
}

.cp-brand img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cp-promos {
  margin-top: 10px;
}

/* 京东 .cate_promotion_lk：104px 高、6px 圆角。
   有图则显示图片；无图退化为渐变色文字卡（对齐京东广告图的观感） */
.cp-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 104px;
  margin-bottom: 4px;
  padding: 0 14px;
  border-radius: 6px;
  background: #e7e7e7;
  color: #fff;
  overflow: hidden;
}

.cp-promo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-promo b {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.cp-promo span {
  position: relative;
  font-size: 12px;
  line-height: 1.35;
  opacity: .92;
}

/* 第 1 张红、第 2 张蓝 —— 对应京东两块广告的配色 */
.cp-promos .cp-promo:not(.is-empty) {
  background: linear-gradient(140deg, #ff5a4e, #d20011);
}

.cp-promos .cp-promo:not(.is-empty):nth-child(2) {
  background: linear-gradient(140deg, #3d86f7, #0a49c9);
}

/* 一行 = 一个分组：组名（定宽、不折行）+ 子项（横向流式） */
.cp-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 5px 0;
}

.cp-row.is-on {
  background: #fafafa;
}

/* 京东 .cate_detail_tit_content 中文只需 60px；英文分类名更长，
   取 120px 且必须 nowrap —— 否则 "Home & Garden" 会被断成两行 */
.cp-name {
  flex: 0 0 120px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-name:hover,
.cp-row.is-on .cp-name {
  color: var(--jd-red);
}

.cp-name .cp-ico {
  flex: 0 0 auto;
  font-size: 13px;
}

/* 组名后的红色箭头（京东同款） */
.cp-name .cp-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--jd-red);
}

/* 京东 .cate_detail_con_lk：padding 0 5px、margin 3px 0、16px 行高 */
.cp-links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.cp-links a {
  padding: 0 10px;
  margin: 3px 0;
  font-size: 13px;
  line-height: 16px;
  color: #505259;
  white-space: nowrap;
}

.cp-links a:hover {
  color: var(--jd-red);
}

.cp-links a.cp-all {
  color: var(--jd-red);
}

@media (max-width: 1023px) {
  .cp-body--split {
    flex-direction: column;
  }

  .cp-ads {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ---------- 5. 右侧悬浮工具条 ---------- */
/* 右侧悬浮工具条 —— 对齐京东 .elevator：
   44px 宽 / 40px 高 / 8px 左圆角 / 京东投影 / hover 整块红底白字 */
.jd-float {
  position: fixed;
  right: 0;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 0;
  border-radius: 8px 0 0 8px;
  box-shadow: var(--sh-elevator);
  overflow: hidden;
}

/* 京东 .elevator_lk：图标 20px + 8px 间距 + 12px 文字，上下 padding 10px（总高 60px）。
   宽度取 52px：京东中文 2 字只需 44px，英文标签更长，需留余量，且必须 nowrap 防折行。 */
.jd-float a,
.jd-float button {
  width: 52px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  line-height: 12px;
  white-space: nowrap;
  color: #505259;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: color .2s ease, background .2s ease;
}

.jd-float a:hover,
.jd-float button:hover {
  color: #fff;
  background: var(--jd-red);
}

.jd-float a:hover .ico,
.jd-float button:hover .ico {
  color: #fff;
}

/* 京东 .elevator svg { fill:#333 }：图标默认深灰（非红色），hover 时转白 */
.jd-float .ico {
  color: #333;
}

.jd-float .f-cart {
  position: relative;
}

/* 京东 .cart-count：#fa3f5e → #fa2549 渐变；有数量为数字胶囊，空时退化为 8px 红点 */
.jd-float .f-cart em {
  position: absolute;
  top: 4px;
  right: 4px;
  border-radius: 8px;
  background: linear-gradient(90deg, #fa3f5e -.6%, #fa2549);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  font-style: normal;
  text-align: center;
  z-index: 4;
}

.jd-float .f-cart em.has-num {
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
}

.jd-float .f-cart em.is-empty {
  width: 8px;
  height: 8px;
}

/* ---------- 6. 首屏三栏 ---------- */
.jd-hero {
  /* 京东板块间距统一 16px（#J_core margin-top:16px）；左右沿用 .container 的 --gx 保证左对齐 */
  padding-top: 16px;
}

/* 京东首屏三栏（.fs_col1/.fs_col2/.fs_col3）：
   左 252px + 中间自适应 + 右 248px，列间距 16px，列高 400px */
.jd-hero-in {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 248px;
  gap: 16px;
  align-items: stretch;
}

/* 左：分类树 */
/* 左：分类树 —— 京东 .fs_col1：背景 #f7f8fc、8px 圆角、400px 高 */
.jd-rail {
  position: relative;
  background: #f7f8fc;
  border: 0;
  border-radius: 8px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

/* 京东 .cate_menu：padding-top 8px，分类项固定 34px（不拉伸），
   项间 margin-top 1px。
   注意：overflow 必须是 visible —— 一旦设成 auto，左侧分类的飞出面板会被裁剪掉，
   导致悬停没有任何反应。 */
.jd-rail-scroll {
  flex: 1 1 auto;
  overflow: visible;
  padding-top: 8px;
}

.jd-rail-item {
  /* 刻意不设 position:relative —— 飞出面板要相对整列 .jd-rail 定位，
     与京东 .cate_pop（相对 .cate）一致；否则面板会从每个分类项各自顶部弹出 */
  margin-top: 1px;
}

.jd-rail-item:first-child {
  margin-top: 0;
}

/* 京东 .cate_menu_item：34px 行高、padding-left 18px、14px、#1a1a1a */
.jd-rail-item > a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  height: 34px;
  font-size: 14px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
}

/* 图标与计数不压缩；分类名单行省略，避免换行溢出后与相邻项重叠 */
.jd-rail-item > a .rail-ico,
.jd-rail-item > a .rail-count {
  flex: 0 0 auto;
}

.jd-rail-item > a > span:not(.rail-ico):not(.rail-count) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jd-rail-item > a .rail-ico {
  font-size: 15px;
  width: 18px;
  text-align: center;
  /* 分类图标在库里存的是 emoji，去色后收敛成京东那种灰色线性图标观感 */
  filter: grayscale(1) opacity(.6);
}

.jd-rail-item > a .rail-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--jd-gray);
}

/* 京东 .cate_menu_lk:hover 只给文字加 1.5px 红色下划线；选中项整块 #d9d9d9 */
.jd-rail-item:hover > a {
  color: var(--jd-red);
}

.jd-rail-item:hover > a > span:not(.rail-ico):not(.rail-count) {
  border-bottom: 1.5px solid var(--jd-red);
}

.jd-rail-item.is-on > a {
  background: #d9d9d9;
}

/* 二级飞出 */
.jd-rail-fly {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  /* 京东 .cate_pop：1023px 宽、1px #ff0f23 边框、8px 圆角 */
  width: 1023px;
  max-width: calc(100vw - 340px);
  min-height: 100%;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--jd-red);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
  /* 内边距交给 .cp-body--split（16px），与京东 .cate_pop/.cate_part 分工一致 */
  padding: 0;
  z-index: 30;
}

.jd-rail-item:hover .jd-rail-fly,
.jd-rail-item.is-on .jd-rail-fly {
  display: block;
}

.jd-rail-fly .fly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--jd-line-2);
  margin-bottom: 12px;
}

.jd-rail-fly .fly-head strong {
  font-size: 15px;
  color: var(--jd-ink);
}

.jd-rail-fly .fly-head a {
  font-size: 12px;
  color: var(--jd-red);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.jd-rail-fly .fly-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
}

.jd-rail-fly .fly-grid a {
  font-size: 13px;
  color: var(--jd-ink-2);
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.jd-rail-fly .fly-grid a:hover {
  color: var(--jd-red);
}

.jd-rail-fly .fly-grid em {
  color: var(--jd-gray);
  font-style: normal;
  font-size: 11px;
}

/* 中：轮播 */
/* 轮播：京东首屏大图无描边，直接贴合列宽 */
.jd-slider {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 8px;
}

.jd-slides {
  height: 100%;
  display: flex;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.jd-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
}

.jd-slide-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 64px;
  /* 左深右透的横向渐变：文字区可读，右侧保留画面主体 */
  background: linear-gradient(90deg, rgba(10, 14, 22, .72) 0%, rgba(10, 14, 22, .38) 46%, rgba(10, 14, 22, 0) 75%);
  color: #fff;
}

.jd-slide-body .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 14px;
}

.jd-slide-body .eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--jd-red);
}

.jd-slide-body h2 {
  font-size: 40px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: #fff;
  max-width: 640px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.jd-slide-body p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 22px;
  max-width: 540px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.jd-slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 46px;
  padding: 0 28px;
  border-radius: 23px;
  background: var(--jd-red);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
  box-shadow: 0 8px 20px rgba(225, 37, 27, .35);
  transition: transform .18s, box-shadow .18s, background .18s;
}

.jd-slide-btn:hover {
  background: var(--jd-red-d);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(225, 37, 27, .45);
}

.jd-slide-plain {
  display: grid;
  place-items: center;
  height: 100%;
  background: linear-gradient(135deg, #ff6a5e, #e1251b);
  color: #fff;
  text-align: center;
  padding: 30px;
}

.jd-slide-plain h2 {
  font-size: 34px;
  margin: 10px 0;
  color: #fff;
}

.jd-slide-plain p {
  font-size: 14px;
  opacity: .95;
  margin: 0 0 16px;
}

/* 轮播左右切换：京东 .slider_control 为 25×35、半圆角、黑半透明 */
.jd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 35px;
  border: 0;
  background: rgba(0, 0, 0, .15);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .2s, background-color .2s ease;
  z-index: 5;
}

.jd-slider:hover .jd-arrow {
  opacity: 1;
}

.jd-arrow:hover {
  background: rgba(0, 0, 0, .4);
}

.jd-arrow.prev {
  left: 0;
  border-radius: 0 18px 18px 0;
}

.jd-arrow.next {
  right: 0;
  border-radius: 18px 0 0 18px;
}

.jd-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}

/* 轮播指示点：京东 .slider_indicators_btn 为 4px 圆点，激活变 #e1251b */
.jd-dots button {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 0;
  background: #999;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}

.jd-dots button.active {
  background: var(--jd-red-alt);
}

/* 右：侧栏 */
.jd-side {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  height: 400px;
}

/* 京东 .userv4_container：白卡 + 8px 圆角 */
.jd-user-card {
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.jd-user-card .hello {
  font-size: 13px;
  color: var(--jd-gray-2);
  margin-bottom: 10px;
}

/* 京东右侧栏：问候语 + 活动行 + 主登录按钮 + 注册次链接 */
.jd-greet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--jd-ink);
  margin-bottom: 12px;
}

.jd-greet .ico {
  color: var(--jd-red);
}

.jd-gift-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

.jd-gift-row .g1 {
  color: var(--jd-red);
}

.jd-gift-row .g2 {
  color: #ff7a45;
}

.jd-register-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--jd-gray-2);
}

.jd-register-link:hover {
  color: var(--jd-red);
}

.jd-user-card .avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffb199, #ff5a4e);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.jd-user-card .uname {
  font-size: 14px;
  font-weight: 600;
  color: var(--jd-ink);
  margin-bottom: 10px;
}

.jd-user-card .btn-row {
  display: flex;
  gap: 8px;
}

.jd-user-card .btn-row .btn {
  flex: 1 1 0;
  justify-content: center;
  /* 京东 .no_login_btn：38px 高、6px 圆角、16px/600 */
  height: 38px;
  line-height: 38px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
}

.jd-user-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
}

.jd-user-quick a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--jd-gray-2);
}

.jd-user-quick a:hover {
  color: var(--jd-red);
}

.jd-user-quick .ico {
  color: var(--jd-red);
}

.jd-news {
  background: #fff;
  border: 1px solid var(--jd-line);
  padding: 12px 14px;
  overflow: hidden;
}

.jd-news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.jd-news-head b {
  font-size: 14px;
  color: var(--jd-ink);
}

.jd-news-head a {
  font-size: 12px;
  color: var(--jd-gray);
}

.jd-news-head a:hover {
  color: var(--jd-red);
}

.jd-news ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jd-news li a {
  font-size: 12.5px;
  color: var(--jd-gray-2);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jd-news li a:hover {
  color: var(--jd-red);
}

.jd-side-grid {
  background: #fff;
  border: 1px solid var(--jd-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--jd-line-2);
  overflow: hidden;
}

.jd-side-grid a {
  background: #fff;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--jd-gray-2);
  text-align: center;
}

.jd-side-grid a:hover {
  color: var(--jd-red);
}

.jd-side-grid .ico {
  color: var(--jd-red);
}

/* ---------- 7. 服务保障条 ---------- */
.jd-promise {
  margin: 12px 0 0;
  background: #fff;
  border: 1px solid var(--jd-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jd-promise .pr-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 8px;
  border-right: 1px solid var(--jd-line-2);
  font-size: 13px;
  color: var(--jd-ink-2);
}

.jd-promise .pr-item:last-child {
  border-right: 0;
}

.jd-promise .pr-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--jd-red-l);
  color: var(--jd-red);
  flex: 0 0 auto;
}

.jd-promise b {
  display: block;
  font-size: 14px;
  color: var(--jd-ink);
}

.jd-promise small {
  color: var(--jd-gray);
  font-size: 12px;
}

/* ---------- 8. 楼层 ---------- */
.jd-floor {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--jd-line);
}

.jd-floor-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--jd-line-2);
}

.jd-floor-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--jd-ink);
  letter-spacing: -.2px;
}

.jd-floor-title .bar {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--jd-red);
}

.jd-floor-sub {
  font-size: 13px;
  color: var(--jd-gray);
  font-weight: 400;
}

.jd-floor-tabs {
  display: flex;
  gap: 18px;
  margin-left: 6px;
}

.jd-floor-tabs button {
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--jd-gray-2);
  padding: 4px 0;
  cursor: pointer;
  position: relative;
  font-weight: 500;
}

.jd-floor-tabs button.active {
  color: var(--jd-red);
  font-weight: 700;
}

.jd-floor-tabs button.active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--jd-red);
}

.jd-floor-more {
  margin-left: auto;
  font-size: 13px;
  color: var(--jd-gray-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jd-floor-more:hover {
  color: var(--jd-red);
}

.jd-floor-body {
  padding: 14px 18px 18px;
}

.jd-floor-body.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
}

.jd-pane {
  display: none;
}

.jd-pane.active {
  display: block;
}

/* 商品网格 */
.jd-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.jd-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jd-grid.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 京东式商品卡 */
.jd-card {
  background: #fff;
  border: 1px solid transparent;
  padding: 8px;
  position: relative;
  transition: box-shadow .2s, border-color .2s, transform .2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.jd-card:hover {
  border-color: var(--jd-red);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
  z-index: 2;
}

.jd-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  border-radius: 2px;
}

.jd-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .35s;
}

.jd-card:hover .jd-card-media img {
  transform: scale(1.05);
}

.jd-card-tags {
  position: absolute;
  left: 2px;
  top: 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.jd-tag {
  font-size: 11px;
  line-height: 1.5;
  padding: 0 5px;
  border-radius: 2px;
  background: var(--jd-red);
  color: #fff;
  font-weight: 600;
}

.jd-tag.is-light {
  background: var(--jd-red-l);
  color: var(--jd-red);
  border: 1px solid #ffd7d4;
}

.jd-tag.is-dark {
  background: #333;
}

.jd-tag.is-green {
  background: #17a34a;
}

.jd-card-off {
  position: absolute;
  right: 2px;
  top: 2px;
  background: var(--jd-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
}

.jd-card-fav {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border: 0;
  background: rgba(255, 255, 255, .9);
  color: var(--jd-gray);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s, color .2s;
}

.jd-card:hover .jd-card-fav {
  opacity: 1;
}

.jd-card-fav:hover,
.jd-card-fav.is-on {
  color: var(--jd-red);
}

.jd-card-body {
  padding: 8px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
}

.jd-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--jd-red);
  font-weight: 800;
}

.jd-card-price .now {
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.3px;
}

.jd-card-price .unit {
  font-size: 12px;
  color: var(--jd-gray);
  font-weight: 400;
}

.jd-card-price .was {
  margin-left: auto;
  font-size: 12px;
  color: var(--jd-gray);
  font-weight: 400;
  text-decoration: line-through;
}

.jd-card-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--jd-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

.jd-card-title:hover {
  color: var(--jd-red);
}

.jd-card-title em {
  color: var(--jd-red);
  font-style: normal;
}

.jd-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--jd-gray);
}

.jd-card-meta .sold {
  margin-left: auto;
}

.jd-card-shop {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--jd-gray-2);
  border-top: 1px dashed var(--jd-line-2);
  padding-top: 6px;
  margin-top: auto;
}

.jd-card-shop .sup {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.jd-card-shop .verify {
  color: var(--jd-red);
  display: inline-flex;
}

.jd-card-shop .cc-chip {
  margin-left: auto;
}

/* 榜单 */
.jd-rank {
  border: 1px solid var(--jd-line);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.jd-rank-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--jd-line-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--jd-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.jd-rank-head .ico {
  color: var(--jd-red);
}

.jd-rank-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  flex: 1 1 auto;
}

.jd-rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}

.jd-rank-item:hover {
  background: var(--jd-red-l);
}

.jd-rank-no {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: #f0f0f0;
  color: var(--jd-gray-2);
  flex: 0 0 auto;
}

.jd-rank-item:nth-child(1) .jd-rank-no {
  background: var(--jd-red);
  color: #fff;
}

.jd-rank-item:nth-child(2) .jd-rank-no {
  background: #ff7043;
  color: #fff;
}

.jd-rank-item:nth-child(3) .jd-rank-no {
  background: #ffa726;
  color: #fff;
}

.jd-rank-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

.jd-rank-info {
  min-width: 0;
}

.jd-rank-info .t {
  font-size: 12.5px;
  color: var(--jd-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jd-rank-info .p {
  color: var(--jd-red);
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}

/* 秒杀/特价板块 */
.jd-flash {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1px;
  background: #fff;
  border: 1px solid var(--jd-line);
  overflow: hidden;
}

.jd-flash-main {
  background: linear-gradient(160deg, var(--jd-red), #ff5a4e);
  color: #fff;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.jd-flash-main .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: rgba(255, 255, 255, .22);
  padding: 3px 10px;
  border-radius: 12px;
  align-self: flex-start;
}

.jd-flash-main h3 {
  font-size: 24px;
  margin: 0;
  color: #fff;
}

.jd-flash-main p {
  font-size: 13px;
  opacity: .95;
  margin: 0;
}

.jd-flash-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-top: 4px;
}

.jd-flash-clock span {
  background: rgba(0, 0, 0, .3);
  border-radius: 3px;
  padding: 2px 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jd-flash-list {
  padding: 12px;
}

/* 分类楼层：类目导航条 */
.jd-catstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 12px;
}

.jd-catstrip a {
  font-size: 13px;
  color: var(--jd-ink-2);
  background: var(--jd-line-2);
  border-radius: 14px;
  padding: 4px 12px;
}

.jd-catstrip a:hover {
  background: var(--jd-red-l);
  color: var(--jd-red);
}

/* 通用区块壳 */
.jd-wrap {
  padding: 12px 0 0;
}

/* 加载更多 */
.jd-more-btn {
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 26px;
  border: 1px solid var(--jd-line);
  border-radius: 20px;
  background: #fff;
  color: var(--jd-ink-2);
  font-size: 14px;
  cursor: pointer;
  transition: all .18s;
}

.jd-more-btn:hover {
  border-color: var(--jd-red);
  color: var(--jd-red);
}

/* 卖家 CTA（京东式横幅） */
.jd-cta {
  margin-top: 18px;
  background: linear-gradient(120deg, #1c1c1c, #3a3a3a);
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.jd-cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
}

.jd-cta h2 {
  font-size: 22px;
  margin: 0 0 6px;
  color: #fff;
}

.jd-cta p {
  margin: 0;
  font-size: 13.5px;
  opacity: .85;
}

.jd-cta .btn {
  flex: 0 0 auto;
}

/* ---------- 9. 页脚增强 ---------- */
.jd-foot-promise {
  background: #fff;
  border-bottom: 1px solid var(--jd-line);
}

.jd-foot-promise .in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 同上：保留 .container 的左右内边距，使保障带与页脚其余列对齐 */
  padding-top: 20px;
  padding-bottom: 20px;
}

.jd-foot-promise .it {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--jd-ink-2);
}

.jd-foot-promise .it .ico {
  color: var(--jd-red);
}

.site-footer {
  margin-top: 0;
}

/* ---------- 10. 响应式 ---------- */
@media (max-width: 1279px) {
  .jd-hero-in {
    grid-template-columns: 252px minmax(0, 1fr) 220px;
  }

  .jd-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .jd-floor-body.with-aside {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .jd-float {
    display: none;
  }
}

@media (max-width: 1023px) {
  .jd-hero-in {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .jd-side {
    display: none;
  }

  .jd-head-in {
    flex-wrap: wrap;
    gap: 14px;
  }

  .jd-search {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }

  .jd-nav-links {
    overflow-x: auto;
  }

  .jd-floor-body.with-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .jd-flash {
    grid-template-columns: 1fr;
  }

  .jd-promise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  /* 京东版心左右留白在大屏是 54px，窄屏需收回，否则手机上内容被挤没 */
  :root { --gx: 16px; }

  .jd-topbar-l .jd-top-link:not(.jd-top-loc),
  .jd-topbar .topbar-hide-sm {
    display: none;
  }

  /* 窄屏先让位给搜索框，去掉搜索头右侧的装饰性入口 */
  .jd-promo-card,
  .jd-ai-btn {
    display: none;
  }

  .jd-hero-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .jd-rail {
    display: none;
  }

  .jd-slider {
    height: 260px;
  }

  /* 窄屏轮播文字降档，保持可读不拥挤 */
  .jd-slide-body {
    padding: 0 24px;
  }

  .jd-slide-body .eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 8px;
  }

  .jd-slide-body h2 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .jd-slide-body p {
    font-size: 13px;
    margin-bottom: 14px;
  }

  .jd-slide-btn {
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
  }

  .jd-grid,
  .jd-grid.cols-4,
  .jd-grid.cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jd-nav-all {
    width: auto;
  }

  .jd-nav-all span {
    display: none;
  }

  .jd-floor-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .jd-floor-more {
    margin-left: 0;
  }

  .jd-cta-in {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 11. 暗色主题 ---------- */
[data-theme="dark"] {
  --jd-red-l: #3a1a18;
  --jd-line: #22303f;
  --jd-line-2: #1b2634;
  --jd-bg: #0a1119;
  --jd-ink: #eaf1f8;
  --jd-ink-2: #cfe0ee;
  --jd-gray: #8fa4b8;
  --jd-gray-2: #a9bccd;
}

[data-theme="dark"] .jd-head,
[data-theme="dark"] .jd-nav,
[data-theme="dark"] .jd-rail,
[data-theme="dark"] .jd-slider,
[data-theme="dark"] .jd-user-card,
[data-theme="dark"] .jd-news,
[data-theme="dark"] .jd-side-grid a,
[data-theme="dark"] .jd-promise,
[data-theme="dark"] .jd-floor,
[data-theme="dark"] .jd-card,
[data-theme="dark"] .jd-rank,
[data-theme="dark"] .jd-flash,
[data-theme="dark"] .jd-mega,
[data-theme="dark"] .jd-mega-fly,
[data-theme="dark"] .jd-rail-fly,
[data-theme="dark"] .jd-float,
[data-theme="dark"] .jd-cart-btn,
[data-theme="dark"] .jd-more-btn,
[data-theme="dark"] .jd-foot-promise {
  background: var(--c-surface, #101a25);
}

[data-theme="dark"] .jd-topbar {
  background: #0d1722;
  border-bottom-color: #1b2634;
}

[data-theme="dark"] .jd-top-link {
  color: var(--jd-gray);
}

[data-theme="dark"] .jd-cart-btn {
  border-color: var(--jd-line);
}

[data-theme="dark"] .jd-search-box {
  border-color: var(--jd-red);
}

[data-theme="dark"] .jd-nav-all {
  background: var(--jd-red);
}

/* ---------- 12. 与既有组件的衔接 ---------- */

/* 分类大菜单：兼容 app.js 的 .mega-wrap.open 开关，并支持京东式悬停展开 */
.mega-wrap.open .jd-mega,
.jd-mega-wrap:hover .jd-mega {
  display: block;
}

/* 桌面端隐藏汉堡（移动端保留） */
.jd-head .burger {
  display: none;
}

/* 次级按钮 */
.jd-btn-ghost {
  background: #fff;
  border: 1px solid var(--jd-line);
  color: var(--jd-ink-2);
}

.jd-btn-ghost:hover {
  border-color: var(--jd-red);
  color: var(--jd-red);
}

[data-theme="dark"] .jd-btn-ghost {
  background: var(--c-surface, #101a25);
}

/* 屏幕阅读器专用 */
.jd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 无图的轮播片 */
.jd-slide.is-plain {
  background: linear-gradient(135deg, #ff6a5e, #e1251b);
}

/* 楼层空态 */
.jd-floor .empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--jd-gray);
  font-size: 14px;
  padding: 34px 0;
}

/* 页脚服务保障带 */
.site-footer .jd-foot-promise {
  border-top: 0;
}

@media (max-width: 767px) {
  .jd-foot-promise .in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }

  .jd-foot-promise .it {
    font-size: 13px;
  }
}

/* ==========================================================================
   商品详情页（京东风格）
   说明：全部限定在 section.detail / .detail-info 作用域内，
        避免影响购物车、订单等页面里同名的基础组件（.qty / .btn-icon…）。
   ========================================================================== */

/* ---------- 1. 主栅格：左图 420px + 右信息自适应 ---------- */
section.detail {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}

/* ---------- 2. 图库 ---------- */
section.detail .gallery {
  position: sticky;
  top: 118px;
}

section.detail .gallery-main {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid var(--jd-line);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.detail .gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

section.detail .gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow: auto;
  padding-bottom: 4px;
}

section.detail .thumb {
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 4px;
  border: 2px solid transparent;
  background: #fafafa;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .18s;
}

section.detail .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.detail .thumb.active,
section.detail .thumb:hover {
  border-color: var(--jd-red);
}

/* ---------- 3. 标题 / 副标题 ---------- */
.detail-info h1 {
  font-size: 22px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--jd-ink);
  letter-spacing: 0;
}

.detail-info .subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: var(--jd-gray-2);
  line-height: 1.6;
}

/* ---------- 4. 价格区 ---------- */
.detail-info .detail-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, #fff1f0, #fff9f9);
  border: 1px solid #ffdcd9;
}

.detail-info .detail-price .price-label {
  font-size: 13px;
  color: var(--jd-gray-2);
}

.detail-info .detail-price strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  color: var(--jd-red);
  letter-spacing: -.02em;
}

.detail-info .detail-price small {
  font-size: 13px;
  color: var(--jd-gray-2);
}

.detail-info .detail-price s {
  font-size: 14px;
  color: var(--jd-gray);
}

/* ---------- 5. 阶梯价表格（固定列宽，修掉左右被撑开的错位） ---------- */
.detail-info .tier-table {
  margin-top: 16px;
}

.detail-info .tier-table h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--jd-ink);
  margin-bottom: 8px;
}

.detail-info .tier-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--jd-line);
  border-radius: 6px;
  overflow: hidden;
}

.detail-info .tier-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--jd-gray-2);
  text-align: left;
  padding: 9px 14px;
  background: #fafafa;
  border-bottom: 1px solid var(--jd-line);
}

.detail-info .tier-table td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--jd-ink-2);
  border-bottom: 1px solid var(--jd-line-2);
}

.detail-info .tier-table tr:last-child td {
  border-bottom: 0;
}

.detail-info .tier-table th:first-child,
.detail-info .tier-table td:first-child {
  width: 42%;
}

.detail-info .tier-table td.strong {
  font-weight: 700;
  color: var(--jd-ink);
}

/* ---------- 6. 规格元信息 ---------- */
.detail-info .detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 16px 0;
  padding: 13px 0;
  border-top: 1px solid var(--jd-line);
  border-bottom: 1px solid var(--jd-line);
  font-size: 13px;
  color: var(--jd-gray-2);
}

.detail-info .detail-meta b {
  color: var(--jd-ink);
  font-weight: 600;
}

/* ---------- 7. 购买区（错位修复核心） ---------- */
/* 覆盖 app.css 的 .buy-form{display:inline-flex}，
   改为块级纵向排布，让「数量行」与「按钮行」各自独占一行并左对齐。 */
.detail-info .buy-form {
  display: block;
  margin: 0;
}

.detail-info .qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.detail-info .qty-row > label {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--jd-gray-2);
}

/* 数量选择器：三等分对齐，去掉原生数字输入的上下箭头 */
.detail-info .qty {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--jd-line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.detail-info .qty-btn {
  width: 36px;
  height: 100%;
  border: 0;
  background: #fafafa;
  color: var(--jd-ink-2);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.detail-info .qty-btn:hover {
  background: #f2f2f2;
  color: var(--jd-red);
}

.detail-info .qty input,
.detail-info .qty .input {
  width: 62px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--jd-line);
  border-right: 1px solid var(--jd-line);
  border-radius: 0;
  background: #fff;
  color: var(--jd-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}

.detail-info .qty input::-webkit-outer-spin-button,
.detail-info .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.detail-info .qty-row .muted {
  font-size: 13px;
  color: var(--jd-gray-2);
}

/* 按钮行：统一 46px 高度、垂直居中，收藏按钮不再被挤成小方块 */
.detail-info .buy-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}

.detail-info .buy-actions .btn-lg {
  height: 46px;
  padding: 0 30px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.detail-info .buy-actions .btn-primary {
  min-width: 152px;
  background: var(--jd-red);
  border-color: var(--jd-red);
  color: #fff;
}

.detail-info .buy-actions .btn-primary:hover {
  background: var(--jd-red-d);
  border-color: var(--jd-red-d);
}

.detail-info .buy-actions .btn-outline {
  min-width: 118px;
  background: #fff;
  border: 1px solid var(--jd-red);
  color: var(--jd-red);
}

.detail-info .buy-actions .btn-outline:hover {
  background: #fff1f0;
}

.detail-info .buy-actions .btn-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--jd-line);
  border-radius: 4px;
  background: #fff;
  color: var(--jd-gray-2);
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.detail-info .buy-actions .btn-icon:hover {
  border-color: var(--jd-red);
  color: var(--jd-red);
}

.detail-info .buy-actions .btn-icon .ico,
.detail-info .buy-actions .btn-icon svg {
  display: block;
}

/* 已收藏状态（JS 通过 classList.toggle('on') 切换） */
.detail-info .buy-actions .btn-icon.on {
  border-color: var(--jd-red);
  background: #fff1f0;
  color: var(--jd-red);
}

.detail-info .buy-actions .btn-icon.on svg {
  fill: currentColor;
}

/* ---------- 8. 小计：紧贴按钮行，不再悬空 ---------- */
.detail-info .detail-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  color: var(--jd-gray-2);
}

.detail-info .detail-total b,
.detail-info .detail-total strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--jd-red);
}

/* ---------- 9. 店铺卡 ---------- */
section.detail .shop-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--jd-line);
  border-radius: 6px;
  background: #fafafa;
}

section.detail .shop-card .shop-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--jd-ink);
}

section.detail .shop-card .shop-meta {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--jd-gray-2);
}

section.detail .shop-card .btn {
  margin-left: auto;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 13px;
}

/* ---------- 10. 详情 Tabs ---------- */
.container.section > .tabs {
  display: flex;
  gap: 0;
  margin: 28px 0 0;
  border-bottom: 1px solid var(--jd-line);
  overflow: auto;
}

.container.section > .tabs .tab {
  position: relative;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--jd-gray-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}

.container.section > .tabs .tab:hover {
  color: var(--jd-red);
}

.container.section > .tabs .tab.active {
  color: var(--jd-red);
}

.container.section > .tabs .tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 56%;
  height: 2px;
  background: var(--jd-red);
  transform: translateX(-50%) scaleX(0);
  transition: transform .2s;
}

.container.section > .tabs .tab.active::after {
  transform: translateX(-50%) scaleX(1);
}

.container.section > .tab-panel {
  padding: 22px 0;
}

/* ---------- 11. 响应式 ---------- */
@media (max-width: 1023px) {
  section.detail {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  section.detail .gallery {
    position: static;
  }

  section.detail .gallery-main {
    max-width: 460px;
  }
}

@media (max-width: 575px) {
  .detail-info h1 {
    font-size: 18px;
  }

  .detail-info .detail-price strong {
    font-size: 24px;
  }

  .detail-info .buy-actions .btn-lg {
    flex: 1 1 auto;
    min-width: 0;
  }

  section.detail .gallery-main {
    max-width: none;
  }
}

/* ==========================================================================
   登录 / 注册 / 找回密码（京东风格）
   说明：blank.php 现已加载 jd.css，这里把原来偏"通用深蓝"的 auth 皮肤
        统一成站内的京东红体系，并收紧表单宽度与控件尺寸。
   ========================================================================== */

/* ---------- 1. 整体骨架 ---------- */
.auth-shell {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff;
}

.auth-card {
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
}

/* 统一限制内容宽度，输入框不再拖满整屏 */
.auth-card > * {
  width: 100%;
  max-width: 400px;
}

/* ---------- 2. 品牌区 ---------- */
.auth-brand {
  margin-bottom: 28px;
  font-size: 17px;
  font-weight: 700;
  color: var(--jd-ink);
}

.auth-brand .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--jd-red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 3. 标题 ---------- */
.auth-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--jd-ink);
  letter-spacing: -.01em;
}

.auth-sub {
  margin: 8px 0 24px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--jd-gray-2);
}

/* ---------- 4. 表单控件 ---------- */
.auth-card .field {
  margin-bottom: 16px;
}

.auth-card .field > span,
.auth-card .field > label {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jd-ink-2);
}

.auth-card .input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--jd-line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--jd-ink);
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}

.auth-card .input:focus {
  outline: 0;
  border-color: var(--jd-red);
  box-shadow: 0 0 0 3px rgba(255, 15, 35, .1);
}

/* 记住我 + 忘记密码
   注意：限定 :not(.reg-form) —— 注册页的 .field-row 是「两列密码框」，
   若不加限定会被这里的 flex/space-between 挤成一行。 */
.auth-card .form:not(.reg-form) .field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 20px;
}

.auth-card .check {
  font-size: 13px;
  color: var(--jd-gray-2);
}

.auth-card .link {
  font-size: 13px;
  font-weight: 600;
  color: var(--jd-red);
}

.auth-card .link:hover {
  text-decoration: underline;
}

/* ---------- 5. 主按钮 ---------- */
.auth-card .btn-primary {
  height: 48px;
  border-radius: 6px;
  background: var(--jd-red);
  border-color: var(--jd-red);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 6px 16px rgba(255, 15, 35, .22);
}

.auth-card .btn-primary:hover {
  background: var(--jd-red-d);
  border-color: var(--jd-red-d);
}

/* ---------- 6. 切换链接 / 页脚 ---------- */
.auth-switch {
  margin-top: 18px;
  font-size: 13px;
  color: var(--jd-gray-2);
  text-align: center;
}

.auth-switch a {
  font-weight: 700;
  color: var(--jd-red);
}

.auth-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--jd-line);
  font-size: 12.5px;
  color: var(--jd-gray);
  text-align: center;
}

.auth-foot a {
  color: var(--jd-gray-2);
}

.auth-foot a:hover {
  color: var(--jd-red);
}

/* ---------- 7. 右侧展示区：由深蓝改为京东红调 ---------- */
.auth-aside {
  padding: 56px 48px;
  background: linear-gradient(155deg, #2b1417 0%, #4a1013 45%, var(--jd-red) 145%);
}

.auth-aside h2 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.auth-aside p {
  margin-top: 14px;
  max-width: 460px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
}

.auth-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
}

.auth-feature li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-feature li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* ---------- 8. 响应式 ---------- */
@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-aside {
    display: none;
  }

  .auth-card {
    padding: 40px 24px;
  }
}

/* ==========================================================================
   注册页：个人用户 / 企业用户（双 Tab）
   ========================================================================== */

/* ---------- 1. 身份切换 Tab ---------- */
.auth-card .reg-tabs {
  display: flex;
  margin: 4px 0 24px;
  border-bottom: 1px solid var(--jd-line);
}

.auth-card .reg-tabs .reg-tab {
  position: relative;
  flex: 1 1 0;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  color: var(--jd-gray-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s;
}

.auth-card .reg-tabs .reg-tab:hover {
  color: var(--jd-red);
}

.auth-card .reg-tabs .reg-tab.is-on {
  color: var(--jd-ink);
}

.auth-card .reg-tabs .reg-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--jd-red);
  transform: translateX(-50%) scaleX(0);
  transition: transform .2s;
}

.auth-card .reg-tabs .reg-tab.is-on::after {
  transform: translateX(-50%) scaleX(1);
}

/* ---------- 2. 面板与字段 ---------- */
.auth-card .reg-panel[hidden] {
  display: none;
}

.auth-card .reg-form .field {
  margin-bottom: 14px;
}

/* 注册页的两列并排（密码 / 确认密码），与登录页的「记住我」区分开 */
.auth-card .reg-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  margin: 0 0 14px;
}

.auth-card .req {
  margin-left: 2px;
  color: var(--jd-red);
  font-weight: 700;
}

/* 京东式红色提示（营业执照说明） */
.auth-card .reg-tip {
  margin: -8px 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--jd-red);
}

/* ---------- 3. 营业执照上传 ---------- */
.auth-card .license-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.auth-card .license-box {
  position: relative;
  width: 108px;
  height: 108px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #ccc;
  border-radius: 6px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}

.auth-card .license-box:hover {
  border-color: var(--jd-red);
  background: #fff6f6;
}

.auth-card .license-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.auth-card .license-box i {
  font-size: 26px;
  font-style: normal;
  line-height: 1;
  color: #bbb;
}

.auth-card .license-box em {
  padding: 0 6px;
  font-size: 12px;
  font-style: normal;
  color: var(--jd-gray-2);
  text-align: center;
}

.auth-card .license-sample {
  position: relative;
  width: 108px;
  height: 108px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jd-line);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.auth-card .license-sample img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-card .license-demo {
  font-size: 12px;
  color: #bbb;
}

/* ---------- 4. 验证码 ---------- */
.auth-card .captcha-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-card .captcha-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.auth-card .captcha-img {
  width: 132px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--jd-line);
  border-radius: 4px;
  background: #f7f8fc;
  cursor: pointer;
}

/* ---------- 5. 折叠区（登录账号 / 邀请码） ---------- */
.auth-card .reg-more {
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--jd-line-2);
}

.auth-card .reg-more > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jd-gray-2);
  cursor: pointer;
  list-style: none;
}

.auth-card .reg-more > summary::-webkit-details-marker {
  display: none;
}

.auth-card .reg-more > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}

.auth-card .reg-more[open] > summary::after {
  transform: rotate(-135deg);
}

.auth-card .reg-more-body {
  padding-top: 10px;
}

/* ---------- 6. 协议勾选 ---------- */
.auth-card .reg-agree {
  align-items: flex-start;
  margin: 6px 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--jd-gray-2);
}

.auth-card .reg-agree[hidden] {
  display: none;
}

.auth-card .reg-agree input {
  margin-top: 2px;
}

.auth-card .reg-submit {
  height: 48px;
  font-size: 15px;
}

/* ---------- 7. 底部帮助 ---------- */
.auth-card .reg-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--jd-gray-2);
}

.auth-card .reg-help .ico {
  color: var(--jd-gray-2);
}

.auth-card .reg-help a {
  color: var(--jd-red);
  font-weight: 600;
}

/* ---------- 8. 响应式 ---------- */
@media (max-width: 575px) {
  .auth-card .reg-tabs .reg-tab {
    font-size: 15px;
  }

  .auth-card .license-box,
  .auth-card .license-sample {
    width: 92px;
    height: 92px;
  }

  .auth-card .captcha-img {
    width: 110px;
  }

  .auth-card .reg-form .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ==========================================================================
   详情页面包屑：显式绑定全站容器，修复个别环境下偏出左缘的问题
   ========================================================================== */
.container.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-top: 16px;
  padding-bottom: 8px;
  padding-left: var(--gx);
  padding-right: var(--gx);
  font-size: 12.5px;
  color: var(--jd-gray-2);
  white-space: nowrap;
  overflow: hidden;
}

.container.breadcrumb a {
  flex: 0 0 auto;
  color: var(--jd-gray-2);
  transition: color .15s;
}

.container.breadcrumb a:hover {
  color: var(--jd-red);
}

.container.breadcrumb > span {
  color: var(--jd-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   买卖家聊天弹层（在线 IM / 离线留言询盘）
   ========================================================================== */
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 480px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--jd-line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  overflow: hidden;
  z-index: 200;
}

.chat-panel[hidden] {
  display: none;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #2b1417, #b3110d);
  color: #fff;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
}

.chat-who {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-who b {
  display: block;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .78);
}

.chat-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa4ad;
}

.chat-status.is-on i {
  background: #35d07f;
  box-shadow: 0 0 0 3px rgba(53, 208, 127, .25);
}

.chat-close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-empty {
  margin: auto;
  padding: 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--jd-gray-2);
  text-align: center;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.chat-msg time {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--jd-gray);
}

.chat-msg.is-buyer {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-msg.is-seller {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-bubble {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

.chat-msg.is-buyer .chat-bubble {
  background: var(--jd-red);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.chat-msg.is-seller .chat-bubble {
  background: #fff;
  border: 1px solid var(--jd-line);
  border-bottom-left-radius: 3px;
}

.chat-foot {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--jd-line);
  background: #fff;
}

.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--jd-line);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  resize: none;
}

.chat-input:focus {
  outline: 0;
  border-color: var(--jd-red);
}

.chat-send {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--jd-red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.chat-send:hover {
  background: var(--jd-red-d);
}

/* 店铺卡：Visit store + Chat 按钮组靠右 */
section.detail .shop-card .shop-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

section.detail .shop-card .shop-actions .btn {
  margin-left: 0;
}

@media (max-width: 575px) {
  .chat-panel {
    right: 12px;
    left: 12px;
    width: auto;
    height: 70vh;
  }
}

/* ==========================================================================
   卖家中心：询盘会话列表 + 聊天窗
   ========================================================================== */
.chat-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: calc(100vh - 170px);
  min-height: 480px;
  padding: 0;
  overflow: hidden;
}

.chat-list {
  border-right: 1px solid var(--jd-line);
  overflow-y: auto;
  background: #fafafa;
}

.chat-list-empty {
  padding: 30px 16px;
  font-size: 13px;
  color: var(--jd-gray-2);
  text-align: center;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--jd-line-2);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.chat-item:hover {
  background: #f2f3f7;
}

.chat-item.is-on {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--jd-red);
}

.chat-item-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--jd-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}

.chat-item-main {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-item-main b {
  display: block;
  font-size: 13.5px;
}

.chat-item-preview {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--jd-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.chat-item-side time {
  font-size: 11px;
  color: var(--jd-gray);
}

/* 侧栏/会话列表的未读红点 */
.nav-dot {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--jd-red);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}

.chat-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--jd-line);
  font-size: 14px;
}

.chat-main-head .chat-status {
  color: var(--jd-gray-2);
}

.chat-main-head .chat-status i {
  background: #c2c4cc;
}

.chat-main-head .chat-status.is-on i {
  background: #35d07f;
}

.chat-main-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-main-empty {
  margin: auto;
  color: var(--jd-gray-2);
  font-size: 13px;
}

.chat-main .chat-foot {
  border-top: 1px solid var(--jd-line);
}

@media (max-width: 767px) {
  .chat-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .chat-list {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--jd-line);
  }
}

/* ==========================================================================
   卖家中心看板升级：指标卡 / 待办 / 趋势图 / 搜索
   ========================================================================== */
.stat-card {
  position: relative;
  padding: 16px 18px;
  overflow: hidden;
}

.stat-card .stat-ico {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jd-bg-soft);
  color: var(--jd-gray-2);
}

.stat-card.is-amount .stat-ico {
  background: var(--jd-red-l);
  color: var(--jd-red);
}

.stat-card.is-amount b {
  color: var(--jd-red);
}

.stat-card > span:not(.stat-ico) {
  display: block;
  font-size: 12.5px;
  color: var(--jd-gray-2);
  margin-bottom: 6px;
}

.stat-card b {
  font-size: 22px;
  letter-spacing: -.01em;
}

/* 待办 + 趋势两栏 */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  margin-bottom: 18px;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  color: inherit;
  transition: background .15s;
}

.todo-item:hover {
  background: var(--jd-bg-soft);
}

.todo-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.todo-ico.is-red   { background: #ffebf1; color: var(--jd-red); }
.todo-ico.is-blue  { background: #e8f1ff; color: #2b6cb0; }
.todo-ico.is-amber { background: #fff4e5; color: #e88a1a; }
.todo-ico.is-green { background: #e6f7ee; color: #1d9e5f; }

.todo-item > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--jd-ink-2);
}

.todo-item b {
  font-size: 16px;
  color: var(--jd-ink);
}

.todo-go {
  color: var(--jd-gray);
  display: inline-flex;
}

/* 14 天销售趋势 */
.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding: 10px 6px 0;
}

.trend-col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.trend-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--jd-red), #ff8a80);
  transition: height .3s;
}

.trend-bar.is-last {
  background: linear-gradient(to top, var(--jd-red-d), var(--jd-red));
}

.trend-axis {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px 0;
  font-size: 11px;
  color: var(--jd-gray);
}

/* 按钮内红点 */
.btn-dot {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 9px;
  background: #fff;
  color: var(--jd-red);
  font-style: normal;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
}

/* 面板内搜索框 */
.panel-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.panel-search .input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
}

@media (max-width: 900px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   列表批量操作 + 模态弹窗
   ========================================================================== */
.col-check {
  width: 36px;
}

.col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--jd-red);
  cursor: pointer;
}

.batch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px 0;
  border-top: 1px solid var(--jd-line);
  margin-top: 12px;
  flex-wrap: wrap;
}

.batch-bar .muted {
  margin-right: auto;
}

/* 危险按钮 */
.btn-danger {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
}

.btn-danger:hover {
  background: #d0353a;
  border-color: #d0353a;
}

/* 模态弹窗 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none;
}

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

.modal-box {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--jd-line);
}

.modal-head h3 {
  font-size: 15px;
  margin: 0;
}

.modal-x {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--jd-gray);
}

.modal-body {
  padding: 16px 18px;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--jd-line);
}

.ship-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ship-input {
  height: 38px;
}

/* 聊天图片消息 + 图片按钮 */
.chat-img {
  display: block;
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
}

.chat-img-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid var(--jd-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s;
}

.chat-img-btn:hover {
  border-color: var(--jd-red);
}

/* 经营日报卡片 */
.panel-head-simple {
  margin-bottom: 12px;
}

.panel-head-simple h3 {
  font-size: 15px;
  margin: 0;
}

.daily-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.daily-card {
  padding: 16px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--jd-line);
}

.daily-card > span {
  display: block;
  font-size: 12.5px;
  color: var(--jd-gray-2);
  margin-bottom: 8px;
}

.daily-card b {
  font-size: 22px;
  letter-spacing: -.01em;
}

.daily-card em {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-style: normal;
}

.daily-card em.is-up { color: #1d9e5f; }
.daily-card em.is-down { color: var(--jd-red); }
.daily-card em small { color: var(--jd-gray); }

@media (max-width: 900px) {
  .daily-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}