/* Astra wraps the page in a flex container. Allow this flex item to shrink
   below Swiper's intrinsic slide width instead of expanding the whole page. */
.lab-product-page {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.lab-product-related,
.lab-product-related .productos-relacionados,
.lab-product-related .productos-swiper {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Match the box model supplied by Elementor on the reference page. */
.lab-product-related *,
.lab-product-related *::before,
.lab-product-related *::after {
  box-sizing: border-box;
}
.lab-product-page .lab-product-related {
  padding: 110px 60px 10px;
  margin: 0 0 10%;
}
.lab-product-page .lab-product-related > h2 {
  margin: 0 0 50px 30px;
  padding: 0;
  color: #000;
  font-family: DinPro, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .lab-product-page .lab-product-related { padding: 40px 30px 10px; }
  .lab-product-page .lab-product-related > h2 { font-size: 20px; margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .lab-product-page .lab-product-related { padding: 10%; margin-bottom: 0; }
  .lab-product-page .lab-product-related > h2 { margin-top: 30px; }
}

.lab-product-related .productos-relacionados .producto-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none !important;
  color:inherit;
}

.lab-product-related .productos-relacionados .producto-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:6px; /* mantenemos padding */
  transition: box-shadow .25s, transform .15s;
  width:100%;
  position: relative;
}
.lab-product-related .productos-relacionados .producto-box:hover{
  box-shadow: 0 8px 20px rgba(0,0,0,.08), 0 -1px 6px rgba(0,0,0,.04);
  transform: translateY(-2px);
}

.lab-product-related .productos-relacionados .producto-img{
  width: calc(100% + 12px);   /* compensa padding */
  height: calc(100% + 12px);  /* compensa padding */
  margin:-6px;                /* mueve la imagen hacia fuera */
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:12px;         /* igual que .producto-box */
  background:#fff;
  position: relative;         /* necesario para hover */
}

.lab-product-related .productos-relacionados .producto-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: opacity 0.4s ease;
}

/* Título debajo de la caja */
.lab-product-related .productos-relacionados .titulo-producto{
  margin-top:16px;
  font-family:-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size:14px;
  font-weight:500;
  text-align:center;
  text-transform:uppercase;
  line-height:1.25;
  color:#000;
  text-decoration:none !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.25em * 2);
}

/* Swiper layout */
.lab-product-related .productos-relacionados .swiper { 
  padding: 10px 0 64px; 
}
.lab-product-related .productos-relacionados .swiper-wrapper{ align-items:stretch; }
.lab-product-related .productos-relacionados .swiper-slide{ 
  height:auto; 
  padding-top:4px;
  position: relative;   /* 🔑 referencia para flechas */
}

/* ---------- Flechas centradas en mitad de la FOTO ---------- */
.lab-product-related .productos-relacionados .swiper-button-prev,
.lab-product-related .productos-relacionados .swiper-button-next{
  position: absolute;
  top: calc(45%);            /* 🔑 centro vertical de la foto (3/4 ratio) */
  transform: translateY(-50%);
  color:#000;
  z-index: 5;
  width:auto;
  height:auto;
}

.lab-product-related .productos-relacionados .swiper-button-prev::after,
.lab-product-related .productos-relacionados .swiper-button-next::after{
  font-size:16px;
}

.lab-product-related .productos-relacionados .swiper-button-prev{ left:12px; }
.lab-product-related .productos-relacionados .swiper-button-next{ right:12px; }

/* Paginación */
.lab-product-related .productos-relacionados .swiper-pagination{
  position: absolute;
  left:0; right:0; bottom:10px;
  text-align: center;
  z-index: 2;
}
.lab-product-related .productos-relacionados .swiper-pagination-bullet{
  margin: 0 4px;
}

/* Responsivo: flechas más metidas en móviles */
@media (max-width: 640px){
  .lab-product-related .productos-relacionados .swiper-button-prev{ left:6px; }
  .lab-product-related .productos-relacionados .swiper-button-next{ right:6px; }
}

/* ====== HOVER CAMBIO DE IMAGEN ====== */
.lab-product-related .productos-relacionados .producto-img .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit; /* coincide con el radio del contenedor */
}

.lab-product-related .productos-relacionados .producto-card:hover .producto-img .img-principal {
  opacity: 0;
}

.lab-product-related .productos-relacionados .producto-card:hover .producto-img .img-hover {
  opacity: 1;
}