/**
 * 移动端主页标题下方灰色条状样式修复
 * 解决KIYOMI标题下方灰色条状样式问题
 */

@media (max-width: 768px) {
  /* 调整App-header和products-section之间的过渡 */
  .App-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    min-height: 200px !important; /* 确保高度足够 */
  }

  /* 调整products-section的上边距，消除灰色条状样式 */
  .products-section {
    margin-top: 0 !important; /* 移除负边距 */
    padding-top: 0 !important; /* 移除顶部内边距 */
    background: linear-gradient(to bottom, 
      rgba(255, 133, 162, 0.1) 0%,
      #f9f9f9 10px) !important; /* 创建渐变过渡效果 */
    border-top: none !important;
  }

  /* 确保hero-content和products-section之间没有间隙 */
  .hero-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 调整section-title的上边距 */
  .section-title {
    margin-top: 15px !important;
  }
}