:root {
      --primary-color: #ff7633; /* Accent color for links and highlights */
      --text-dark: #1e2e50; /* Primary text color */
      --text-secondary: #555; /* Secondary text color */
      --background-light: #f9f9f9; /* Light background */
      --border-light: #e2e2e2; /* Border color */
      --white: #fff; /* White background */
    }

    /* Container for all sections */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.25rem;
    }
        .container.change{
      max-width: 1600px;
    }

    /* Intro Section */
    .intro-section {
      text-align: center;
      padding: 2rem 0;
    }

    .intro-section p {
      font-size: 1.25rem; /* 20px */
      line-height: 1.8;
      color: var(--text-secondary);
    }

    /* Product Categories */
    .product-categories {
      padding: 2.5rem 0;
      text-align: center;
    }

    .product-categories h2 {
      font-size: 2rem; /* 32px */
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 1rem;
    }

    .category-intro {
      font-size: 1rem; /* 16px */
      color: var(--text-secondary);
      max-width: 1000px;
      margin: 0 auto 1.5rem;
      line-height: 1.6;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      padding-top: 1.25rem;
    }

    .category-box {
      background: var(--white);
      border: 1px solid var(--border-light);
      padding: 1.25rem;
      border-radius: 8px;
      text-align: left;
      transition: box-shadow 0.3s ease;
    }

    .category-box:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .category-box a {
      font-size: 1.5rem; /* 24px */
      font-weight: 600;
      color: var(--primary-color);
    }

    .category-box p {
      font-size: 1rem; /* 16px */
      color: var(--text-secondary);
      margin-top: 0.625rem;
    }

    /* Alphabet Index */
    .alphabet-index {
      text-align: center;
      padding: 2.5rem 0;
    }

    .alphabet-index h2 {
      font-size: 2rem; /* 32px */
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 1rem;
    }

    .alphabet-intro {
      font-size: 1rem; /* 16px */
      color: var(--text-secondary);
      max-width: 900px;
      margin: 0 auto 1.5rem;
      line-height: 1.6;
    }

    .letter-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.3rem;
    }

    .letter-links a {
      padding: 0.5rem 0.875rem;
      border: 1px solid var(--border-light);
      border-radius: 6px;
      font-size: 0.875rem; /* 14px */
      color: var(--text-dark);
      background: var(--white);
      transition: all 0.3s ease;
      min-width: 2.25rem;
      text-align: center;
    }

    .letter-links a:hover,
    .letter-links a.active {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
      font-weight: 600;
    }

    /* Letter Group Content */
    .letter-group-content .topic-grid {
  display: none;
}

.letter-group-content .topic-grid.active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 0fr));
  gap: 1.5rem;
  padding: 1.25rem 0;
}


    .topic-card {
      background: var(--white);
      border: 1px solid var(--border-light);
      padding: 1.25rem;
      border-radius: 8px;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .topic-card:hover {
      transform: translateY(-4px);
      border-color: var(--primary-color);
    }

    .topic-card a {
      font-size: 1.125rem; /* 18px */
      font-weight: 600;
      color: var(--primary-color);
    }

    .topic-card p {
      font-size: 0.875rem; /* 14px */
      color: var(--text-secondary);
      margin-top: 0.5rem;
    }

    /* Recommended Products */
    .recommended-products {
      padding: 2.5rem 0;
      text-align: center;
    }

    .recommended-products h2 {
      font-size: 2rem; /* 32px */
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 1rem;
    }

    .recommended-products .featured-intro {
      font-size: 1rem; /* 16px */
      color: var(--text-secondary);
      max-width: 1200px;
      margin: 0 auto 2rem;
      line-height: 1.6;
    }

    .recommended-products .product-card {
      width: 280px;
      background: var(--white);
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .recommended-products .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .recommended-products img {
      width: 100%;
      height: auto;
      border-radius: 6px;
    }

    .recommended-products h3 {
      font-size: 1.125rem; /* 18px */
      font-weight: 600;
      margin: 0.625rem 0;
      color: var(--text-dark);
    }

    .recommended-products a {
      color: var(--text-dark);
    }

    .recommended-products a:hover {
      color: var(--primary-color);
    }

    .recommended-products .product-card p {
      font-size: 0.875rem; /* 14px */
      color: var(--text-secondary);
      display: -webkit-box;
  -webkit-line-clamp: 4; /* 限制为 4 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
    }
.faq-section h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    text-align: center;
}
    .faq-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 20px;
}
.faq-item {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-question {
  font-size: 17px;
  font-weight: bold;
  padding: 18px 20px;
  cursor: pointer;
  position: relative;
  color: #303f5f;
}
.faq-question::after {
  content: '+';
  font-size: 22px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease, content 0.3s ease;
}
.faq-question.active::after {
  content: '−';
}
.faq-answer {
  padding: 0 20px 18px;
  font-size: 15px;
  color: #444;
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

    /* SEO Summary */
    .seo-summary {
      text-align: center;
      padding: 2rem 0;
    }

    .seo-summary p {
      font-size: 1rem; /* 16px */
      color: var(--text-secondary);
    }

    .seo-summary a {
      font-weight: 600;
      color: var(--primary-color);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .intro-section p {
        font-size: 1.125rem; /* 18px */
      }

      .product-categories h2,
      .alphabet-index h2,
      .recommended-products h2,
      .faq-section h2 {
        font-size: 1.75rem; /* 28px */
      }

      .category-grid,
      .topic-grid {
        grid-template-columns: 1fr;
      }

      .recommended-products .product-card {
        width: 90%;
        margin: 0 auto;
      }
    }