/* Categories Swiper CSS - Mobile Only */

/* Desktop: Keep normal flex layout */
.swiper-categories.categories-grid {
  display: flex;
  /* gap: 24px; */
  width: 100%;
}

.swiper-categories .swiper-wrapper {
  display: flex;
  /* gap: 24px; */
  width: 100%;
}

.swiper-categories .swiper-slide {
  /* flex: 1; */
  /* min-width: 0; */
  /* height: auto; */
}

/* Mobile: Enable swiper with horizontal scrolling */
@media (max-width: 768px) {
  .swiper-categories.categories-grid {
    overflow: hidden !important;
    padding-bottom: 12px;
    display: block !important;
  }

  .swiper-categories .swiper-wrapper {
    display: flex !important;
    /* gap: 12px !important; */
    flex-wrap: nowrap !important;
    width: auto !important;
  }

  .swiper-categories .swiper-slide {
    flex: 0 0 auto !important;
    width: 160px !important;
    flex-basis: 160px !important;
    height: auto !important;
  }

  .swiper-categories .swiper-slide .product-card {
    flex-basis: auto !important;
    width: 100% !important;
    height: 100%;
    aspect-ratio: 160 / 262;
  }
}

@media (max-width: 767px) {
  
  .swiper-categories.categories-grid {
    overflow: visible !important;
    /* margin: 0 -16px 0 !important; */
    display: flex !important;
    gap: 0 !important;
    padding-bottom: 0;
  }

  .swiper-categories .swiper-slide:first-child {
      /* margin-left: 16px; */
  }

  .swiper-categories .swiper-slide:first-child {
      /* margin-right: 16px; */
  }
}

@media (max-width: 480px) {
  .swiper-categories .swiper-slide {
    width: 150px !important;
    flex-basis: 150px !important;
  }
}