/* =========================================================
   橙皮素材网 · 首页
   real-app.css 是原站 app 的完整作用域 CSS（逐字节对齐）
   本文件只补原站由 Vue/Element 运行时生成、模板里没有的尺寸细节
   ========================================================= */

/* 原站 body/html 由 real-app.css 指定 overflow-x:hidden，#app 居中 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

/* el-row / el-col 模拟：真实 Element 由 JS 注入 inline style，
   静态页面用等效 class 补齐栅格行为 */
.el-row-flex {
  display: flex;
  justify-content: space-around;
}
.el-col-23 { width: 95.83333%; }
.el-col-24 { width: 100%; }

/* 原站 .header 已由 real-app.css 提供：width:90vw + flex + space-between。
   这里只让 el-menu 作为 flex 子项不换行、并垂直居中 */
#topMenu .header { height: 60px; }
#topMenu .el-menu.right-area {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border-bottom: none;
  background: transparent;
  box-shadow: none;
}
#topMenu .el-menu-item {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  color: #303133;
  padding: 0 18px;
  float: none;
}
#topMenu .el-menu-item:hover { color: #409eff; background: transparent; }
#topMenu .appLogo { height: 44px; margin-top: 8px; }
#topMenu .el-button--primary.is-round {
  border-radius: 20px;
  padding: 10px 22px;
  font-size: 14px;
}

/* ---------- 轮播（原站 850e6df6 + Bootstrap carousel） ---------- */
#carouselView .carousel-inner {
  border-radius: 5px;
  overflow: hidden;
}
#carouselView .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
  /* 原图 6304x2775（比例 2.2716），加载前用撑开的占位避免布局塌陷 */
  aspect-ratio: 6304 / 2775;
  background: #C4D088;
  object-fit: cover;
}
#carouselView .carousel-inner { background: #C4D088; }
#carouselView .carousel-indicators { margin-bottom: .5rem; }
#carouselView .carousel-indicators button {
  width: 10px; height: 10px; border-radius: 50%; border: 0;
  background-color: rgba(255, 255, 255, .55);
}
#carouselView .carousel-indicators button.active { background-color: #fff; }
#carouselView .carousel-control-prev,
#carouselView .carousel-control-next { width: 5%; opacity: .55; }
#carouselView .carousel-control-prev:hover,
#carouselView .carousel-control-next:hover { opacity: .9; }

/* ---------- 分类导航 ----------
   间距/内边距全部交给 Bootstrap(.nav/.nav-link 1rem/.5rem、.mx-1 .25rem)，
   与原站 real-app.css(.menuBtn 只改字号颜色)，本文件不再覆盖 padding/margin */
#selectMenu .nav, .smt .nav { margin-bottom: 0; }
#selectMenu .mobileShow { display: none; }
.smt .mobileShow { display: block; }
.smt.selectMobile {
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  padding: 0;
}
@media (max-width: 600px) {
  .smt.selectMobile { width: 95vw; padding-left: 0; padding-right: 0; }
}
#selectMenu .nav-link.menuBtn.active { background-color: #1b1b1b; color: #fff; }

/* 原站 menuBtn：只覆盖颜色/字号，内边距与圆角交给 Bootstrap（1rem/0.5rem、--bs-border-radius） */
#selectMenu .nav-link.menuBtn,
.smt .nav-link.menuBtn {
  font-size: 22px;
  font-weight: 400;
  color: #999;
}
/* 原站 real-app.css 只把手机端胶囊字号改成 15px，
   内边距/外边距完全交给 Bootstrap（.nav-link 1rem/.5rem、.mx-1 .25rem），
   不要自己加 padding 覆盖，否则列宽与换行结果会和原站不同 */
