// Swiper Global
.swiper {
  &--home-hero {
    .swiper-pagination-hero {
      @apply flex gap-2 justify-center;
    }

    .swiper-pagination-bullet {
      @apply bg-primary-300 w-2 md:w-3 lg:h-4 h-2 md:h-3 lg:w-4;
    }

    .swiper-pagination-bullet-active {
      @apply bg-primary-300 w-2 md:w-3 lg:h-4 h-2 md:h-3 lg:w-4;
    }

    .swiper-button-prev,
    .swiper-button-next {
      @apply hidden lg:grid place-items-center bg-primary-300 text-white rounded-full transition-all duration-200 z-20 hover:scale-[1.2];
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
      @apply font-bold  text-2xl;
    }

    .swiper-button-prev {
      @apply after:content-["prev"];
    }

    .swiper-button-next {
      @apply after:content-["next"];
    }

    .swiper-button-prev,
    .swiper-button-next {
      @apply w-20 h-20;
    }

    .swiper-button-prev {
      @apply md:ml-6;
    }

    .swiper-button-next {
      @apply md:mr-6;
    }
  }

  &--articlesMerchan {
    @apply w-full h-full lg:hidden container;
    & .swiper-slide {
      @apply max-w-[300px] flex justify-center items-center m-auto;
      height: calc((100% - 30px) / 2) !important;
    }

    & .swiper-wrapper {
      @apply h-[950px];
    }

    & .swiper-slide img {
      @apply block max-w-[300px] h-full object-cover;
    }
  }

  // Para aumentar el padding bottom
  &.swiper--national-shipping {
    @apply pb-12;
  }

  &--national-shipping {
    @apply w-full h-full rounded-lg grid;

    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal {
      @apply bottom-0;
    }

    .swiper-pagination-bullet-active {
      @apply bg-primary-300;
    }

    .swiper-pagination-bullet {
      @apply w-3 h-3 lg:w-5 lg:h-5;
    }
  }

  &--filter {

    .swiper-button-prev::after,
    .swiper-button-next::after {
      @apply font-bold  text-sm bg-primary-200 w-8 h-8   text-white flex justify-center items-center  rounded-full;
    }
  }

  &--product-details {
    & .swiper-slide {
      @apply flex justify-center items-center rounded-3xl h-full shadow-articles;
    }

    & .swiper-slide img {
      @apply block  h-full object-contain m-auto;
    }

    & .swiper-wrapper {
      @apply h-[400px] py-5;
    }

    & .swiper-button-prev,
    .swiper-button-next {
      @apply grid place-items-center bg-primary-300 text-white rounded-full transition-all duration-200 z-20  hover:scale-[1.2];
    }

    & .swiper-button-prev::after,
    .swiper-button-next::after {
      @apply font-bold  text-lg;
    }

    & .swiper-button-prev {
      @apply after:content-["prev"];
    }

    & .swiper-button-next {
      @apply after:content-["next"];
    }

    & .swiper-button-prev,
    .swiper-button-next {
      @apply w-10 h-10 lg:w-12 lg:h-12;
    }
  }

  &--what-we-offer {
    @apply mb-20;
    & .swiper-slide {
      @apply flex justify-center items-center  rounded-xl h-full shadow-articles px-4;
    }

    & .swiper-slide img {
      @apply block  h-full object-contain m-auto;
    }

    .product-wrapper {
      @apply flex flex-col justify-around h-full;

      &__title {
        @apply font-semibold text-primary-300 font-sans-Anek text-[30px];
      }
    }

    & .swiper-wrapper {
      @apply h-[350px] py-5;
    }

    & .swiper-button-prev,
    .swiper-button-next {
      @apply grid place-items-center bg-primary-100 text-primary-300 rounded-full transition-all duration-200 z-20  hover:scale-[1.2];
    }

    & .swiper-button-prev::after,
    .swiper-button-next::after {
      @apply font-bold  text-lg;
    }

    & .swiper-button-prev {
      @apply after:content-["prev"];
    }

    & .swiper-button-next {
      @apply after:content-["next"];
    }

    & .swiper-button-prev,
    .swiper-button-next {
      @apply w-10 h-10 lg:w-12 lg:h-12;
    }
  }
}

.swiper-meet-us {
  @apply mt-8 text-left bg-white rounded-lg shadow-xl lg:hidden shadow-neutral-400;

  &__card {
    @apply flex flex-col gap-2 px-12 py-8  max-w-[650px];
  }

  &__title {
    @apply text-[30px] font-semibold text-primary-300 font-sans-poppins;
  }
}