/**
 * 移动端分类显示覆盖样式
 * 确保移动端主页分类显示为一行三个并整体左右居中
 */

/* 移动端分类网格布局 - 一行三个 */
@media (max-width: 768px) {
  .products-section .categories-grid,
  section .categories-grid,
  .categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 15px !important;
    padding: 0 10px !important;
    width: 90% !important;
    max-width: 450px !important;
    margin: 0 auto !important;
  }

  /* 分类卡片样式 */
  .products-section .category-card,
  section .category-card,
  .category-card {
    border-radius: 50% !important;
    overflow: visible !important;
    aspect-ratio: 1/1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    position: relative !important;
    margin-bottom: 40px !important; /* 增加底部边距，为多行分类名称留出空间 */
    width: 100% !important;
  }

  /* 分类图片样式 */
  .products-section .category-image,
  section .category-image,
  .category-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* 分类信息样式 */
  .products-section .category-info,
  section .category-info,
  .category-info {
    position: absolute !important;
    top: 100% !important;
    width: 100% !important;
    padding: 5px 3px !important;
    background-color: transparent !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 5px !important;
  }

  /* 分类名称样式 */
  .products-section .category-info h3,
  section .category-info h3,
  .category-info h3 {
    display: block !important;
    visibility: visible !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    white-space: normal !important; /* 允许文本换行 */
    overflow: visible !important; /* 允许内容溢出显示 */
    text-overflow: clip !important; /* 移除省略号 */
    width: 100% !important;
    color: #333 !important;
    text-align: center !important;
    padding: 0 5px !important;
    line-height: 1.2 !important; /* 添加适当的行高 */
    min-height: 2.4em !important; /* 确保有足够的高度显示两行文本 */
  }

  /* 隐藏按钮 */
  .products-section .category-info .btn,
  section .category-info .btn,
  .category-info .btn {
    display: none !important;
  }
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
  .products-section .categories-grid,
  section .categories-grid,
  .categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 95% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .products-section .category-info h3,
  section .category-info h3,
  .category-info h3 {
    font-size: 0.8rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
    min-height: 2.4em !important;
  }
}

/* 超小屏幕设备优化 */
@media (max-width: 359px) {
  .products-section .categories-grid,
  section .categories-grid,
  .categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 98% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }

  .products-section .category-info,
  section .category-info,
  .category-info {
    padding: 3px 2px !important;
  }

  .products-section .category-info h3,
  section .category-info h3,
  .category-info h3 {
    font-size: 0.7rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
    min-height: 2.4em !important;
  }
}