/* 表格容器样式 */
.table-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  height: 100vh;
}

/* 表格样式 */
.product-table {
  width: 100%; /* 表格宽度，可以调整 */
  max-width: 1000px;
  border-collapse: collapse; /* 合并表格边框 */
  margin: 0 auto; /* 水平居中 */
}

.product-table th, .product-table td {
  padding: 20px; /* 增加格子间隔 */
  border: 1px solid #ddd;
  text-align: left;
}

/* 行间隔颜色 */
.product-table tr:nth-child(odd) {
  background-color: #f9f9f9; /* 奇数行背景色 */
}

.product-table tr:nth-child(even) {
  background-color: #ffffff; /* 偶数行背景色 */
}

/* 表头样式 */
.product-table th {
  background-color: #007bff;
  color: white;
}

/* 链接样式（跳转到产品详细页） */
.product-table a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.product-table a:hover {
  text-decoration: underline;
  color: #0056b3;
}
/* 父容器样式 */
.pagination-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 20px;
}

/* 分页样式 */
.pagination {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

/* 分页项 */
.pagination li {
  margin: 0 5px;
}

/* 分页链接样式 */
.pagination a {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f4f4f4;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #ddd;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 鼠标悬停效果 */
.pagination a:hover {
  background-color: #007bff;
  color: #fff;
}

/* 当前页样式 */
.pagination a.active {
  background-color: #007bff;
  color: #fff;
  pointer-events: none; /* 当前页不可点击 */
}

/* 禁用的分页项样式（例如：第一页没有“上一页”） */
.pagination li.disabled a {
  background-color: #f9f9f9;
  color: #ccc;
  pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination {
    font-size: 14px; /* 小屏幕下，字体稍微减小 */
  }

  .pagination a {
    padding: 6px 12px; /* 更小的分页按钮 */
  }
  .main .additional.row {
    display: flex;
    flex-direction: column;
  }
  .additional.row .col-md-9.additional {
    order: 1;
  }
}


thead th {
  background-color: #000;
}


/* 为每列设置自定义data-label，用于小屏幕显示 */






/* 基本样式 */

.product-details {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.product-title {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

/* 信息项 */
.product-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-info-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 300px; /* 在电脑端增加属性名和属性值之间的间距 */
}

.product-info-item strong {
  width: 100px;  /* 给标题部分固定宽度 */
  font-weight: bold;
  color: #555;
}

.product-info-item span,
.product-info-item p {
  font-size: 1rem;
  color: #666;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .product-info {
      flex-direction: column;
  }

  .product-info-item {
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 10px; /* 手机端属性名和属性值间距缩小 */
  }

  .product-info-item strong {
      width: auto; /* 在小屏幕上让标题宽度自动调整 */
  }
}

@media (max-width: 480px) {
  .product-title {
      font-size: 1.5rem;
  }

  .product-info-item strong {
      font-size: 0.9rem;
  }

  .product-info-item span, .product-info-item p {
      font-size: 0.9rem;
  }
}