/* ========== 右侧主体区域单独优化（不动 header & .main-left） ========== */

/* 统一变量，方便后期改色改距 */
:root {
  --gap: 20px;
  --radius: 4px;
  --danger: #e20213;
  --primary: #005197;
  --transition: .3s ease;
}
.main{
  border: 1px solid rgba(0, 0, 0, 0);
  height: auto;
}

/* 右侧整体容器 */
.main-right {
  width: 70%;
  margin-top: 130px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: 0 var(--gap);
}

/* 左侧大图区 */
.main-right-left {
  flex: 1 1 50%;
  min-width: 280px;
}

.main-right-left-top-img {
  position: relative;
  border: 1px solid #eee;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gap);
}

.main-right-left-mid-imgBox {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.main-right-left-mid-imgItem {
  flex: 0 0 80px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.main-right-left-mid-imgItem img {
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: var(--transition);
}
.main-right-left-mid-imgItem:hover img {
  border-color: var(--primary);
}

/* 右侧信息 & 购买区 */
.main-right-right {
  flex: 1 1 45%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* 商品规格卡片 */
.main-right-right-mid {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.main-img-item {

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: var(--radius);
  background: #fafafa;

}

.main-img-item img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius);
}

.mpnBox {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.mpnItem {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  user-select: none;
  transition: var(--transition);
}

.mpnItem.minus,
.mpnItem.plus {
  background: #f1f1f1;
  cursor: pointer;
}
.mpnItem.minus:hover,
.mpnItem.plus:hover {
  background: #e5e5e5;
}
.mpnItem.count {
  width: 40px;
  background: #fff;
}

/* 加入购物车按钮 */
.main-right-right-bottom-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--danger), #a01e24);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
}
.main-right-right-bottom-btn:hover {
  background: #000;
}

/* 响应式：小屏时上下堆叠 */
@media (max-width: 992px) {
  .main-right {
    flex-direction: column;
    width: 100%;
  }
  .main-right-left,
  .main-right-right {
    flex: 1 1 100%;
  }
}
/* 1. 顶部大图：保证居中且自适应容器宽度 */
.main-right-left-top-img{
  width: 100%;           /* 占满父容器 */
  max-width: 480px;      /* 可根据实际再调 */
  margin: 0 auto var(--gap);
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  display: flex;         /* 让图片真正居中 */
  justify-content: center;
  align-items: center;
}
.main-right-left-top-img img{
  width: 100%;
  height: auto;
  display: block;        /* 去掉 inline 间隙 */
}

/* 2. 缩略图：去掉 float 改用 Flex，防止塌陷 */
.main-right-left-mid-imgBox{
  width: 100%;
  max-width: 480px;      /* 与大图同宽，视觉对齐 */
  margin: 0 auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.main-right-left-mid-imgItem{
  flex: 0 0 80px;        /* 固定宽度，自动换行 */
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.main-right-left-mid-imgItem img{
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: .3s;
}
.main-right-left-mid-imgItem:hover img{
  border-color: #005197;
}
/* 1. 缩略图下方：恢复 10% 宽度，取消浮动 */
.main-right-left-mid-imgBox .main-img-item{
  width: 10% !important;
  float: none !important;
  margin: 0 auto;
}

/* 2. 右侧规格卡片：恢复 48% 宽度，正常浮动 */
.main-right-right-mid .main-img-item{
  width: 48% !important;
  float: left !important;
  margin-bottom: 2%;
}
/* ================= 变量 & 通用 ================ */
:root {
  --gap: 16px;          /* 统一间距 */
  --radius: 4px;
  --transition: .3s ease;
}

/* ================= .main-img-item 响应式 ================ */
.main-right-right-mid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;   /* 元素不足时居中 */
}

.main-img-item {
  /* 默认：大屏三列 */
  flex: 0 0 calc(33.333% - var(--gap));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--gap);
  border: 1px solid #eee;
  border-radius: var(--radius);
  background: #fafafa;
  transition: var(--transition);
}

.main-img-item img {
  width: 100%;
  max-width: 120px;   /* 防止超大图 */
  height: auto;
  object-fit: contain;
}

/* 中屏：两列 */
@media (max-width: 992px) {
  .main-img-item {
    flex: 0 0 calc(50% - var(--gap));
  }
}

/* 小屏：单列 */
@media (max-width: 576px) {
  .main-img-item {
    flex: 0 0 100%;
  }
}