/* Mobile Optimization CSS */
/* Author: WorkBuddy Assistant */
/* Date: 2026-03-22 */

/* 375px断点（iPhone SE） */
@media (max-width: 375px) {
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  h3 {
    font-size: 18px;
  }
  
  .hero-section h1 {
    font-size: 22px;
  }
  
  .hero-section .hero-content p {
    font-size: 14px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
  }

  /* .grid-4 {
    grid-template-columns: 1fr;
  }  Commented out to keep 4 columns */
  
  .nav-links {
    padding: 10px;
  }
  
  .nav-links a {
    padding: 12px;
    font-size: 14px;
  }
  
  .footer {
    font-size: 12px;
  }
  
  .footer-columns {
    grid-template-columns: 1fr;
  }
  
  .contact-form input,
  .contact-form textarea {
    font-size: 14px;
  }
  
  .cta-button {
    padding: 10px 18px;
    font-size: 13px;
  }
}

/* 480px断点（小屏手机） */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }
  
  h1 {
    font-size: 26px;
  }
  
  h2 {
    font-size: 22px;
  }
  
  h3 {
    font-size: 19px;
  }
  
  .hero-section h1 {
    font-size: 24px;
  }
  
  .hero-section .hero-content p {
    font-size: 15px;
  }
  
  .product-card {
    margin-bottom: 20px;
  }
  
  .product-card h3 {
    font-size: 16px;
  }
  
  .product-card .product-info {
    font-size: 14px;
  }
  
  .cta-button {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .about-content {
    font-size: 14px;
  }
  
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 640px断点（手机横屏） */
@media (max-width: 640px) {
  /* 优化触控区域 */
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;
    font-size: 20px;
  }
  
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #1a1a1a;
    flex-direction: column;
    padding: 20px;
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .nav-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 16px;
    border-bottom: 1px solid #333;
  }
  
  .language-switcher {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }
  
  /* 横向滚动问题修复 */
  .container,
  .product-grid,
  .category-grid,
  .hero-section,
  .about-section,
  .contact-section,
  .footer {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* 产品卡片优化 */
  .product-card {
    margin-bottom: 20px;
  }
  
  /* 联系表单优化 */
  .contact-form {
    padding: 20px 15px;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }
  
  /* 关于页面优化 */
  .about-section {
    padding: 40px 20px;
  }
  
  .about-content {
    font-size: 15px;
    line-height: 1.6;
  }
  
  /* 底部优化 */
  .footer {
    padding: 30px 20px;
  }
  
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 768px断点（平板） */
@media (max-width: 768px) {
  .hero-section {
    padding: 40px 20px;
  }
  
  .hero-section h1 {
    font-size: 28px;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }  Commented out to keep 4 columns */

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024px断点（小笔记本） */
@media (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }
  
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 视网膜显示优化 */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* 图片在视网膜设备上的优化 */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-section {
    padding: 30px 20px;
  }
  
  .hero-section h1 {
    font-size: 22px;
  }
  
  .nav-links {
    top: 50px;
  }
}

/* 打印样式 */
@media print {
  .mobile-menu-toggle,
  .language-switcher {
    display: none;
  }
  
  body {
    font-size: 12pt;
  }
}
 
 / *   F O R C E   4   C O L U M N S   F O R   C A T E G O R Y   P A G E S   -   A D D E D   2 0 2 6 - 0 3 - 2 2   * /  
 . g r i d - 4   {  
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( 4 ,   1 f r )   ! i m p o r t a n t ;  
 }  
 