/* 1. Crear espacio invisible inferior para que el hover no se corte */
    .product-active .owl-stage-outer {
        padding-bottom: 90px; /* Espacio suficiente para los botones ocultos */
        margin-bottom: -90px; /* Compensa el espacio para no afectar el diseño global */
        /* Nota: No usamos overflow: visible porque rompería el efecto de slider lateral */
    }

    /* 2. Asegurar que el item del carrusel activo tenga prioridad sobre los demás */
    .product-active .owl-item {
        position: relative;
        z-index: 1; 
    }

    /* 3. Al pasar el mouse, elevar el z-index al máximo */
    .product-active .owl-item:hover {
        z-index: 1000; /* Asegura que esté encima de la fila siguiente y de los productos vecinos */
    }

    /* 4. Estilos para el cuadro del producto al hacer hover */
    .single-product-wrap {
        background-color: #fff; /* Asegura fondo blanco para tapar contenido de atrás */
        position: relative;     /* Necesario para que el z-index funcione */
        transition: all 0.3s ease-in-out;
    }

    .single-product-wrap:hover {
        box-shadow: 0 5px 25px rgba(0,0,0,0.15); /* Sombra para dar profundidad */
        /* Opcional: Si el hover desplaza el borde, esto ayuda */
        transform: translateY(-5px); 
    }