/* Add custom CSS styles below */ 
@media (max-width: 767px) {

  .md\:grid-cols-3 {
    display: grid !important;
    grid-template-rows: repeat(2, 140px) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 34% !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: start !important;
    align-content: start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 !important;
    margin: 0 !important;
  }

  .md\:grid-cols-3::-webkit-scrollbar {
    display: none;
  }

  .md\:grid-cols-3 > * {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* إزالة الخلفية والتظليل عن الكارت الخارجي فقط دون إخفاء الصور */
  .md\:grid-cols-3 .banner-entry,
  .md\:grid-cols-3 > div,
  .md\:grid-cols-3 > a {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
  }

  .two-row .banner-entry:first-child {
    flex-basis: 45%;
    padding: 0;
  }

  .banner-entry.square-photos {
    flex-basis: 45%;
  }

  .s-block--features__item .feature-icon i {
    color: white;
  }
}

/* Custom Category Images Code */
/* Force Swiper Container to Flex/Wrap */
.home-categories-section .swiper-wrapper,
.categories-slider .swiper-wrapper,
.salla-categories-slider .swiper-wrapper,
div[class*="categories"] .swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  transform: none !important;
  width: 100% !important;
  gap: 12px !important;
}

/* Force items to occupy 50% width minus gap */
.home-categories-section .swiper-slide,
.categories-slider .swiper-slide,
.salla-categories-slider .swiper-slide,
div[class*="categories"] .swiper-slide {
  width: calc(50% - 6px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Make category images perfectly square */
.home-categories-section img,
.categories-slider img,
div[class*="categories"] img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

/* Product Single Main Slider & Cards Inside Product Page */
@media (max-width: 767px) {

  /* 1. Main Product Slider Image */
  .product-single salla-slider img,
  .product-single .swiper-slide img {
    aspect-ratio: 1050 / 1060 !important;
    max-width: 100% !important;
    max-height: 450px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* 2. Product Cards inside Product Page (Related Products / Suggestions) */
  .product-single s-product-card,
  .product-single .product-entry,
  .product-single .s-product-card-entry {
    max-width: 100% !important;
    padding: 6px !important;
  }

  .product-single s-product-card img,
  .product-single .product-entry img,
  .product-single .s-product-card-entry img {
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    max-height: 220px !important;
    border-radius: 8px !important;
  }
}