/* =========================================================
   Related Products (PDP) — Carrusel con Swiper
   ✅ Sin wrap a segunda fila
   ✅ Flechas clickeables
   ✅ Separación real entre tarjetas
   ✅ Sin "pagination" (ni scrollbar visible en fallback)
   ========================================================= */

.c-related-products{
  margin: 26px 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.10);
}

.c-related-products__title{
  margin-bottom: 10px !important;
  font-size: 1.2rem !important;
  font-weight: 800;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color:#0b1220;
}

.c-related-products__frame{
  position: relative;
}

.c-related-products__swiper{
  overflow: hidden;
  padding: 0px !important; /* espacio para flechas */
  touch-action: pan-y;
}

@media (max-width: 767.98px){
  .c-related-products__swiper{ padding: 0 44px; }
}
@media (min-width: 1024px){
  .c-related-products__swiper{ padding: 0 58px; }
}

/* ===== Neutralizar grilla de Woo/Astra ===== */
.c-related-products__list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;

  grid-template-columns: none !important;
}

.c-related-products__list.swiper-wrapper{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

/* Quitar floats/márgenes del theme */
.c-related-products__list > li{
  float: none !important;
  clear: none !important;
  
 
  margin-right: 10px !important;
}

/* ===== Flechas ===== */
.c-related-products__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.18);
  box-shadow: 0 10px 24px rgba(17,24,39,.10);
  z-index: 80;
  display: grid;
  place-items: center;
  color: #0b1220;
  cursor: pointer;
  padding: 0;
}

.c-related-products__nav svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* ✅ Bloqueo total hover azul Astra/Woo */
.c-related-products .c-related-products__nav:hover,
.c-related-products .c-related-products__nav:focus,
.c-related-products .c-related-products__nav:active{
  background:#f9f9f9 !important;
  color:#0b1220 !important;
  border: 1px solid rgba(17,24,39,.18) !important;
  box-shadow: 0 10px 24px rgba(17,24,39,.10) !important;  
  outline:none !important;
}

.c-related-products__nav--prev{ left: 6px; }
.c-related-products__nav--next{ right: 6px; }

@media (min-width: 1024px){
  .c-related-products__nav{
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .c-related-products__nav--prev{ left: 10px; }
  .c-related-products__nav--next{ right: 10px; }
}

.c-related-products__nav:hover{
  background: #fff;
  border-color: rgba(17,24,39,.28);
}

.c-related-products__nav:focus,
.c-related-products__nav:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18), 0 10px 24px rgba(17,24,39,.10);
}

.c-related-products__nav.is-disabled,
.c-related-products__nav[disabled]{
  opacity: .35;
  pointer-events: auto;   /* ✅ NO deja que el click atraviese */
  cursor: pointer;
}

/* ===== Fallback si Swiper aún no inicializa ===== */
.c-related-products__swiper:not(.swiper-initialized){
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  /* ✅ sin “pagination” visual (scrollbar) */
  scrollbar-width: none; /* Firefox */
}
.c-related-products__swiper:not(.swiper-initialized)::-webkit-scrollbar{
  display:none; /* Chrome/Safari */
}

.c-related-products__swiper:not(.swiper-initialized) .c-related-products__list > li{
  flex: 0 0 72%;
  max-width: 72%;
  scroll-snap-align: start;
  margin-right: 18px !important; /* separación fallback */
}

@media (min-width: 768px){
  .c-related-products__swiper:not(.swiper-initialized) .c-related-products__list > li{
    flex-basis: 38%;
    max-width: 38%;
    margin-right: 20px !important;
  }
}

@media (min-width: 1024px){
  .c-related-products__swiper:not(.swiper-initialized) .c-related-products__list > li{
    flex-basis: 24%;
    max-width: 24%;
    margin-right: 22px !important;
  }
}

@media (max-width: 1024px){
  .c-related-products__nav{
    display: none;
    }
    .c-related-products__title{
  font-size: 1rem !important;
  font-weight: 800;
   }
}