/* 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: 480px) {
  .swiper-categories .swiper-slide {
    width: 150px !important;
    flex-basis: 150px !important;
  }
}