/* ==========================================================================
   Marji V14 — repair the products carousel
   The V12 arrow positions used `calc(50% - 36vw)` which on many viewports
   places the arrows OUTSIDE the section's overflow:hidden bounds — so the
   arrows are clipped / invisible and can't receive clicks.
   This file pins the arrows to safe positions inside the section,
   guarantees they're on top of any blurred neighbour cards, and makes
   sure the slide content can never overflow into the arrow click zone.
   ========================================================================== */

/* Make sure the section is the positioning context for the arrows
   and that nothing else is on top of them */
.products-slider {
  position: relative !important;
  overflow: hidden;
}

/* Pin arrows to the inner edges of the section, always inside the
   viewport regardless of card size */
.products-slider .swiper-button-prev,
.products-slider .swiper-button-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.products-slider .swiper-button-prev { left: 24px !important; right: auto !important; }
.products-slider .swiper-button-next { right: 24px !important; left: auto !important; }

.products-slider .swiper-button-prev:after,
.products-slider .swiper-button-next:after {
  font-size: 17px !important;
  font-weight: 900;
  color: #fff;
}

/* Make sure the swiper canvas isn't blocking arrow clicks */
.products-slider .products-shell { position: relative; }
.products-slider .products-swiper { overflow: visible; }

/* Side cards stay visible-but-blurred and don't intercept clicks
   meant for the arrows */
.products-slider .swiper-slide-prev,
.products-slider .swiper-slide-next {
  pointer-events: none;
}
.products-slider .swiper-slide-active { pointer-events: auto; }

@media (max-width: 991px) {
  .products-slider .swiper-button-prev { left: 12px !important; }
  .products-slider .swiper-button-next { right: 12px !important; }
}
@media (max-width: 767px) {
  .products-slider .swiper-button-prev,
  .products-slider .swiper-button-next { width: 44px !important; height: 44px !important; }
  .products-slider .swiper-button-prev { left: 6px !important; }
  .products-slider .swiper-button-next { right: 6px !important; }
}