/* ====================================================================
   goods.css - 商品页面样式
   ==================================================================== */


/* 通用库存样式 */
.goods-stock {
    padding: 10px 15px;  /* 内边距上下10像素，左右15像素 */
    background: #f8f9fa;  /* 浅灰色背景 */
    border-radius: 6px;  /* 圆角6像素 */
    display: inline-block;  /* 行内块元素 */
    margin: 20px 0;  /* 上下边距20像素 */
}

/* 有货状态 */
.goods-stock.in-stock {
    color: #28a745;  /* 绿色表示有货 */
}

/* 缺货状态 */
.goods-stock.out-stock {
    color: #dc3545;  /* 红色表示缺货 */
}

/* ---------------------------------------- 商品列表页样式 ---------------------------------------- */

/* 商品卡片容器 */
.goods-card {
    /* 设置圆角和阴影 */
    border-radius: 8px;  /* 圆角8像素 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 轻微阴影增加层次感 */
}

/* 商品图片容器 */
.goods-image-container {
    height: 200px;  /* 固定高度200像素 */
    display: flex;  /* 使用flex布局居中图片 */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    background-color: #f8f9fa;  /* 浅灰色背景 */
    overflow: hidden;  /* 隐藏溢出部分 */
}

/* 商品图片 */
.goods-image {

     width: 100%;  /* 宽度自适应 */
    height: 200px; /* 高度自适应 */
    object-fit: cover;  /* 保持比例完整显示图片 */
    border-radius: 6px;
}

/* 商品标题 */
.goods-title {
    font-size: 16px;  /* 字体大小16像素 */
    font-weight: 600;  /* 中等粗细 */
    margin-bottom: 8px;  /* 下边距8像素 */
}

/* 商品价格 */
.goods-price {
    font-size: 20px;  /* 字体大小20像素 */
    font-weight: bold;  /* 粗体 */
    color: #e74c3c;  /* 红色突出价格 */
}

/* 商品库存 */
.goods-stock {
    color: slategrey;
    font-size: 14px;  /* 字体大小14像素 */
}

/* ----------------------------------------商品详情页样式 ---------------------------------------- */

/* 详情页容器 */
.goods-detail-container .row{
     display: flex;
    align-items: stretch; /* 强制两列等高 */
}

.goods-detail-container .col-md-6 {
    display: flex;
    flex-direction: column;
}

/* 详情图片容器 */
.detail-image-container {
    background-color: #f8f9fa;  /* 浅灰色背景 */
    border-radius: 8px;  /* 圆角8像素 */
    padding: 20px;  /* 内边距20像素 */
    display: flex;  /* flex布局 */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    min-height: 400px;  /* 最小高度400像素 */
    height: 100%; /* 填满父容器高度 */
    overflow: hidden; /* 隐藏超出部分 */
    position: relative; /* 图片绝对定位 */
}

/* 详情图片 */
.detail-image {
    max-width: 100%;  /* 最大宽度100% */
    max-height: 400px;  /* 最大高度400像素 */
    object-fit: cover;  /* 填满容器 */
    width: 100%; /* 宽度100%填满 */
    height: 100%; /* 高度100%填满 */
    object-position: center; /* 图片居中显示 */
    position: absolute; /* 绝对定位，完全覆盖容器 */
    top: 0;
    left: 0;
    border-radius: 6px;
}

/* 商品信息区域 */
.detail-info {
    /*background: white;  !* 白色背景 *!*/
    border-radius: 8px;  /* 圆角8像素 */
    padding: 25px;  /* 内边距25像素 */
    border: 1px solid #eee;  /* 浅灰色边框 */
    min-height: 400px;  /* 最小高度400像素，与图片区域对齐 */
    height: 100%; /* 填满父容器高度 */
}

/* 商品标题 */
.detail-title {
    font-size: 24px;  /* 字体大小24像素 */
    font-weight: bold;  /* 粗体 */
    margin-bottom: 15px;  /* 下边距15像素 */
}

/* 商品价格 */
.detail-price {
    font-size: 28px;  /* 字体大小28像素 */
    font-weight: bold;  /* 粗体 */
    color: #e74c3c;  /* 红色突出价格 */
    margin: 20px 0;  /* 上下边距20像素 */
}

/* 操作按钮（加入购物车和继续购物） */
.detail-action-btn {
    padding: 12px 30px;  /* 内边距上下12像素，左右30像素 */
    font-size: 16px;  /* 字体大小16像素 */
    margin-right: 10px;  /* 右外边距10像素 */
    margin-bottom: 10px;  /* 下外边距10像素 */
}


/*---------- 商品描述区（详情页）--------------*/
/* 商品描述区域 */
.detail-description {
    margin-top: 30px;  /* 上外边距30像素 */
    background: white;  /* 白色背景 */
    border-radius: 8px;  /* 圆角8像素 */
    padding: 20px;  /* 内边距20像素 */
    border: 1px solid #eee;  /* 浅灰色边框 */
}

/* 描述标题 */
.desc-title {
    font-size: 18px;  /* 字体大小18像素 */
    font-weight: bold;  /* 粗体 */
    margin-bottom: 15px;  /* 下边距15像素 */
    padding-bottom: 10px;  /* 下内边距10像素 */
    border-bottom: 2px solid #eee;  /* 底部边框 */
}

/* 描述内容 */
.desc-content {
    line-height: 1.6;  /* 行高1.6倍提高可读性 */
    color: #555;  /* 中灰色文字 */
}

/* ---------------------------------------- 分页样式 ---------------------------------------- */

/* 分页容器 */
.simple-pagination {
    margin-top: 30px;  /* 上外边距30像素 */
    text-align: center;  /* 文字居中 */
}

/* 分页按钮 */
.page-btn {
    display: inline-block;  /* 行内块元素 */
    padding: 8px 15px;  /* 内边距上下8像素，左右15像素 */
    margin: 0 3px;  /* 左右外边距3像素 */
    border: 1px solid #ddd;  /* 边框颜色 */
    background: white;  /* 白色背景 */
    border-radius: 4px;  /* 圆角4像素 */
    text-decoration: none;  /* 移除下划线 */
    color: #333;  /* 文字颜色 */
}

/* 当前页按钮 */
.page-btn.active {
    background: #0d6efd;  /* 蓝色背景 */
    color: white;  /* 白色文字 */
    border-color: #0d6efd;  /* 蓝色边框 */
}

/* 禁用按钮 */
.page-btn.disabled {
    color: #999;  /* 灰色文字 */
    cursor: not-allowed;  /* 禁用光标 */
}