/* 商品卡片容器，使用网格布局来适应不同的屏幕 */
.product-container-grid {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充，每列最小300px，最大1fr */
    gap: 1rem; /* 增加卡片之间的间距 */
    width: 100%; /* 容器宽度100% */
    /* max-width: 75rem;  */
    margin: 0 auto; /* 水平居中 */
    margin-top: 1rem;
    padding: 1rem; /* 增加内边距以避免紧贴边缘 */
    background-color: #fff; /* 背景颜色为白色 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* 增加阴影 */
    border-radius: 0.5rem;
}

.product-card-grid {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列子元素 */
    border: 0.0625rem solid #ddd; /* 边框设置为1px */
    border-radius: 0.5rem; /* 圆角增大 */
    padding: 1rem 1.25rem; /* 增加内边距 */
    background-color: #fff; /* 背景颜色为白色 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* 增加阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

.product-card-grid:hover {
    transform: translateY(-0.5rem); /* 悬停时卡片上移 */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2); /* 悬停时阴影变深 */
}

.product-image {
    width: 100%; /* 图片宽度100% */
    height: 12rem; /* 缩小图片高度 */
    margin: 0 auto; /* 水平居中 */
    border-radius: 0;
    margin-bottom: 1rem; /* 下边距为1rem */
}

.product-info {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: space-between; /* 子元素之间均匀分布 */
    flex-grow: 1; /* 占用剩余空间 */
}

.product-id {
    margin: 0; /* 去掉外边距 */
    font-size: 0.9rem; /* 字体大小为0.9rem（约14.4px） */
    color: #666; /* 字体颜色为灰色 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
}

.product-name {
    margin: 0; /* 去掉外边距 */
    padding: 0.5rem 0; /* 上下内边距各为0.5rem */
    font-size: 1.1rem; /* 字体大小为1.1rem（约17.6px） */
    font-weight: bold; /* 粗体 */
    color: #333; /* 字体颜色为深灰色 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
}

.product-price-buy {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 左右分布 */
    align-items: center; /* 垂直居中 */
    margin-top: 1rem; /* 上边距为1rem */
}

.product-price {
    font-weight: bold; /* 粗体 */
    color: #ff6600; /* 字体颜色为橙色 */
    font-size: 1.1rem; /* 字体大小为1.2rem（约19.2px） */
}

.buy-button {
    background-color: #007FFF; /* 按钮背景颜色为绿色 */
    color: #fff; /* 字体颜色为白色 */
    border: none; /* 去掉边框 */
    padding: 0.5rem 0.6rem; /* 上下内边距为0.5rem，左右内边距为1rem */
    border-radius: 0.25rem; /* 圆角设置为4px */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    font-size: 1rem; /* 字体大小为1rem（约16px） */
    transition: background-color 0.3s ease; /* 添加背景颜色过渡效果 */
}

.buy-button:hover {
    background-color: #0066CC; /* 悬停时按钮颜色变深 */
}

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

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

.product-type-stock {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 左右分布 */
    font-size: 0.75rem; /* 字体大小 */
    margin-top: 0.5rem; /* 上边距 */
    padding-top: 0.5rem; /* 上内边距 */
    border-top: 1px solid #eee; /* 上边框 */
    gap: 0.5rem; /* 子元素间距 */
}

.product-type,
.product-stock {
    display: inline-block; /* 设置为行内块元素，使背景色只覆盖文本宽度 */
    padding: 0.2rem; /* 上下内边距 */
    border-radius: 1rem; /* 圆角设置 */
    color: #333; /* 字体颜色 */
    font-size: 0.65rem; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
    text-align: center; /* 文本居中对齐 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
}

/* 设置类型标签的样式 */
.product-type {
    background-color: #d1ecf1; /* 标签背景颜色 */
    width: 4rem; /* 宽度为5rem */
}

/* 设置库存标签的样式 */
.product-stock {
    background-color: #c3e6cb; /* 库存背景颜色 */
    width: 8.5rem; /* 宽度为8rem */
}


.product-type-stock p {
    margin: 0; /* 去掉外边距 */
}