.bg-body-mutes{
    background-color: #D9D9D9;
}

.cat-track {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8 cards on large */
  gap: 16px;
}
.product-card {
  background: #fff;
  border-radius: 1px;
  transition: transform 0.2s ease-in-out;
  width: 280px;
}
.product-card:hover {
  transform: translateY(-5px);
}
body{
    overflow-x: hidden;
}
.rating-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.bg-store{
    background-color: #F1F1F4;
}
.banner-stores{
    height: 120px !important
}
#catTrack .swiper-slide {
  flex: 0 0 auto;       /* prevent shrinking */
  width: 300px;         /* fixed width for each banner */
}
.add-btn-bg{
    background-color: #ECECEC;
}

@media (max-width: 1200px) {
  .cat-track {
    grid-template-columns: repeat(4, 1fr); /* 4 per row on medium */
  }
}

@media (max-width: 768px) {
  .cat-track {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on small */
  }
}
@media (max-width: 575.98px) {
  /* Softer padding on mobile, desktop unchanged */
  .best-selling .container {
    padding: 1rem !important;
  }

  /* Turn the grid into a horizontal scroller only on mobile */
  .best-selling .best-selling-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;

    /* Edge padding for nice gutter while keeping container look */
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Each card becomes a wide slide on mobile */
  .best-selling .best-selling-row > * {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
  }

  /* Hide scrollbar on mobile (visual only) */
  .best-selling .best-selling-row::-webkit-scrollbar {
    display: none;
  }
}

 .filter-btn {
      background-color: #f0f0f0;
      color: #000;
      border: none;
      border-radius: 999px; /* pill shape */
      padding: 8px 20px;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .filter-btn:hover,
    .filter-btn.active {
      background-color: #0d0d4f; /* dark blue */
      color: #fff;
    }

    /* Ensure spacing on mobile */
    .filter-container {
      gap: 10px;
      flex-wrap: wrap;
    }