/* ==========================================================================
   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; }
}

/* ===== CMS-managed primary navigation (M4) ===== */
.main-nav {
  background: #1b1b1b;
  border-top: 3px solid var(--color-primary, #f9a842);
}
.main-nav .container { display: flex; }
.main-nav-list {
  display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 2px;
}
.main-nav-list > li { position: relative; }
.main-nav-list > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px; color: #eee; font-weight: 600; font-size: 14px;
  text-decoration: none; transition: background .15s, color .15s;
}
.main-nav-list > li > a:hover { background: var(--color-primary, #f9a842); color: #fff; }
.main-nav-list .sub-nav {
  position: absolute; top: 100%; inset-inline-start: 0; min-width: 210px;
  background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.16);
  list-style: none; margin: 0; padding: 6px 0; border-radius: 0 0 8px 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .15s, transform .15s, visibility .15s; z-index: 50;
}
.main-nav-list > li.has-children:hover .sub-nav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav-list .sub-nav li a {
  display: block; padding: 9px 18px; color: #333; font-size: 14px; text-decoration: none;
}
.main-nav-list .sub-nav li a:hover { background: #f6f6f6; color: var(--color-primary, #f9a842); }
@media (max-width: 768px) {
  .main-nav-list { overflow-x: auto; flex-wrap: nowrap; }
  .main-nav-list > li > a { padding: 12px 14px; white-space: nowrap; }
}

/* ===== Wishlist toggle button on product cards (M5) ===== */
.product-card .wishlist { padding: 0; }
.product-card .wishlist button {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; color: inherit; font: inherit; line-height: 0;
}
.product-card .wishlist button i { pointer-events: none; }