@media (max-width: 600px) {
  /* 手机端胶囊字号 15px（原站 real-app.css 同值） */
  #catNavMobile .nav-link.menuBtn,
  #catNavMobile a.menuBtn,
  #selectMenu .nav-link.menuBtn,
  .smt .nav-link.menuBtn,
  .smt a.menuBtn {
    font-size: 15px !important;
    line-height: 1.2;
  }
  /* 原站实测：每个胶囊 368/1440=25.6% 宽、行高 160/1440=11.1%，
     对应 4 个一行、行距紧凑。Bootstrap 默认 1rem 内距 + mx-1 已能达成，
     这里只保证不因自定义样式被撑开 */
  #catNavMobile { justify-content: center; }
  #catNavMobile .nav-item { margin: 0 .25rem; }
}
#selectMenu .nav-link.menuBtn:hover,
.smt .nav-link.menuBtn:hover { color: #0b0b0b; }
#selectMenu .nav-link.menuBtn.active,
.smt .nav-link.menuBtn.active { background-color: #1b1b1b; color: #fff; }
#selectMenu .nav-link.menuBtn.svipCss,
.smt .nav-link.menuBtn.svipCss { color: #007aff; }
#selectMenu .nav-link.menuBtn.svipCss strong,
.smt .nav-link.menuBtn.svipCss strong { font-weight: 700; }

/* 原站 mobileNone / elemNone 的显示规则由 real-app.css 控制，
   这里保证 PC 菜单行与手机菜单行不重复出现 */
@media (max-width: 600px) {
  .el-row.elemNone { display: none !important; }
  .smt.mobileNone { display: block; }
  .elemNone#rightMenu { display: none !important; }
}
@media (min-width: 601px) {
  .smt.mobileNone { display: none; }
}

/* =========================================================
   Element el-row gutter 是运行时内联的，静态页需等价声明：
   gutter=13 → 行 margin 0 -6.5px，列 padding 0 6.5px
   gutter=8  → 行 margin 0 -4px，列 padding 0 4px（移动端）
   ========================================================= */
.el-row.gutter13 { margin-left: -6.5px; margin-right: -6.5px; }
.el-row.gutter13 > .elCol { padding-left: 6.5px; padding-right: 6.5px; }
/* 手机端卡片区：原站实测左右各留 52px（1440 视口 → 内容 1336px）
   el-col xs:23 = 95.83% 再叠加 Element gutter 的负 margin，实测会多出 28px，
   这里按原站实测值约束，保证卡片左边界 52、右边界 1388 */
/* Element gutter 语义：行用负 margin 抵消列的 padding，
   否则卡片区会左右各内缩 4px（合计 8px），卡宽比原站窄 */
.el-row.gutter8 { margin-left: -4px; margin-right: -4px; }
.el-row.gutter8 > .elCol { padding-left: 4px; padding-right: 4px; }
/* 卡片区不要再加 padding：原站卡片直接贴到 el-col 内容区 */
#grid-M { padding-left: 0; padding-right: 0; }

/* =========================================================
   素材卡片（补回被误删的段落，严格按原站 d6a31bec 规格）
   ========================================================= */
#product { padding-top: 15px; padding-bottom: 20px; }
#product .elCol { padding-bottom: 17px; }
#product .el-card {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  transition: all .25s;
}
#product .el-card__body { padding: 5px; }
#product .el-image { display: block; overflow: hidden; }
#product .el-image__inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all .15s ease;
  cursor: pointer;
}
#product img { -webkit-user-drag: none; }

/* 原站 .ellipsis：单行省略，左对齐（关键：不加这条文字会居中） */
#product .ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  max-width: 100%;
}
#product .ellipsis2 { white-space: nowrap; }
#product .el-row { margin: 0; }

/* 文字行：原站手机端 flex space-between，最后一行价格右对齐 */
#product .el-row[style*="space-between"] { align-items: baseline; }

/* PC 卡片 hover 放大（手机取消） */
@media (min-width: 601px) {
  #product .el-card.enlarge:hover { transform: scale(1.05); }
}
@media (max-width: 600px) {
  #product { padding-top: 0; }
  #product .elCol { padding-bottom: 10px; }
  #product .el-card.enlarge:hover { transform: none; }
  /* 手机卡片：图片更宽松，文字区上边距 15px（原站 inline 规格） */
  #product .el-card__body { padding: 5px; }
}

