/* ✅ DEFAULT: Mobile-First Styles Are Already Applied Globally */

/* 🔁 Responsive Adjustments for Tablets (≥ 600px) */
@media (min-width: 600px) {
  #main-header .header-top {
    justify-content: space-between;
    padding: 0 1rem;
  }

  .home-product-card {
    width: 180px;
  }

  .home-product-info {
    padding: 0.75rem;
  }

  .home-section-title {
    font-size: 1.5rem;
  }

  #homepage-section {
    padding: 1.5rem;
  }

  .home-scroll-row {
    gap: 1.25rem;
  }

  #banner-section {
    height: 240px;
  }
}

/* 💻 Larger Screens (≥ 1024px) */
@media (min-width: 1024px) {
  #main-header {
    padding: 1rem 2rem;
  }

  .search-bar input {
    width: 60%;
    font-size: 1rem;
  }

  nav#main-nav {
    justify-content: center;
    gap: 2rem;
  }

  .home-product-card {
    width: 200px;
  }

  #homepage-section {
    padding: 2rem 3rem;
  }

  .home-section-title {
    font-size: 1.7rem;
  }

  #trustbadges-section {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

  footer {
    text-align: center;
    padding: 1rem 2rem;
  }
}

/* 🖥️ Extra-Large Screens (≥ 1440px) */
@media (min-width: 1440px) {
  .home-product-card {
    width: 220px;
  }

  .home-section-title {
    font-size: 1.9rem;
  }

  #homepage-section {
    padding: 3rem 4rem;
  }
}

@media (max-width: 480px) {
  .category-item,
  .subcategory-item,
  .subsubcategory-item {
    min-width: 70px;
    max-width: 80px;
    font-size: 12px;
    padding: 8px 6px;
  }

  .category-item img {
    width: 40px;
    height: 40px;
  }
}