/* 定义 CSS 变量，以便集中管理样式中的常用值 */
:root {
    --color-background: #f7f9fc; /* 背景颜色 */
    --color-border: #ddd; /* 边框颜色 */
    --color-text: #333; /* 主文本颜色 */
    --color-price: #ff6600; /* 价格文本颜色 */
    --color-button: #007FFF; /* 按钮背景颜色改为天蓝色 */
    --color-button-hover: #0066CC; /* 悬停时按钮背景颜色，加深的天蓝色以体现悬停效果 */
    --gap: 1rem; /* 间距值 */
    --font-small: 0.85rem; /* 小号字体大小 */
    --font-medium: 1rem; /* 中号字体大小 */
    --font-large: 1.2rem; /* 大号字体大小 */
}


/* 列表容器，使用 Flexbox 布局 */
.product-container-list {
    display: grid; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    width: 100%; /* 容器宽度为100% */
    max-width: 75rem;
    margin: 0.5rem auto; /* 自动外边距，确保居中 */
    margin-top: 1rem; 
    padding: 1rem;
    gap: var(--gap); /* 子元素之间的间距使用变量 */
    background-color: #fff; /* 背景颜色为白色 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* 增加阴影 */
    border-radius: 0.5rem;
}

/* 商品卡片样式 */
.product-card-list {
    display: flex; /* 使用 Flexbox 布局 */
    height: 10rem; 
    flex-direction: row; /* 水平排列子元素 */
    align-items: center; /* 垂直居中对齐 */
    border: 0.0625rem solid var(--color-border); /* 设置边框颜色和宽度 */
    border-radius: 0.75rem; /* 设置圆角效果 */
    padding: 1rem; /* 添加内边距 */
    margin: 0rem 0.5rem; /* 左右外边距为0.5rem */
    background-color: #fff; /* 背景颜色为白色 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: transform 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
    overflow: hidden; /* 隐藏超出内容 */
}

/* 悬停效果：卡片上移并增加阴影 */
.product-card-list:hover {
    transform: translateY(-0.3125rem); /* 悬停时上移 */
    box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}

/* 商品图片样式 */
.product-image {
    height: 9rem; /* 高度固定为8rem */
    width: 9rem;  /* 宽度固定为10rem */
    object-fit: cover;  /* 保持比例并填充整个区域 */
    border-radius: 0; 
    margin-right: 1rem; /* 右边距为1rem */
}

/* 商品信息区域样式 */
.product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* 商品 ID 样式 */
.product-id {
    max-width: 50rem; 
    margin: 0; /* 去掉外边距 */
    font-size: var(--font-small); /* 字体大小使用小号变量 */
    color: #555; /* 字体颜色为灰色 */
}

/* 商品名称样式 */
.product-name {
    margin: 0.5rem 0; /* 上下外边距为0.5rem */
    font-size: var(--font-large); /* 字体大小使用大号变量 */
    font-weight: bold; /* 粗体显示 */
    color: var(--color-text); /* 字体颜色使用变量 */
    max-width: 90%; 
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
    white-space: nowrap; /* 禁止换行 */
    line-height: 1.2; /* 行高设置 */
    flex-shrink: 1; /* 允许缩小，避免溢出 */
}

/* 价格和购买按钮容器样式 */
.product-price-buy {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 左右分布 */
    align-items: center; /* 垂直居中 */
    margin-top: 1rem; /* 上边距为1rem */
}

/* 商品价格样式 */
.product-price {
    font-weight: bold; /* 粗体显示 */
    color: var(--color-price); /* 价格颜色使用变量 */
    font-size: 1.4rem; /* 字体大小为1.4rem */
    margin-right: auto; /* 右边距自动，使按钮靠右 */
}

/* 购买按钮样式 */
.buy-button {
    background-color: var(--color-button); /* 背景颜色使用变量 */
    color: #fff; /* 字体颜色为白色 */
    border: none; /* 去掉边框 */
    padding: 0.5rem 0.75rem; /* 上下内边距为0.5rem，左右内边距为0.75rem */
    border-radius: 0.25rem; /* 设置圆角效果 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    font-size: var(--font-medium); /* 字体大小使用中号变量 */
    max-width: 7rem; /* 最大宽度为7rem */
    overflow: hidden; /* 隐藏超出内容 */
    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
    white-space: nowrap; /* 禁止换行 */
    transition: background-color 0.3s; /* 背景颜色过渡效果 */
    flex-shrink: 0; /* 防止按钮缩小 */
}

/* 悬停时按钮样式 */
.buy-button:hover {
    background-color: var(--color-button-hover); /* 悬停时背景颜色使用变量 */
}

.out-of-stock {
    background-color: #f44336; /* 红色表示缺货 */
}

.discontinued {
    background-color: #9e9e9e; /* 灰色表示停售 */
}

/* 商品类型和库存标签样式 */
.product-type-stock {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 左右分布 */
    margin-top: 0.5rem; /* 上边距为0.5rem */
    font-size: var(--font-small); /* 字体大小使用小号变量 */
    color: #777; /* 字体颜色为灰色 */
}

/* 商品类型和库存标签样式 */
.product-type,
.product-stock {
    display: inline-block; /* 设置为行内块元素 */
    padding: 0.2rem 0.5rem; /* 上下内边距0.2rem，左右0.5rem */
    border-radius: 1rem; /* 设置圆角效果 */
    color: var(--color-text); /* 字体颜色使用变量 */
    font-size: 0.65rem; /* 字体大小为0.65rem */
    font-weight: 500; /* 字体粗细为500 */
    min-width: 4rem; /* 最小宽度为4rem */
    text-align: center; /* 文本居中对齐 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 商品类型样式 */
.product-type {
    background-color: #d1ecf1; /* 背景颜色为淡蓝色 */
    flex-grow: 1; /* 占据剩余空间 */
}

/* 商品库存样式 */
.product-stock {
    background-color: #c3e6cb; /* 背景颜色为淡绿色 */
    flex-grow: 3; /* 占据三倍于商品类型的空间 */
}

/* 商品类型和库存中的段落样式 */
.product-type-stock p {
    margin: 0; /* 去掉外边距 */
}