/* 卡片内文字：原站是 flex space-between，名称左、价格右。
   span 在 flex 里是收缩宽度，单靠 text-align 看不出来，
   必须让名称 span 撑开（flex:1），价格才会被推到行尾 */
#product .el-card__body,
#product .el-card__body span { text-align: left; }
#product .el-card__body .el-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
}
/* 分类行只有一个 span，占满整行左对齐 */
#product .el-card__body .el-row > span:only-child { flex: 1; }
/* 名称行：名称撑满，价格靠右 */
#product .el-card__body .el-row > span:first-child:not(:only-child) { flex: 1 1 auto; min-width: 0; }
#product .el-card__body .el-row > span:last-child:not(:only-child) { flex: 0 0 auto; margin-left: 6px; }

/* =========================================================
   外层栅格：原站 el-col xs23 sm23 md23 lg21 xl18
   （之前被误删，导致 el-col 宽度 auto、卡区被压缩 72px）
   ========================================================= */
.el-col.colr { width: 95.83333%; flex: 0 0 95.83333%; }
@media (min-width: 1200px) { .el-col.colr { width: 87.5%; flex: 0 0 87.5%; } }
@media (min-width: 1920px) { .el-col.colr { width: 75%; flex: 0 0 75%; } }
/* 原站手机端实测：卡区左右边界 52 / 1388（1440 视口）→ 92.778%
   Element 在 95.83% 基础上还会加 gutter，实测多出 12px/边，这里直接标定 */
@media (max-width: 600px) {
  /* 原站手机端实测（DPR=4，CSS 视口 360）：
     卡区左右边界 13 / 347 → 宽 334 = 92.78%，居中留白各 13px。
     这里用 width 92.78% + 居中即可，无需额外 padding */
  .el-row.elrowpro {
    justify-content: center !important;
  }
  /* 实测：92.78% 时卡区只有 316 CSS px（内层 el-row 的 gutter 会再吃掉 8px），
     目标 334，故按比例放大到 98.1% */
  .el-col.colr {
    width: 98.1% !important;
    flex: 0 0 98.1% !important;
  }
}

/* 详情页栅格（cold）同样补回 */
.el-col.cold { width: 95.83333%; }
@media (min-width: 1200px) { .el-col.cold { width: 83.33333%; } }
@media (min-width: 1920px) { .el-col.cold { width: 62.5%; } }

/* TEST */


/* =========================================================
   修复：右侧客服二维码浮层缺样式
   原站 .right-pop-img 是 hover 展开的浮层（约 150px），
   此静态包未带该规则，导致 2962×2211 的原图以原始尺寸
   覆盖整个首页。此处按原站行为补齐。
   ========================================================= */
#rightMenu .right-pop { position: relative; }
#rightMenu .right-pop-img {
  display: none;
  position: absolute;
  right: 62px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  z-index: 30;
}
#rightMenu .right-pop:hover .right-pop-img { display: block; }
#rightMenu #qrImg { display: block; width: 150px; height: auto; }

/* =========================================================
   修复：首页素材网格未成行
   #grid-PC 的行是 .el-row.gutter13，列用内联 width:20%，
   但 element-ui 这份 vendor CSS 里 .el-col-* 只有 width、
   没有 float，.el-row 也未设 flex，导致每行只落一列。
   这里显式用 flex 还原原站的 5 列栅格。
   ========================================================= */
#product .el-row.gutter13,
#product .el-row.gutter8 {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
#product .el-row.gutter13 > .elCol,
#product .el-row.gutter8 > .elCol {
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* =========================================================
   修正栅格补丁的副作用：桌面端不应出现移动网格
   #grid-PC / #grid-M 两套 DOM 常驻，靠 .elemNone（≤600 隐藏）
   与 .elRowMobile（≥601 隐藏）切换；上面的 flex 规则
   优先级高于 .elRowMobile{display:none}，导致桌面端两套并排出现。
   ========================================================= */
@media (min-width: 601px) {
  #product .el-row.elRowMobile,
  #product #pagerM { display: none !important; }
}
@media (max-width: 600px) {
  #product .el-row.elemNone,
  #product #pagerPC { display: none !important; }
  #product .el-row.gutter8 {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
}