/* 整个分类块的容器，让标题与产品列表之间有明显区分 */
  .category-block {
    margin-bottom: 2rem;               /* 分类块之间的间距 */
    padding: 1.5rem;                   /* 内部留白，使内容不显得拥挤 */
    background-color: #fff;            /* 背景色 */
    border: 1px solid #ececec;         /* 浅色边框 */
    border-radius: 8px;                /* 圆角 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);  /* 轻微阴影 */
  }

  /* 分类标题整体样式 */
  .category-title {
    position: relative;                /* 为伪元素定位做准备 */
    padding-left: 1.5rem;              /* 左侧预留放置竖线装饰 */
    margin-bottom: 1.5rem;             /* 标题与下面产品列表之间的间距 */
    font-size: 1.75rem;                /* 字体大小 */
    font-weight: bold;                 /* 加粗 */
    color: #333;                       /* 默认文字颜色 */
    transition: color 0.3s ease;       /* 文字颜色过渡动画 */
  }
  
  /* 分类标题左侧的竖线装饰 */
  .category-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;                        /* 竖线宽度 */
    background-color: #18a34a;          /* 默认竖线颜色 */
    border-radius: 3px;                /* 圆角效果 */
    transition: background-color 0.3s ease;  /* 竖线颜色过渡动画 */
  }

  /* 鼠标悬停时文字和竖线变色 */
  .category-title:hover {
    color: #18a34a;
  }

  /* 商品卡片的悬停动画 */
  .product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
  }
  
  
#two-line-clamp {
  display: -webkit-box;     /* WebKit 弹性盒子 */
  -webkit-box-orient: vertical;  /* 垂直排列 */
  -webkit-line-clamp: 2;      /* 限制两行 */
  overflow: hidden;     /* 隐藏多余并自动省略 */

  /* fallback：限定最大高度为两行的高度 */
  display: block;
  line-height: 1.2em;
  max-height: calc(1.2em * 2);
}
@media (max-width: 576px) {
  #two-line-clamp {
    font-size: 0.875rem;
    line-height: 1.2rem;
    max-height: calc(1.2rem * 2);
  }
}
  
  
@media (max-width: 575.98px) {
  .nav-tabs .nav-link {
    font-size: 0.75rem;    /* 比原来的 0.875rem 或 1rem 略小 */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}


/* 作用域到所有全屏 modal 中的 .btn-close */
.modal-fullscreen .modal-content .btn-close {
  position: absolute;
  top: 1rem;      /* 距离顶部 */
  right: 1rem;    /* 距离右侧 */
  width: 2.5rem;  /* 圆直径 */
  height: 2.5rem; 
  padding: 0.5rem;
  background-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1051;  /* 确保在图片之上 */
}

/* Hover/Focus 状态 */
.modal-fullscreen .modal-content .btn-close:hover,
.modal-fullscreen .modal-content .btn-close:focus {
  opacity: 1;
  transform: scale(1.05);
  outline: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 调整关闭图标大小和颜色 */
.modal-fullscreen .modal-content .btn-close::before {
  content: '✕';      /* 使用更粗的叉号 */
  font-size: 1.25rem;
  color: #333;
  line-height: 1;
}