/* 商品页面样式goods.css - 开始 */
/* 整体样式-开始 */
.goods-page {
   display: flex;
   flex-direction: column; /* 垂直排列子元素 */
   max-width: 800px; /* 最大宽度 */
   background-color: #fff;
   margin: 0 auto; /* 水平居中 */
   padding: 0px;
   box-sizing: border-box; /* 确保 padding 不会增加元素的总宽度 */ 
   position: relative; /* 使 .goods-page-top 的定位相对于此元素 */
}

@media (max-width: 768px) {
 .goods-page {  
   width: 100%; /* 明确设置为100%宽度 */
   padding: 0px; /* 手机端移除顶部内边距 */
 }
}
/* 整体样式-结束 */

/* 标题文字-开始 */
.goods-wenzi {
    display: flex;
    justify-content: center; /* 使子元素水平居中 */
    align-items: center; /* 如果需要垂直居中的话可以添加这个 */
  }
  
  .goods-wenzi h4 {
    margin: 5px 0px; /* 设置上下外边距为0 */
  }

/* 标题文字-结束 */

/* 购买按钮-开始 */
.goumai {
  width: 100%;
  height: 58px;
  display: flex; /* 使用Flexbox布局 */
  margin-top: 15px;
  margin-bottom: 35px;
}

.block-link {
  display: block;
  width: 100%; /* 确保链接占据整个容器宽度 */
  text-decoration: none; /* 移除链接下划线 */
  transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}

.goumai > a > div {
  display: flex;
  justify-content: center; /* 让文本居中显示 */
  align-items: center; /* 垂直居中 */
  box-sizing: border-box; /* 确保padding和border包含在width内 */
  background-color: #FF6600; /* 淘宝橙色 */
  color: white; /* 默认文字颜色 */
  padding: 18px 0px;
  font-size: 1.2em;
}

/* 鼠标悬停时的效果 */
.goumai > a:hover > div {
  background-color: rgba(255, 55, 0, 0.947); /* “去淘宝购买”的背景变浅 */
  color: white; /* 文本颜色保持白色 */
}

/* 微信购买按钮 - 开始 */
.goumai > a.weixin-link > div {
  background-color: #2DC100; /* 微信绿色 */
}

.goumai > a.weixin-link:hover > div {
  background-color: #249400; /* 更深的微信绿色 */
}
/* 微信购买按钮 - 结束 */
/* 购买按钮-结束 */

/* 弹出图片的样式 */
#popup-weixingoumaierweima {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定定位 */
  z-index: 1009; /* 确保在最上层 */
  background-color: white;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  top: 50%; /* 上下居中 */
  left: 50%; /* 左右居中 */
  transform: translate(-50%, -50%); /* 居中调整 */
  width: 200px; /* 设置宽度 */
  text-align: center; /* 确保内容水平居中 */
}

/* 确保关闭按钮位于图片容器的右上角外部并且是圆形 */
#closePopup {
  position: absolute;
  top: -15px; /* 放置在顶部边界上方 */
  right: -15px; /* 放置在右侧边界外 */
  background-color: red; /* 更改颜色以增加可见性 */
  color: white;
  border: none;
  font-size: 38px;
  cursor: pointer;
  width: 30px; /* 设置固定宽度 */
  height: 30px; /* 设置固定高度，与宽度相同以保持圆形 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border-radius: 50%; /* 圆形按钮 */
}


/* 购买按钮-结束 */

/* 商品说明-图片样式-开始 */
.goods-tupian {
    width: 100%; /* 图片容器宽度为100% */
}

.goods-tupian img {
    width: 100%; /* 图片宽度占满整个容器 */
    height: auto; /* 高度自适应 */
    display: block; /* 防止底部出现空隙 */
    margin: 0; /* 移除内外边距 */
    padding: 0;
	  box-sizing: border-box; /* 确保 padding 不会增加元素的总宽度 */ 
}
/* 商品说明-图片样式-结束 */

/* 商品说明-结束 */

/* 商品页面样式CSS - 结束 */